El diseño del diseño no es tan simple como agregar texto e imágenes a su página y esperar lo mejor. Un diseño estelar puede ayudar a atraer espectadores y guiarlos a las secciones más importantes de su contenido. Afortunadamente, hay muchas estrategias que puede emplear para facilitar el proceso de diseño.
En este artículo, ofreceremos cuatro consejos para crear un diseño equilibrado para su sitio web, como usar espacios en blanco y repetir elementos de diseño importantes. En todo momento, también le diremos cómo puede usar la funcionalidad de Divi para dar vida a algunos de los elementos. ¡Empecemos!
El diseño de su página puede ser la diferencia entre las personas que abandonan su sitio web casi de inmediato o se quedan para leer su contenido. En pocas palabras, el diseño correcto puede atraer visitantes, dirigirlos al contenido más importante y alentarlos a permanecer en su sitio.
Por supuesto, la gente preferiría pasar su tiempo mirando un sitio web bellamente diseñado que algo simple. En pocas palabras, un sitio web poco atractivo es suficiente para perder la participación de los visitantes.
Si bien obtener visitantes del sitio web es una cosa, hacer que se comporten de cierta manera cuando aterrizan es otra cosa completamente diferente. En última instancia, desea que se consuma su contenido más importante y que se sigan sus llamadas a la acción (CTA). De hecho, la mente humana en realidad espera y quiere un CTA , así que todo lo que tienes que hacer es guiar al lector en la dirección correcta con el diseño correcto.
4 consejos de diseño de diseño para optimizar su contenido web
Si bien los consejos de este artículo cubrirán una gran cantidad de elementos de diseño para que pueda comenzar, también existen numerosos sitios web que lo ayudarán a encontrar inspiración para el diseño. Sitios como Awwwards muestran excelentes ejemplos de alta calidad, e incluso Pinterest puede ser una fuente de inspiración. En cuanto a los consejos, ¡echemos un vistazo!
1. Usa un sistema de cuadrícula
En el contexto del diseño web, una cuadrícula es un conjunto de líneas horizontales y verticales visibles o imaginarias que sirven como guía para ayudarlo a organizar y organizar su contenido. Mientras traza su sistema de cuadrícula, también puede incorporar otras técnicas de diseño, como el uso de un punto focal y la regla de los tercios .
Un buen punto focal, ya sea parte de una imagen o bloque de texto, debe servir para captar la atención del lector. A menudo se coloca en el centro de la página o en la sección central de su cuadrícula.
La regla de los tercios se basa en el concepto de dividir la página en tres vertical y/u horizontalmente. Sin embargo, esto no significa necesariamente que las secciones de contenido separadas deban aparecer en tres columnas, y algunas pueden abarcar dos. Por ejemplo, muchas páginas web, como nuestro blog , tienen una barra lateral que ocupa el tercio derecho, mientras que el texto principal abarca los tercios izquierdo y medio.
El uso de Divi Builder facilita la creación de una cuadrícula de elementos. Por ejemplo, para aplicar la regla de los tercios muy literalmente puedes crear tres filas, cada una con tres columnas:
Para crear esta cuadrícula, primero vaya a Divi Builder y haga clic en Insertar columna(s):
En la ventana emergente, seleccione la opción de tres columnas:
A continuación, haz clic dos veces en el botón de copiar y tendrás una cuadrícula de tres por tres, lista para tu contenido:
Por supuesto, este no es el único elemento de un gran diseño. El lugar al que guíes al lector también es crucial.
2. Estructure su contenido en un ‘Patrón Z’ o ‘Patrón F’
Dependiendo del tipo de contenido que muestres, la mayoría de las personas leen las páginas web de cierta manera. Los estudios de seguimiento ocular que utilizan mapas de calor han demostrado que los patrones más comunes son los patrones F y los patrones Z. Puede utilizar este conocimiento a su favor para guiar al lector a las áreas más importantes de la página.
Cuando un lector escanea la parte superior de su sitio de izquierda a derecha , luego mira su página de arriba a abajo, esto es un patrón F. Por lo general, se aplican a páginas con más texto, como publicaciones de blog, y muestra la importancia de usar subtítulos en su contenido.
Por el contrario, se dice que los lectores que escanean la parte superior de su sitio de izquierda a derecha, en diagonal hacia abajo y luego nuevamente de izquierda a derecha, están leyendo en un patrón Z. Son aplicables para páginas más simples, particularmente aquellas con un CTA. Es por eso que a menudo se recomienda colocar su CTA en la esquina inferior derecha de la página. Por supuesto, la otra información en la parte inferior de tu página también debería ofrecer al lector suficiente información para atraerlo a hacer clic en la CTA. La página de inicio de Quick Sprout es un buen ejemplo:
El logotipo y el menú de navegación lo llevan por la parte superior de la página. Luego, la atención se dirige al texto en negrita y la imagen de una cara en el medio de la página, que con suerte lo atraerá a leer la copia de ventas. Finalmente, la barra de URL de color blanco brillante lo lleva a través de la parte inferior del contenido principal al botón CTA.
En Divi, el sistema modular simplifica la creación de patrones F y patrones Z. Puede comenzar en Divi Builder para crear su diseño y contenido general, luego modificarlo en tiempo real usando Visual Builder .
Por supuesto, también es importante que se pueda hacer clic en el CTA. Nuestro módulo Divi CTA puede ayudar a persuadir a sus lectores para que hagan clic:
Dentro de este módulo tienes opciones prácticamente infinitas para crear CTA increíbles. Puede controlar los tamaños, las fuentes y los colores, entre otras opciones, e incluso puede hacer que sean adhesivos para que estén permanentemente encajados en su lugar.
3. Repita elementos de diseño importantes
La repetición de elementos es algo que a menudo agregamos a nuestros diseños sin pensar. Mantener la misma fuente y tamaño para los subtítulos, o usar el mismo estilo de viñetas a lo largo de una pieza, son ejemplos comunes de repetición de elementos. Sin embargo, también se puede expandir a imágenes, gráficos, colores, relaciones espaciales y casi cualquier componente de diseño que se te ocurra.
La repetición de elementos inyecta consistencia en su diseño y unifica los componentes individuales para crear un diseño más cohesivo y atractivo. También puede ayudar al lector a navegar por la página con una mínima confusión. Por ejemplo, tome la página de inicio de Buffer :
Esto muestra el logotipo repetido dentro de la imagen focal de la pantalla. Los aviones de papel también se parecen a las hojas de papel que aparecen en el logotipo, lo que hace que toda la página tenga sentido y se vea más coherente.
Replicar elementos en Divi es súper fácil. Simplemente navegue hasta el elemento elegido en Divi Builder y haga clic en el botón Copiar para duplicar el elemento. Desde aquí, puede arrastrar y soltar el elemento en cualquier otro lugar de su página y modificarlo sin afectar su original:
Del mismo modo, puede guardar diseños para el futuro para crear coherencia en todo su sitio; tendremos más información sobre esto un poco más adelante.
4. Usa los espacios en blanco apropiadamente
Los espacios en blanco , también llamados espacios negativos, son simplemente las partes en blanco de una página que no están ocupadas por contenido. El uso de espacios en blanco a menudo se pasa por alto. Muchos diseñadores encuentran tentador tratar de incluir tanta información como sea posible. Sin embargo, cuando se trata de mantener la participación de los espectadores, parece que menos realmente puede ser más , y el uso adecuado de los espacios en blanco es clave .
Aquí hay algunos consejos para usar los espacios en blanco apropiadamente:
- Ajuste los márgenes alrededor de la copia. Aumentar el tamaño del margen puede ayudar a separar secciones de la copia. Esto hace que la página parezca menos desordenada y que el texto sea más fácil de leer.
- Agregar espacio entre párrafos. Aumentar el espacio entre párrafos puede dividir el texto y hacer que los artículos más largos parezcan menos intimidantes.
- Ajuste la altura de línea y el espacio entre letras. Puede ajustar el espacio entre líneas y letras para asegurarse de que su texto sea lo más legible posible.
- Rodea tu punto focal con espacios en blanco. El espacio en blanco que se agrega alrededor de un punto focal, como una imagen o un encabezado, puede hacer que se destaque aún más.
Para un ejemplo del mundo real, la página de inicio de Google es un ejemplo tan bueno como cualquier otro; de hecho, lleva las cosas al extremo:
Apple es otra empresa que utiliza puntos focales (generalmente una imagen de producto y un encabezado) rodeados de muchos espacios en blanco:
Divi puede ayudarlo a crear la cantidad justa de espacio en blanco al permitirle ajustar los márgenes y el relleno dentro de sus secciones, filas y módulos. Por ejemplo, para ajustar una fila, haga clic en el botón Menú , que muestra la gran cantidad de opciones que necesitará:
Cuando tiene texto en un módulo, generalmente existe la opción de ajustar la altura de la línea y el espaciado del texto. Por ejemplo, en un módulo de Texto , ve a la pantalla Configuración avanzada de diseño , y entre las características verás que tienes opciones de altura y espaciado:
Puede ajustarlos en consecuencia hasta que esté satisfecho. También puede optar por realizar estos cambios utilizando Visual Builder para ver cómo se verán sus cambios en tiempo real.
Finalmente, para obtener aún más espacio en blanco, puede usar un módulo Divider . Esto le permite crear una línea o algún espacio en blanco entre módulos individuales, casi en cualquier parte de la página.
Cómo Divi puede ayudarlo a mantener la consistencia de su diseño de diseño
Una vez que haya creado el diseño perfecto, probablemente no querrá usarlo solo una vez. Guardar su diseño significa que puede usarlo para varias páginas de su sitio. Esto no solo ahorra mucho tiempo y esfuerzo, sino que también crea una sensación de unidad y familiaridad en sus páginas, lo que ayuda a la experiencia del lector.
Esto es fácil de hacer dentro de Divi. Una vez que esté satisfecho con su diseño, seleccione Guardar en la biblioteca en la esquina superior izquierda de Divi Builder:
En la ventana emergente, ingrese el nombre que desea usar para su nuevo diseño y presione Guardar :
Para recuperar su diseño para uso futuro, seleccione Cargar desde biblioteca en Divi Builder…
… luego vaya a la pestaña Agregar desde biblioteca y seleccione el diseño que desea usar:
Para editar sus diseños, puede acceder a ellos desde su panel de WordPress. Seleccione Divi y haga clic en Biblioteca Divi para ver una lista de sus diseños guardados.
Conclusión
Su elección de diseño es un componente muy importante del diseño general de su sitio. Sin embargo, puede ser una tarea realmente abrumadora, especialmente si te sumerges sin un plan.
Afortunadamente, esta área ha sido ampliamente estudiada y hay muchas estrategias que puede emplear para garantizar un resultado superlativo. Este artículo proporciona cuatro consejos para ayudarlo a crear el diseño de diseño perfecto para su sitio web. Recapitulemos rápidamente:
- Utilice un sistema de cuadrícula.
- Estructura tu contenido en un patrón Z o patrón F.
- Repita elementos de diseño importantes.
- Utilice los espacios en blanco de forma adecuada.
¿Tiene algún consejo adicional para optimizar el diseño de su página? Háganos saber en la sección de comentarios a continuación, ¡y no olvide suscribirse para poder seguir la conversación!
Imagen en miniatura del artículo de atibodyphoto / shutterstock.com.