Los detalles que importan en diseño web

«Los detalles no son detalles. Son los que hacen al diseño«- Charles Eames

detalles-header

En un mundo digital tan sobrecargado de información, el cuidado en los detalles es lo que muchas veces marca la diferencia entre una web buena y una web atrapante. Son los detalles del diseño los que hacen que un sitio invite a navegar y realmente transmita una impresión atractiva de la marca, empresa o producto. En nuestra experiencia diseñando la imagen digital de diversas marcas, dejamos nuestro listado de los detalles que más importan a la hora de diseñar.

 1) La alineación

 Una de las claves para un diseño limpio es la alineación vertical y horizonal de los elementos del diseño. La alineación prolija es lo que permite la jerarquía, orden y consistencia de los distintos componentes. Por el contrario, arrojar elementos de forma aleatoria en el lienzo le quita profesionalismo a cualquier página web, por más atractiva que sea la estética visual del diseño.

mixed-alignment

2) Animaciones de carga

Los segundos en que demora en cargar una web son la eternidad para el usuario habituado a la inmediatez digital. En sí, la carga de una página web cuando ingresamos no debería llevar más que algunos milisegundos (de hecho Google penaliza las webs de carga lenta). Pero lo cierto es que hay ciertos procesos que llevan su tiempo –el envío de un formulario, la carga de un video, completar una compra. ¿Cómo aliviar la ansiedad del usuario? Con una animación de carga entretenida, que le informe en qué va el proceso y le asegure al usuario que todo está en marcha como debería. Pensemos en la cantidad de veces que no quisimos que volviera la conexión para jugar a la carrera del dinosaurio de Google.

 Resultado de imagen para loading website animation cool GIF

3) Zoom con calidad

¿Nuestro diseño se ve tan bien cuando nos acercamos en detalle? Los diseñadores se sienten cómodos cuando por lo menos pueden hacer un zoom de 500% en Photoshop sin que se pierda la calidad de la imagen (y es que podríamos decir que una imagen pixelada hace que decaiga el atractivo de una web un 500%). De la misma manera, quizás hay detalles visuales que no se aprecian en la visualización estándar; pero no significa que no le aporte valor agregarlos para que se aprecien en la vista más detallada.

4) El espacio en blanco

Así como el silencio es vital para que exista la música, es preciso que haya espacios en blanco para que el diseño cobre vida. Y sin embargo, en general se le pone foco a los componentes que captan la atención del ojo y se descuidan esas áreas donde no hay elementos visuales, y que son tan fundamentales para el diseño web.

Imagen relacionada

Los espacios alrededor de las imágenes, los márgenes, los intersticios entre los iconos y hasta entre las letras, todos esos espacios también comunican al usuario y le permiten navegar más a gusto y detectar los contenidos realmente relevantes. Un gran ejemplo del buen uso del espacio es el buscador de Google: todo en blanco, salvo el logo y la barra de búsqueda. Si se pusieran más elementos distrayendo la vista, seguro no daría tanto gusto (ni resultaría tan fácil) buscar algo.

 Resultado de imagen para google homepage

5) Microcopy (los pequeños textos)

Dentro del contenido escrito del diseño, muchas veces se pasan por alto esos textos cortitos que van ayudando al usuario a navegar más fácil la web. Un mensaje de error cálido (y que ofrezca alguna solución); un botón con algo más de personalidad que el “clic aquí”; o un link de desuscripción que haga al usuario pensarlo dos veces; son buenos ejemplos de cómo el detallismo también importa al pensar los textos de un sitio.

 Resultado de imagen para ejemplos microcopy web

 Aunque parecen detalles mínimos en comparación a las grandes decisiones visuales del diseño, es sorprendente el impacto que tiene el microcopy en las tasas de conversión. Además, apostar a microtextos creativos ayuda a construir la voz y personalidad de una marca, humanizándola y haciendo que conecte de forma mucho más efectiva con los usuarios, como si estuviera conversando con ellos.

Imagen relacionada

Etiquetas: ,
 

CONTACTANOS