Las tendencias ocurren y cobran vuelo en todos los campos creativos por lo que el diseño de páginas web no es ajeno ni indiferente a ello. Nacida en pleno contexto de experimentación e innovación, una nueva corriente visual es un factor enorme e impulsor del cambio, que (en su mayor parte) empuja a la industria hacia adelante y la estimula a mejorar. Así como Internet es un entorno único que evoluciona constantemente, 10 son las novedades en Diseño Web que marcarán estos 12 meses. ¡Adelante! Vamos a descubrirlas ya mismo.
Las 10 actualizaciones en Diseño Web que necesitás conocer
A medida que el 2017 empieza a avanzar, múltiples son las nuevas opciones en diseño web que podés adoptar si querés ajustar tu proyecto digital al mejor diseño visual, experiencia de usuario y navegación online. ¡Esto es lo que se viene en lo referente a la gráfica digital.
1) Más marcas adoptarán un enfoque móvil
Nombrados oficialmente como los principales dispositivos para navegar por la web es que las empresas han empezado a darse cuenta de la importancia de tener su sitio web listo para ofrecer efectivamente el contenido en pantallas más pequeñas. Esto quiere decir que las marcas trabajarán primero para dispositivos móviles, con diagramas más reducidos o simples y luego lo trasladarán hacia filtros más grandes, es decir al entorno de escritorio.
Los smartphones tienen pantallas significativamente más pequeñas que las tabletas y los escritorios, limitando la cantidad de contenido que un usuario puede ver fácilmente y obligando a deshacer cualquier información o contenido que no sea 100% necesario. Este enfoque móvil y todas sus restricciones desde el diseño visual y la funcionalidad técnica lleva a las marcas a tomar conciencia del mensaje diferencial a comunicar y cuál es el contenido principal e imprescindible que debe leer el usuario.
Si vas a enfocar tu presencia digital sobre el concepto mobile-first pensá primero en cómo se verá en los dispositivos móviles y a partir de ello construí el sitio para escritorio, dándote el lujo de agregar otros contenidos e interacciones visuales que has desplazado en mobile.
2) Mayor implementación del diseño responsive
Si bien esta no es una novedad y desde hace unos años el diseño responsivo viene avanzando a pasos agigantados, en este 2017 serán más marcas, grandes y pequeñas, las que acepten este desafío y construyan sus sitios basados en responsive. Esencialmente, se trata de un enfoque para la construcción del sitio utilizando CSS media queries y grids/layouts flexibles para crear una web única y dinámica que ajuste el contenido para mostrarlo siempre perfecto, independientemente de los tamaños y dispositivos.
La razón por la que este año el diseño responsive cobrará más vuelo se debe, además, a la actualización del algoritmo de Google: los sitios web que no cuentan con ello pierden posicionamiento en los resultados de búsqueda realizadas desde estos dispositivos, lo cual repercute negativamente en el nivel de visibilidad y por consiguiente en la tasa de captación de tráfico orgánico.
¡Pero esto no es todo! Aparte de las clasificaciones y la incidencia en el SEO, también es interesante observar cómo ha cambiado el comportamiento y la experiencia de usuario en los últimos dos años. Hoy en día, los sitios que no cumplen con los estándares responsivos invitan a las visitas a abandonar la navegación más que permanecer en ella.
3) Boom del estilo Pinterest con información escaneable
El pionero del diseño estilo tarjetas fue la red social Pinterest y cada vez más vemos esta dinámica en sitios que buscan comunicar una marca muy visual e impactante. De hecho, están surgiendo cada vez más plantillas de WordPress que incorporan este tipo de diseño. Lo bueno es que cada tarjeta contiene y presenta la información en pequeños trozos perfectamente escaneables, aislando el contenido de forma muy visual y dándole un punto de vista gráfico atractivo que además favorece la usabilidad.
Sin embargo, emular este estilo visual de moda no es tarea tan sencilla ya que aunque se trate de un simple grid o parrilla de imágenes dispuestas una al lado de la otra, se deben contemplar las diferente medidas y proporciones, además de que se puede visualizar en Pcs y en tablets o móviles tanto en vertical como en apaisado. Las solución que te recomendamos en Fuego Yámana es usar Wookmark, un plugin de jQuery que te permite imitar Pinterest sin romper los encuadres trabajando con muy pocas líneas de código.
4) Auge de las mega imágenes destacadas
También conocidas como “hero images”, son las imágenes gigantes que vemos nada más ingresar a muchas de las páginas web. Estas mega ilustraciones ocupan toda la pantalla y son un recurso muy potente para captar la atención de la visita desde el primer segundo.
Existen muchas variaciones de estas fotografías y no necesariamente son imágenes estáticas, sino que también es común agregar texto o mini videos en loop para generar un mayor impacto y retención. Actualmente, uno de los mayores usos de las “hero images” es en las cabeceras, donde definitivamente se convierten en un elemento para captar la atención. Además, podés darle a tu página un toque de personalidad bien versátil: si cada sección tiene una cabecera distinta, aunque siguiendo una misma línea gráfica, lográs romper la monotonía del sitio, sin mencionar que distinguirás las secciones fácilmente.
5) Resaltar el contenido con las animaciones
Durante los próximos meses continuará la proliferación de los Cinemagraphs, tanto entre diseñadores como consumidores, dejando a los GIFs en un segundo plano. Y en un panorama en el que parecían preferirse las fotos por encima de las ilustraciones, todo apunta a animaciones más coloridas, tipografías más atrevidas y al storytelling mediante gráficos interactivos y entretenidos. ¿Cuáles son las animaciones más típicas en los sitios web actuales? ¡Prestá atención!
★De carga: Sirven para entretener al usuario en el tiempo que espera la carga de la web. Por supuesto que deben sintonizar con tu personalidad y apariencia online, ser simples y, preferentemente, no tener audio.
★Menú: ¿Te suena el nombre off-canvas menú? Este concepto consiste en mostrar y ocultar la barra lateral de navegación, es decir, sacarlo del canvas para aprovechar al máximo el espacio de la pantalla. El menú oculto está creciendo en popularidad ya que permite ahorrar espacio en la pantalla, y los de tipo hamburguesa (tan comunes y útiles para dispositivos móviles) activan varios tipos de animaciones para mostrar los elementos del menú cuando se hace clic en un icono específico.
★Hover: Los efectos de estas animaciones se activan cuando se pasa el cursor por encima de algunos elementos, como por ejemplo los botones. Los hover hacen más intuitiva la navegación en una página web ya que avisan que esos elementos incluyen algún tipo de función, generalmente un enlace.
★Galerías, carrousel y slideshows: Son una forma de mostrar varias imágenes al usuario sin sobrecargar una página web. Son perfectas para portfolios, webs de fotografía y productos.
★Parallax: Aunque parezca una tendencia muy actual, se trata de un truco con mucha historia, inventado por Walt Disney para dotar a sus películas de dibujos animados de una ligera tridimensionalidad y realismo. El invento se bautizó como “cámara multiplano” y más tarde se adaptó al mundo de los videojuegos 2D, como Moon Patrol.
En diseño web se usa para generar storytelling a través del scrolling, es decir contar una historia progresiva: el fondo de la página se mueve a distinta velocidad que el resto, dando un efecto de profundidad y dejando ver partes que antes no se veían. Esta técnica de paralaje es muy útil para dotar a las webs de cierto dinamismo y contrarrestar la monotonía, siendo un efecto más que interesante para aportar valor al tedioso scroll y sorprender al usuario con algo que no se espera.
6) Material Design como alternativa al Flat Design
Así como el mundo real no es plano, todos los elementos de esta interfaz siguen un estilo con relieve, profundidad y sombras para lograr una representación del exterior. El Material Design surge con el objetivo de crear un sistema operativo homogéneo y sirve como lenguaje común para un amplio rango de dispositivos y experiencias de usuario.
7) Caída de las imágenes de stock y apogeo de las ilustraciones a mano
El foco está puesto en la originalidad ilustrativa y la disminución de los bancos de imagen. De hecho, los patrones de interfaz de usuario colocan dentro de los aspectos más importantes de UX a las marcas que se distancian de los íconos reiterativos y se acercan a las que producen ilustraciones a medida para destacarse entre la multitud.
Los usuarios de hoy en día buscan vivir una emoción auténtica a través de las marcas, y la verdad es que la imagen de un director comercial mirando una pantalla o dos hombres de negocios sonriendo y dándose la mano ya no generan confianza ni credibilidad sino más bien un acartonamiento farsante. Para que tu firma realmente genere una conexión con la audiencia, necesitás considerar cuidadosamente tus ilustraciones y animarte a crearlas siguiendo el pulso de la mano o el latido del corazón.
8) Avance del Diseño Modular
En diseño web, la modularidad consiste en el uso de bloques o widgets cuadrados o rectangulares, alineados a una grilla, para presentar distintos tipos de contenido dentro de un espacio manejable. No solo se trata de una gran herramienta de gestión e interacción, sino que ayuda a que el diseño luzca más profesional.
Además, este diseño modular es especialmente útil para sitios escalables y compañías que proyectan crecimiento, permitiendo incorporar contenido no previsto con una versatilidad enorme: mientras se llene la totalidad de las celdas que componen la grilla es posible agregar, eliminar, expandir, reducir y reordenar los módulos sin generar huecos, logrando un acople visual perfecto entre unidades de distintos tipos.
9) Valentía en el tratamiento del color, la tipografía y el logo
Definitivamente, el 2017 es el año de la riqueza en línea, la provocación y las acciones disruptivas. Mientras que antes muchas marcas y diseñadores se quedaban con los colores típicos y seguros, ahora son más valientes en su enfoque: saturación, tonos vibrantes y un resurgimiento en el uso de los gradientes permiten reproducir colores más ricos.
Mientras el juego cromático y las tipografías audazmente vivas pueden serte útiles para atraer la atención de los usuarios, los logotipos responsive, simples y maleables no sólo te ayudarán a mostrarte bien moderno sino a responder correctamente en cualquier entorno y continuar siendo funcional.
10) Un diseño enfocado en la conversación personalizada
Finalmente, y siguiendo el propósito transversal de todas estas tendencias (mejorar la satisfacción y experiencia de usuario) el diseño web busca cada vez más entregar contenidos de forma efectiva a la persona adecuada y en el momento oportuno.
El esfuerzo desde el desarrollo se enfoca en personalizar los mensajes siguiendo patrones demográficos (quién es la visita, cuál es su sexo, qué profesión tiene y de dónde viene), de comportamiento (qué páginas ha visto, dónde ha hecho clic, cuánto tiempo ha permanecido en la web, qué formularios ha completado, qué piezas ha descargado) y contextuales (cómo ha llegado al sitio y qué dispositivo o navegador ha usado).
Todos estos métodos de personalización de contenido, sumado a los formularios SMART, los Live Chats y los Chatbots reflejan un diseño cada vez más en intersección entre las necesidades del usuario y las del propio negocio. Así como los lectores quieren guardar, compartir y personalizar el contenido, las empresas buscan usar esos datos a favor de la conversión.
Si llegaste hasta el final del artículo, seguramente sos de los apasionados por el diseño web o de los que reconoce que necesita adaptarse a las tendencias actuales para no desentonar con los tiempos que corren. En Fuego Yámana podemos ayudarte no solo a adoptar tendencias en boga sino a sintonizarlas con tu marca al momento de aplicarlas. ¡Consultanos!
Melina Diaz
Últimas entradas deMelina Diaz (ver todo)
- Certificado SSL: Qué es, para qué sirve y por qué instalarlo en tu web - 2 de octubre de 2018
- Las mejores pasarelas y formas de pago online para un eCommerce omnicanal - 30 de julio de 2018
- 10 aspectos para alcanzar una fuerte identidad visual de la empresa - 25 de junio de 2018