7 consejos para crear mejores interfaces web

Dicen que los pequeños detalles hacen la gran diferencia. Eso se aplica a cualquier ámbito de nuestra vida, y cuando nos dedicamos a diseño web es también un principio que funciona muy bien. Los pequeños detalles de diseño son aquellos ue hacen un diseño regular un gran diseño. No se necesita gran conocimiento para dominar algunos de los tips más útiles y es por eso que a continuación se los presento.

Tomando como referencia un post de Adam Wathan & Steve Schoger en Medium simplificaré los tips que nos comparten y cómo afectan el diseño visual de una aplicación o un sitio o un simple objeto que necesitemos integrar con texto, botones e imágenes. Así que sin más vamos a ver.

1.Usar color y peso para crear una jerarquía, en vez de usar tamaño

Un buen consejo es poder utilizar tamaños de fuente para poder sobresaltar la jerarquí visual sobre lo que el usuario debería ver primero y así visualmente los siguientes elementos. Otro consejo más útil es utilizar colores y peso de fuente para hacer esa división sin tener que preocuparnos acerca del tamaño de la fuente, en principio.

El ejemplo lo muestra muy bien. Mientras que a la derecha tenemos diferentes textos con una importancia diferente, la única forma de separar la prioridad es a través del tamaño de la fuente, para por ejemplo, separar el título de la descripción de las letras pequeñas. De lado derecho tenemos lo mismo pero usando fuentes negritas y cambiando el color a un gris para el contenido que debería quedar en segundo plano.

Resumiento los puntos sería la recomendación así:

• Si el texto es importante hazlo más negrito o fuerte
• Si es un texto secundario usa un color de fuente más claro
• Todo el texto tiene el mismo tamaño

2. No uses colores grises en colores de fondo

Usamos en algunas ocasiones el color gris para poder hacer evidente que ese texto o acción queda como secundaria, pero no debería ser así. El color gris debe cumplir un objetivo de contraste no de claridad. En un fondo blanco funciona porque es un contraste del mismo color, es decir, el gris es un color que deriva del blanco.

Entonces para colores de fondo ¿qué color de fuente se debe usar?

• Hacer el color de texto del mismo color que el de fondo pero modificando la claridad o matiz hará que el contraste sea más efectivo.
• Usar el color gris como color de contraste solo sirve en dos ocasiones: cuando el color de fondo es blanco o es negro, ya que el gris es un color con un matiz diferente a esos dos colores, por lo tanto funciona el contraste.

3. Mueve un poco tus sombras

Una mala práctica al usar sombras es pensar que la sombra debe estar centrada en el elemento, por lo cual la sombra se asoma en los 4 lados de su contenedor o alrededor de todo un círculo. Esto está mal porque es una apariencia no tan natural, y piénsenlo ¿cuando han visto algún objeto que refeje una sombra completamente céntrica? prácticamente nunca, y nuestro cerebro que así es, por lo que al ver una sombra centrada totalmente hace ver que es un diseño un poco raro. La recomendación es la siguiente:

• La sombra debe ir siempre movida verticalmente hacia abajo, como si el solo se posicionara en la parte superior
• Si la sombra se mueve verticalmente hacia arriba es porque el elemento es un contenedor y la sombra añade profundidad interior, no exterior

4. Usa pocos bordes

El diseño actual de muchas interfaces tiene menos bordes o líneas que delimiten cada uno de los elementos, en una lista, por ejemplo, por lo cual es una mala estrategia tratar de representar visualmente esa separación de elementos. Para ello hay algunos consejos muy útiles para evitar eso conservando bien esa separación visual:

• Usa sombra exterior en vez de borde para separar elementos como una tarjeta
• Usa colores de fondo para separar en una interfaz paneles o secciones en una interfaz, como cuando tienes botones de acción de una sección de contenido
• Añade espacio estra entre secciones, de tal forma que el espacio indique visualmente que los contenidos se tratan de dos secciones diferentes

5. Usa el tamaño de íconos adecuado

Los íconos son un elemento gráfico para adornar, a menos que sean el objeto principal en un diseño, siempre deberían ser de un tamaño proporcionalmente pequeño al contenido que le continúan. Siempre que sea necesario tenemos que aplicar lo siguiente:

• El tamaño de los íconos deben ser sustanciamente pequeños cuando hablamos de listas o elementos ordenados verticalmente
• Los íconos muy detallados deben ser usados en diseños donde los íconos son los elementos principales, a partir de un tamaño mediano a grande
• Los íconos pequeños deben ser de un solo color y con formas simples, que permiten verlos sin ningún problema
• Los íconos pueden tener un fondo y ser redondeados, eso da una visibilidad de tamaño y forma que se puede adaptar más rápido

6. Usa colores para acentuar diferentes opciones

Dos tablas que licen igual no tienen el mismo sentido que dos que tienen un color de resaltado diferente. De la misma forma un menú que no sobresale la opción que está siendo seleccionada no da un significado propio de la acción que se quiere hacer.

7. No todos los botones necesitan un color de fondo

Esto nos lo ha enseñado muy bien Google. Su interfaz diferencia dos tipos de botones, los que tienen un color de fondo y los que no. Los que tienen un color de fondo son acciones que esperamos el usuario haga, los que no son acciones secundarias.

Tener acciones con colores de fondo confunde porque le damos la misma prioridad y no acercamos al usuario a hacer lo que se supone que tiene que hacer, como cuando queremos eliminar un post, si el usuario ya le dio clic a un botón de eliminar lo que esperaríamos en un cuadro flotanto es que nos confirme que lo desea eliminar, entonces esa confirmación debe resaltar sobre la acción de cancelar.

Vía Medium