Qué es una página web minimalista

¿Te ha pasado alguna vez que has aterrizado en una web y te has sentido perdido? Abrumado por la cantidad de opciones, colores, formas, imágenes, disparidad en los textos…

Seguro que muchas más veces de las que te has parado a contar.

Es incluso muy probable que cerraras la página, volvieses atrás o navegases desde ahí a otra web diferente.

Seguro que no era un diseño minimalista bien ejecutado.

El poder de esa técnica en una web es tal, que te incita a leer y deleitarte con la simpleza de su diseño.

Aprende por qué esta tendencia se ha convertido en la reina absoluta del diseño actual en internet y las interfaces en general son cada vez más sencillas e intuitivas.

Fondo blanco y tipografía negra, el Bimbo del minimalismo

Si eres de fuera de España o tienes bastantes menos primaveras que yo en tu cuerpo serrano, te aclararé que «Bimbo» es la marca de «pan de molde» más famosa de este país (e ignoro en cuántos más).

Es un caso flagrante de vulgarización de marca, en el que se acabó llamando al producto final como la marca que lo popularizó: pan Bimbo.

Pasa igual con las páginas minimalistas, casi todo el que ve una web con el fondo blanco y las letras en tonos grises piensa que está ante un diseño minimalista con todas las de la ley.

Es más, muchos huyen de él porque piensan que es eso, «una página en blanco con texto negro», algo muy aburrido y simplón.

Es fácil dar con un diseño así, pero si no transmite nada no es minimalismo, es un diseño mal ejecutado.

Optar por afrontar el diseño de una página web minimalista con fondo blanco y tonos grises es solo eso, una opción.

Pero que la web tenga esa combinación no la convierte automáticamente en minimalista.

Es la más popular porque suele ofrecer buenos resultados y es ideal para empezar, pero por ser la más utilizada también es la más fallida.

Un buen «diseño mínimo» no tiene por qué ser una página monocromática sobre fondo blanco, y llegar a él es mucho más complejo que crear un web recargada de efectos, colores, imágenes y elementos.

Qué elementos contiene una página web minimalista y por qué

La verdad es que explicar esto es más fácil en negativo.

Los elementos que debe contener un buen diseño minimalista son todos aquellos que no hemos podido sustraer, porque entonces la página que queremos crear no tendría sentido.

La técnica de diseño por sustracción no solo se aplica en la creación de webs, sino en todo tipo de diseño industrial y de software.

Qué es el diseño por sustracción

Se basa en eliminar todo componente que no es necesario para el fin último del producto, todo lo superfluo.

Algo mucho más complicado de lo que puede parecer, sobre todo si tu producto debe entregar muchas características, como por ejemplo, un ordenador portátil (por eso los Macbook de Apple son tan caros, entre otras cosas).

También, digamos, que es como «ofrecer más con menos».

Siempre debes hacerte este tipo de preguntas durante la planificación del diseño:

• ¿De verdad necesito cinco colores en la web?
• ¿Tengo que tener dos menus y cuatro columnas?
• ¿Va a ser necesaria una cabecera?
• ¿Mejorará la legibilidad si introduzco una tipografía diferente más?
• ¿Debo poner 7 imágenes en cada página?

Hay que conocer muy bien al cliente y al producto para darle lo que quiere sin entorpecer el diseño con cosas que no necesita.

Elementos de una página minimalista

No son más que el mínimo necesario para que una página web se considere como tal. Y estos son:

• Navegación: un menú a través del cual el usuario pueda desplazarse por el contenido que la página pone a su disposición.
• Área de contenido: un lugar reservado, que no tiene por qué ser estático, donde va a mostrarse el contenido de la página.

Pero incluso puedes fusionarlos, y que se conviertan en uno solo.

A partir de ellos, solo tu imaginación y habilidad es el límite.

¿Crear una buena página minimalista es más fácil y rápido?

En absoluto.

Hacer un uso mínimo del color, el texto, las imágenes, escoger la tipografía y espaciado adecuados y decidir cómo transmitir más con menos es de todo menos rápido y fácil.

De hecho es mucho más difícil y lento porque debes tener muy claro el objetivo de la misma, a quién va dirigida, qué necesita para funcionar mejor que cualquier otra y cómo la optimización de todo ello va a dar como resultado una mejor usabilidad con menos recursos.

Cuantos menos elementos pongas, más efectivos y claros deben ser los que incluyas.

Todo ello sin perder de vista la usabilidad, el atractivo visual, el branding y la diferenciación.

Encontrar el punto exacto entre lo que necesitas mostrar y lo que te hace único es el factor del éxito.

¿Usar colores rompe el minimalismo?

Como ya habrás deducido si has llegado a leer hasta aquí:

No, los colores no son el mal.

• Puedes basar una web en el color verde y crear un diseño minimalista perfecto.
• Puedes basar una web en 12 tonalidades diferentes de verde y crear una página muy agobiante y recargada.
• Puedes basar una web en el verde y el rosa y crear algo que no pega ni con Super Glue (otra «vulgaridad de marca»).

El uso del color debe ser efectivo y es otra ciencia por sí misma.

Por regla general no necesitas más de dos o tres colores para crear un buen diseño: uno principal, que será el color corporativo y uno o dos secundarios de apoyo para destacar llamadas a la acción u otros elementos.

Es imprescindible que los colores se escojan con sentido.

Lo más importante es que sea una paleta de colores en armonía, y hay cientos de herramientas gratuitas on line para generarlas, como por ejemplo Coolors.

Te puedes hacer mirar «lo que inspira» cada color en un diseño, pero es bastante secundario.

¿Qué pasa con las imagenes?

Los colores de las imágenes que muestres no cuentan como colores diferentes, pero sí que deberían ir acorde a los colores utilizados en el diseño general, sobre todo en el caso de una web que no es una tienda on line de venta de productos.

Para vender productos físicos necesitas mostrarlos en imágenes y los colores de los mismos no siempre van a coincidir con los del diseño de tu página (también hay trucos para evitar esto, como el tratamiento del color de las imágenes).

Pero si vas a introducir imágenes como apoyo al diseño de la web, éstas deberían ir en consonacia con los colores utilizados en la misma y no romper el esquema, sino complementarlo o acentuarlo.

Puedo ilustrar esto con un ejemplo (y a la vez curiosidad) extraído de este mismo sitio, monomalista.com:

En la home muestro esta imagen que ves arriba (una de las tres imagenes que hay en toda la web, de momento).

Contiene de por sí todos los colores que luego uso en la web completa, ni uno más ni uno menos (en diferentes tonos, obviamente).

En mi caso me sirvió de un apoyo enorme para dar variedad y mantener una coherencia.

Aunque el 99% de los usuarios no van a notarlo de forma consciente, crea cierta llamada a la atención en tu cerebro, que percibirá que lo que está explorando forma parte de un todo.

Cómo tratar los textos en una página web minimalista

Los textos no es que sean importantes en un diseño, sino que son cruciales.

El texto es el corazon de la web, es lo que vas a contar, con lo que vas a vender (salvo que tu diseño se componga solamente de imágenes porque así lo has decidido en una web de fotografía, por ejemplo).

Una web basada solo en texto puede ser muy atractiva de por sí.

Y tratar los mismos no es solamente decidir qué tipografia usar: con palo seco («serifa») o sin palo seco.

Los textos en un diseño minimalista

Es fundamental que tengas en cuenta la coherencia y todos estos aspectos a la hora de implementar texto en tus diseños en general, no solo si se trata de un diseño con fuerte componente minimalista:

• Familia de la tipografía: escogerla mal es echar por tierra todo el diseño de la web. Profundizaré en este tema en otra entrada del blog, pero seguro que «Comic Sans» te suena de algo, y de nada bueno. 😉
• Tamaño: No varíes los tamaños de la tipografía de una página a otra; si has asignado a un elemento una tipografía determinada con ciertas características, mantenla exacta para los elementos de la misma categoría.
• Estilo: ¿irá en negrita?, ¿en cursiva?, ¿normal?, ¿todo en mayúsculas?, ¿subrayado? En general, conviene no sobrecargar la web con diferentes estilos, y el abuso de las mayúsculas y el subrayado no es una buena práctica.
• Espaciado entre letras: el espacio entre letras de cualquier fuente se controla con el atributo letter-spacing y en determinados casos es conveniente ajustarlo, por ejemplo para destacar una llamada a la acción.
• Espaciado entre líneas: hablo del espacio entre un reglón y el siguiente (es diferente del espacio entre párrafos). Es más frecuente controlar el espacio entre líneas que el espaciado entre letras. Se hace con el atributo line-height, y un mal uso del mismo puede hacer que el texto en tu web sea muy agobiante de leer.
• Peso de la fuente: el font-weight es algo confuso porque va un poco ligado al estilo. Es decir, a una letra en negrita se le ha asignado un valor determinado de peso. Y el peso es el grosor de la fuente. El valor aumenta de 100 en 100, siendo 100 el más fino y 900 el más ancho, y se considera que un texto está en Negrita (bold) con un valor de 700 de peso. Es importante encontrar el punto exacto: ponerlo demasiado fino o demasiado grueso puede afectar positiva o negativamente a la legibilidad y el atractivo del sitio (igual que los kilitos de más o de menos en las personas).
• Espacio entre párrafos: esto no es un valor que se controle desde la tipografía en sí, pero va muy ligado a la misma. Debes tener en cuenta el espaciado entre párrafos tanto como el espacio entre líneas, pues este suele quedar mejor con un tipo de letra u otra, o con los valores que hayas decidido aplicar a la tipografía; también afecta mucho a la legibilidad.
• Color del fondo: otro aspecto indirectamente relacionado con el texto es el color del fondo sobre el que se va mostrar. El color del fondo y el del texto deben formar un buen equipo; si tienes que esforzarte lo más mínimo para leerlo debido a la combinación de colores: cámbiala, está mal. No te empeñes en hacer el texto más grande o pesado para que se vea mejor con ese color.

Recuerda que una web con el texto bien controlado es prácticamente el 70% del éxito del diseño.

Vale, el porcentaje me lo acabo de inventar; pero el texto es lo más importante de tu web.

Nadie se quedará mucho en ella si leerla es un coñazo.

Copywriting y minimalismo

Si has cuidado hasta el más mínimo detalle la apariencia minimalista de tu web, los colores, las imágenes, cómo lucen los textos… tienes que seguir mimando la comunicación: lo que vas a contar.

Textos que son una retahila de frases sobrecargadas, sin sentido, mal estructuradas, que se van por las ramas, que no aportan nada al objetivo de la página web… desperdician un bonito diseño.

Tus textos deben estar tan optimizados como la apariencia

Deben decir más con menos, persuadir, crear deseo de visitar la web.

Deben ser el guía que instruya la visita a un museo.

Pero no un guía pesado y que dé puntadas sin hilo.

Un guía que haga que te enamores de ese cuadro que estás contemplando y, si puede ser, de todas las obras de Velazquez.

Por eso, si tú mismo creas un diseño y a la vez elaboras el copy de los textos todo estará más integrado y mejor preparado para crear un impacto en el visitante que si una persona diseña y otra escribe.

Sí, puede estar bien, pero nunca alcanzará la misma excelencia que un diseño integrado.

El motivo por el que soy diseñador web y copywriter.

Me duele cuando entrego un diseño del que me siento orgulloso y luego alguien escribe sobre él de una forma en la que «mancha ese cuadro».

También cuando redacto un texto que después es integrado en un diseño donde se destroza la fuerza o intención de las palabras, por más que haya indicado previamente la estructura html.

Al final no vas a decidir tú el color del texto, el tamaño, la tipografía, el peso, etc.

No es lo mismo si todo el conjunto no sale de la misma mente.

Casi nunca se respeta al 100% lo que escribes cuando alguien lo implementa en la web, a no ser que formes parte de un equipo más grande y trabajes codo a codo con los diseñadores cuando les entregues el texto.

Además, cuando escribes mientras diseñas, ocurre que tu propio copywriting te ayuda a optimizar el diseño.

Y viceversa, el diseño te hace decidir si es necesario escribir aquí o allá, insertar un párrafo que hable de esto o un encabezado que diga lo otro.

Tendencias y el futuro del diseño web

Llego tarde para evangelizar acerca del diseño minimalista, pues es evidente que es la tendencia no ya del futuro, sino del presente.

Cada vez que una gran empresa rediseña su presencia on line, la página web es más minimalista que la anterior.

También los logotipos tienden a diseñarse de forma más minimalista.

Y no solo lo vemos en páginas web, sino que los sistemas operativos más utilizados del mundo: Android, iOS o Windows son más minimalistas en cada versión.

La explicación es muy sencilla: cada vez la tecnología está más integrada en nuestras vidas y es más inteligente, por lo que lo natural es que el software tienda a simplificarse y a utilizarse de forma más intuitiva, a transmitir más sensaciones con apariencia liviana.

Por tanto, si vas a rediseñar tu web o a crear una, el mejor consejo que puedo darte es que abraces el minimalismo bien ejecutado como el mejor aliado que vas a tener cuando la gente te encuentre on line.

Agudiza tus sentidos en el directorio de temas de WordPress.org

Si no tienes un ojo muy entrenado, un buena práctica es que te pases regularmente por el directorio de temas de WordPress.

Cada mes aparecen decenas de nuevos diseños (aunque tienes para entretenerte con los cientos y cientos que ya hay) y puedes observar como el diseñador ha ido implementando toda la teoría descrita en este post en su theme para WordPress y decidir si lo ha hecho bien o no y qué te gusta más o menos.

Si filtras por la palabra «minimal» (ya que suelen aparecer más resultados que con «minimalist») verás los diseños que se han creado con el minimalismo por bandera y apreciarás aún mejor esta técnica.

Seguro que ahora puedes analizar el minimalismo con otros ojos y este habrá dejado de ser «una página en blanco con texto en negro» para ti.

Verás diseños minimalistas mejor o peor ejecutados. 😉

Recopilando

Ahora ya sabes qué es una página web minimalista.

Aquella que optimiza el diseño de la forma más inteligente y dice más con menos.

No hay que descuidar ningún aspecto: estructura, menús, colores, imágenes y sobre todo tipografía y texto.

Ni tampoco tienes por qué renunciar a un diseño atractivo e impactante.

Se trata de encontrar tu esencia y reducirlo todo a ella.

¡Ponte a practicar ya!

¿Tienes algo que aportar? Me encantará responderte en los comentarios 🙂