Archivos en la categoria ‘Web Design’

JEWELPIC (2009)

October 6th, 2010

Jewelpic es un editor de fotos online gratuito que permite retocar tus fotos y hacerlas más divertidas con la aplicación de distintos elementos gráficos permitiendo al usuario compartirlas después via redes sociales tipo facebook o descargarlas a través del móvil. Dirigida principalmente al público adolescente, esta web y aplicación online está desarrollada y programada por Medios y Proyectos, corriendo la dirección de arte y diseño de la interfaz de cuenta de Kamestudio.

El editor, parte clave en la web, permite aplicar diferentes efectos en distintos estilos a fotos tomadas con la webcam o bien importadas desde tu mismo disco ordenador. También incluye herramientas básicas de edición de imágenes que nos permiten desplazar, escalar, rotar, recortar, escribir e incluso dibujar manualmente sobre nuestra imagen así como agregarle una amplia variedad de efectos preestablecidos.

Al inicio de la aplicación se te pide elegir entre dos estilos visuales, uno alegre y colorido donde predomina la ornamentación floral y otro más agresivo con elementos de diseño urbano.

Desde el momento de la elección, el diseño de cada apartado de la web, incluyendo la interfaz del editor de fotos, se adaptan al estilo visual elegido.

Mediante el registro en la web podrás acceder a las opciones de descarga del editor de fotos y compartir tus jewelpics con otras personas.

WEB DEL MuVIM MAKING (2006)

August 17th, 2010

El aspecto más llamativo de la web del MuVIM son sin duda las ilustraciones y diseños que pueblan cada uno de sus apartados. El diseño de cada uno de estos personajes está basado en un sector diferente del público al que pretende acceder el Museo y surgen como una selección de diferentes diseños previos que progresivamente fueron modificando su vestimenta y actitud para adecuarse a estos targets.

En cada apartado, aparecen en ocasiones ilstraciones que, al pulsar el enlace correcto, se descubren como parte de una animación fugaz pero rica en detalle. Debido a las limitaciones técnicas de la época, estas animaciones de 1280px de ancho no podían ser muy largas para evitar ralentizaciones fruto de las limitaciones del procesador. Así, estas animaciones aparecen como transiciones entre partes del mismo apartado para llevarnos de un lugar a otro como es el caso de los apartados de la BIBLIOTECA o de PUBLICACIONES.

Para optimizar el proceso desde el principio, primero limitamos el número de fotogramas que debe durar la animación mediante el uso de animáticas en 3D que nos permiten conocer el mínimo número de fotogramas necesario para describir la animación que buscamos sin que ésta deje de entenderse. Tomamos como base una duración de 18 fotogramas a 24fps (menos de un segundo) para describir cada animación. Así, con las animáticas, podemos hacer pruebas con diferentes recorridos de cámara buscando el más efectivo de acuerdo con la limitación de fotogramas con que contábamos.

Una vez decidido el movimiento de cámara en el que situamos al personaje y los elementos necesarios del fondo nos servimos del proceso de rotoscopia para el dibujo y animación de los personajes. Primero, fotografiamos a los actores en el número de fotogramas necesarios para completar la animación tomando como referencia la animática para emular los encuadres de cada fotograma.

Tras fotografiar toda la secuencia, se procede al rotoscopiado del personaje tomando como referencia el movimiento del actor fotografiado y sin perder de vista los diseños originales de los personajes para mantener la unidad en todas las imágenes de la web. Estos dibujos se mezclan después con los renders de los fondos extraidos del 3D aprovechando el movimiento de cámara de la animática y se postproducen para conseguir el look final de la animación. Los elementos interactivos del apartado tales como botones y textos animados, se incluyen a posteriori sobre la secuencia de fotogramas finalizada.

Durante todas las fases del proceso podemos ver como la animación se mantiene, en esencia, igual que en la animática.

En el apartado de EXPOSICIONES TEMPORALES, buscábamos transmitir la idea del flujo de público en contraposición a la inmutabilidad de la obra expuesta. Todos los personajes que recorren esta sala virtual fueron animados mediante rotoscopia, siendo primero grabados los actores y después aceleradas sus acciones antes de dibujar la secuencia. Un total de  7 animaciones individuales se repiten aleatoriamente a modo de flashes sobre las imágenes y textos que hablan de cada exposición.

WEB DEL MuVIM (2006)

August 17th, 2010

Habiendo trabajado ya desde el 2004 con diferentes museos de la Diputació de València, cuando el MuVIM se pone en contacto con el estudio para realizar el diseño de su página web, nos deja plena libertad para desarrollar el proyecto a nuestro aire aunque plantea tres premisas: Que la web sea espectacular, muy visual, y que parezca manga. Partiendo de esta base tan atractiva, el diseño de su web pronto se convirtió en un proyecto bastante personal con el que logramos bastante implicación y total libertad para explorar diferentes técnicas durante su desarrollo.

La web se centra visualmente en el protagonismo del edificio, obra  del arquitecto sevillano Guillermo Vázquez Consuegra, por una parte, y en el de una serie de personajes de estética cercana al cómic, creados por Miguel Esteve en el estudio. Todo ello en un blanco y negro integrador en el que los únicos elementos destacados son el logo del Museo y los carteles de las exposiciones reseñadas. Técnicamente, pese a ser una web realizada en Flash, poco de Flash hay en su creación puesto que todos los gráficos fueron creados y animados fuera del entorno vectorial del programa siendo una combinación de 3D y dibujos 2D de un coloreado plano pero con cierta sensibilidad en la línea. La idea era la de conseguir que cada fotograma de cada apartado de la web pareciera sacado de una película de animación en lugar de una web de un museo. Así cada uno de los apartados representa a los personajes en algunas salas del museo o en otros entornos que nos transmiten a un espacio contemporáneo relacionado con la comunicación y las nuevas tecnologías.

Hay que recordar que, en el momento en que esta web fue creada, las conexiones más rápidas que existían en España eran de 512K, con lo que crear una experiencia interactiva en la que se consiguieran mover animaciones de 1280 píxeles de ancho a 24fps era todo un reto para nosotros. Fue gracias a la optimización de los recursos utilizados durante todo el proceso que se consiguieron unos tiempos de carga más que óptimos en los que los apartados más pesados no tardaban más de 10 segundos en aparecer totalmente funcionales.

En aquella época, la web del MuVIM era una web ‘de pantalla completa’ puesto que las resoluciones habituales de las pantallas en ese momento no superaban los 1280×1024 píxeles y a duras penas comenzaban a verse los primeros monitores panorámicos. Así, en el 2006, ver una web con imágenes de gran riqueza visual moviéndose en toda la pantalla era una experiencia que entonces resultaba nueva y diferente. Hoy, siendo usual la implementación de vídeos a pantalla completa, todo esto parece una aventura del pasado.

Pese a ser una web creada siguiendo las directrices marcadas por el cliente en todo momento y que el propio Museo, bajo la dirección entonces de Román de la Calle, considera como representativa del proyecto que es para ellos el MuVIM, algunos sectores más conservadores del público no acaban de disfrutar de la experiencia propuesta criticando lo ostentoso del diseño y el aspecto visual de la web así como el exceso de animaciones en contra de las webs de diseño puramente html más propias del ámbito museístico. Pese a la divergencia de opiniones, la web aparece reseñada en 2007 en el libro WEB DESIGN INDEX BY CONTENT 03 de la editorial Peppin Press por su intuitiva navegación y destacable diseño.

A mediados de 2008, la actualización y mantenimiento de la web pasa a manos de la empresa valenciana Demini quienes plantean el rediseño completo de ésta en pos de un tipo de web completamente html y únicamente funcional. Desde la dirección del Museo se lucha para mantener nuestro diseño lo más intacto posible y obligando a la nueva empresa a respetar éste en todas sus actualizaciones. Pese a ello, muchos de los cambios son realizados con descuido y una total desatención del diseño original con lo que se aprecian errores en el uso de diferentes tipografías, simplificaciones en algunas animaciones y ralentizaciones en algunos apartados. Es por ello que, para disfrutar del diseño original de esta web sin interferencias de programación externas, hemos decidido subir en nuestro propio servidor una versión de la web del MuVIM tal y como quedó tras nuestra última actualización en 2008. Disfrutadla tanto como lo hicimos nosotros haciéndola.

Páginas: 1 2