8 tendencias de diseño web que lo van a petar en 2018

En este primer post del año no he podido evitar ponerme ante la bola de cristal para ver qué elementos van a ser tendencias de diseño web en 2018. Desde finales del año pasado vengo observando una serie de características que cada vez se van imponiendo más en las webs de referencia en diseño. ¿Quieres tener una web moderna y actual? ¡Pues lee atentamente!

1. Mobile first design

Ojo que Mobile first design no es lo mismo que lo de Responsive design (eso de que una web se vea bien en todas las pantallas sean del tamaño que sean).

Teniendo en cuenta que el 2017 fue el año en el que el diseño web enfocado a móviles se colocó al mismo nivel de importancia que el enfocado a ordenadores, ésta va a ser una nueva forma de trabajar que se va a imponer en todos los nuevos proyectos.

Hasta ahora pensábamos en el aspecto del diseño en ordenadores y luego hacíamos pequeñas adaptaciones para que se acabara de ver bien en móviles. Creo que en 2018 vamos a tener que empezar a pensar a la inversa: deberemos diseñar en primer lugar pensando en resoluciones pequeñas y luego adaptar nuestro diseño a pantallas grandes. Debo admitir que es un cambio de paradigma que va a costar de implementar, pero que estoy segura de que nos va a beneficiar a todos a nivel de analíticas. Y es que más del 50% del tráfico a una web suele ser desde móviles: deberemos ponernos las pilas en este aspecto.

Diferencia entre Responsive design y Mobile first design.
Diferencia entre Responsive design y Mobile first design.

2. Sombras y profundidad

Las sombras no son algo nuevo ¿verdad? Si has leído mi artículo sobre estilos de diseño web UI sabrás que las sombras son algo viejoven: se usaron mucho en las primeras tendencias de diseño web y son pura tendencia gracias al novedoso material design. En 2018 vamos a ver sombras muy difuminadas y amplias, sombras muy sutiles que nos servirán para destacar algunos elementos. Esta tendencia no solamente aporta estética y estilo, sino que además ayuda al usuario a focalizar su atención en los elementos importantes.

Las sombras aportan la profundidad que el flat design había perdido. Si te soy sincera: me encanta esta tendencia y ya tengo ganas de aplicarla en algún diseño.

3. Degradados

Los degradados son otro elemento que parecía haber desaparecido en Internet pero que será parte de las tendencias de diseño web en 2018. De nuevo, veremos degradados en su versión más sutil y estilosa. Y es que ¿por qué usar un sólo color cuando puedes usar infinidad? Gracias al desarrollo del CSS podremos hacer degradados que no relentizarán la página.

Ejemplo 1 de degradado molón.
Ejemplo 1 de degradado molón.

Aplica una capa de degradado a una fotografía de fondo y ¡boom!. Tu web pasa de tener una -muy vista- imagen a toda pantalla a una imagen con personalidad.

Ejemplo 2 de degradado en página web.
Ejemplo 2 de degradado en página web.

Por otro lado, si no dominas los programas de edición gráfica para hacerlo, no te preocupes ????. Siempre puedes poner un simple bloque de texto con un degradado de fondo y vas a destacar más que todos esos sliders que pululan por ahí.

4. Ilustraciones

Esta es la tendencia que más me enamora de todas ????. Aunque debo admitir que es la que más cuesta a nivel técnico (y económico, claro). Me chifla la ilustración y me alegro de que esta tendencia que el año pasado empezamos a ver en muchas webs haya llegado para imponerse.

Las ilustraciones aportan diversión, sofisticación y confianza a un sitio web. Un ilustrador con experiencia puede crearte un set de ilustraciones que encajen con tu marca y transmitan tus valores. Aunque típicamente las vemos en sitios web de negocios que implican diversión, podemos implantarla también en webs de negocios a los que se asocia seriedad y -porqué no decirlo- aburrimiento. Imagina una web de asesores fiscales con ilustraciones mostrándote todos los servicios ¿Molaría eh?

Ejemplo de página web con ilustraciones
Ejemplo de página web con ilustraciones

Dropbox es la primera web que me viene a la mente cuando pienso en empresas pioneras en adoptar esta tendencia.

Web con ilustraciones bien integradas gráficamente y a nivel comunicativo.
Web con ilustraciones bien integradas gráficamente y a nivel comunicativo.

No se trata de poner dibujos sin ton ni son, sino de crear una identidad visual alineada con tus objetivos web.

5. Tipografías grandes y consistentes

Parece que las tipografías a gran tamaño y con formas impactantes han empezado a decir «¡aquí estoy yo!». Y es que si quieres que tu visitante se entere de algo, la mejor forma de hacerlo es decírselo a lo grande, literalmente.

La tipografía siempre ha sido una excelente herramienta visual para transmitir información y valores de marca. Con las mejoras en la mayoría de navegadores (excepto Internet Explorer ????), las tipografías tipo «escritas a mano» han incrementado su visibilidad, las serifas han vuelto a Internet (¡por fin!) y las supernegritas (o black) han entrado en escena.

De todas las tendencias ésta es la que más me va a costar de adoptar :/. Me gusta cuando la veo en ciertas webs pero en otras me da urticaria. Creo que esto es como todo, que usado con mesura puede quedar muy bien pero que si abusas puede quedar una horterada importante.

Ejemplo de web con tipografías grandes.
Ejemplo de web con tipografías grandes.

Las tipografías con serifas son aquellas que tienen adornos en las puntas de las letras, como en el ejemplo superior.

Ejemplo de web con tipografías grandes y degradados.
Ejemplo de web con tipografías grandes y degradados.

En la imagen anterior puedes ver dos tendencias juntas: tipografías grandes y degradados. Mola la combinación, ¿verdad?

Otro ejemplo de web con tipografías grandes: una de las tendencias de diseño web para 2018.
Otro ejemplo de web con tipografías grandes: una de las tendencias de diseño web para 2018.

Arriba puedes ver la web de un estudio creativo francés. Me encanta el uso que le dan a las tipografías grandes en el diseño de su web: ¡es excelente!

6. Asimetrías

No es que sea una novedad en plan «esto no lo hemos visto nunca». Pero sí creo que este año vamos a ver muchos nuevos proyectos rompiendo los esquemas visuales del visitante. Cada vez vemos más webs que dejan de lado el esquema «encajonado» (un bloque central con márgenes a ambos lados) y utilizan todo el ancho de la pantalla para crear una experiencia diferente.

La distribución de las columnas nos puede ayudar a dar orden (o desorden) al diseño. A continuación puedes ver una web con ua evidente asimetría en la disposición de los elementos que la configuran. Podríamos decir que refleja un orden en el caos.

Ejemplo de página web con asimetría.
Ejemplo de página web con asimetría.

La siguiente imagen de la web de una marca conocida por todos también muestra asimetría. ¿Te gusta el concepto?

Web con columnas desiguales que muestran asimetría.
Web con columnas desiguales que muestran asimetría.

Lo cierto es que no es fácil llevar bien a la práctica esta tendencia. ¡La separación entre un orden desordenado y un completo desorden es una línea muy fina!

7. Animaciones

A medida que los navegadores avanzan, más webs se apuntan a la tendencia de pasar de imágenes estáticas a las animaciones integradas. Esto ayuda a llamar la atención del usuario y a conectarlo con tu comunicación. Pero no te lances a poner GIFs a lo loco, se trata de encontrar pequeñas animaciones que hagan más amena la navegación del usuario.

Por ejemplo, una animación puede mantener entretenido al usuario mientras algo carga. O sorprenderlo con un efecto interesante cuando pasa el ratón por encima de un link o un botón. Otro caso típico es el texto que aparece a medida que vas haciendo scroll. En SrMomo hemos escondido un par ¿las has visto ya? ????

Ejemplo de web con animación en forma de GIF.
Ejemplo de web con animación en forma de GIF.

La imagen anterior muestra un GIF como debe hacerse hoy en día. Capta la atención a la par que no la copa. ¡Me encanta!

Página web con animación en forma de texto que aparece con el scroll.
Página web con animación en forma de texto que aparece con el scroll.

8. Paletas de colores vibrantes y saturadas

Últimamente veo cantidad de webs que utilizan unos colores muy intensos. Por eso creo que esta va a ser una de las tendencias de diseño web en 2018 que más vamos a ver.

Un poco en linea con las tipografías grandes, parece que las herramientas más habituales del diseño gráfico impreso han entrado en nuestras pantallas. Así pues, utilizar colores intensos, vibrantes y saturados ya no es algo prohibido. Pero haz un uso con cabeza, porfi.

Ejemplo de web con colores vibrantes.
Ejemplo de web con colores vibrantes.

En la imagen anterior puedes ver qué bien queda un buen uso de colores vibrantes. Y en la siguiente una buena saturación.

Ejemplo de saturación: otra tendencia en diseño web en 2018.
Ejemplo de saturación: otra tendencia en diseño web en 2018.

A continuación puedes ver cómo LinkedIn también tiene alguna página con un uso muy interesante de colores vibrantes.

Web con una paleta de colores vibrante.
Web con una paleta de colores vibrante.

Planteando nuevas tendencias de diseño web en 2018

¿Vas a lanzar tu web en 2018? Pues debo decirte que vas a vivir un momento bastante curioso. Viendo las tendencias de diseño web en 2018 que te he explicado, mi conclusión es que lo nuevo y lo viejo se fusionan en elementos interesantísimos a nivel de experiencia del usuario. También incorporamos muchos recursos del diseño gráfico que estaban prohibidos en web porque los navegadores no lo permitían.

Tu turno:

¿Qué tendencia te las mostradas te gusta más? ¿Te atreves a vaticinar otras tendencias de diseño web en 2018?

¡Déjame un comentario y te responderé encantada!

Apúntate a nuestra news

Serás el primero en conocer cada nueva entrada de blog que escribimos para que saques más partido a tu web. En ocasiones, también te hablaremos de nuestra formación.

Información básica sobre protección de datos: Responsable: Artilet Digital, S.L. (SrMomo). Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. Legitimación: Consentimiento del interesado. Destinatarios: No se cederán a terceros salvo obligación legal. Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: infoARROBAsrmomo.com. Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos en los enlaces en el pié de página.

6 comentarios en «8 tendencias de diseño web que lo van a petar en 2018»

  1. Hola! Cool.
    Creo que las asimetrías combinado con buenas ilustraciones van a marcar la diferencia notablemente en este 2018.
    Respecto al menú hamburguesa para el móvil es bastante usado por el usuario.

    Saludos
    A tener buen día.

    Responder
    • Gracias por tu comentario guapa!
      Me encanta el tema de las asimetrías, deja descolocado al usuario y lo engancha. Y el uso de ilustraciones me parece una de las mejores cosas que nos depara el diseño web, ya que transmiten una imagen única, limpia y revalorizan a los profesionales de la ilustración.
      Un saludo y buen día a ti también 🙂

  2. Hola muy interesante su web!!!
    Soy un aprendiz en busca de conocimientos 🙂 y opino que el menú hamburguesa a veces confunde algunos niveles de visitantes , al caso que se ve oportunidades que se le escribe MENÚ AL LADO PARA QUE SEPA QUE ES.
    Un buen menú clásico y con diseño crea mas visitas a las secciones.
    Saludo atte.

    Responder
    • Hola Jose!
      Muchas gracias por tu comentario 🙂
      Yo pienso igual que tú, aunque últimamente he visto algunas webs que combinan los dos tipos de menú en el escritorio: un menú clásico para las secciones superiores de la web y otro tipo hamburguesa para quien quiera ver un menú con secciones y subsecciones. Creo que es una buena solución para webs que tienen menús muy grandes, ¿tú qué opinas? 🙂

      Un saludo!

  3. Sin duda un artículo completísimo. Yo añadiría el menú ‘hamburguesa’ y la pagina de inicio tipo ‘Hero’. Por lo demás genial artículo y bien desarrollado. Gracias y un saludo

    Responder
    • ¡Hola Ramón! Gracias por tu comentario 🙂
      Y sí, las dos tendencias que comentas están super de moda este año. Por cierto, una pregunta: ¿Tú qué opinas sobre el menú hamburguesa? ¡Hay un debate sobre el tema y me gusta conocer opiniones!

      Un saludo 😀

Deja un comentario

Información básica sobre protección de datos: REPONSABLE: Artilet Digital, S.L. (SrMomo). FINALIDAD: Gestionar la solicitud que realizas en este formulario de contacto. LEGITIMACIÓN: Consentimiento del interesado. DESTINATARIOS: No se cederán a terceros salvo obligación legal. DERECHOS: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: infoARROBAsrmomo.com. INFORMACIÓN ADICIONAL: Puedes consultar la información adicional y detallada sobre protección de datos en los enlaces en el pié de página.

Únete a SrMomo

y mejora tu WordPress

Información básica sobre protección de datos: REPONSABLE: Artilet Digital, S.L. (SrMomo). FINALIDAD: Gestionar y enviar información de boletines y promociones a través de correo electrónico. LEGITIMACIÓN: Consentimiento del interesado. DESTINATARIOS: No se cederán a terceros salvo obligación legal. DERECHOS: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: infoARROBAsrmomo.com. INFORMACIÓN ADICIONAL: Puedes consultar la información adicional y detallada sobre protección de datos en los enlaces en el pié de página.

Únete a SrMomo

y mejora tu WordPress

Información básica sobre protección de datos: REPONSABLE: Artilet Digital, S.L. (SrMomo). FINALIDAD: Gestionar y enviar información de boletines y promociones a través de correo electrónico. LEGITIMACIÓN: Consentimiento del interesado. DESTINATARIOS: No se cederán a terceros salvo obligación legal. DERECHOS: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: infoARROBAsrmomo.com. INFORMACIÓN ADICIONAL: Puedes consultar la información adicional y detallada sobre protección de datos en los enlaces en el pié de página.