7 reglas para crear un diseño sencillo

Keep it simple, stupid" (Mantenlo simple, estúpido). Este concepto se remonta a 1960, cuando la Marina estadounidense puso en práctica el principio KISS, que sostiene que la mayoría de los sistemas funcionan mejor si son sencillos, en lugar de complicados. Lo mismo puede decirse de prácticamente cualquier proyecto de diseño.

La mayoría de los diseñadores gráficos aprenden el concepto KISS al principio de su carrera, pero ¿cómo puedes hacerlo tú? Crear un diseño sencillo es un poco más complicado de lo que crees. Aquí tienes siete reglas para diseñar, que te ayudarán a eliminar todo el desorden y crear una cuenta bonita y sencilla.

Ver más

1. Establecer un objetivo por página

El inicio de un diseño sencillo comienza con un objetivo para el proyecto y metas específicas para cada página del sitio web. Cada página debe conducir a los usuarios a una acción, excluyendo la navegación y el pie de página.

Esto puede ser cualquier cosa, desde hacer clic en un enlace, introducir información en un formulario, ver un vídeo o jugar a un juego. Pero cada página debe centrarse en una única acción o conversión del usuario.

Demasiadas cosas que hacer pueden abrumar a los usuarios, que pueden perder de vista qué acciones deben realizar y optar por la menos deseable. Planifique el diseño de modo que cada página conduzca a los usuarios a un único objetivo. Cada botón de acción por encima del desplazamiento y por debajo del desplazamiento en la misma página debe hacer lo mismo. Esta coherencia ayuda a los usuarios a entender por qué están en su sitio y qué estánLa sencillez de estas opciones hace que el diseño sea fácil y atractivo.

2. Limítese a dos familias tipo

Hay muchas directrices de diseño que recomiendan tres tipos de letra para un proyecto. Puede simplificarlo aún más con dos familias tipográficas robustas.

Busque una familia tipográfica que incluya varios pesos con mucho contraste entre las opciones normal y negrita o negro. Para darle aún más estilo, opte por una opción de visualización que incluya algunos caracteres alternativos que pueda utilizar en titulares de gran tamaño.

A continuación, todo lo que tiene que hacer es mezclar y combinar un tipo de letra de cuerpo y un tipo de letra de pantalla para obtener grandes combinaciones de letras para todo el diseño. Utilice dos familias tipográficas del mismo modo que lo haría si seleccionara más opciones con usos específicos para determinados pesos o estilos.

Descubrirá que esto puede ayudarle a crear una paleta tipográfica muy legible y fácil de usar, fácil de gestionar y con coherencia visual.

3. Utilizar una alineación coherente

A la izquierda, en el centro o incluso a la derecha: sea cual sea la alineación que prefiera, manténgala en todo el diseño. Esto incluye la alineación de elementos similares, como cuadros de texto y elementos que no son iguales pero encajan en agrupaciones.

Adaptable hace un gran trabajo en este sentido con el texto del deslizador de la página de inicio. A pesar de que el texto tiene diferentes números de líneas en la imagen, cada titular se alinea con el botón de llamada a la acción. El espaciado entre los elementos también es coherente.

Además, esta alineación coherente se mantiene en el desplazamiento con otros pares de titulares y CTA.

La alineación coincide con el flujo del control deslizante, que también se mueve en una dirección complementaria. Las alineaciones izquierda y central son las opciones más comunes cuando se trata de elementos de texto porque son las más legibles. Con texto más largo, la alineación izquierda es la opción preferida.

4. Establecer la jerarquía

Los usuarios no deben tener que pensar qué mirar o cómo moverse por un diseño. Incluso las composiciones visuales más sencillas deben tener una jerarquía definida.

Puede ser una imagen, un vídeo, un texto o cualquier otra cosa que cause una primera impresión.

A continuación, debe haber algún tipo de texto que explique al usuario lo que el diseño y el sitio web intentan comunicar, normalmente en forma de un titular sencillo que encaje con el elemento visual dominante.

El tercero es un texto secundario o una acción que los usuarios deben completar. El último elemento visual es un menú de navegación. Los usuarios esperan encontrar todos estos elementos y el ojo está entrenado para moverse por los elementos básicamente en este orden. Facilíteselo diseñando de esa manera.

5. Deje mucho espacio a los elementos

Si aún no lo sabes, memorízalo: el espacio en blanco es tu amigo.

Deja espacio suficiente para todos los elementos del diseño. El espacio ayudará a llamar la atención sobre los elementos individuales, ocupará "espacio" para que no tengas la tentación de desordenar el lienzo y ayudará a crear un diseño general que tenga foco.

El truco para utilizar bien el espacio es la coherencia. Establece reglas sobre la cantidad de espacio que debe rodear los elementos individuales o que debe caber entre las líneas de texto. Si el diseño acaba pareciendo demasiado árido, puede que tengas que reducir un poco el espaciado. Sabrás que el espaciado es correcto cuando abras el diseño fresco y vayas directamente a los lugares que quieres que los usuarios vean primero. (¿No estás seguro de cuáles son? Vuelve al n.º 4 -Establecer jerarquía).

6. Aumentar el contraste

Los elementos de diseño de alto contraste -desde la elección de colores hasta el tamaño de los elementos- pueden dar a un proyecto la delicadeza visual que necesita, incluso en los marcos más minimalistas.

Para una opción de moda, pruebe con una paleta de colores brillantes y contrastados para captar la atención del usuario. Los colores llamativos harán que un diseño sencillo parezca más complejo e interesante que una opción en blanco y negro. Para sacar el máximo partido a los contrastes de color, opte por tonos de posiciones opuestas en la rueda cromática con saturaciones similares. Si esta opción es demasiado para su gusto, pruebe con otras parejas basadas en la rueda cromática. (Podríaincluso encontrar un nuevo favorito inesperado, como la combinación de morado y verde azulado de arriba).

7. Utilice iconos y elementos coherentes

La coherencia en el diseño es uno de los secretos mejor (y peor) guardados del diseño de éxito. Es una de esas cosas que se olvidan con demasiada frecuencia, ya que los proyectos de diseño están plagados de múltiples estilos de botones o iconos de redes sociales que simplemente no coinciden con el resto de la iconografía del sitio web.

Los elementos de la interfaz de usuario no deben pensarse a última hora.

Es importante crear un conjunto de iconos y elementos de interfaz de usuario y reglas y utilizarlos en todo el proyecto de la misma manera. (Incluso puedes comprar o descargar un kit de fuentes de iconos o elementos de interfaz de usuario si no quieres crearlos desde cero).

Elija un color para los elementos, utilice la misma acción o efecto hover para cada uno (uno para los elementos en los que se puede hacer clic y otro para los que no) y dimensione los elementos en función del uso. (Es aceptable tener tanto un tamaño de icono como una opción de gran tamaño para los elementos que son un poco más gráficos).

Por ejemplo, Praticca Vending Machines utiliza iconos de gran tamaño para indicar a los usuarios que hay más información. Dentro de un icono de color hay un signo +. Los tres iconos son idénticos, aparte del color. Todos hacen lo mismo al pasar el ratón por encima y todos actúan de la misma manera cuando el usuario hace clic. El mismo icono se utiliza más pequeño en todo el sitio para iniciar nuevos fragmentos de contenido y ayudar a los usuarios a escanear el texto.

Conclusión

Un diseño sencillo no tiene por qué ser completamente minimalista o carecer de elementos divertidos o bondades de la interfaz de usuario. Un diseño sencillo es aquel que es muy fácil de usar e intuitivo, que permite a los usuarios participar sin preguntas ni instrucciones complicadas.

Aunque hay sitio para sitios web o interacciones de usuario más complejos, la mayoría de los diseños de sitios web pueden beneficiarse del enfoque KISS. No le dé demasiadas vueltas, y los usuarios tampoco tendrán que hacerlo.