Los entresijos del diseño minimalista
El minimalismo es una tendencia que nunca morirá. No importa cuántas veces nos sorprendan los diseños intrincadamente impresionantes, siempre habrá algo en la simplicidad que nos dejará igual de cautivados.
Hoy veremos algunos de los aspectos clave del minimalismo en el diseño web junto con algunos ejemplos de diseñadores que acertaron.
Explore los recursos de diseño
Lo que no es
Casi siempre es una buena idea explorar qué algo no está dentro de una discusión de lo que es. Examinar los opuestos nos da un punto de contraste y ayuda a dar forma a la definición. Esencialmente, el minimalismo es una desviación de lo visualmente superfluo. Las paletas de colores ricamente diversos y los elementos complejos se eligen en favor de colores sólidos simples y líneas básicas.
Considere los dos ejemplos a continuación. Estos sitios representan una alternativa clara a la mentalidad minimalista. Visualmente están bastante ocupados y pueden tomar un minuto para explorar antes de que sientas que tienes una comprensión decente de lo que está sucediendo en la página.
¿Esto los convierte en malos diseños? Absolutamente no. Aunque muchos diseñadores claramente favorecen 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 declaraciones y no se gana nada en la discusión de tales posibilidades.
Si eres un diseñador profesional, deberías poder utilizar cualquier número de estilos 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 inherentemente mejor para diseñar sitios web. La clave es no decidir si le gusta más el estilo ocupado, minimalista o cualquier otro número de estilos de diseño, sino aprender a implementar cada método de manera efectiva. Examinemos algunas áreas para enfocarnos 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 simples y limpias con un alto nivel de legibilidad. Las fuentes delgadas 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.
Del mismo modo, incluso puede lograr 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 mientras usa un guión para llamar la atención sobre un área única de la página.
Recursos adicionales
40 fuentes minimalistas y de alta calidad gratuitas
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 de contenido esté casi vacía de cualquier tipo de curva de aprendizaje o confusión visual.
Esto a menudo resulta en alineaciones basadas en cuadrículas fácilmente aparentes. Nuestros ojos están muy familiarizados con este patrón de contenido y, por lo general, no tienen problemas para analizarlo rápidamente. 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 inmediatamente un patrón claro en la disposición de los elementos en una página.
Recursos adicionales
La cuadrícula CSS de 1 KB
ZURB CSS Grid Builder
Contraste
Si tiene un diseño minimalista en proceso y parece que le falta algo, es probable que agregar algo de contraste mejore dramáticamente el diseño. Cuando lo maneja una mano experta, el contraste es la clave de todo buen diseño (defenderé esta declaración general hasta la muerte). En el diseño web minimalista, las páginas están tan reducidas que hay poco más para ejecutar que un contraste inteligente.
El contraste es un concepto que todos entendemos de manera inherente, pero que se dé cuenta de ello puede mejorar drásticamente sus diseños. Echa un vistazo al diseño simple a continuación:
Realmente no está sucediendo mucho aquí en cuanto a color e imágenes bonitas. 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 e instantáneamente reconocibles por lo que son (el pie de página usa el mismo truco). La copia en la página difiere en tamaño y negrita para llamar su atención sobre las partes del mensaje que el diseñador consideró importantes.
La página anterior usa tonos de gris para la diferenciación, pero también puede usar diferentes colores para lograr lo mismo.
Solo recuerda que hay una gran diferencia entre colores contrastantes y contradictorios. El hecho de que dos colores sean muy diferentes no significa que sus ojos percibirán la diferencia como agradable. Asegúrese de estar al día con su teoría del color antes de tomar decisiones drásticas.
Lo mejor para recordar con el contraste lo dice mejor el autor de diseño Robin Williams: "¡No seas un debilucho!" Lo que ella quiso decir con esto es que un poco de contraste no sirve de mucho. Si vas a hacer algo más grande para que se destaque, hazlo mucho más grande. Si vas a hacerlo más audaz, ¡hazlo realmente audaz! Debería poder saber en un instante si el contraste está ahí. Esto lo vemos a menudo cuando el texto está en negrita. ¡A veces la diferencia entre el texto en negrita y el texto normal es tan pequeña que tienes que mirar realmente para ver la diferencia! En este caso, el texto en negrita no sirve para nada y debe ser el mismo que el resto para evitar la confusión visual.
Espacio en blanco
Piense en los ejemplos ocupados al comienzo de este artículo. Estos diseñadores optaron por llenar casi cada centímetro de la pantalla con algo visualmente interesante. El minimalismo nuevamente toma el enfoque opuesto. Le da 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 a que el diseñador tenga control sobre dónde desea que mire el espectador. Algunos diseñadores insisten en que los espectadores leerán cada página de izquierda a derecha siguiendo un patrón z. Esto simplemente no es cierto en todos los casos. Observe cómo el diseñador anterior usó espacios en blanco y una imagen brillante para atraer sus ojos hacia la imagen de la pantalla de la computadora. ¡Tus ojos comienzan en el centro de la imagen, no en la esquina 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 a su alrededor. Para tener una idea de la cantidad correcta de espacios en blanco para usar al realizar un diseño inicial, a menudo convierto los objetos que colocaré en la página en formas extremadamente básicas en Illustrator. Entonces puedo barajar y cambiar rápidamente el tamaño de los objetos 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 incluso te acerques a elementos estéticos más complejos.
Como puede ver, el diseño de Jolicloud es bastante equilibrado y atractivo cuando se mira 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 también es así en la imagen original. Una vez más, 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 colocados de manera algo incómoda (ni alineados al centro ni alineados a la derecha, sino en algún punto intermedio).
Más artículos sobre minimalismo
¿No puedes tener suficiente minimalismo? Echa un vistazo a los excelentes artículos y sitios a continuación:
- 21 recursos especialmente para los amantes del minimalismo: Vandelay Design
- Muestra 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: diseño Vandelay
Conclusión
Eso concluye 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 enlaces a sus sitios favoritos que ejemplifiquen el minimalismo en el diseño web.
