Diseño web minimalista: 10 ejemplos increibles

Diseño web minimalista: 12 ejemplos increibles

 

El diseño web minimalista demuestra que menos puede ser más

Diseño web minimalista. El diseño minimalista de páginas web es un arte subestimado. Todos hemos escuchado el dicho «Menos es más», pero es un principio que a menudo es más fácil decirlo que hacerlo. A medida que las progresiones de la tecnología abren nuevas posibilidades en el diseño de una web, se hace cada vez más difícil resistirse a añadir algunas florituras de diseño.

El diseño minimalista de páginas web beneficia a los usuarios en forma de tiempos de carga más rápidos y mejor compatibilidad entre tamaños de pantalla. Es más, un diseño de interfaz de usuario simple está en sintonía con la navegación móvil, sin dañar el escritorio o la experiencia del usuario.

La filosofía minimalista se centra en la idea de que hay que diseñar en torno al contenido. En términos web, el diseñador comienza con el contenido en general y luego construye la interfaz suficiente para que los usuarios puedan identificar su objetivo y navegar hacia él fácilmente.

La estética minimalista es la representación visual de esa filosofía. El diseño web minimalista utiliza mucho espacio blanco – o al menos uniformemente coloreado. Pero no confundas despejado con aburrido. Debe elegir tus diseños con cuidado, de lo contrario, tu restringida paleta de elementos de diseño parecerá aburrida en lugar de elegante.

A continuación, he recopilado mis diseños web minimalistas favoritos para inspirarte a hacer más haciendo menos.

01. HalloBasis

HalloBasis

El estudio de diseño de Dusseldorf HalloBasis se enorgullece de entregar proyectos que se comunican bien en nombre de sus clientes. Este sitio web en WordPress actúa como el sitio de portafolio online del estudio, y es un brillante ejemplo de diseño web minimalista hecho de forma diferente.

El sitio hace una apuesta audaz con sólo unos pocos elementos, gracias a su estética sobredimensionada, que tiene la ventaja añadida de facilitar la accesibilidad. De hecho, es posible que se le perdone por pensar que la función de zoom de su navegador elegido está al máximo, tal es el tamaño de la fuente 17.5vw para los titulares de 770px de ancho mínimo. Desde el punto de vista tipográfico, es grande, con la fuente Messina Sans que se adapta a ese tamaño y garantiza la legibilidad. Lo que es realmente refrescante es que esto se aplica tanto a los enlaces de navegación como a los avisos personalizados de GDPR para aceptar cookies. También es muy fácil alternar entre las traducciones al alemán y al inglés usando los botones de la pantalla principal.

02. Jazz FM

Jazz FM diseño web minimalista

Esta colorida página web para una emisora de radio con sede en Bucarest hace un gran trabajo al dejar que la música hable por sí misma. A primera vista, Jazz FM, simplemente invita a los visitantes a retransmitir la emisión en directo a través de un botón de reproducción triangular que llena la mitad de la pantalla. También tenemos un logo y un display de la pista Now Playing, pero es muy llamativo gracias a la combinación de negro y amarillo. Esto es sólo el encabezado, sin embargo, la estructura de una sola página larga continúa con mucha más vitalidad – aunque siempre con el diseño miminalista del sitio en mente.

Lo más notable es que hay una gran cantidad de magníficas ilustraciones de SVG que, por supuesto, se escalan con una nitidez asombrosa, sin importar el tamaño de la pantalla. La tipografía vuelve a ir a lo grande, gracias a una economía de texto ahorrativa, sobre todo como etiquetas de cabecera que detallan dónde más se puede disfrutar del Jazz FM. Otras características de interés incluyen un programa limpio y claro de siete días, cinta de sintonía FM con desplazamiento e incluso una guía de festivales de jazz.

03. Uber Sign Language

Uber Sign Language

En línea con su filosofía de accesibilidad, Uber ha creado un sitio web dedicado a enseñar a sus clientes el lenguaje básico de signos, para que puedan interactuar con los conductores con discapacidad auditiva. Uber Sign Language es una clase magistral en diseño con moderación. Muestra a los usuarios cómo firmar frases comunes simples (sí, no, gire a la izquierda, etc.), o incluso su nombre, a través de vídeos cortos y sencillos. Hay muy poca explicación; el contenido habla por sí mismo, lo que demuestra que no se necesitan palabras inteligentes para captar un mensaje importante de la marca.

04. Evoulve

Evoulve diseño minimalista de paginas web

Evoulve es una empresa dedicada a convertir tecnologías emergentes en productos viables. El diseño de la página web tiene un aire hipnotizador y futurista. Hay muy pocos elementos en la pantalla: simples anotaciones de texto y muy pocas opciones de navegación, con el telón de fondo de un globo terráqueo que rota lentamente y un cielo estrellado. Sin embargo, cada uno de ellos ha sido diseñado perfectamente, con sutiles animaciones CSS que amplían el sentido de la magia y crean un ambiente de descubrimiento.

05. Tinker (diseño web minimalista)

Tinker diseño multimedia

Tinker es una marca de relojes con un concepto simple: los clientes pueden elegir el tamaño de la esfera, el color de la correa y el metal, en cualquier combinación. No hay características o detalles innecesarios. La interfaz de usuario del sitio web de la empresa deja claro el concepto; los usuarios pueden seleccionar fácilmente su combinación ideal de entre las limitadas opciones disponibles.

06. Leen Heyne

Leen Heyne

Además de sus joyas, el logotipo monocromo de Leen Heyne y el nombre de la empresa son los únicos elementos visuales significativos de su página web. La extensión del espacio en blanco circundante hace que sea una apuesta segura para que los ojos del usuario se sientan atraídos por los productos.

07. We Ain’t Plastic

We Ain't Plastic

El contraste es otra táctica visual útil para mantener los diseños minimalistas interesantes. El sitio web del ingeniero alemán de UX Roland Lösslein We Ain’t Plastic establece un marcado contraste de tamaño entre la imagen central, el texto y los iconos de arriba.

08. Nua Bikes

El sitio de Nua Bikes es engañosamente minimalista, porque en realidad hay muchos elementos en la pantalla. Sin embargo, al condensar el texto y maximizar el espacio en blanco, la empresa puede llamar la atención sobre su producto, la bicicleta.

09. Sendamessage.to

Sendamessage diseño minimalista web

Divertido, si es posible, Sendamessage.to permite a la gente personalizar los mensajes a sus amigos con un gesto con la mano. El fondo negro y estéril añade potencia a la imagen principal y a las letras blancas y negritas del texto.

10. Maaemo (diseño web minimalista)

Maaemo arte minimalista

El sitio web del restaurante noruego Maaemo, con tres estrellas Michelín, utiliza el minimalismo para crear un sentimiento de clase. El tratamiento visual es perfecto para contar historias, como lo demuestra el sitio con fotos en alta definición de platos que se están creando.

Si te ha parecido interesante este artículo, te recomiento leer 5 diseños de tiendas online para inspirarte, y sobre todo, recuerda compartirlo en tus redes sociales 🙂

Cómo diseñar para la web en 2019 / Nuevas tendencias

Como diseñar para la web en 2019

 

He escrito acerca de cómo diseñar para la web moderna antes de 2018, pero la web avanza rápidamente por lo que esas pautas ya están obsoletas y son obsoletas a medida que las convenciones más modernas se han generalizado.

Analicemos los principios de diseño más importantes para la web moderna en 2019

Deja que los usuarios sepan que tienes una aplicación móvil

Este sigue siendo el principio más importante y no deja de tener razón. Los grupos focales bien pagados han demostrado que lo primero que un usuario desea hacer cuando visita tu página web en su navegador es instalar una aplicación móvil.

La mejor manera de lograr esto es mostrar un diálogo que les solicite que la instalen.

Como paso opcional, puede agregar un botón o un hipervínculo para cerrar dicho cuadro de diálogo, pero es importante usar algún texto, preferiblemente que esté redactado de tal manera que avergüence al usuario para que cumpla con los requisitos.

Implementa una política de no seguimiento

Muchos navegadores modernos en estos días son compatibles con un encabezado HTTP llamado DNT que significa No rastrear. Este encabezado tiene la intención de indicar que un usuario no desea ser rastreado y, desafortunadamente, esto está habilitado de manera predeterminada en algunos navegadores.

Sin embargo, no te preocupes ya que no todo está perdido. Hemos encontrado que la mayoría de los usuarios eliminarán este encabezado cuando se le solicite hacerlo. Recomendamos que sirva una guía sobre cómo deshabilitarlo cuando el encabezado está presente.

Consejo : No sirvas el mensaje para deshabilitar DNT en la guía que muestra a los usuarios cómo deshabilitar DNT ya que la tasa de conversión termina siendo bastante pobre.

Implementando una Política de Cookies

El consentimiento de las cookies es confuso, mientras que en la mayoría de los casos no es necesario con un uso razonable de cookies, es mejor pedirle al usuario que lo autorice para que podamos rastrear todo sin temor a las repercusiones.

Consejo : No sirvas páginas sin cookies habilitadas, incluso cuando no las necesitamos, ya que significa que podemos rastrear menos información personal, por lo que tenemos menos información de usuario para vender.

Bloqueando los bloqueadores de anuncios

Los bloqueadores de anuncios están en todas partes y realmente pueden dañar tus márgenes, por lo que la precaución obvia a tomar es bloquear los bloqueadores de anuncios.

Chrome se está moviendo para bloquear los bloqueadores de anuncios, por lo que si el usuario usa un navegador como Brave, podremos decir que el navegador del usuario no es lo suficientemente moderno.

Consejo : No le cuente a nadie sobre Brave, el navegador de código abierto basado en Chromium con bloqueo de anuncios incorporado.

Maximizando tu diseño

Los días de 800 píxeles de ancho se acabaron. Las pantallas modernas tienden a ser de pantalla ancha, así que asegúrate de aprovechar todo el ancho del diseño.

Utilizar notificaciones

Los navegadores modernos admiten notificaciones, por lo que habilitarlas es una obligación, pero como alternativa también pueden también suscribir automáticamente al usuario a un boletín, notificaciones por SMS y / o notificaciones por correo electrónico.

Sugerencia : Usa estas notificaciones para avisar a los usuarios cuando tengas una nueva versión de la aplicación móvil disponible.

Preguntar al usuario

A veces, los usuarios olvidan que pueden registrarse, asegúrate de avisarles regularmente y presentar un enlace o botón de registro prominente.

Sugerencia : También puedes preguntar al usuario cuando esté a punto de abandonar tu página web o cuando el cursor del mouse lo abandone.

Permitir que el usuario opte por salir

Es muy importante que seamos amigables con el usuario y que no seamos intrusivos, lo que significa que debemos permitir que los usuarios desactiven nuestras solicitudes constantes y diálogos modales.

La mejor práctica aquí es colocar la configuración de exclusión voluntaria en un lugar donde el usuario la detecte fácilmente, ya que esto se encuentra dentro de una de las páginas de «preferencias de cuenta».

Usa JavaScript

Es un hecho conocido, todos los sitios web requieren de JavaScript.

Mientras podrías estar pensando, «Oh, es sólo texto sin formato». ¿Pero en el futuro? Para entonces, habrá muchos más, y te lo prometo ahora mismo. Cuando eso suceda, te arrepentirás de no haber convertido tu sitio web en una aplicación isomórfica utilizando el último marco que se ejecuta en una nube sin servidor.

Consejo : No renderices esta página con JavaScript.

Háblame ;)
¿Necesitas ayuda?
Hola! Necesitas ayuda? hablemos por WhatsApp :)