En este blog de diseño web, hemos visto como a lo largo de los años las tendencias del diseño web siguen sorprendiéndonos y alcanzando niveles que hace años eran difíciles de imaginar.

En esta última década hemos sido partícipes como diseñadores, de una constante evolución. Desde las web más básicas, que simplemente parecían un documento word metido en una pantalla, pasando por aquellas horrorosas webs, en las que todo parpadeaba y en las que era necesario llenar la web de botones con el mensaje «pulse aquí», para posteriormente pasar a una época en lo que todo parecía que iba a ser flash y acto seguido abandonar la idea al darnos cuenta de que lo que verdaderamente era importante, era el SEO y la USABILIDAD.

En todo este tiempo, hemos vivido muchas mejoras en las conexiones de los usuarios, lo cual se ha visto obviamente reflejado en los diseños. Esto nos permitió empezar a utilizar grandes imágenes y backgrounds, a no estar tan pendientes del peso de la página. Nuevos dispositivos desde los que visualizar las webs, como los smartphones, iPhones, iPads,… Y en los últimos años, la implantación de una tecnología que ha dado un vuelco al diseño web y que como diseñadores nos ha permitido abrir la imaginación para poder realizar diseños con los que nunca antes nos habríamos atrevido, todo gracias a la implantación del jQuery.

Muchos pensaréis que todos esos efectos y diseños ya eran posible con el flash, efectivamente, tenéis toda la razón, sin embargo gracias al jQuery podemos hacer lo mismo pero sin penalización, sin renunciar al SEO, sin renunciar a la USABILIDAD, al peso de la página, etc…

El jQuery se ha impuesto ya en todos los diseños web, acompañado por el  HTML5 y de CSS3 es el presente del diseño web. Todavía no todos los navegadores están a la altura, pero esta vez saben que no les va a quedar más remedio, porque se trata ya de presente, de un presente que en gran medida ha sido introducido por las grandes compañías, como Google, Youtube, Facebook, Twitter, …

En mi opinión, la tendencia de diseño web para 2012 se apoyará en cuanto a tecnología, en jQuery, HTML5 y CSS3, en cuanto a contenidos, cada vez más específicos, siempre dirigidos al debate y a la divulgación en redes sociales, a través de Facebook, Twitter y teniendo muy en cuenta las posibilidades que nos da el geoposicionamiento.

En cuanto a diseño, las webs se están «estirando». Cada vez es mayor el número de webs verticales, una web contenida en una única página vertical.

2012 seguro que nos depara un montón de novedades, pero hoy vamos a destacar el diseño de web vertical con movimiento generado en jQuery.

Estas páginas comenzaron a diseñarse hace ya tiempo, pero tenían el problema de que al tener todas las secciones la misma url, nos cargábamos de un plumazo todo el SEO y la usabilidad de la web. No nos posicionaba y era imposible mandar la url de una sección.

Este problema se solucionó con el jQuery, ahora cada sección tiene su propia url, con lo cual no hay ningún problema para divulgarla.

Por lo que he visto y he leído, parece ser que tampoco el SEO se ve perjudicado y ahora además de todo esto se une una nueva forma de diseñar que nos permite a través de la carga de imágenes, simular video o flash a la vez que nos vamos desplazando por la web. Conseguimos espectacularidad y atención del usuario, siempre que entras en una web así, deseas seguir bajando el scroll para ver cual va a ser la próxima sorpresa.

SCROLL PARALLAX

El Scroll Parallax proviene del diseño de videojuegos. Se trata de un escenario compuesto por un fondo que permanece quieto y una serie de capas superpuestas que van moviéndose a distinta velocidad, produciendo una sensación de profundidad.

El resultado es un tipo de web muy espectacular, al no llevar flash, se puede ver desde un iPhone o iPad. No es un tipo de web diseñada para mucho contenido, por lo que por ahora se está utilizando para imagen corporativa de empresas o sobre todo para publicidad de nuevos productos, sobre todo en el sector del automovilismo, donde empresas como Hyundai, Volkswagen o Citroen ya utilizan estos diseños para mostrar sus nuevos modelos.

Básicamente, se trata de una web contenida en una única página vertical. El paso entre secciones puede hacerse bien por medio del scroll o a través del menú, con movimientos acelerados. La particularidad de estas webs es que al hacer scroll sobre ellas, accionamos sucesiones de imágenes que simulan movimiento, consiguiendo un espectacular efecto.

Como siempre, una imagen vale más que mil palabras. Os dejo una selección de las webs que he conocido y que me han sorprendido.

Si conocéis más, añadidlas en comentarios. Espero que os gusten.

 

 

 

 

 

 

 

 

 

 

Seguiré añadiendo ejemplos que me parezcan buenos, además, si estáis interesados en estos efectos, os dejo material para aprender más y descargar ejemplos.

• http://www.webdesignshock.com/one-page-website/
• http://www.davecranwell.com/content/jquery-scroll-parallax-plugin
• http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
• http://webdev.stephband.info/parallax.html