Scroll infinito y modular

¿Cuál es el último paso dentro de la tendencia de diseño modular? El scroll modular. Lo cual quiere decir que cada módulo dentro de una página web puede tener su propio scroll, con lo que una sola pantalla podría tener varias posibilidades, independientes entre sí, de hacer scroll.

¿Parece demasiado complicado de imaginar? No lo es. De hecho, quizá ya lo hayas visto (aunque a veces es difícil caer en la cuenta). Cualquier sitio web en el que la barra lateral no se desplaza al mismo ritmo que el contenido principal está haciendo uso del scroll modular.

Pero las cosas se van a poner aún más interesantes. Imagina una web dividida en dos grandes columnas, cada una con su propio scroll. Ya existe, y puedes verlo aquí:

En realidad, todo empezó con el scroll infinito. Una tendencia que seguramente ya hayas notado a lo largo de 2015. Algunas de las webs más populares del mundo, como Pinterest, Twitter o Facebook ya lo usan, así que ¿por qué no deberían usarlo los demás?

El scroll modular y el infinito parten de la misma premisa: deslizar la pantalla (o un módulo) hacia abajo es más fácil y rápido que hacer clic. Ante todo, no interrumpe la experiencia de navegación al detenerse para cargar una nueva página. Las nuevas páginas se van añadiendo automáticamente a la pantalla según el usuario se desplaza hacia abajo.

 Módulos y texto modular

A nadie le gusta leer un párrafo interminable lleno de texto, ¿verdad?

El truco más antiguo para dividir textos y ofrecer un descanso al lector / usuario es escribir en párrafos cortos y dejar amplio espacio entre ellos (algo que yo estoy haciendo en este post, por ejemplo).

Pero hay un arma mucho más poderosa para maquetar una página web de manera atractiva: el diseño modular.

Es una técnica en la que todo se construye usando una matriz. Pero no tiene por qué ser al clásico estilo de cuadrícula, donde todas las líneas y columnas son iguales, como en un tablero de ajedrez. De hecho, puede ser exactamente lo contrario: una estructura libre y difícil de adivinar, que haga más interesante y atractivo lo que estamos leyendo, ya sea una web, un libro o un folleto.

Igual que cuando leemos una revista, un sitio web se nos hace más accesible cuando nuestros ojos pueden saltar de un módulo a otro, y el tipo de contenido va cambiando al mismo tiempo que nos movemos por el documento.

¿Por qué debería importarte esto, incluso si no eres diseñador? Si tienes un negocio online o un blog, imagino que no querrás que tenga un aspecto anticuado. Tu diseño tendrá mucho peso en la primera impresión que la gente se forme de ti.

Si pasas horas escribiendo un post para tu blog, ¿no te gustaría que tuviera un aspecto visual moderno y que destaque sobre los demás? Pues toma nota de estas tendencias y ponlas en práctica antes de que todo el mundo lo haga:

 1. Usabilidad

Un aviso: este va a ser un post en profundidad, en el que voy a tocar todos los aspectos del diseño visual. Si eres demasiado impaciente y quieres información rápida, quédate con esto, porque resume todo lo que voy a contar a continuación:

En 2016, el diseño girará en torno al usuario. La experiencia de usuario (UX) será la reina, y dictará el resto de aspectos a tener en cuenta a la hora de diseñar.

Recuerda esto a lo largo del post: a nadie le importará lo alucinante que sea tu diseño, si no es usable al 100%.

Si hablamos del diseño de una web, lo más importante será facilitar la interacción del usuario. Como saben ya todos los expertos en marketing digital, será muy difícil que un negocio online crezca, si no tiene muy en cuenta la experiencia de los usuarios.

 Diseño responsivo

Ya sabemos todos que hay que tener un sitio responsive sí o sí. Hoy, la del móvil es ya la “primera pantalla”. En lo que respecta al posicionamiento, Google está prácticamente “cargándose” a todos los sitios que no cumplan con (su última Guía de Calidad así lo dice).Y puesto que móvil hoy es ya la primera de todas ellas, la experiencia de usuario para móvil es clave. Un buen diseño responsive ya no es aquel que se ve correctamente en móvil o tablet. Un buen diseño responsive tendrá una usabilidad perfecta para móviles. Dejar fuera de la versión móvil pequeñas funciones que sí están disponibles en la versión desktop ya no es una solución aceptable.

Pero en 2016 el significado de la palabra responsive va un paso más allá. No basta tener una web responsive. Ahora, todo el trabajo gráfico debe adherirse a las reglas del sistema responsive. Lo cual quiere decir que ya no hay un sólo tamaño o formato válido para todo.Sí, la fiebre “responsive” llegará a los logos, banners y cualquier pieza de contenido visual que puedas imaginar. Pero no sólo online, también hablamos del mundo offline (prensa y por supuesto TV).

El mejor ejemplo de esto es la reciente campaña de Netflix, en la que rediseñaron su branding. Es una identidad visual completamente nueva, con un nuevo logo y nuevo material gráfico para todos sus productos, que sigue a pies juntillas los principios del diseño responsive.

Una de las cosas que hace Netflix es permitir que puedas cambiar de dispositivo para seguir viendo tu serie favorita – y esta campaña de branding logra dar esa misma sensación.

Lo importante para un diseñador es que no hace falta “estrujar” los elementos de branding para que quepan en la pantalla de un móvil. Mostrar sólo una parte de un logo, como ha hecho Netflix, es una forma de imprimir tu identidad de marca en un espacio más pequeño, al mismo tiempo que te libras de todo el ruido o excesivo espacio blanco alrededor que no necesita estar ahí.

Puedes estar seguro de que más marcas van a ir por este camino en 2016

Menús inteligentes

Algunos usuarios odian el casi omnipresente Menú Hamburguesa (esas tres rayitas horizontales que permiten expander o colapsar un menú completo). Se trata de un primer paso, si bien algo torpe, en la dirección de la navegación intuitiva. Pero es hora de dar la bienvenida a los menús inteligentes.

Menús de navegación ocultos, que aparecen de la nada según cual sea la acción del usuario, serán muy pronto la regla y no la excepción. De nuevo, el concepto clave es no distraer a los usuarios de lo que es realmente importante en cada momento.

Incluso si no podemos verlos el 100% del tiempo, nuestra experiencia nos dice que todas las páginas web tienen un menú. Por tanto, no hay por qué preocuparse, aparecerá cuando lo necesitemos.