Bienvenido a la parte 2 de nuestra miniserie «Principios efectivos de diseño web de Divi», donde exploramos prácticas de diseño efectivas para ayudar a empoderar a los nuevos diseñadores web y a aquellos que se identifican como alguien sin «ojo para el diseño».
En nuestra publicación anterior, cubrimos la preparación de su mentalidad y repasamos algunas formas de aprender a desarrollar un mejor ojo para el diseño. En esta publicación, nos centraremos en algunos principios universales del buen diseño que puede aplicar de inmediato a sus esfuerzos de diseño web para mejorar en el lado del «diseño» del diseño web.
¡Vamos a hacerlo!
Como se mencionó en la parte 1 de esta serie, no hay bien o mal cuando se trata de diseño. Lo que repasaremos en esta publicación es ampliamente y universalmente aceptado como buenos principios de diseño dentro de la comunidad de diseño web en general. Esta es también mi guía personal como diseñador gráfico/de impresión convertido en diseñador web Divi con casi una década de experiencia y, lo que es más importante, cientos de clientes felices y satisfechos. Empleo estos principios en cada diseño de sitio web de Divi que construyo y, aunque siempre hay un cliente que quiere algo atroz o fuera de lo común, estos te servirán bien al menos 9 de cada 10 veces
1) Regla de los tercios
Una de las prácticas más comunes en el diseño web, el diseño gráfico, el diseño de impresión, la fotografía y otros medios creativos es seguir una regla simple: la regla de los tercios. En resumen, la regla de los tercios tiene que ver con la simetría y el equilibrio. El objetivo de la regla de los tercios está destinado a ayudarlo a lograr más equilibrio y armonía en el diseño. Y lo mejor es que puede aplicar la regla de los tercios a gráficos, imágenes, diseños de páginas web completas y mucho más.
Hay numerosas conversaciones en línea sobre si la regla de los tercios es científica o no, pero independientemente, la opinión popular muestra que si una imagen o diseño es demasiado similar tanto en la mitad izquierda como en la mitad derecha o en la parte superior e inferior, la audiencia podría encontrarlo. sordo o aburrido. En todo caso, la regla de los tercios lo mantiene interesante y puede conducir a un buen flujo que cubriremos a continuación.
En nuestra publicación anterior sobre Consejos de diseño para optimizar su contenido web Divi , también se hace referencia a él como un sistema de cuadrícula, que es una excelente manera de pensar visualmente al respecto. Imagina una cuadrícula que se ve así:
Con esta cuadrícula imaginaria en su imagen, gráfico o diseño, puede colocar contenido fácilmente cerca de uno o más de los principales puntos de intersección.
Mantener los objetos y puntos focales en 1 o más de los 4 puntos de intersección a menudo logrará una apariencia mucho más equilibrada y simétrica en comparación con el segundo ejemplo donde el sujeto está debajo del punto de intersección. Hecha un vistazo a la imagen de abajo. El primer ejemplo NO sigue la regla de los tercios.
Este ejemplo ES siguiendo la regla de los tercios.
Si bien el primer ejemplo sigue siendo una buena imagen, el uso de la regla de los tercios proporciona una sensación completamente diferente a la imagen al intersectar el primer plano con los puntos de intersección inferiores en la regla de los tercios. Miremos la imagen con la cuadrícula de la regla de los tercios.
Ahora veamos la imagen sin alinear las intersecciones de la regla de los tercios.
Puede ver una gran diferencia con respecto a cómo los diseños agradables a la vista a menudo se alinearán con uno o más de los puntos de intersección. Si bien la regla de los tercios se habla más comúnmente en fotografía y videografía, es igualmente importante para el diseño de sitios web. Te mostraré cómo apliqué la regla de los tercios a mi sitio personal. Aquí hay una instantánea del diseño inicial «en la mitad superior de la página», que se aplica a lo que el espectador ve antes de desplazarse hacia abajo.
Ahora, coloquemos la cuadrícula de la regla de los tercios sobre la sección principal y veamos cómo se ve. En este caso, me enfocaré en el contenido debajo del menú principal donde implementé la regla de los tercios.
En este ejemplo, hay 4 elementos principales que están en o cerca de los puntos de intersección. En resumen, quería acentuar lo siguiente:
- Una breve descripción de quién soy y de qué se trata este sitio.
- Una imagen que permite a los nuevos usuarios sentirse más cómodos y confiables al ver de quién van a tener noticias.
- Un gráfico de mi último libro electrónico que le da a la gente una razón para registrarse.
- Finalmente, un correo electrónico de llamado a la acción se registra en los 2 cuadros finales, que es donde terminará el ojo del usuario.
Con la regla de los tercios, generalmente no es una buena práctica tener algo en cada punto de intersección (particularmente en fotografía), pero a menudo sigo este diseño en las construcciones de mi sitio web. Y en una nota al margen: dado que leemos de izquierda a derecha, a menudo tengo llamadas a la acción en el medio o en el lado derecho de la pantalla, ya que es donde termina nuestro ojo. Hablaremos de las llamadas a la acción con más detalle en la publicación final de esta serie, pero este es un buen ejemplo de cómo implementé la regla de los tercios en mi diseño.
Entonces, si no está seguro de cómo diseñar una página web o tiene problemas para mezclar imágenes, texto y tal vez una llamada a la acción, intente seguir la regla de los tercios y deje que esa sea su guía.
2) Diseño y Flujo
Cuando se trata de maquetar y diseñar una página web, nuevamente no hay un estilo correcto o incorrecto. A menudo depende del proyecto, los deseos de su cliente, su estilo de diseño y, a menudo, el mercado al que se dirige. La mayoría de las veces, en servicios digitales o como agencias de diseño web , moda y fotografía, diseños más modernos y de moda con una apariencia minimalista. Con el diseño moderno a menudo viene más espacio abierto, menos contenido basado en texto, más imágenes y quizás más desplazamiento. (¡Algunos de mis clientes a la antigua simplemente se estremecieron!)
En los mercados comerciales más tradicionales, como la fabricación, los bufetes de abogados, las industrias manuales, etc., es probable que encuentre sitios web con más contenido basado en texto, menos espacio abierto y, sin duda, con imágenes y elementos de diseño que son menos… atractivos. Y por alguna razón, la mayoría de mis clientes en estas industrias se oponen severamente al desplazamiento excesivo. ¡Así que saber cómo diseñar un diseño con buen flujo es clave! A menudo me he dado cuenta de que tengo que tratar de equilibrar MI estilo de diseño creativo con lo que funciona dentro de la industria de mi cliente, el grupo demográfico objetivo y los deseos y necesidades de mi cliente. Dicho todo esto, hay algunos principios básicos de diseño y flujo que se pueden aplicar sin importar con quién esté trabajando o en qué industria se encuentre.
Mirando hacia atrás en la publicación anterior mencionada anteriormente, una guía muy importante a seguir es un patrón de diseño en z. Encontrará esto con frecuencia con muchos de los nuevos kits de diseño Divi profesionales que se proporcionan semanalmente.
Echemos un vistazo a lo que quiero decir.
En el primer ejemplo a la izquierda, hay una imagen a la izquierda, texto a la derecha con un bonito botón de llamada a la acción, luego tu ojo lee hacia abajo y hacia la izquierda a otra sección de texto/CTA y luego con otra imagen a la derecha. y repetir. Visversa, en la imagen de la derecha, hay un patrón invertido. Texto a imagen a imagen a texto, etc. Seguir este patrón de estilo z es una excelente manera de mantener a los lectores interesados y es una forma maravillosa de equilibrar el texto y las imágenes.
Esta no es la única opción para el diseño en flujo en un buen diseño de página, pero es una buena práctica que tomemos el contenido de izquierda a derecha y luego hacia abajo. Luego de izquierda a derecha, luego hacia abajo y así sucesivamente. Entonces, en caso de duda, intente seguir el patrón de estilo z como una forma de ayudar a organizar el flujo del contenido de su página. Y una nota final sobre el desplazamiento: tiendo a mantener mis sitios dentro de 3-5 desplazamientos. La mayoría de las veces, cuanto más tenga que desplazarse, más grande será la página y más lenta se cargará. Una vez más, no hay nada correcto o incorrecto con respecto al desplazamiento, pero si aún no ha trabajado con clientes con una mentalidad más antigua, seguramente se encontrará con alguna oposición. Trato de reafirmar a esos clientes que no se debe temer el desplazamiento. Las redes sociales nos han entrenado para desplazarnos constantemente y captar contenido rápidamente.
3) Jerarquía visual
El último principio fundamental que me gustaría señalar aquí es la jerarquía visual. En resumen, la jerarquía ayuda al usuario a saber cuál es la información más importante y les proporciona una dirección muy clara de hacia dónde deben ir sus ojos en su diseño. A menudo se hace referencia a la jerarquía con la tipografía (que abordaremos en nuestra tercera publicación), pero también puede ser muy importante en los elementos gráficos, las imágenes y el diseño general del sitio.
No voy a señalar intencionalmente los sitios que siento que carecen del departamento de «buen diseño», pero estoy seguro de que ha encontrado muchos sitios que tienen una mezcla heterogénea de texto e imágenes que son todos del mismo tamaño sin claridad. llamada a la acción, ¿verdad? Eso es lo que queremos evitar. Usar una buena jerarquía es la mejor manera de guiar a los usuarios de su sitio web para que sepan QUÉ deben hacer clic o hacer a continuación.
Aquí hay un ejemplo de un diseño reciente que creé con la jerarquía en mente:
Si bien el logotipo y el número de teléfono en la parte superior derecha son claramente grandes y visibles, el contenido más grande y el color más vibrante en la parte superior es la llamada a la acción para hacer clic en el botón.
Mi cliente quería específicamente que las personas solicitaran fácilmente una inspección justo cuando ingresaran al sitio, ¡así que usé esta idea de jerarquía visual para lograr exactamente eso! Otro ejemplo de cómo utilicé la jerarquía recientemente es el diseño de la mitad superior de este sitio:
En este caso, la principal llamada a la acción del cliente es comprar en línea o contactarlo directamente. El logotipo, la descripción breve e incluso el número de teléfono prevalecen, pero el botón doble Divi es el elemento más grande que se ve inicialmente con la esperanza de que los usuarios hagan clic en lo que están buscando si no se desplazan más.
Entonces, nuevamente, si bien estos son solo algunos ejemplos de jerarquía visual, puede ser un método muy poderoso para dirigir a los usuarios de su sitio web para que hagan lo que usted quiere que hagan o vayan a donde usted quiere que vayan. Aparte, recomiendo encarecidamente que consulte nuestra publicación anterior sobre Errores comunes de diseño web que se deben evitar.
Para concluir
¡Espero que estos principios de diseño efectivos lo hayan ayudado en sus esfuerzos de diseño, ya sea que sea nuevo en el diseño web o esté buscando mejorar en el diseño! Nuevamente, hay muchos principios que podríamos repasar, pero estos son los 3 principales que trato de implementar en todos los diseños de mi sitio web.
Si tiene otros principios de diseño que le gustaría compartir, ¡háganoslo saber en los comentarios a continuación!
Mañana: 3 áreas importantes de diseño en las que centrarse para cada creación de sitio web
Ahora que hemos cubierto la preparación de nuestra mentalidad, cómo aprender a tener un mejor ojo para el diseño y hemos repasado algunos principios básicos de diseño, nuestra publicación final explorará algunos de los aspectos más importantes del diseño web en los que enfocarse para cada construcción de sitio web. ¡Hasta entonces!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!