¿Por qué el atractivo de tu Web no es una frivolidad?
La belleza o el atractivo están en los ojos de quien los contempla.
Me gusta esa frase. Lamentablemente, cuando se trata del diseño de una web y más aún de una web que pretendemos usar como la plataforma de nuestro negocio, pareciera que se diluye su significado.
Lejos han quedado -¡gracias a Dios!- aquellos tiempos cuando sitios como CNN lucían así:
Siendo justos, los elementos de diseño son los propios de finales del siglo XX en una web. Pero más allá de este hecho, es evidente que la intoxicación visual de muchos elementos queriendo llamar nuestra atención a la vez nos abruma.
Y es que, tratándose de un sitio web que pretende atraer, se deben considerar ciertos fundamentos de diseño para que éste cumpla su objetivo. Esa es una gran verdad. Y se aplica para todo sitio web, independientemente del tópico al que se dedique.
Elementos Clave del Diseño
Podemos considerar cuatro elementos como fundamentales a la hora de diseñar nuestra web y, en general, cualquier elemento visual a mostrar on line.
- Color
- Tipografía
- Imágenes
- Composición.
Color
Hay toda una serie de estudios que apuntan al hecho de que somos influidos por el color. Los distintos colores despiertan en nosotros ciertos sentimientos, emociones, incluso vinculados a memorias de nuestras experiencias pasadas.
La elección del color de nuestra marca dependerá de tres factores:
- Tus gustos personales (o los de tu cliente)
- Personas a quien va dirigido el sitio (audiencia)
- Estética
Acaso esto tenga que ver con los Arquetipos Junguianos o el Inconsciente Colectivo…
En fin, sin adentrarnos en la psicología, generalmente asociamos un color a una gama de sensaciones.
Amarillo: Energía, alegría y felicidad, color energizante. Representa riqueza. (Nota que el amarillo con fondo blanco es difícilmente legible por el poco contraste entre ambos. Más adelante veremos esto).
Rojo: Fuertes emociones, positivas y negativas. Sentido de urgencia, apetito (Se ve mucho en la industria del fast-food).
Naranja: ligero, divertido, optimista. Da un feeling menos “corporativo”.
Verde: balance, equilibrio, salud, ecología
Azul: efecto Razón, Sabiduría. Calmante, espiritual, circunspecto, controlado, moderno.
Rosa: Feminidad, amor y cuidado, respeto, calidez.
Negro: lujo y poder. Combinado con un poco de un color brillante, sofisticación.
Blanco o Plata representa limpieza, inocencia, pureza, simplicidad. Debe ser usado con cuidado y combinado, para no transmitir carencia de personalidad
El Contraste y los CTAs
Sea cual sea el color o colores que escojas para tu sitio web, debes tener en cuenta una propiedad muy importante como lo es el contraste.
El contraste es cómo luce o se compara un color frente a otro. El máximo contraste se da entre los colores complementarios u opuestos. Son los colores que se sitúan en los puntos opuestos del Círculo Cromático
Así, el opuesto al verde es el magenta, el del azul es el amarillo.
Para efectos de diseño, un texto destacará al máximo si su color es el opuesto al fondo en el que se encuentra.
El contraste puede ser usado para guiar las acciones de la gente. Los CTAs, (Call-to-Action), o «Llamados a la Acción», deben tener un fuerte contraste. Es el caso de los botones y el resto del diseño.
Usa esta excelente herramienta gratuita para combinar y contrastar los colores de tus diseños.
Hay un amplio artículo de la gente de Design Wizard donde se profundiza un poco más sobre la Teoría del Color.
Tipografía
Las tipografías son el diseño de letras que usamos para los textos en nuestros diseños.
Los usuarios esperan ver tipografías familiares. No hay que procurar que las tipografías usadas en un sitio sean muy diferentes o inusuales.
Dependiendo de la naturaleza del sitio, se puede usar una tipografía estándar o “normal” para los textos y una “inusual” para ciertos efectos de impacto.
En todo caso, siempre deben ser bien legibles y con alto contraste.
Usa un máximo de 2 a 3 tipografías en un sitio web. Incluso menos en textos en una imagen.
Un “Font Family” o familia de tipos, es un grupo de tipos que comparten un estilo de diseño común. Hay muchos tipos, como Roboto, Arial, Times New Roman o Calligrafitti, que tiene estilos bold (negrilla) o italic (itálicas).
El “serif” es una pequeña proyección decorativa añadida a un caracter, siendo el más común el tipo Times Roman.
Los sans-serif (sin serif) son los que carecen de este atributo, como el Helvética. Los tipos sans-serif mejoran mucho la legibilidad. Por eso se usan en blogs, diarios, documentos.
En cuanto a los títulos, usa un estilo “pesado” (negrilla o mayor) de tipo y más grande. Reserva el H1 al título de tu artículo y los subtítulos asígnales el H2, H3, etcétera. Respeta las jerarquías de títulos.
Imágenes
La calidad de la imagen es muy importante. Debemos escoger imágenes en HD (high definition), con alto nivel de detalle.
Mucha gente abandona la web de un e-commerce, por ejemplo, porque sus imágenes de productos son pobres. Asocia inconscientemente la calidad del producto con la calidad de la imagen del mismo.
La gente responde muy bien a imágenes con gente en ella. Da una conexión emocional. Cualquiera que sea Community Manager sabrá que la cantidad de “likes” de una imagen con personas es en promedio mayor de aquellas donde no las hay.
Es fundamental que pruebes el comportamiento de las imágenes en un dispositivo móvil. Cada vez acceden más personas al Internet desde sus smartphones.
En diseño web, no debes añadir imágenes con texto ya incorporado. Mejor si sobrepones una capa “responsive” (que se adapta automáticamente a pantallas pequeñas) con texto a la imagen. El texto incorporado a la imagen directamente suele ser demasiado pequeño para leer desde dispositivos móviles.
Por otra parte, si se usa un plugin traductor, éste no será capaz de traducir el texto incorporado directamente a una imagen.
Como se dijo, debe haber suficiente contraste entre el texto y el fondo para la legibilidad. Todos odiamos los textos ilegibles. Es como experimentar la frustración de que nos estamos perdiendo algo.
Composición
Una vez que tengas definido el color de tu marca, la tipografía y las imágenes, debes ponerlo todo junto y que se vea bien.
Este es el verdadero reto.
Debes remover el abigarramiento y el ruido visual. Debe tender todo a la simplicidad.
Un diseño minimalista no sólo es cuestión de estética, como se apuntó en Tendencias de Diseño Web 2019. Se trata también de la tranquilidad psicológica del usuario que le ayudará a enfocarse en una tarea o acción a la vez.
Esto es UX o Experiencia del Usuario.
Asegúrate de que los elementos estén dispuestos de una manera clara y lógica. Una imagen. Luego texto en ella o debajo y luego un botón, por ejemplo.
Cada elemento del diseño visual de tu Web o tus Redes Sociales debe servir a un propósito. Clic para tuitearCuando diseñes, pregúntate a ti mismo/a ¿cuál es el propósito de este elemento?
Esto ha sido muy bien expresado por Nick Babich, especialista en UX:
Minimalismo no se trata de despojar de elementos. Se trata de dejar sólo los suficientes para permitirles contar tu historia.
Mantén el diseño simple
Hay dos aspectos a considerar para mantener tu diseño simple:
1 Remueve todo lo que no sea absolutamente necesario. Información innecesaria puede hacer tu diseño distractivo. Y evitar que cumpla las metas para las que fue creado.
2 Deja espacios en blanco. Esto para que el usuario no sea abrumado y pueda concentrarse en lo que tú quieres que se enfoque.
Un buen ejemplo de la aplicación de estos principios lo constituye el blog de Medium. No hay banners ni frustrantes pop-ups.
En el feed de Medium en vez de mostrar categorías, fechas completas de publicación, etiquetas del artículo y otras cosas que realmente no nos importan, se muestra el día de la publicación y cuánto tiempo te llevará leerlo. Eso se agradece.
Finalizando…
Efectivamente, un diseño racional que represente tu marca. Pensado en el usuario para llevarlo de la mano y dirigirlo de modo natural hacia las acciones que queremos que realice en nuestra web. ¡Y por supuesto estéticamente atractivo! Tales deben ser los factores que debes considerar a la hora de escoger un diseño para tu web, blog o redes sociales.
¿Tienes algún otro tip de diseño favorito que quieras compartir? ¡Deja un comentario abajo!