Desde los clientes que preguntan al inicio de los proyectos web hasta los diseñadores que intentan descubrir cómo incorporar los elementos más nuevos y de moda, descubrir cómo se ve el diseño de una página web moderna es uno de nuestros mayores desafíos.

La realidad es que es fácil decir qué no es el diseño web moderno. Seguro que reconoces un diseño obsoleto cuando lo ves, incluso podrías ser un poco atrevido y decir “esa página web es de los 90”. Por el contrario, para que conozcas más de diseño web, en Internautas hemos recopilado 20 ejemplos de diseños web modernos para ayudar a dar una mejor idea de su significado.

1. Minimalismo

diseno moderno1 » Internautas - Weblicidad

No es necesario que ser tan minimalista como Whiteboard, pero tienes que admitir que el diseño minimalista es llamativo y casi te obliga a leer cada palabra en la pantalla.

El minimalismo es una gran herramienta para transmitir un mensaje de inmediato. Este estilo proporciona un punto focal obvio para lo que está tratando de comunicar. El truco es asegurarse de que los elementos tengan suficiente interés para atraer a la gente. Aquí, hay una tipografía grande con un tipo de letra interesante.

2. Color llamativo

diseno moderno2 1 » Internautas - Weblicidad

Atrás quedaron los sitios web neutrales y grises del pasado. Los sitios web modernos presentan un color llamativo y brillante. Desde el amarillo limón de Wombat (arriba) hasta los grandes púrpuras, verdes y rosas, casi nada está fuera de los límites cuando se trata de construir una paleta.

¿El truco? Elija un color y utilícelo bien. No sienta que necesita inspirarse en todo el espectro de colores.

3. Tipografía atrevida

diseno moderno3 » Internautas - Weblicidad

Existe la posibilidad de que 2021 sea el año de la tipografía atrevida en el diseño de sitios web. Ya puedes ver diseños que parecen romper todas las reglas del tipo y aún se ven increíbles.

Online Women Biz es uno de esos diseños. Empiece con la enorme, y me refiero descomunal, W que ocupa la mayor parte de la pantalla. El logo usa una fuente original con una letra al revés. El icono de desplazamiento está encapsulado en un anillo de texto animado y hay varias fuentes y estilos en uso.

Todo esto rompe las reglas y aún se ve genial, es fácil de entender y tiene un ambiente que simplemente funciona.

4. Imágenes increíbles

diseno moderno4 » Internautas - Weblicidad

Existe una clara diferencia entre los sitios web con imágenes bien planificadas y ejecutadas y los que no las tienen.

Un diseño web moderno presenta lo primero. Observe cómo todos los colores coinciden (desde la ropa del sujeto hasta el fondo y las sombras) en el diseño de Dreamers para Squarespace. Complementa el color del texto. Se crea espacio para un elemento de texto en la imagen.

Todo ello crea una imagen impresionante.

5. Navegación simplificada

diseno moderno5 » Internautas - Weblicidad

La navegación simplificada proporciona una idea de los aspectos más importantes del diseño de un sitio web. Debe incluir las páginas clave o más visitadas. No debe incluir todas las páginas de su sitio web.

Nada dice «diseño de sitio web antiguo» como un mega menú de navegación desplegable.

6. Múltiples puntos de entrada

diseno moderno6 » Internautas - Weblicidad

Si bien a menudo es una buena práctica darles a los usuarios esta o aquella opción con el contenido, varios puntos de entrada pueden ser efectivos para algunos tipos de contenido. Hemos visto mucho de esto con diseños de pantalla dividida, como el de Tempo (arriba).

Anote el número de botones de la página de inicio. Los usuarios pueden elegir su viaje desde el principio, y los puntos de entrada están diseñados para una persona diferente. Es una buena forma de gestionar varios grupos objetivo en una sola página.

7. Compromiso del usuario

diseno moderno7 » Internautas - Weblicidad

El oso y su bufanda es un libro de cuentos en línea. Las «páginas» están diseñadas como páginas de libros tradicionales con ilustraciones grandes y algunas palabras, pero también contienen elementos de animación e interactivos para mantener el interés.

Pero es más que eso. Este libro de cuentos es una página de fans de un club de fútbol (soccer) en Bélgica.

8. Espacio en blanco con propósito

diseno moderno8 » Internautas - Weblicidad

El espacio en blanco debe tener un propósito en el diseño. Lars Franzen utiliza espacios en blanco muy intencionados para mover a los usuarios a través de las imágenes de su cartera.

El espacio en blanco ayuda a enmarcar las imágenes y atraer la atención a través de la pantalla hacia otras imágenes. El espacio en blanco también tiene otro propósito aquí: es una herramienta de navegación que fomenta el desplazamiento de lado a lado.

9. Microcopia procesable

diseno moderno9 » Internautas - Weblicidad

Los elementos de microcopia deben decirles a los usuarios exactamente lo que sucede a continuación. La buena noticia es que no tiene por qué ser complicado.

Utilice frases prácticas que proporcionen una explicación clara, como el botón de Gracie Mansion (arriba): Reserve un recorrido. Es directo y proporciona una instrucción clara.

10. Grandes Imágenes

diseno moderno10 » Internautas - Weblicidad

Más grande podría ser mejor en los esquemas de diseño de sitios web modernos. Las áreas de imagen de héroe más grandes que la vida crean una conexión con los usuarios y los atraen al contenido.

Aquí, Owl Design usa un poco de imágenes asombrosas con un poco de animación inesperada para atraerte (es una de esas imágenes que podrías mirar durante horas).

11. Video (puede ser vertical)

diseno moderno11 » Internautas - Weblicidad

La orientación del video en el diseño de sitios web está cambiando a 90 grados. (Puede agradecer a los teléfonos móviles por eso).

Desde las “historias” de las redes sociales que viven en un espacio vertical hasta cómo la mayoría de los usuarios sostienen sus teléfonos para ver el contenido, se está produciendo un cambio hacia el video vertical. Eso también se aplica al diseño de sitios web (aunque todavía hay muchos videos horizontales).

El video vertical es excepcionalmente bueno en un formato de pantalla dividida, como This is Beyond (arriba), porque se ve muy bien en computadoras de escritorio y dispositivos móviles, donde se apilan las “pantallas” divididas.

12. Velocidades de carga vertiginosas

diseno moderno12 » Internautas - Weblicidad

Lo primero que alguien notará sobre su sitio web es si se carga rápidamente o no (sobre todo si no lo hace). Los tiempos de carga lentos son un lastre y harán que los usuarios reboten más rápido que cualquier otra cosa.

Un diseño de sitio web moderno tiene que verse bien y cargarse rápido.

13. Optimizado para búsqueda

diseno moderno13 » Internautas - Weblicidad

Uno de los elementos más importantes del diseño de un sitio web moderno es uno que probablemente no pueda ver: está optimizado para la búsqueda.

¿De qué otra manera lo encontrarán los usuarios?

14. Elementos en capas

diseno moderno14 » Internautas - Weblicidad

Las capas crean profundidad, movimiento y ayudan a guiar a los usuarios a través del viaje en línea. Es por eso que los elementos en capas son una parte tan crítica de los proyectos de diseño.

Aquí, DM Home usa capas como parte de la navegación principal. Una barra de color se extiende a través de la imagen con una descripción en el estado de desplazamiento. (Haga un punto para hacer clic, otro unicornio en este diseño es que cada color coincide con los colores de acento en las fotos adjuntas).

15. Sonido

diseno moderno15 » Internautas - Weblicidad

El sonido es un elemento de diseño moderno cada vez más popular. (Solo asegúrese de que los usuarios puedan activarlo y desactivarlo).

Las experiencias de audio proporcionan un significado más profundo al contenido y mejoran la interacción del usuario. El truco es que el sonido tiene que ser nítido y resuelto si quieres que la gente realmente lo escuche.

16. Gradientes

diseno moderno16 » Internautas - Weblicidad

Los degradados son una tendencia que continúa … y evoluciona.

Desde grandes degradados en negrita, como el de arriba, hasta degradados sutiles en ilustraciones o elementos de texto, esta tendencia de color continúa emergiendo. ¿Parte de la razón? Se basa en otros elementos populares y puede ayudar a crear profundidad e interés visual sin abrumar al resto del diseño.

17. Interesantes animaciones flotantes

diseno moderno17 » Internautas - Weblicidad

Deleita y sorprende a los usuarios con interesantes animaciones flotantes. El movimiento y el movimiento sutiles se alejan de todo lo que se mueve rápidamente y brindan una experiencia de usuario más tranquila y enfocada.

Además, estos estados flotantes pueden ayudar a los usuarios a interactuar e interactuar con el contenido o brindarles la sorpresa adecuada que les impida abandonar el diseño. (El texto y el ícono en el ejemplo anterior rebotan de una manera casi hipnótica, coincidiendo con el contenido del diseño).

18. Narración seria

diseno moderno18 » Internautas - Weblicidad

Let Girls Dream utiliza contenido enviado por usuarios para contar historias de empoderamiento. El diseño está repleto de características interactivas, desde historias de texto y video hasta lugares para cargar sus sueños e información. También hay un avance de video animado que te alegrará el corazón.

Todos estos elementos atraen a los usuarios al diseño con una gran historia.

19. Coherencia del dispositivo

diseno moderno19 » Internautas - Weblicidad

Los sitios web modernos están diseñados para funcionar en varios tipos y tamaños de dispositivos. Los usuarios esperan coherencia cuando acceden al diseño desde diferentes dispositivos en diferentes momentos.

Si no crea una apariencia coherente, corre el riesgo de crear confusión en los usuarios (y eso puede hacer que abandonen el sitio web). Fort Studio hace un gran trabajo con geniales paneles de fondo animados, tipografía y ubicaciones que crean una experiencia de usuario consistente sin importar cómo visite el sitio web.

20. Experiencias creativas de usuarios

diseno moderno20 » Internautas - Weblicidad

Ask the AI ​​Ball se basa en las tendencias con algo antiguo (una bola mágica 8) y algo nuevo (IA) para crear una experiencia diferente a la esperada. Si desea que los usuarios dediquen una cantidad de tiempo al diseño, debe ser creativo y brindar una experiencia que valga la pena.

Esa fórmula mágica puede ser difícil de encontrar, así que piense un poco fuera de la caja.

Conclusión

Conocerás uno de esos sitios web de alrededor de 2008 cuando accedas a ellos. Así es como no se hace el diseño web moderno. Todos los ejemplos anteriores tienen un tema común, y es posible que vea muchos de los elementos del diseño web moderno entrecruzarse en ellos.

Ese hilo común es la simplicidad que mejora la usabilidad. Los visitantes del sitio web probablemente no pasarán mucho tiempo en su sitio web, por lo que debe hacerlo visualmente atractivo y fácil de entender de un vistazo. Esa es la esencia del diseño moderno en la actualidad.

Deja una respuesta

Abrir
1
Estamos online
Hola, estamos conectados, en que podemos ayudarte?