¿Qué veremos en diseño y maquetación web en 2018?

Tal y como hicimos la semana pasada con las tendencias de 2018 en Desarrollo Web,  nos centramos ahora en las principales novedades que se esperan en diseño y la maquetación web durante este año. Su evolución constante nos llevará a centrarnos en las landing pages en vez de aglutinar todo el contenido en nuestra página principal y a optar por un diseño modular, en el que conviene ir aparcando el tradicional menú horizontal y el tan manido menú hamburguesa si queremos estar a la última en interfaces. Analizamos cómo va a cambiar todo en cuanto a  diseño, maquetación, color y forma, tipografías, imágenes, videos y efectos  en los próximos meses.

Maquetación

El denominado diseño esqueleto se ha impuesto y nos encontraremos más páginas donde el contenido va cargando progresivamente mientras el usuario realiza scroll, adornándolo además con efectos dinámicos que capten la atención del usuario. También veremos, y como ya adelantamos cuanto repasamos las tendencias en Desarrollo Web, más Progressive Web Apps (PWA), que están destinadas  a ser el futuro más inmediato de la web: permiten almacenamiento local por lo que no requieren conexión, son rápidas en cualquier navegador y dispositivo y pueden enviar notificaciones push al usuario. También veremos más sites  basados en diseños modulares, en los que las páginas  se componen uniendo módulos totalmente independientes, que se adaptan a las dimensiones de los diferentes dispositivos y facilitan la personalización y evolución de los diseños, nuevamente marcadas por el Material Design heredado de los móviles y la homogeneización de las visualizaciones.

De los móviles también procedían los menús estilo hamburguesa,  tan extendidos en 2017 y que caerán en desuso progresivamente. Curiosamente, tampoco será descabellado que vayamos viendo menús pegados a la parte inferior de la pantalla. Esto nos parecerá extraño a primera vista, pero se debe a motivos de usabilidad, ya que esta ubicación  está pensada para los dispositivos móviles y al habitual gesto de utilizar el pulgar en en esta parte de la pantalla en los teléfonos.

Formas y colores

Seguirán conviviendo dos técnicas claras y en ocasiones contrapuestas: el Flat Design, un diseño plano que surge de la necesidad a la adaptación del diseño responsive y que también comparte muchos aspectos del Material Design, y el Skeumorfismo, las evoluciones de diseño que mantienen detalles de objetos originales para hacerlo más cercanos al usuario. Y se seguirán llevando diseños limpios y personalizados, con fondos blancos para destacar los elementos que queremos resaltar,  pero en los que veremos también un mayor uso de colores fuertes y vivos, con degradados y biocromatismos. Adiós a los grises y a las gamas monocromáticas. Sin duda, los veteranos del lugar sonreirán cuando volvamos a ver esas técnicas que aúnan dos colores en forma de degradado para los fondos.

Tipografías

Para aumentar el impacto entre los usuarios, este 2018 veremos tipografías de gran tamaño y más bien gruesas en los textos.  Las preferidas seguirán siendo las tipografías circulares, estilo Sans Serif, y tendremos que seguir de cerca una tipo que veremos mucho:  la Google Noto, creada por Google, gratuita y que, gracias a sus 110.000 caracteres, puede ser visualizada correctamente en 800 idiomas. En el lado opuesto, y como se mantendrá el valor añadido de «lo hecho a mano», para  los diseños más personalizados que buscan transmitir cierta exclusividad cobrarán fuerza las tipografías manuscritas.

Iconos, vídeos y FX

En cuanto a los iconos, son recursos gráficos que continuarán respirando del Flat Design y de la inspiración en los dispositivos móviles, ya que no sólo son fácilmente interpretables por los  usuarios, sino que pesan poco y si están en formatos vectoriales se adaptan perfectamente a las resoluciones de los diferentes dispositivos, además de tener posibilidades dinámicas e interactivas cuando optamos por lo elementos SVG de los que hablamos en Ventajas de utilizar SVG en nuestros desarrollos web .

En la visualización de vídeos, veremos más comúnmente los vídeos como fondo gracias a que  el formato WebM ha limado algunos sus tradicionales problemas de carga. Igualmente comenzaremos a ver un mayor uso de vídeos e imágenes de todo tipo a pantalla completa para captar la atención del usuario de forma completa y en sólo un vistazo.  También nos tendremos que ir acostumbrando a ver en las páginas web los denominados cinemagraphs, que fusionan imagen estática y vídeo en movimiento en bucle, convirtiéndose en un nuevo recurso audiovisual para muchos sites.

Como desarrollo y  diseño son disciplinas que van de la mano en cualquier proyecto web, te recomendamos consultar también nuestro  reciente artículo en el que repasamos las tendencias de 2018 en Desarrollo Web.