tendencias-diseño-web-responsive

En un periodo corto de tiempo, el diseño web responsive ha pasado de ser una idea interesante a ser todo enfoque aceptado por el sector de diseño. Ahora que el 2016 está a la vuelta de la esquina, podemos ver que la evolución de este enfoque trae consigo un número de mejores prácticas y también tendencias interesantes.

Demos una mirada al pasado y veamos las tendencias de éxito de este año y, sobre esta base, miremos el futuro.

1. Una narrativa cautivadora

La humanidad siempre ha usado historias para transmitir ideas y compartir información. Las historias activan partes de tu cerebro que hechos simples no harían. En las páginas web, la narrativa crea contenidos web más interactivo y memorables.

Este enfoque ha sido adoptado por páginas web como Medium y por muchos escritores web que ahora usan historias para transmitir detalles importantes y datos interesantes.

Al usar la narración en tu diseño web responsive, debes incluir algunos detalles:

  • Engancha a los lectores de forma rápida y asegúrate de que tienes una fuerte apertura por debajo de doblez en todos los puertos de vista, de modo que los lectores la ven de forma inmediata.
  • Asegúrate que los largos de líneas sean óptimos tanto para pantallas grandes como pequeñas. Las líneas que son muy largas son difíciles de seguir, mientras que aquellas que son muy cortas quiebran el flujo de lectura normal. Opta por un rango entre 6 a 75 caracteres por línea y ajusta el tamaño de las fuentes como sea necesario.
  • Usa imágenes donde lo necesites para acentuar la historia, pero ten en cuenta el tamaño de los archivos y asegúrate que se descarguen rápidamente en todos los dispositivos.
  • Facilita a los lectores el que compartan historias. Considera colocar la función de compartir tanto en la parte superior como inferior del contenido para que los lectores no tengan que desplazarse para hacerlo. Esto es útil especialmente en esquemas de pantallas pequeños que requieren más desplazamiento. Asimismo, asegúrate que estos botones puedan ser usados en pantallas táctiles.

Puedes ver estos puntos en práctica en la página de inicio de Vice.

Portal móvil

tendencias-diseño-web-responsive-1

Portal web

tendencias-diseño-web-responsive-2

2. Menos es más

Muchos profesionales en SEO y expertos en diseño web sugieren que mientras más, mejor.

Su argumento acerca de que una página web con muchas secciones tiene más probabilidades de posicionarse con una mayor cantidad de palabras clave. El problema con crear estas páginas web increíblemente densas es que pueden ser confusas de usar para personas y son más difíciles de actualizar. Las páginas web y contenidos desactualizados son, por lo general, pasados desapercibidos, crear páginas web que están repletas de todo ya no es relevante.

Cuando pienses en cargar tu contenido en dispositivos pequeños, puedes imaginar la pesadilla de la usabilidad:

tendencias-diseño-web-responsive-3

Muchas páginas web han empezado a tomar el enfoque opuesto. Las páginas más pequeñas enfocadas en temas específicos están eliminando cualquier sección o contenido que no sean crítico para su experiencia de usuario.

La tendencia «menos es más» puede ser vista en la popularidad de las páginas web únicas, incluyendo las páginas web parallax. También la puedes ver en páginas web cuyos mapas de sitio son bastante simplificados.

3. Patrones en todo sitio

Cuando un enfoque se populariza tanto y es usado por muchas personas, como el diseño web responsive, es frecuente que emerjan patrones.

El valor de usar un buen patrón de diseño web para resolver un problema es que los usuarios se familiaricen y se sientan cómodos con tu solución. El lado malo de usar patrones establecidos es que, si todos usan en mismo enfoque, las páginas web empiezan a verse de forma muy similar y se pierde la particularidad. Debes sopesar los beneficios de usar un patrón establecido y el lado malo de ser no ser capaz de diseñar algo nuevo y único.

Un patrón de diseño web responsive es, por ejemplo, la navegación off-canvas.

Vista en ventanas pequeñas

En smartphones, un menú desplegable alberga todas las opciones:

tendencias-diseño-web-responsive-4

Vista en ventanas medianas

La vista en tablets expanda la navegación horizontalmente y añade una llamada a la acción principal en medio de la pantalla junto con una llamada secundaria en la parte inferior de la pantalla.

tendencias-diseño-web-responsive-5

Vista en ventanas grandes

El esquema de navegación y contenido sigue siendo igual a la vista en tablets.

tendencias-diseño-web-responsive-6

Al evaluar los patrones de diseño, siempre formúlate las siguientes preguntas:

  • ¿Qué problema estoy tratando de solucionar?
  • ¿De qué forma otros han resulto el mismo problema?
  • ¿Existe un patrón de diseño para esos problemas?
  • ¿Este patrón se usa en demasía?
  • De existir, ¿qué barreras existen para usar este patrón en mi proyecto de diseño web?

4. Esquemas con tarjetas

Una de las tendencias de diseño web en la actualidad es el uso de los esquemas tipo tarjetas. Popularizado por Pinterest, esta tendencia conforma un enfoque ampliamente usado para presentar pedazos de información escaneables en una página web.

Los esquemas con tarjetas son muy atractivos al considerar un diseño web responsive para tu página web. Debido a que estas tarjetas puede separar el contenido efectivamente en bloques más pequeños, estos bloques pueden acomodarse con más facilidad en diferentes tamaños de pantalla.

Vista en ventana pequeña

tendencias-diseño-web-responsive-7

Vista en ventanas grandes

tendencias-diseño-web-responsive-8

Las tarjetas pueden mejorar la distribución de la información. Es por esta razón por la cual páginas web como Twitter y Google han seguido a Pinterest al usar este patrón de interfaz de usuario y por la cual más y más páginas web aplicarán este enfoque este 2016 y en los siguientes años.

5. Menús escondidos

Otro ejemplo de patrones de UI que ha sido popular por muchos años es el menú escondido. Desde menús emergentes hasta voladores que se revelan cuando colocamos el mouse sobre el famoso «menú hamburguesa», hasta menús deslizantes, los menús escondidos son usados para ahorrar espacio y, al mismo tiempo, habilitar la opción de menú para los visitantes.

Aunque el beneficio de ahorra espacio en una página web responsive es indudable, existen algunas personas que argumentan en contra de la práctica de menús escondidos. Es menos posible que se acceda a menús que se esconden para ahorrar espacio a comparación de aquellos que sí se dejan ver.

Vista en ventanas pequeñas

tendencias-diseño-web-responsive-9

Vista en ventanas grandes

tendencias-diseño-web-responsive-10

Un experimento sobre eso demostró que estos íconos de navegación escondidos reduce a la mitad el tiempo de interacción.

Los desafíos de la navegación responsive son algo que los diseñadores UI siguen luchando. Pese a la posible desventaja de los menús escondidos, espera que este patrón de diseño siga siendo una opción popular para la navegación responsive.

6. Grandes hero images versus cero hero images

La tendencia de las hero images es bastante interesante.

Muchas páginas web usan gigantescas hero images (imágenes en sus encabezados) que abarcan todo el ancho y alto de una pantalla. Otras páginas web han tomado el enfoque opuesto evitando su uso y prefiriendo solo colores fuertes y una tipografía rica.

Hero images

tendencias-diseño-web-responsive-11

Cero hero images

tendencias-diseño-web-responsive-12

Estas dos interesantes tendencias ofrecen sus propios ventajas y desventajas. Usar imágenes ricas puede añadir un estilo visual a un diseño web, pero las imágenes gigantes significantes requieren tiempo extra para cargar. Remover las hero images grandes puede disminuir la intensidad visual de un diseño web, pero la pérdida de estas imágenes incrementa el tiempo de carga.

De acuerdo con un estudio de experiencia de usuario realizado por Google/YouTube, quitar estas imágenes puede ayudar a crear una página más llamativa. En su estudio, los investigadores descubrieron que reducir la complejidad de una página y, al mismo tiempo, incrementar su propitipicalidad, puede incrementar su atractivo.

En resumen:

Hero images:

  • Visualmente intensas y llamativas
  • Reducen los tiempos de carga

Cero hero images:

  • No visualmente tan intensas
  • Tiempos de carga más rápidos
  • Menos complejidad puede incrementar el atractivo general

Ambos enfoques de esta tendencia son válidas y cada una será popular este 2016.

7. Nuevos tipos de publicidad

Los anuncios en línea y páginas web responsive siempre ha experimentado un relación desafiante.

Durante años, los anuncios en línea fueron vendido sobre la base de tamaños y ubicaciones. Esto crea un problema con páginas web responsive debido a que el tamaño y ubicación de los elementos UI cambian con los diferentes tamaños de pantalla. Esto hace que los anuncios con tamaños fijos no encajen bien en un ambiente responsive.

Los cambios en la privacidad y cómo los navegadores web lidian con los anuncios también están causando una conmoción.

tendencias-diseño-web-responsive-13

El iOS9 de Apple anunció que ahora permitirán que desarrolladores externos creen programas de bloqueo para su navegador móvil Safari. Este cambio tiene el potencial de cambiar la forma en que la web funciona.

En el futuro cercano, todas las páginas web —responsive o no—tendrán que pensar la forma de usar los anuncios.

8. Mejor flujo de trabajo

No todas las tendencias pueden ser vistas en la página web final. Algunas tendencias suceden detrás de bambalinas, mientras la página web es diseñada y desarrollada. Un mejor flujo de trabajo responsive es una de esas tendencias.

Un cambio importante que muchos diseñadores están usando en la creación de prototipos responsive.

tendencias-diseño-web-responsive-14

Y estas son algunas de la tendencias de diseño web que nos trajo el 2015 y dominarán el 2016. Si alguna de ellas te gustó y te gustaría aplicarla a tu página web, entonces cuenta con Staff Creativa. ¡Contáctanos!

Traducido y adaptado de The next web. Si encuentras un artículo interesante en idioma inglés sobre Diseño Web, Redes Sociales, Imagen Corporativa o Programación, háznoslo saber en los comentarios y nuestro equipo considerará su traducción y publicación.

Deja una respuesta