Diez pautas para diseño de interfaces

Diseño UX
25/4/2018
|
Samuel Gimeno Artigas
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

1J9cLqeIrNQ3j3FzQrMnxzg e1524643009530
Complementarios en blanco y negro. Imagen de Mhariell Riel

Hoy vamos a tener un post más práctico sobre diseño de interfaces con diez pautas para diseño de interfaces sobre cómo mejorar su aspecto con unos consejos básicos. Las pautas están extraidas de un artículo de Mhariell Riel. Os recomiendo que aparte de leer este resumen, echéis un vistazo al artículo original que incluye muchos ejemplos de uso que prefiero que os explique alguien con buena base de diseño gráfico.

Jerarquía de textos y contraste

Una de la grandes olvidadas a la hora de diseñar un interfaz es usar bien los tamaños de letra para crear una jerarquía entre ellos para diferenciar por importancia y dentro de ellos diferenciar por el contraste de los colores los que el usuario debe ver fácilmente de los que debe ver en segundo plano.

La mejor forma es usar varios tamaños y un color principal de fuente (negro) para los textos en primer plano y uno secundario (gris) para los textos de menor jerarquía.

No crees múltiples tonos de negro

Riel nos recomienda que no usemos diferentes tonos de negro, es decir tonos de colores cercanos al negro, sino que usemos el negro con diferentes opacidades en nuestras interfaces.

Haz las cuentas para los colores

Riel dice que un error común y que los usuarios notan aunque no lo sepan es que los colores que no son complementarios o no hacen uso de los complementarios. A los usuarios si se combinan mal, les “hacen mal” los ojos por usar una expresión popular.

Usa el espaciado para separar grupos

Riel nos recomienda que la opción más simple para separar grupos (fuera de separarlos con una línea) es dejar un generoso espacio en blanco. Nos aconseja seguir la ley de la proximidad: “Los objetos cercanos tienden a agruparse”.

Usa colores para separar filas

Esta es una pauta clásica de diseño, pero que con la introducción de los diseños planos se ha olvidado. Normalmente con usar dos colores (blanco y un tono de gris) intercalados es suficiente para que los usuarios diferencien las filas de una tabla.

Multiplicar en lugar de sombrear el texto de las cabeceras gráficas

Esto es un recurso para cabeceras con imágenes dinámicas es sombrear el texto para diferenciar el texto de la imagen de fondo. Riel nos recomienda usar la opción “Multiplicar” en lugar de “Sombrear” para mejorar la legibilidad del texto.

Usa la largura de la línea ideal

La largura “ideal” de una línea de texto es entre 45 y 65 carácteres para que se pueda leer de un vistazo sin agobiar. Riel nos recomienda poner ese largo justificando a la izquierda y centrando el bloque de texto en el bloque que lo contiene.

No reinventes la rueda

Imagen de Mhariell Riel

Riel nos dice que muchas veces se reinventa la rueda y se intentan hacer nuevos diseños cuando los clásicos son mejores. Nos pone el ejemplo de los diseños de tarjetas donde en lugar usar un diseño clásico y funcional, se reinventan con diseños icónicos que a los usuarios les cuesta pensar qué es lo que significa el icono y qué se indica en él.

Usa los colores de marca como acentuadores

Muchas veces se usan los colores de marca de manera incorrecta. Riel nos recomienda que usemos los colores de marca como acentuadores del interfaz, es decir que no los usemos para ocupar la mayor parte del interfaz, sino en pequeñas pinceladas.

Haz que las viñetas o los tics pendan

1X0mKGU XpzbTOrkLhChHBw
Imagen de Mhariell Riel

En lugar de esconder las viñetas o los tics, Riel nos apunta que sácandolas fuera del texto y haciéndolas que pendan de manera que se vean separadas visualmente del resto de elementos del texto.

Conocer pautas básicas de diseño nos permite mejorar los diseños de los interfaces y no reinventar la rueda como nos aconseja Riel.

Desde el Estudio es una cosa que siempre os recomendamos es estudiar las bases de diseño: jerarquía visual y gráfica, teoría y psicología del color, colores complementarios, agrupación de elementos…

Ya que conociendo aunque sea de forma rudimentaria estos elementos mejoraremos nuestras soluciones de diseño y haremos que sean mejores para los usuarios y no les resulten desagradables, porque el mejor diseño es el que es invisible para el usuario.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.