La nueva web de Rosebud, nominada a los premios Awwwards

El concepto de «voyeurismo creativo» es la base para la creación del nuevo site de la agencia valenciana de comunicación, de amplia complejidad técnica.

Rosebud

La nominación a los premios Awwwards, galardones de gran prestigio a escala internacional en diseño web ha supuesto un importante espaldarazo a la labor de la agencia de comunicación valenciana Rosebud en cuanto a su nuevo site. La premisa básica de la que partió esta agencia de nuevos medios a la hora de abordar el trabajo (con una duración de más de cinco meses) fue la de no hacer una web de agencia al uso. La nueva web de Rosebud debía representar su forma de entender la comunicación interactiva, filosofía y modo de trabajo. Por encima de esto Rosebud quería ofrecer una experiencia que no dejara indiferente, enfocada a que el usuario pudiera interactuar con la marca, descontando hechos como un alto nivel de diseño y acabado en transiciones.

Rosebud

A escala de concepto, la web intenta ofrecer una experiencia para acercar a cualquier persona interesada por la creatividad a una fuente de inspiración como la vida y las situaciones que le rodean cada día. Este concepto fue bautizado como “voyeurismo creativo”, representado través de una historia contada en imágenes que recogen distintas situaciones cotidianas y donde siempre está presente Rosebud, como un voyeur que vigila y está atento a los gustos, emociones, motivaciones y situaciones que viven las personas en sus entornos para poder utilizarlas y canalizarlas para crear mensajes potentes para las marcas.

Rosebud

Para poder transmitir ese concepto de «voyeurismo creativo», no sólo la web se vale de imágenes en widescreen que reflejan los slices of life, sino que se creó una herramienta bautizada como ‘Tweet Mode’ y que activándola permite al usuario comprobar qué se dice en tiempo real en Twitter sobre los temas sobre los que versan las imágenes, pudiendo encontrar temas relacionados en cualquier rincón del mundo. Además el usuario puede twittear utilizando esas conversaciones y convertir sus comentario en un píxel de background del Tweet Mode.

Rosebud

Además de este pequeño juego que combina las imágenes de la web con Twitter, las imágenes de fondo de la home aparecen aleatoriamente cada vez que se entra en el website y se recogen todas a modo de colección en la sección “Timeline” donde el usuario puede ver en una línea de tiempo personalizada cada imagen con su Tweet mode y tweets asociados. El resto de la web, como el portfolio o la «bonus bar» (un extra escondido en el faldón de la web y que ayuda a aportar una dosis extra de inspiración al visitante) ayudan a completar la experiencia. La tecnología utilizada es la estándar actual para el desarrollo de contenidos interactivos con soporte en browsers: HTML5, CSS y JavaScript. Para el servidor, PHP y MySQL. Y para el backoffice se empleó Drupal.

Rosebud

Por último, en cuanto al diseño, el objetivo era conceder la máxima prioridad a la imagen. La fotografía, que debía plasmar el concepto de voyeurismo creativo, debía tener todo el protagonismo para contar historias por lo que era necesario un diseño más neutral. Partiendo de esta premisa, se decidió usar un color beige para el fondo ya que aportaba más calidez que el blanco y a su vez, permitía seguir con ese objetivo. En contraste, el header es la parte más corporativa. Un menú de color negro que aporta un extra en una web dónde todo el protagonismo es para las imágenes.

Rosebud

El menú es fijo y siempre presente para que no tener que subir con el scroll para acceder a él. Al tener pocos elementos, se ha jugado con transiciones que enriquecen a nivel interactivo: transiciones verticales para cargar imágenes, rollovers conceptuales para unir el mundo real con el digital. Para el apartado de trabajos se construyó un grid irregular pero con una altura predefinida para todos, ya que Rosebud no quería mostrar las imágenes en thumbnails cuadrados perfectos. El uso de las sombras permitía levantar un poco los elementos del lienzo y darle otra dimensión.