miércoles, octubre 24, 2012

Webdagene 2012 process (english)

WEBDAGENE 2012, the event I talked about in my last post, and for which I made the illustrations took place the last week of September. This has been the most complex project in which I've been been involved to date, and one of the ones I enjoyed the most. This is why I would like to share a bit of the process we went through.

Inge Fossland and Thord Foss from Netlife Research contacted me after finding my Quadrophenia illustration in DABBAA (a directory of former students of the  University of Fine Arts of Salamanca). I do not quite understand the Salamanca-Oslo connection, but still is something wonderful. My illustration seemed to fit their needs quite well.

The theme this year, "Vs.", referred to the intention of the organizers of facing the speakers against each other instead of the usual linear succession of lectures. 

The illustration had to depict this confrontation avoiding any kind of graphical violence. After many proposals, we decided to place the action in an office. 

That  idea seemed to work pretty good. The profile of the conference audience is very wide, so we created an office that could be like the one of anybody there. On the other side, this setting gave us the opportunity to develope stories in an enviroment full of iconic elements and characters easy to recognise. For instance setting two gangs faced against (pencils Vs. Pens), using the telephones as telecomunications gear, the wastepaper baskets as drums, a fan as a radio antenna, etc. Inge and Thord were a endless source of ideas of this kind. In order to drawing them all, we would have needed a whole building instead an office.
 
 On the technical side, the illustrations had to be context sensitive and respond according to the different platforms from which the users were visiting the site. Resizing the browser window shows how, at a certain sizes, the illustration adapts to the new format.
This animation shows how the illustration 
changes depending on the size of the browser window 
(desktop, tablet and smart phone).



 


Thord and Inge wanted to experiment with the Parallax effect, therefore the characters had to be arranged in separate layers in order to create a gently movement effect when the site was resized horizontally. This had sense due to the plot that joins the three platforms (desktop, tablet, smartphone): two gangs faced  and approaching until they crash against each other. But we found out that to expect the user to resize the browser just to appreciate the effect, meant to add a unnecessary complexity. The effect had to be as subtle as to not hinder the users experience, but adding interest to the site. After some tries we decided to add the movement in a vertical motion, when the scroll is used. This created a subtle effect of displacement of the horizon line, emphasized by the different speed of the displacement of the layers.


Each illustration has several layers  
in which elements are arranged.





Thord and Inge created a .psd file in whom I was able to add all the elements I was creating. This file was organized in folders, so I could send to them the successive updates of the illustrations at the definitive order, size and disposition.




And, of course, there were a huge variety of applications related to the event in whose the illustrations had to be printed out (catalogs, flyers, programs, posters, acreditations, t-shirts...), therefore the elements had to be independent and versatile enough as to hold up this wide range of adaptations. So that's why every single element was created apart. It being an animation instead a static image with fixed overlaps, almost every character were drawn up in its whole.


Some of the characters and elements.







PROCESS


Due to the complexity of this illustrations I rather begin with a small pencil sketch, although in short time there will be nothing left of it. With the pencil, I can face quite fast the composition and the mood of the image, not getting lost in the details. It's a matter of pleasure as well. Make some handmade work is not going to affect the final result, but jumping back and forth between the computer an the paper, helps me to keep myself motivated and interested. There are even times where I sketch and look for ideas using acryl, inks or collages. None of this will stay in the final image, and even so, it is essential for me.

 Here you can see some of the stages of the process. Anyway, the real
walk through is not so linear at all.





Pencil sketches allow me to start quite early to work over the design mockups. Afterwards, I create all the single elements in Illustrator, where I build the illustration over the background image of the website body. Finally, I add textures and shadows In Photoshop, but character by character. The final files before flattening were massive!

Some of the various mockups we tried.




And this is it.

To work with Thord e Inge, from NETLIFE RESEARCH has been an unbelievable experience. Not only due to their professionalism and the quality of their proyects, but for the confidence, the attention, their encouraging words and all the details, during the two months we were working toghether and afterwards, keeping me updated about the event and the reactions about our work.

Thord, Inge: from here I want to say Thank you again!

If you want to know more, you can check out here photos and videos of WEBDAGENE 2012.

I hope you found this post interesting.

Thanks for reading!




martes, octubre 23, 2012

Webdagene 2012. Proceso. (Español)

La última semana de septiembre ha tenido lugar Webdagene 2012, el evento del que hablé en el post anterior y para el que he tenido el placer de realizar las ilustraciones.
Es el proyecto más complejo en que me he visto envuelto, así como uno de los que más he disfrutado, por lo que me gustaría compartir el proceso de realización del mismo.

Inge Fossland y Thord Foss, de Netlife Research, se pusieron en contacto comnigo después de encontrar mi ilustración de Quadrophenia en DABBAA (un directorio de antiguos alumnos de la Facultad de Bellas Artes de Salamanca en el que se muestran sus trabajos). La conexión Oslo-Salamanca es algo maravilloso que no me pudeo explicar, pero el caso es que mi ilustración encajaba con lo que ellos buscaban.

El lema de esta edición de Webdagene, "Vs.", aludía a la intención de los organizadores de enfrentar a los ponentes en lugar de la habitual presentación lineal de conferencias.
La ilustración debía reflejar este enfrentamiento evitando cualquier tipo de violencia gráfica. Tras varias propuestas decidimos situar la acción en una oficina. La idea funcionaba muy bien ya que el perfil del público que acude a las conferencias es muy variado, por lo que crearíamos una oficina que pudiera ser la de cualquiera de los asistentes. Por otro lado, este escenario nos daba la oportunidad de desarrollar narrativas dentro de un entorno lleno de elementos y personajes icónicos muy reconocibles, como por ejemplo establecer dos bandos (lapiceros Vs. plumas), usar los teléfonos como equipo de telecomunicaciones, las papeleras como tambores, un ventilador como antena de radio, etc. Inge y Thord fueron una fuente inagotable de ideas de este tipo. Para dibujar todas hubiéramos necesitado, más que una oficina, todo un edificio.
 

En cuanto al aspecto técnico, las ilustraciones tenían que ser sensibles al contexto y responder según las diferentes plataformas desde las que se visitaba la web. Redimensionando la ventana del navegador desde la página de WEBDAGENE 2012 se ve cómo a partir de un determinado tamaño la ilustración cambia adaptándose al nuevo formato.

 
En esta animación se muestra cómo la ilustración 
cambia según el tamaño de la ventana del navegador 
(sobremesa, tablet y smart phone).

 

Thord e Inge querían experimentar con el efecto Parallax, por lo que los personajes debían de estar organizados en planos separados para generar un sutil efecto de movimiento al redimensionar horizontalmente la página. Esto tenía sentido ya que el hilo narrativo entre las tres plataformas (sobremesa, tablet, smartphone) era el que los dos bandos se acercaran hasta colisionar. Pero esperar que el usuario fuera a cambiar el tamaño de la página sólo por apreciar el efecto añadía una complejidad inútil: el efecto tenía que ser lo suficientemente sutil como para no entorpecer el uso de la web, pero aportando interés. Tras unas cuantas pruebas decidimos añadir este efecto desplazando la línea de horizonte verticalmente al mismo tiempo que el scroll vertical, y ajustando la velocidad de cada plano según la distancia al espectador.


Cada ilustración tiene varias capas 
en las que se organizan los elementos.

 


Thord e Inge crearon un archivo .psd en el que yo podría ir añadiendo los elementos que iba creando. Este archivo estaba organizado por carpetas de tal forma que yo les entregaba las sucesivas actualizaciones de las ilustraciones en el tamaño, orden y disposición correctos.




Y por supuesto, también había multitud de soportes relativos al evento en los que las ilustraciones habrían de ser impresas (catálogos, carteles, acreditaciones, camisetas...), por lo que los elementos tenían que ser lo suficientemente independientes y versátiles como para soportar diversas adaptaciones. Así que cada elemento fue creado independientemente. Practicamente todos los personajes fueron dibujados por completo por tratarse de una animación y no de una imagen estática con solapamientos fijos.


Algunos de los personajes y elementos.





PROCESO


Por la complejidad de estas ilustraciones prefiero empezar trabajando sobre un pequeño boceto a lápiz, aunque al poco tiempo no quede nada de él. Con el lápiz encaro muy rápido la composición y el tono y no me pierdo en detalles. También resulta agradable comenzar sobre el papel. No va a afectar al resultado final, pero alternar entre el papel y el ordenador me ayuda a mantener la motivación y el interés. A veces incluso aboceto y busco ideas usando acrílicos, tintas, collage, etc.. Nada de ello quedará en la imagen definitiva y aún así lo veo imprescindible para llegar al final.


En esta animación se pueden ver algunos momentos del proceso, aunque 
la realidad no es para nada tan lineal como esta sucesión de imágenes.





Los bocetos a lápiz también me permiten empezar a plantear el diseño de la página. Después, creo cada una de las piezas en Illustrator, en donde voy armando la ilustración sobre el cuerpo de la web. Finalmente, añado sombras y texturas en Photoshop, pero ésto personaje a personaje. Los archivos antes de acoplar son gigantes...


Algunas de las muchas maquetas que nos intercambiamos. 




Y eso es todo.

Trabajar con Thord e Inge, de NETLIFE RESEARCH ha sido una experiencia increíble. No sólo por su profesionalidad y la calidad de sus proyectos, sino también por la confianza depositada en mí, por la atención, las palabras de aliento y los detalles, tanto durante los dos meses que estuvimos trabajando juntos como después, manteniéndome al tanto de lo que seguía ocurriendo y las reacciones que nuestro trabajo iba generando.

Thord, Inge: desde aquí os quiero decir de nuevo ¡Muchas gracias!

Aquí podréis ver fotos y videos de WEBDAGENE 2012.

Espero que os haya resultado interesante este post. 

¡Gracias por leer!








viernes, marzo 16, 2012

Webdagene 2012




¡Hola Blog!
Aquí tenéis un detalle de el trabajo que estoy acabando en estos momentos. Se trata de las ilustraciones para Webdagene 2012. Webdagene son una serie de conferencias y talleres sobre comunicación y desarrollo web que tienen lugar en septiembre en Oslo y que son organizadas por la consultoría de usabilidad Netlife Research. Bueno, no os cuento más, que voy a hacer una entrada chula contando el porqué de los porqués de la ilustración. Es un proyecto profesional bonito, de los que están bien pensados desde el principio. ¡Y además Thord e Inge son unos tipos estupendos! Espero que os guste.

Hi Blog!
Here you have a slice from my current assignment, which is about to be finished. I did the illustrations for the Webdagene 2012 conference, a event about Internet development and communication organized by Netlife Research, a user-experience consultancy. It will take place in Oslo in September.
Well, I'm not gonna tell you much more at the moment. I'm planning writting a throughful post with all the whys and who's of that project. It worths. It was such a well thought-out and enjoyable project. And Thord and Inge were really cool partners in crime! I hope you like it!

viernes, febrero 03, 2012

In progress

Hola amigos,
qué difícil se me hace escribir en esta birria de blog que tengo montado. Algún día lo arreglaré... pero qué pereza... Tengo un Tumblr que tampoco es que sea una maravilla,  pero la plantilla por defecto ya es bastante mejor que ésto que tengo aquí. De todas formas veo últimamente blogs de Blogger muy bien hechos, así que cuando acabe esta cosa loca que estoy haciendo para Noruega y con la que me lo estoy pasando en grande, me tocará ponerme las pilas.
La web está en marcha desde hace tiempo. Espero que os guste.

La imagen es una de las pruebas que hacemos para ver cómo funcionan los personajes juntos. Estas ilustraciones son muy elaboradas. No sólo es la cantidad de elementos, sino que hay que establecer un plan que permita cambiar colores, composiciones, formatos, etc.. La verdad es que esta planificación se lleva la mayor parte del tiempo pero el resultado merece la pena.

¡Gracias por pasaros por aquí!


Hi folks,
it takes me a lot of energy to write in such a mess for a blog. I will fix it eventually... I've got a new Tumblr as well. Not a marvellous thing, but the default themes are way better that the design I've here. I've seen more and more beautiful designed blogs from Blogger, which means that I should get up to date with the new features as soon as I'm finished with the assignment I have in my hands.
My new website is online too. I hope you like it.

This image is from my current job. It's for Norway, a crazy project I'm enjoying a lot. This is one of the many mock ups we have to make in order to create a system that allows us to change colors, compositions and formats all along the different applications. This stage takes the most of the time we have but the results worth it.

Thanks for visiting!

jueves, octubre 13, 2011

Actualizando - Updating

Hace tiempo que no actualizo ni el Blog ni la Web. Esto se debe a que estoy rediseñando ambos, que están hechos un desastre. Espero tenerlos listos en breve, con nuevos trabajos que he ido realizando durante el verano, tanto personales como comerciales.
Respecto a Twitter, creo que no es para mi. No descarto en un futuro volver a publicar allí, pero ahora mismo no soy capaz de administrarlo. Cada vez que lo enciendo el tiempo que no tengo se me escurre entre twits. ¡Un saludo!


It's been a long time since my last update. That's because i'm working in new design for both my website and my blog. Right now they feel like a disaster. They will be ready soon, with new comercial and personal stuff.
As to Twitter, i think it's not my thing. I don't rule out publishing there again, but right now i'm not able to administrate it. Every time i log in my productivity is suddently gone. See you soon!