El minimalismo es una tendencia que nunca morirá. No importa cuántas veces nos quedemos impresionados por los diseños impresionantemente intrincados, siempre habrá algo sobre la simplicidad que nos deja tan bien capturados.
Hoy analizaremos algunos de los aspectos clave del minimalismo en el diseño web junto con algunos ejemplos de diseñadores que lo hicieron bien.
Lo que no es
Casi siempre es una buena idea explorar lo que algo no está dentro de una discusión de lo que es. Examinar los opuestos nos da un contraste de puntos y ayuda a dar forma a la definición. Esencialmente, el minimalismo es un alejamiento de lo visualmente superfluo. Las paletas de colores y los elementos complejos ricamente diversos se renuncian a favor de colores sólidos simples y líneas básicas.
Considere los dos ejemplos a continuación. Estos sitios representan una clara alternativa a la mentalidad minimalista. Están visualmente bastante ocupados y pueden tomar un minuto para explorar antes de que sientas que tienes un conocimiento decente de lo que está pasando en la página.
¿Esto los hace malos diseños? Absolutamente no. Aunque muchos diseñadores prefieren claramente estilos específicos, asignar declaraciones de valor a un método dado es tan útil como decir que el azul es mejor que el verde o que la izquierda es mejor que la derecha; Simplemente no hay verdad en estas afirmaciones y no se gana nada en la discusión de tales posibilidades.
Si eres un diseñador profesional, deberías poder utilizar cualquier estilo de diseño para complacer la voluntad y la personalidad de tu cliente. La respuesta a la pregunta de qué no es el minimalismo es que no es un enfoque intrínsecamente mejor para diseñar sitios web. Entonces, la clave es no decidir si le gustan más los estilos de diseño ocupado, minimalista o de otro tipo, sino aprender a implementar cada método de manera efectiva. Examinemos algunas áreas en las que nos centramos al crear un diseño minimalista.
Tipografía
Su elección de tipografía juega un papel muy importante en la efectividad de su diseño minimalista. Elija fuentes limpias y sencillas con un alto nivel de legibilidad. Las fuentes finas a menudo se usan para transmitir minimalismo, pero no se limite a esta idea, ya que una fuente gruesa es una excelente manera de mostrar un elemento importante como un titular.
De la misma manera, incluso puede llevar a cabo un diseño minimalista sólido con una fuente de script complicada. Intente mantener su página y otra tipografía lo más simple posible utilizando un script para llamar la atención sobre un área única en la página.
Recursos adicionales
40 fuentes minimalistas y de alta calidad gratis
70 ejemplos de tipografía minimalista
Alineaciones de rejilla fuertes
Mi implementación favorita del minimalismo es cuando se hace para lograr el propósito de aumentar la usabilidad. Un buen diseño web minimalista a menudo se enfoca en eliminar la página a un número mínimo de secciones y elementos separados, de tal manera que la navegación del contenido sea casi nula de cualquier tipo de curva de aprendizaje o confusión visual.
Esto muy a menudo resulta en alineaciones basadas en cuadrícula fácilmente aparentes. Nuestros ojos están muy familiarizados con este patrón de contenido y, por lo general, no tienen problemas para clasificarlo en una mirada rápida. Además, hay algo en tu cerebro que simplemente quiere que los artículos se alineen correctamente y de manera predecible. Es agradable ver una página con una fuerte alineación tanto vertical como horizontalmente. Por el contrario, hay una especie de disonancia visual y psicológica cuando no podemos identificar de inmediato un patrón claro en la disposición de los elementos en una página.
Recursos adicionales
La cuadrícula de CSS de 1KB
ZURB CSS Grid Builder
Contraste
Si tiene un diseño minimalista en las obras y parece que le falta algo, es probable que agregar un poco de contraste mejorará dramáticamente el diseño. Cuando se maneja con una mano practicada, el contraste es la clave de todo buen diseño (defenderé esta afirmación general hasta la muerte). En el diseño web minimalista, la página está tan reducida que no hay mucho más para ejecutar que un contraste inteligente.
El contraste es un concepto que todos entendemos de forma inherente, pero el hecho de conocerlo puede mejorar drásticamente sus diseños. Echa un vistazo al diseño simple a continuación:
Realmente no hay mucho que hacer aquí en cuanto a color y bonitas imágenes. Sin embargo, el diseño es bastante atractivo debido al fuerte uso del contraste. El encabezado y el área de contenido están claramente separados y son reconocibles al instante por lo que son (el pie de página usa el mismo truco). La copia en la página difiere en tamaño y audacia para llamar su atención sobre las partes del mensaje que el diseñador consideró importantes.
La página de arriba usa tonos de gris para la diferenciación, pero puedes usar diferentes colores para lograr lo mismo.
Solo recuerda que hay una gran diferencia entre los colores contrastantes y los colores conflictivos. El hecho de que dos colores sean muy diferentes no significa que sus ojos perciban la diferencia como agradable. Asegúrese de estar al tanto de su teoría del color antes de tomar decisiones drásticas.
Lo principal para recordar con contraste lo dice mejor el autor del diseño Robin Williams: "¡No seas un enclenque!" Lo que quiso decir con esto es que un poco de contraste no sirve de mucho. Si vas a hacer algo más grande para que destaque, hazlo mucho más grande. Si lo vas a hacer más audaz, hazlo realmente audaz! Debería poder decir en un instante si el contraste está ahí. Vemos esto a menudo cuando el texto está en negrita. ¡A veces la diferencia entre el texto en negrita y el texto regular es tan leve que realmente debes mirar para ver la diferencia! En este caso, el texto en negrita no sirve para nada y debería ser el mismo que el resto para evitar la confusión visual.
Espacio en blanco
Piense en los ejemplos ocupados al principio de este artículo. Estos diseñadores optaron por llenar casi cada pulgada de la pantalla con algo visualmente interesante. El minimalismo vuelve a tomar el enfoque opuesto.Ofrece a los componentes principales de la página un amplio espacio para respirar que los distingue.
El espacio en blanco hace que el espectador se sienta cómodo y menos claustrofóbico. También le ayuda al diseñador a tener control sobre dónde desea que se vea el espectador. Algunos diseñadores insisten en que los espectadores leerán cada página de izquierda a derecha siguiendo un patrón en z. Esto simplemente no es cierto en todos los casos. Observe cómo el diseñador de arriba usó espacios en blanco y una imagen brillante para atraer sus ojos a la imagen de la pantalla de la computadora. Tus ojos comienzan en el centro de la imagen, ¡no en la parte superior izquierda!
Esto tiene todo que ver con el contraste, como se mencionó anteriormente, y el volumen de espacio ocupado por un objeto dado frente al espacio en blanco que lo rodea. Para tener una idea de la cantidad correcta de espacio en blanco que se debe utilizar al realizar un diseño inicial, a menudo convierto los objetos que colocaré en la página a formas extremadamente básicas en Illustrator. Entonces puedo barajar y cambiar el tamaño de los objetos rápidamente sin distraerme con su contenido. Hacer el diseño de esta manera te obliga a pensar en el equilibrio de tu página antes de que te acerques a elementos estéticos más complejos.
Como puede ver, el diseño de Jolicloud es bastante equilibrado y atractivo cuando se observa de esta manera. Lo único que me molesta es que los enlaces de navegación no se alinean con el lado derecho del contenido. Lo exageré un poco en la versión simplificada para que sea más fácil de ver, pero definitivamente es así en la imagen original también. Nuevamente, vemos el beneficio de reducir la página a formas básicas, ya que se hace evidente de inmediato que los enlaces de navegación están algo mal posicionados (ni alineados en el centro ni alineados a la derecha sino en algún punto intermedio).
Más artículos sobre minimalismo
¿No se puede obtener suficiente minimalismo? Echa un vistazo a los grandes artículos y sitios a continuación:
- 21 recursos especialmente para los amantes del minimalismo: Vandelay Design
- Escaparate de diseños limpios y minimalistas: Smashing Magazine
- Minimalismo en la Web: Inspiración de diseño y temas de WP: Tutorial 9
- 20 hermosos temas minimalistas de WordPress: seis revisiones
- 25 hermosos diseños de sitios web minimalistas: Vandelay Design
Conclusión
Eso envuelve nuestra discusión sobre el minimalismo en el diseño web. Háganos saber lo que piensa de esta tendencia en los comentarios a continuación. También asegúrese de incluir cualquier enlace a sus sitios favoritos que ejemplifique el minimalismo en el diseño web.