7 reglas para crear un diseño simple

Mantenlo simple, estúpido. Este concepto data de 1960, cuando la Marina de los Estados Unidos implementó el principio KISS, que sostiene que la mayoría de los sistemas funcionan mejor si son simples, en lugar de complicados. Lo mismo es cierto para casi cualquier proyecto de diseño también.

La mayoría de los diseñadores gráficos aprenden sobre KISS al principio de sus carreras. Entonces, ¿cómo puedes hacerlo? Crear un diseño simple es un poco más complicado de lo que piensas. Aquí hay siete reglas para diseñar, que le ayudan a eliminar todo el desorden y crear una cuenta bellamente simple.

1. Establecer un objetivo por página

El comienzo de un diseño simple comienza con un objetivo para el proyecto y objetivos específicos para cada página del sitio web. Cada página debe llevar a los usuarios a una acción, excluyendo la navegación y el pie de página.

Esto podría ser cualquier cosa, desde hacer clic en un enlace, ingresar información en un formulario, mirar un video o jugar un juego. Pero cada página debe centrarse en una sola acción o conversión del usuario.

Demasiadas cosas que hacer pueden abrumar a los usuarios. Pueden perder de vista qué acciones deben completarse y pueden tomar la decisión menos deseable. Planifique el diseño de modo que cada página lleve a los usuarios a un único objetivo. Cada botón accionable que se encuentra arriba del desplazamiento y debajo del desplazamiento en la misma página debe hacer lo mismo. Esta coherencia ayuda a los usuarios a comprender por qué están en su sitio y qué se supone que deben hacer; La simplicidad de esas opciones hace que el diseño sea fácil y atractivo.

2. Stick a dos familias de tipo

Hay tantas pautas de diseño que recomiendan tres tipos de letra para un proyecto. Puede optimizar eso aún más con dos familias de tipos robustos.

Busque una familia de tipos que incluya varios pesos con mucho contraste entre las opciones normal y negrita o negra. Para un toque aún más especial, opte por una opción de visualización que incluya algunos caracteres alternativos que puede usar en titulares de gran tamaño.

Luego, todo lo que tiene que hacer es mezclar y combinar desde una tipografía de cuerpo y una tipografía de pantalla para obtener excelentes combinaciones de letras para todo el diseño. Utilice dos familias de tipos tal como lo haría si seleccionara más opciones con usos específicos para ciertos pesos o estilos.

Descubrirá que esto puede ayudarlo a crear una paleta de tipografía de fácil lectura y fácil de usar que sea fácil de manejar y tenga una consistencia visual.

3. Utilice una alineación consistente

Izquierda, centro o incluso a la derecha: cualquiera que sea la alineación que desee, 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 se combinan en agrupaciones.

Adaptable hace un gran trabajo con el texto en el control deslizante de la página de inicio. A pesar del texto con diferentes números de líneas en la imagen, cada título se alinea con el botón de llamada a la acción. El espaciado entre elementos también es consistente.

Lo que es más, es que esta alineación consistente se lleva a cabo en el desplazamiento con otros pares de titulares y CTA.

La alineación coincide con el flujo del deslizador, que también se mueve en una dirección complementaria. Las alineaciones a la izquierda y al centro 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 a la izquierda es la opción preferida.

4. Establecer jerarquía

Los usuarios no deberían tener que pensar en qué mirar o cómo moverse a través de un diseño. Incluso las composiciones visuales más simples deben tener una jerarquía distinta.

Comienza con una visual dominante. Puede ser una imagen, video o pantalla de texto o cualquier otra cosa que causará una primera impresión.

Luego debería haber algún tipo de texto que le diga al usuario lo que el diseño y el sitio web están tratando de comunicar. Esto es típicamente en la forma de un título simple que funciona con el visual dominante.

Tercero es un bit secundario de texto o acción que los usuarios deben completar. El elemento visual final es un menú de navegación. Los usuarios esperan encontrar todos estos elementos y el ojo está entrenado para moverse a través de los elementos básicamente en este orden. Hazlo fácil para ellos diseñando de esa manera.

5. Dar a los elementos un montón de espacio

Si no lo sabes por ahora, confía esto en la memoria: el espacio en blanco es tu amigo.

Dar a cada elemento en el diseño un montón de espacio. El espacio ayudará a llamar la atención sobre elementos individuales, ¿ocupar? Espacio? por lo que no está tentado de desordenar el lienzo y ayudar a crear un diseño general centrado.

El truco para usar bien el espacio es la consistencia. Establezca reglas para la cantidad de espacio que rodeará elementos individuales o que se ajustará entre líneas de texto. Si el diseño parece demasiado estéril, es posible que deba retroceder un poco el espacio. Sabrá que el espaciado es correcto cuando abre el diseño fresco y va directamente a los lugares que desea que los usuarios vean primero. (¿No está seguro de lo que son? Regrese al No. 4 - Establecer jerarquía.)

6. Contraste de amplificador

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

Para una opción moderna, pruebe una paleta de colores de contraste brillante para captar la atención del usuario. Los colores intensos harán que un diseño simple se sienta más complejo e interesante que una opción en blanco y negro. Para aprovechar al máximo el color de contraste, opte por tonos de posiciones opuestas en la rueda de colores con saturaciones similares. Si esa opción es demasiado para su gusto, pruebe con otros pares basados ​​en la rueda de colores. (Es posible que incluso encuentres un nuevo favorito inesperado, como la combinación de púrpura y verde azulado de arriba).

7. Usa íconos y elementos consistentes

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

Los elementos de la interfaz de usuario no deben ser una idea de último momento.

Es importante crear un conjunto de íconos y elementos de la interfaz de usuario y usarlos en todo el proyecto de la misma manera. (Incluso puede comprar o descargar una fuente de iconos o un kit de elementos de la interfaz de usuario si no desea crearlos desde cero).

Elija un color para los elementos, use la misma acción o efecto de desplazamiento para cada uno (uno para los elementos en los que se puede hacer clic y otro para los elementos que no lo son) y los elementos de tamaño según el uso. (Es aceptable tener un tamaño de icono y una opción de gran tamaño para los elementos que son un poco más gráficos).

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

Conclusión

Un diseño simple no tiene que ser completamente mínimo o carecer de elementos divertidos o elementos de interfaz de usuario. Un diseño simple es uno que es altamente utilizable e intuitivo, permitiendo a los usuarios participar sin preguntas o instrucciones complicadas.

Si bien hay un lugar para sitios web más complejos o interacciones de usuarios, la mayoría de los diseños de sitios web pueden beneficiarse del enfoque KISS. No lo pienses demasiado, y los usuarios tampoco tendrán que hacerlo.