Tengo un amigo que comenzó hace muchos años en el mundo del diseño y luego, por circunstancias de la vida, tuvo que dejarlo. Hoy pretende retomarlo, por eso viene todos los viernes a mi oficina a practicar, y yo hago mi mejor esfuerzo por traspasarle todo lo que sé.

En una de aquellas jornadas me encontré con la necesidad de explicarle en qué enfocarse para que sus diseños, a pesar de que aún no sean 100% profesionales, cumplan su propósito. Así llegué a identificar tres puntos que son fundamentales en todo diseño, sobre todo en el contexto de un sitio web, y quiero compartirlo contigo en este artículo.

Los tres elementos indicados a continuación están descritos en orden de importancia, de tal forma que debes cumplir con el primero antes de enfocarte en el segundo, y así sucesivamente.

Vamos a ello:

1. Mensaje

El elemento más importante en prácticamente todo diseño es el mensaje. Debes procurar que el contenido de la pieza sea fácilmente comprensible por el espectador.

Puedes hacer el diseño más espectacular del mundo, usar los efectos de photoshop más complejos o los estilos CSS3 más avanzados, pero si el público no consigue leer el texto o entender las ideas que tratas de transmitir, todo eso habrá sido en vano.

Por eso, desde el momento que comiences a diseñar, debes preguntarte si la forma en que estás estructurando tu diseño facilita su comprensión o se interpone en el camino.

Para asegurar que el mensaje sea fácil de comprender hay algunos puntos básicos que deberías seguir:

  • Usa familias tipográficas que faciliten la lectura. Si tienes poca experiencia, antes de escoger una familia que sea completamente expresiva (gótica, script, display, etc.), te recomiendo partir con una que sea más legible. No hay nada de malo en usar Helvética, Georgia o Times.
  • Asegura que haya un jerarquía visual en el contenido. Que se entienda claramente qué elementos son los más importantes y cuáles son secundarios. También es una buena idea establecer una jerarquía a nivel de textos, usando encabezados, subtítulos y listas.
  • Limita el uso de familias tipográficas. Mientras menos familias uses en un diseño, mucho mejor. No necesitas usar seis tipografías para ser un buen diseñador, de hecho, lo más probable es que un buen diseñador haga menos alarde de sus capacidades y se centre en facilitar la lectura para el espectador. Si necesitas mucha variedad en tu diseño, puedes usar una familia que tenga muchas variables.
  • Usa los principios del diseño para dirigir la atención del espectador. Tienes a tu disposición el uso del contraste, la dirección, la escala y todos los otros principios para orientar al público y llevarlo a través del contenido.
  • Si estás diseñando una interfaz digital destaca los llamados a la acción. Recuerda que en el mundo online, lo más frecuente es buscar que nuestro espectador (visitante) realice una acción particular. Al destacar la llamada a la acción principal, se aumentan las chances de que los usuarios hagan click y tomen la acción deseada.

En la mayoría de los casos el mensaje de nuestros diseños está plasmado en forma de texto, por eso para cumplir con este primer punto, se hace necesario contar con un dominio, al menos básico del uso tipográfico.

Hace poco vi en youtube este video que resume bastante bien las cosas que hay que saber al diseñar usando tipografías:

2. Marca

Si tu diseño ya está cumpliendo con el primer punto, entonces, y sólo entonces, puedes comenzar a enfocarte en el segundo: La marca.

¿Qué significa esto de la marca o el branding? Veamos. El diseño que estás haciendo busca entregar un mensaje, difundir un contenido, pero ¿de parte de quién viene ese mensaje? Probablemente lo emite una empresa (o insitución), esa empresa tiene una marca y esa marca tiene una identidad. Pues bien, esa identidad debe estar presente a lo largo de todo el diseño.

¿No te queda claro? Veamos un ejemplo:

Duolingo

La imagen que acabas de ver es la página de inicio de Duolingo. Podemos notar de inmediato lo claro que está el mensaje. Se comprende sin ninguna dificultad que la app se relaciona con aprender idiomas y que la acción requerida es que nos registremos.

Como todo aquello está bien definido, los diseñadores pudieron enfocarse en aplicar la identidad de marca en el diseño. Por eso usaron ilustraciones en lugar de fotografías. Por eso usaron colores vivos en lugar de pasteles. Por eso usaron esa familia tipográfica y no otra.

Todas las marcas bien constituidas tienen elementos visuales que definen su identidad y debemos usarlos para conseguir que nuestros diseños se asocien directamente con la empresa o institución que representan. En el caso de Duolingo está muy bien logrado, ya que la marca posee un estilo visual muy característico que está perfectamente aplicado en la página de inicio.

Algunos consejos que te pueden ayudar con este punto:

  • Consulta el manual de identidad corporativa. La mayoría de las empresas relativamente grandes tienen un manual con las directrices de cómo debe comunicarse una marca.
  • Usa los colores corporativos. Toda marca tiene sus colores corporativos bien definidos y debes ceñirte a ellos. No hace falta que comiences a crear paletas de colores nuevas en cada ocasión, alguien ya hizo ese trabajo. Tu labor es diseñar dentro de esos parámetros.
  • Usa las familias tipográficas de la marca. No pierdas tiempo buscando alguna tipografía que te permita innovar, limítate a trabajar con el estilo que la marca ya tiene definido.
  • Observa otras piezas diseñadas. Seguramente lo que estás haciendo no es el primer diseño que se hace para esa marca o empresa. Revisa (dentro de lo posible) todo lo que se haya hecho antes e identifica los patrones estéticos que se repitan y aplícalos en tu diseño.

En síntesis: Cuando un espectador vea tu diseño, no basta con que pueda leer y comprender el mensaje fácilmente, también deberá ser capaz de identificar de manera sencilla a qué marca pertenece.

3. Estética

Hoy en día (sobre todo en términos de diseño de interfaces, en donde casi todo puede ser medido) está muy de moda decir que diseñar no se trata de hacer cosas bonitas, sino de hacer cosas que funcionen. Estoy de acuerdo hasta cierto punto, porque no tendría sentido hacer algo muy bonito pero que, al final del día, sea inútil. Sin embargo, si puedo diseñar algo que funcione y además que tenga cierta belleza ¿por qué no hacerlo?

No creo que ninguno de nosotros haya dicho “Me encanta hacer cosas feas, voy a ser diseñador”. Me aventuro a pensar que quienes decidimos dedicarnos al diseño, lo hacemos porque tenemos una sensibilidad o gusto especial por la belleza y la composición visual.

Por lo tanto, si tu diseño ya consigue comunicar correctamente el mensaje y representa adecuadamente a su marca, es momento de invertir algo de tiempo en impregnarle también algo de belleza.

En este punto, el único tip que puedo compartirte para ayudarte a mejorar estéticamente tus diseños, es que amplíes tu visión al exponerte a muchos recursos:

  • Visita museos e intenta aprender de los grandes maestros del arte
  • Lee libros y ensayos sobre arte y estética
  • Toma una clase de historia o apreciación del arte
  • Mira paisajes
  • Observa el trabajo de otros diseñadores y trata de aprender de ellos
  • Intenta encontrar la belleza en tu vida cotidiana

Este punto agregará bonos extra a tu trabajo como diseñador. Si consigues cumplir con los dos primeros puntos y además hacer que tu diseño pueda entregar algo de placer estético, estás bastante cerca de llegar a ser pro.


Estos son los tres puntos clave que te ayudarán a mejorar tus diseños tremendamente.

En este caso están expuestos de manera lineal, en donde debes enfocarte en uno antes de pasar al otro. Este enfoque es adecuado para aquellos que recién comienzan en el mundo del diseño, pero conforme vas aumentando tus capacidades y ganando experiencia, deja de ser un proceso lineal y comienzas a trabajar los tres elementos de manera simultánea.

Espero que estos puntos te resulten de utilidad y si tienes alguna duda o algo que agregar, puedes compartirlo en la comunidad de facebook.

Aprovecho además de comentarte que desde hoy, 4 de enero de 2017, se abrirán nuevamente las puertas del curso Diseño efectivo de sitios web. En esta ocasión habrán 2 formas de tomar el curso, la primera incluyendo mi feedback directo sobre todos tus ejercicios y la otra, tomando el curso por tu propia cuenta, sin revisiones personalizadas, pero a un precio más bajo.

Te mando un abrazo y hasta la próxima semana.
@FranciscoAMK