El diseño Responsive para la Web sigue evolucionando igual que lo hacen los navegadores (Chrome, Edge, Safari, Mozilla, Opera…).
Para Mantener la competitividad los diseñadores web y desarrolladores deben mantener la vista adelante y mantenerse al día en lo que se está cociendo en cuanto a diseño web se refiere, pero sobretodo hay que mirar hacia lo que viene el próximo año.
Esto es lo que viene en el Diseño Responsive según el sondeo a un grupo de diseñadores que hizo la ZURB FUNDATION, el resultado estas 21 tendencias de diseño responsive para 2017:
UNO – Split-screen Design (Diseño de pantalla dividida).
Este tipo de diseños dividen un sitio web en dos columnas, habitualmente iguales, verticales y se están convirtiendo en un patrón.
Uno de los patrones más populares para los diseñadores es donde se busca una mirada simple pero correosa.
Este tipo de diseño de pantalla divinidad es perfecto para páginas que necesitan comparar dos productos, opciones o planes.
DOS – Animaciones a pequeña escala
Ya no se hacen animaciones innecesarias, todo se dirige a contar historias, a destacar interacciones relevantes para el usuario a guiar a los usuarios hacia donde el diseñador quiere que enfoque su atención.
TRES – Revisiones de producto en vivo.
El aumento de la competencia combinado con las conexiones a internet cada vez más rápidas ha llevado a las páginas de aterrizaje una interactividad mucho más sofisticada para mostrar lo que puede dar de si una aplicación web sin tener que registrarse o hacer una demo.
Capturas de pantalla y videos tomados desde la perspectiva del usuario ofrecen una visión de la herramienta para usuarios que quiere una experiencia cercana a la realidad.
CUATRO – Navegación Vertical
No hay razón para meter todo en la parte superior de la página, si se incluye un menú bien construido, los usuarios móviles son verticales y las webs pasarán a serlo.
Un menú vertical puede dar más flexibilidad para albergar opciones que un menú horizontal y tiene un beneficio adicional, el “Arriba y Abajo” da una jerarquía natural a los ítems que en este menú se incluyen.
CINCO – Interfaces basadas en Tarjetas
Pinterest y otros sitios han hecho popular el uso de tarjetas, han hecho que el diseño vaya aún más lejos en el uso filtrado del contenido disponible.
La tarjeta basada en interfaces hace que sea fácil agrupar una gran cantidad de contenido, son fácilmente utilizables por el usuario y se combinan perfectamente con el diseño web responsive.
SEIS – Encabezados y fondos de vídeo
Lo de que una imagen vale más que mil palabras se puede aplicar perfectamente a una web. En el caso del vídeo esta cantidad de valor añadido se multiplica.
Una história puede verse muy favorecida por el uso de un vídeo de fondo o con un encabezado de vídeo, da sentido a lo que le rodea y convierte el entorno web en algo donde el usuario se siente bien.
SIETE – Diseño para pantallas más Grandes.
Aunque el mayor enfoque se pone en las pantallas pequeñas de los smartphones, es importante ser bueno también en el diseño para pantallas más grandes.
Sólo el 32% de los usuarios suelen usar este tipo de pantallas grandes con resoluciones de 1920 píxeles o más, pero no nos podemos olvidar de ellos.
OCHO – Búsqueda dinámica.
Sugerir resultados de búsqueda ya no es algo que solo pueden hacer los grandes buscadores como Google o Bing.
La adición de JavaScript y Búsqueda dinámica ayuda a sus usuarios a acceder a los productos, artículos o servicios, muestran un contenido más rápido “ya digerido” y hace que el el usuario tenga una mejor experiencia general con las marcas.
NUEVE – Formularios a pantalla completa.
Los formularios a pantalla completa proporcionan a los usuarios un uso más eficaz y sin distracción del último paso hacia la conversión, con mayor atención en los móviles donde la conversión es mucho menos eficaz que en un ordenador de escritorio.
DIEZ – FlexBox Grid
Las estadísticas lo confirman, el 96% de los navegadores admiten un FlexBox Grid, los desarrolladores no lo están utilizando habitualmente, ignoro la complejidad de su uso, pero añade unas grandes posibilidades de diseño.
ONCE – Módulos y Componentes
En lugar de diseños de página completa, los desarrolladores web están usando cada vez más maquetas, temas y prototipos de piezas más pequeñas.
Este cambio ha sido popularizado por gente como Brad Frost que le ha dado nombre al Atomic Design:
“Nosotros no diseñamos páginas webs, nosotros diseñamos sistemas de componentes”
DOCE – Interfaces, Botones y Diseños de Bocetos.
El diseño plano es el que actualmente reina en el mundo del desarrollo web y pone énfasis en colores sólidos y líneas finas, en interfaces de usuario formados por dibujos e ilustraciones.
A veces todo esto se vuelve monótono, esta tendencia plana se corrige añadiendo “Diversión”, “Calor” y “juego” a través del diseño de elementos como botones o interfaces por parte de un ilustrador que le da vida a la web.
TRECE – Paletas de colores en Negrita.
la popularidad del diseño plano y material que simplificación de los detalles, se pone énfasis en el tamaño y la forma.
El uso de paletas más audaces y contrastes más audaces es un elemento de diseño que potencia la originalidad de una web, ayuda a agrupar opciones relacionadas evocando a las “Emociones” de los usuarios.
CATORCE – El diseño de un sitio web influenciado por las Apps.
Los sitios webs, especialmente cuando se ven desde un móvil, están comenzando a verse y sentirse más como aplicaciones nativas que como páginas web.
Los navegadores móviles modernos se están haciendo cada vez más potentes y permiten el uso de tecnologías como la ubicación del usuario, la orientación por medio del acelerómetro y giroscopio, la cámara, el micrófono, las notificaciones… un mundo de posibilidades.
QUINCE – Botones Fantasma.
Con el aumento de la tendencia de uso de vídeo y fotos de alta resolución los diseñadores son reacios a usar un botón opaco y amortiguar el impacto visual que este produce.
Los Diseñadores Web están Optando por “Botones Fantasma”, con contornos simples que permiten ver la imagen a través de ellos pero funcionando como un botón normal.
DIECISEIS – Cinemagráficos.
Es más que un simple Gif o un vídeo en bucle, “CinemaGraphs” son fotos solo en parte, pero con movimiento en una parte de ellas.
Es muy útil para llamar la atención de esta parte animada, para destacar un elemento específico.
Mediante el uso de Cinemagráficos puedes agregar una atmósfera especial y además ahorras ancho de banda con respecto a un vídeo.
DIECISIETE – Tipografía Intrepida.
Las fuentes web han hecho posible que los diseñadores tengan opciones y más opciones en el uso de la tipografía.
Inspirándose en movimientos como el Modernismo Suizo los diseñadores web están usando el texto con espíritu “aventurero”, el texto es un elemento del diseño principal y que funciona muy bien en un móvil, además de usar un ancho de banda mínimo.
DIECIOCHO – Mayor enfoque a la Accesibilidad.
Hasta ahora se ha diseñado para que una web funcione y se comporte correctamente en todos los navegadores, ahora hay que mirar un poco más allá y diseñar una página web para que funcionen bien y se comporte correctamente para todas las personas.
Ahora hay todo tipo de herramientas disponibles para los diseñadores web que permiten que una web se adapte bien a personas con necesidades y capacidades diferentes, usando técnicas de accesibilidad.
DIECINUEVE – Gradients Backgrounds (Fondos de Gradiente).
Con la introducción del diseño responsive web surgió la necesidad de crear fondos de pantalla que no necesitaran de una imagen de gran tamaño o peso, aquí entra en juego los fondos de Gradiente.
El CSS3 permite usar fondos de escalas variables, los Gradients Backgrounds que tanto ha popularizado IOS 7 y Apple.
Cuando se usan correctamente pueden agregar interés y dimensión a los diseños web de una manera sutil.
VEINTE – Esquemas monocromáticos de color.
El uso de un color único puede reforzar una marca, pone énfasis en el contenido y añade un tono moderno, atrevido, vanguardista a un diseño web.
Está demostrado que páginas con un color monocromático pueden conducir a unas conversiones muy alta.
VEINTIUNO – Imágenes Responsive.
Una web va a ser disfrutada por una enorme cantidad diferente de dispositivos, con todo tipo de tamaños, resoluciones…
En lugar que tener que decidir entre la calidad de la imagen y el tamaño del archivo teniendo en cuenta la velocidad de carga, los diseñadores pueden hacer uso de la mejor calidad de imagen para dispositivos que puedan soportarla.
Si quieres, puedes encontrarme aquí también:
Skype: ajsmorillas
WhatsApp: 693752424
Facebook: https://www.facebook.com/imorillascom
Twitter: https://www.twitter.com/ajsmorillas
Google: https://goo.gl/maps/u4YmtKY5S6z