7 reglas para crear un diseño simple
Mantenlo simple, estúpido. Este concepto data de 1960 cuando la Marina de los EE. UU. 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 lo ayudan a eliminar todo el desorden y crear una cuenta bellamente simple.
Explore los recursos de diseño
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 para que cada página lleve a los usuarios a un único objetivo. Todos los botones accionables sobre el desplazamiento y debajo del desplazamiento en la misma página deben 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. Se adhieren a dos familias tipo
Hay muchas 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 robustas.
Busque una familia de tipos que incluya múltiples pesos con mucho contraste entre las opciones regulares y negrita o negras. Para obtener aún más estilo, 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. Use dos familias de tipos 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 altamente legible y fácil de usar que es fácil de administrar y tiene consistencia visual.
3. Use alineación consistente
Izquierda, centro o incluso a la derecha: cualquier 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 que encajan en grupos.
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 espacio entre los 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 titulares y pares de CTA.
La alineación coincide con el flujo del control deslizante, 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 izquierda es la opción preferida.
4. Establecer jerarquía
Los usuarios no deberían tener que pensar qué mirar o cómo moverse a través de un diseño. Incluso las composiciones visuales más simples deberían tener una jerarquía distinta.
Comienza con una visual dominante. Puede ser una imagen, un video o una pantalla de texto o cualquier otra cosa que causará una primera impresión.
Entonces 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 generalmente se presenta en forma de un título simple que funciona con el visual dominante.
El tercero es un fragmento secundario de texto o acción para que lo completen los usuarios. 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. Facilítelos diseñando de esa manera.
5. Déle a los elementos mucho espacio
Si aún no lo sabe, guarde esto en la memoria: el espacio en blanco es su amigo.
Dé a cada elemento en el diseño mucho espacio. El espacio ayudará a llamar la atención sobre elementos individuales, ocupará "espacio" para que no se sienta tentado a abarrotar el lienzo y ayude a crear un diseño general que tenga foco.
El truco para usar bien el espacio es la consistencia. Establezca reglas para la cantidad de espacio que rodeará elementos individuales o se ajustará entre líneas de texto. Si el diseño termina pareciendo demasiado árido, es posible que deba retroceder un poco el espacio. Sabrá que el espaciado es correcto cuando abra el diseño nuevo y vaya directamente a los lugares que desea que los usuarios vean primero. (¿No está seguro de cuáles son? Vuelva al No. 4 - Establecer jerarquía).
6. Amplificar el contraste
Los elementos de diseño de alto contraste, desde las opciones de color hasta el tamaño de los elementos, pueden proporcionar 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 brillantes y contrastantes para captar la atención del usuario. Los colores llamativos 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 contrastante, opte por tonos de posiciones opuestas en la rueda de colores con saturaciones similares. Si esa opción es demasiado para su gusto, pruebe otros pares basados en la rueda de color. (Incluso puede encontrar un nuevo favorito inesperado, como la combinación de púrpura y verde azulado anterior).
7. Use iconos y elementos consistentes
La consistencia en el diseño es uno de los secretos mejor (y peores) guardados del diseño asesino. Es una de esas cosas que se olvida 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 el resto de la iconografía del sitio web.
Los elementos de la interfaz de usuario no deberían ser una idea de último momento.
Es importante crear un conjunto de iconos y elementos de interfaz de usuario y reglas y usarlos durante todo el proyecto de la misma manera. (Incluso puede comprar o descargar una fuente de icono o un kit de elementos de interfaz de usuario si no desea crearlos desde cero).
Elija un color para los elementos, use la misma acción de desplazamiento o efecto 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 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 íconos son idénticos aparte del color. Todos hacen lo mismo al pasar el mouse y todos actúan de la misma manera cuando un usuario hace clic. El mismo ícono 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 altamente intuitivo y utilizable, lo que permite 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.
