3 principios de diseño web efectivos para quienes no son diseñadores

Bienvenido a la parte 2 de nuestra miniserie "Principios efectivos de diseño web 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 personas sin "ojo para el diseño".

En nuestra publicación anterior, cubrimos la preparación de su mentalidad y repasamos algunas formas de aprender cómo desarrollar un mejor ojo para el diseño. En esta publicación, nos centraremos en algunos principios universales de buen diseño que puede aplicar inmediatamente a sus esfuerzos de diseño web para mejorar en el lado del "diseño" del diseño web.

¡Vayamos directo a ello!

3 principios de diseño web efectivos para quienes no son diseñadores

Como se mencionó en la parte 1 de esta serie, no hay nada correcto o incorrecto cuando se trata de diseño. Lo que veremos en esta publicación es ampliamente aceptado universalmente 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. Utilizo estos principios para cada diseño de sitio web de Divi que construyo y, si bien siempre hay un cliente que quiere algo atroz o fuera de lugar, 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, diseño gráfico, diseño de impresión, 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 la mejor parte es que puede aplicar la Regla de los tercios a gráficos, imágenes, diseños de páginas web enteras y más!

Existen 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. aburrido 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 en él. Imagina una cuadrícula que se parece a esto:

Con esta cuadrícula imaginaria en su imagen, gráfico o diseño, puede colocar fácilmente contenido cerca de uno o más de los puntos de intersección principales.

Mantener los objetos y los puntos focales en 1 o más de los 4 puntos de intersección a menudo logrará un aspecto simétrico y mucho más equilibrado en comparación con el segundo ejemplo en el que el sujeto está por 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 ESTÁ siguiendo la regla de los tercios.

Si bien el primer ejemplo sigue siendo una imagen agradable, el uso de la regla de los tercios proporciona una sensación completamente diferente a la imagen al cruzar el primer plano con los puntos de intersección inferiores en la regla de los tercios. Veamos la imagen con la cuadrícula de la regla de los tercios.

Ahora veamos la imagen sin alinear la regla de las intersecciones de los tercios.

Puede ver una gran diferencia en cuanto 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. Les mostraré cómo apliqué la regla de los tercios a mi sitio personal. Aquí hay una instantánea del diseño inicial "arriba de la página", que se aplica a lo que ve el espectador 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 los puntos de intersección o cerca de ellos. En resumen, quería acentuar lo siguiente:

1. Una breve descripción de quién soy y de qué se trata este sitio.
2. Una imagen que permite a los nuevos usuarios sentirse más cómodos y confiables al ver de quién van a escuchar.
3. Un gráfico de mi último libro electrónico que le da a la gente una razón para registrarse.
4. Finalmente, un correo electrónico de llamada a la acción se registra en los 2 cuadros finales, que es donde terminará la mirada del usuario.

Con la regla de los tercios, generalmente no es una buena práctica tener algo en cada punto de intersección (en particular en fotografía), pero a menudo sigo este diseño en las compilaciones 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 ahí es donde termina nuestro ojo. Entraremos en 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 dificultades 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 diseñar y diseñar una página web, nuevamente no existe 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 anticuados 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 espacios abiertos 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 a un desplazamiento excesivo. Entonces, ¡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, existen 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 pauta 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 su 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. A la inversa, 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 manera 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 tomamos 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 pergaminos. 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á. Nuevamente, no hay nada correcto o incorrecto con respecto al desplazamiento, pero si aún no ha trabajado con clientes de una mentalidad más anticuada, tiene la garantía de encontrarse con alguna oposición. Intento reafirmar a esos clientes que no se debe temer el desplazamiento. Las redes sociales nos han capacitado para desplazarnos constantemente y asimilar 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 le proporciona una dirección muy clara de hacia dónde debe ir la mirada en su diseño. A menudo se hace referencia a la jerarquía con tipografía (que veremos 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 sitios que me faltan en el departamento de "buen diseño", pero estoy seguro de que te has encontrado con muchos sitios que tienen una mezcla heterogénea de texto e imágenes que son todos del mismo tamaño sin llamada a la acción, ¿verdad? Eso es lo que queremos evitar. Usar una buena jerarquía es la mejor manera de guiar al usuario de su sitio web para que sepa en QUÉ debe hacer clic o hacer a continuación.

Aquí hay un ejemplo de un diseño reciente que creé teniendo en cuenta la jerarquía:

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 específicamente quería que las personas solicitaran fácilmente una inspección justo cuando ingresaban al sitio, así que usé esta idea de jerarquía visual para lograr eso. Otro ejemplo de cómo utilicé la jerarquía recientemente es el diseño en la parte 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 son frecuentes, pero el Divi Double Button es el elemento más grande que 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 esos son solo un par de 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. Además, recomiendo encarecidamente consultar 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 le 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 un 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. cada construcción de sitio web. ¡Hasta entonces!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!