3 áreas importantes de diseño en las que centrarse para cada creación de un sitio web

Bienvenido a la parte 3, la publicación final de nuestra miniserie "Principios efectivos de diseño web Divi", en la que exploramos prácticas de diseño efectivas para ayudar a empoderar a los nuevos diseñadores web y a quienes se identifican como personas sin "ojo para el diseño".

Ahora que hemos cubierto la preparación y el aprendizaje de cómo tener un mejor ojo para el diseño y hemos repasado algunos principios de diseño efectivos para tener en nuestra caja de herramientas, nos vamos a enfocar en 3 áreas muy importantes de diseño que son clave para lograr un sitio bien diseñado.

¡Vayamos directo a ello!

3 áreas importantes de diseño en las que centrarse para cada creación de un sitio web

Si se ha mantenido al día con las dos primeras publicaciones de esta serie, me ha escuchado señalar que no hay nada correcto o incorrecto en lo que respecta al diseño, pero junto con los principios de diseño efectivos que repasamos, hay algunos importantes , áreas prácticas de diseño en las que me concentro para garantizar una creación de sitio web exitosa y agradable a la vista en todo momento. ¡Y la mejor parte es que estas ideas se pueden transferir a cualquier tipo de industria o estilo de diseño web!

1) Tipografía y fuentes

Su sitio puede tener imágenes hermosas, colores atractivos y elementos de diseño agradables, pero si el tipo de letra se ve mal o no se ajusta al estilo del sitio, puede ser un gran impedimento. Dado que no vamos a entrar en los conceptos básicos de la tipografía en esta serie, consulte nuestra publicación de 50 términos tipográficos que todo diseñador web debe conocer (y comprender) si desea obtener más información sobre los conceptos básicos. La comprensión de las fuentes de interletraje, interlineado, seguimiento, sans y sans-serif le conviene mucho a la persona que busca mejorar la tipografía y el diseño.

Permítame ofrecerle algunas pautas prácticas de tipografía que sigo como diseñador web Divi exitoso con clientes que difieren mucho en estilos de diseño y diferentes industrias:

Use fuentes que combinen bien con la industria / diseño de su sitio: en la primera publicación de esta serie, recordé un ejemplo en el que admití que diseñé un sitio que tenía excelentes imágenes y colores, pero la fuente no combinaba bien. En resumen, era un sitio de fabricación industrial y la fuente que usé inicialmente era de un estilo más moderno y elegante que de hecho no se ajustaba al aspecto ni a la marca de la empresa.

Esto no significa que no pueda ser creativo con las fuentes o que tenga que igualar el status quo de la industria, pero en la práctica, si está trabajando en un sitio de servicios profesionales, probablemente no querrá un exceso de la fuente artística superior involucrada. Y viceversa, si estás trabajando en algo con un ambiente único, quizás artístico, tal vez Arial o Helvetica no van a coincidir con el ambiente que buscas. Esto me lleva al siguiente punto de mezclar y combinar fuentes.

Quédese con 2 o 3 fuentes: un principio de diseño básico que ha resistido la prueba del tiempo durante décadas es limitar la cantidad de fuentes que utiliza. Demasiadas fuentes distraen al lector, a menudo confunden la jerarquía y, francamente, terminan pareciendo un viejo viajero del oeste que busca una recompensa para un forajido. A menudo me quedo con una fuente para los encabezados y títulos, luego normalmente uso una fuente sans-serif fácilmente legible para todo el texto de mi párrafo. A veces tendré una fuente de tercer estilo para el menú principal, pero la fuente de mi menú a menudo se simplifica con mis títulos.

Para obtener más ideas sobre cómo emparejar fuentes, consulte esta publicación anterior sobre Emparejamiento de fuentes en el diseño web: 7 principios clave revelados y explicados

Tenga imágenes con su texto: una cantidad decente de texto en su contenido es excelente. De hecho, se recomienda tener al menos 300 palabras por página para ayudar desde una perspectiva de SEO. Pero tenga cuidado con tener demasiado texto y no tener suficientes ayudas visuales. Para libros, blogs, artículos y otro contenido de formato largo, se espera una gran cantidad de texto, pero si está diseñando una página de destino atractiva y agradable, demasiado contenido aburrirá al usuario antes de que busque más. A menudo diseño con la mentalidad de que la página principal debe ser el embudo de ventas que lleva a los clientes a través de la puerta, ENTONCES, pueden sumergirse en más páginas, blogs y otros recursos para obtener información más detallada.

La página de inicio de Elegant Themes es actualmente un ejemplo perfecto de eso.

En este ejemplo, vemos un título atractivo, un párrafo de texto con un botón de llamada a la acción y un gráfico visual agradable que enlaza con el mensaje que mantiene al usuario comprometido. Este es un gran ejemplo a seguir cuando se organiza una cantidad decente de texto con imágenes.

Una vez tuve una hermosa portada diseñada con texto e imágenes y cuando se la entregué a mi cliente para que hiciera las ediciones básicas, habían arrojado lo que parecía un pequeño capítulo de un libro en la portada, lo que arruinó por completo el flujo del diseño. Yo creé. Así que deje que eso sea una lección y sepa que, si bien el contenido es excelente, ¡debe colocarse en consecuencia!

Otro gran recurso al que referirse es 20 tendencias tipográficas a las que prestar atención en 2016, ya que esas tendencias siguen siendo muy válidas hoy en día y seguirán avanzando.

2) Gestión de imágenes y color

De manera similar a la tipografía, tiendo a ceñirme a un máximo de 2 a 3 colores primarios para la construcción de mi sitio web. A menos que sea una empresa u organización con una gran cantidad de colores en la marca, encuentro que demasiados colores (especialmente si no combinan bien) pueden distraer mucho y, a menudo, confundir. Aquí hay algunas pautas que sigo al mezclar colores e imágenes:

Colores base y colores de acento: un método que he encontrado muy exitoso en proyectos recientes es tomar la marca de un cliente y, si aún no lo ha hecho, elegir un color de acento agradable para llamadas a la acción, enlaces, etc. Por ejemplo, en este sitio, tomé la marca del logotipo con el gris y el naranja y agregué un sutil, verde azulado oscuro / azul para ayudar a que el naranja "resalte" como el color de acento principal.

Optimice el color con imágenes: una forma de unir su diseño e imágenes de una manera excelente es hacer coincidir los colores del sitio web con algunas de las imágenes principales. Este ejemplo es un poco raro, ya que pude hacer coincidir los colores del sitio web con el atuendo de mi cliente, lo que generó una sensación muy agradable y aerodinámica entre las imágenes y el color del sitio web.

Tomé un bonito color granate y naranja del atuendo de mis clientes y pude unir todo el sitio con un bonito aspecto uniformado. Ahora, rara vez se encontrará en una situación en la que pueda marcar un sitio completo a partir de una imagen, ¡pero este mismo principio se puede aplicar cuando se usan imágenes de fondo con llamadas a la acción, etc.!

Prácticamente, si no está seguro de cómo elegir ciertos colores, aquí hay 10 herramientas de selección de color

Manténgase alejado de los colores que son demasiado vibrantes : a menudo veo que los diseñadores más nuevos usan verdes, rosas, amarillos, etc. súper brillantes que hacen que uno entrecerre los ojos y se aleje de la pantalla. No señalaré ningún mal ejemplo aquí, pero estoy seguro de que has visto muchos sitios donde los colores te hicieron dar la vuelta y no querer mirar atrás. Ciertamente, no hay nada de malo en los colores vibrantes, solo asegúrese de que no emitan ese efecto. Aquí es donde obtener críticas constructivas y comentarios de otros diseñadores puede valer la pena.

Mi recomendación es usar colores bastante neutros para colores base como texto, gráficos de fondo, etc. y luego usar colores más vibrantes para llamadas a la acción, enlaces y áreas más llamativas del diseño de la página. Si es nuevo en el diseño y el color no es un área cómoda para usted, no dude en consultar nuestras Técnicas de combinación de colores para diseñadores web de WordPress, que le brindarán muchas opciones sobre cómo elegir mejor los colores.

3) fuertes llamadas a la acción

Por último, un área muy importante del diseño web es tener llamados a la acción (CTA) fuertes y claros. Uno de los problemas más comunes del mal diseño web es tener un contenido pesado basado en texto sin una clara llamada a la acción. El contenido es excelente, pero si todo es información y no hay conversión, su cliente ciertamente no estará satisfecho. Recomiendo hacer que sus CTA se destaquen de otros elementos en su diseño con un color de acento o un bonito efecto de desplazamiento.

A continuación, se muestra un ejemplo de cómo implementé una llamada a la acción para un cliente reciente.

En este caso, la principal llamada a la acción del cliente para los usuarios del sitio web es registrarse para recibir actualizaciones por correo electrónico, así que de inmediato, tenemos el logotipo saliendo de una imagen de fondo más oscura, un poco de texto con una oportunidad inmediata para registrarse. incluso antes de desplazarse hacia abajo. Idealmente, desea llamar la atención de su usuario hacia su llamado a la acción. Ahí es donde tener un color o efecto de acento vibrante en un sitio es extremadamente beneficioso.

Aquí hay algunas pautas que sigo cuando se trata de llamadas a la acción:

Termine su página de inicio con una fuerte llamada a la acción: la mayoría de las veces, los diseños de mi página de inicio son casi un resumen del sitio en su conjunto. Por ejemplo, si un sitio tiene una estructura como esta:

• Sobre nosotros
• Servicios
• Testimonios
• Blog
• Contacto

Haré un llamado a la acción para cada una de esas secciones en la página de inicio y luego un diseño final y elegante para el llamado a la acción principal, que en este caso sería registrarse. Aquí hay un excelente ejemplo de lo que quiero decir:

Básicamente, la página principal encapsula todo el sitio y es un punto de partida para que los usuarios hagan clic para ver galerías, videos y más información. ¡Quizás esa mentalidad te ayude como en los diseños de tu página de inicio!

Tenga una llamada a la acción en su barra lateral: ¡no olvide la oportunidad de una fuerte llamada a la acción en la barra lateral! Especialmente si tiene un sitio con publicaciones de blog u otras páginas que utilizan con frecuencia una barra lateral. Esta es una gran oportunidad para poner un registro de correo electrónico adicional, un botón de donación o un enlace a otra CTA principal.

Al igual que en el sitio anterior, una de las principales llamadas a la acción para mi sitio personal es un registro por correo electrónico y, si bien está al frente y al centro en mi página de inicio, quería asegurarme de que también sea muy evidente en la publicación de mi blog y en las páginas de tutoriales. .

Aquí, lo tengo en la parte superior derecha de cada plantilla de publicación junto con una imagen fuerte arriba y debajo del formulario de registro principal. Entonces, si tiene páginas con barras laterales, recuerde que esas áreas son bienes raíces valiosos para un fuerte llamado a la acción. Y quiere estar seguro y hacer que su CTA sea notable y preferiblemente en la parte superior de la barra lateral, que aparecerá primero en el dispositivo móvil debajo del contenido principal.

Tenga una llamada a la acción después del contenido de la subpágina: por último, y quizás lo más pasado por alto, es recordar tener una llamada a la acción en sus páginas normales. Reconozco que he pasado por alto esto hasta hace poco, cuando me lo solicitó un cliente. El siguiente ejemplo tiene un fuerte llamado a la acción al final de sus páginas de servicios principales.

Cuando un usuario del sitio web ve esa página, tomará toda la información y luego tendrá la oportunidad de contactar a mi cliente si está interesado con una imagen agradable y acogedora a la derecha y un botón de llamada a la acción a la izquierda respaldado por una naranja vibrante que ayuda a esa sección. salga de la página. Sí, sé que dije en una publicación anterior que generalmente pongo mis CTA en el medio o en la derecha, pero este diseño parecía funcionar bien

Resumen de la serie

Bueno, espero que esta serie te haya ayudado a inspirarte con algunos buenos principios y tácticas de diseño web que puedes aplicar a tus esfuerzos de diseño web. Hagamos un resumen rápido de lo que repasamos en toda la miniserie:

Parte 1

• Preparando tu mentalidad
• Cómo aprender buenas tendencias de diseño
• Obtenga comentarios y críticas constructivas sobre su trabajo

Parte 2

• Siga la regla de los tercios
• Diseño y flujo
• Jerarquía visual

Parte 3

• Tipografía y fuentes
• Imágenes y color
• Fuertes llamadas a la acción

Nuevamente, se han dedicado estudios académicos completos al buen diseño, por lo que solo estamos rascando la superficie aquí, pero espero que estos principios y prácticas hayan ayudado a orientar a aquellos de ustedes que desean mejorar en el diseño en la dirección correcta. Si tiene otros principios o métodos de diseño que le hayan ayudado y que le gustaría compartir, no dude en hacérnoslo saber en los comentarios a continuación.

¡Por todos nosotros, convirtiéndonos en mejores Diseñadores Web Divi todos los días!

¡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!