Role: lead motion designer, campaign and site animator
Software: Adobe flash
Software: Adobe flash
havaiana's home site
this was my multi-awarded/over the top/lets make history/ site.
At the time we had no idea how big this was going to be. But when Adhemas showed me the layouts and asked if I wanted to animate this, I knew it would be a high point in my career.
it took a lot of effort, i remember the creative director asking me how long it would take to animate this, wile I was analyzing the layout, i just said "i don't know, never done anything this big.
i worked everyday, even on xmas and the homepage took exactly 35 days just of animating in flash.
I had to optimize it all, cut out textures that would let the site too heavy, redo my whole mindset, set reused assets, the whole thing uses only 1 mask repeated over and over. I had to develop a way that it would be a multipurpose mask that would reveal round and cornered stuff:
At the time we had no idea how big this was going to be. But when Adhemas showed me the layouts and asked if I wanted to animate this, I knew it would be a high point in my career.
it took a lot of effort, i remember the creative director asking me how long it would take to animate this, wile I was analyzing the layout, i just said "i don't know, never done anything this big.
i worked everyday, even on xmas and the homepage took exactly 35 days just of animating in flash.
I had to optimize it all, cut out textures that would let the site too heavy, redo my whole mindset, set reused assets, the whole thing uses only 1 mask repeated over and over. I had to develop a way that it would be a multipurpose mask that would reveal round and cornered stuff:
so simple, yet so powerful
even though the home site weighted about 1 mb witch is peanuts today but back in 2005 it was a big deal.
The whole site took about 6 months to finish animating, I was doing all by myself, and flash isn't very work friendly, you gotta do all by hand. but some of the dynamic menus and product flippers were masterfully coded by Flavio Ramos and it really helped to add some kick to it.
The whole site took about 6 months to finish animating, I was doing all by myself, and flash isn't very work friendly, you gotta do all by hand. but some of the dynamic menus and product flippers were masterfully coded by Flavio Ramos and it really helped to add some kick to it.
the layouts and illustrations were done by the god-like art director Adhemas batista that just created all that style after a year long going back n forth with the client trying new things and convincing them that this was going to be a revolution of how sites look from that day on.
I was lucky enough not only to work with the perfect crew but also to be given all the time and creative freedom do invent and create the animations the way I wanted. and the results speak from themselves, the whole project oozes passion and care for the brand that was reinventing itself.
back to the technical stuff, to cut out a bit of the solid colors most of the bg had a texture, the same that goes on the sandals on it, I had to break it into a small tillable chunk and compress as much as possible, fortunately flash would tile it without adding more (kb) weight to it.
Also you can check that there's a draggable sandal on the home site, that's how you'd navigate it. since the whole illustration is 2500x1800 px and rendered in vectors on a 1024x768 div some machines would struggle to run the site in a civilized fps, so I came with the solution, when you hold your mouse to drag the sandal, it would push the whole illustration to low quality (basically disabling the antialiasing), now it would scroll nice and fast, when you'd release it, it would quickly swap for medium quality and in 3 or 4 frames, back to full, that way even low end machines could enjoy the site. It's silly to think of this limitations now, but almost 20 years ago those were valid concerns, and I always found optimizing sites fun.
Another hidden thing that the menu can do is to zoom in and out, but I wanted to do something different that just scale it, and I just had bougth some new sandals so I got my old sony, shot this so I could basically rotoscope the movement, and this is the result:
seems just cool for the cool sake, but this was supposed to hold the navigation menu when the project started. this was a way to access/collapse the menu, but in the end there were too many buttons to fit in there, so we moved the navigation menu outside to the top and the site was better off that way.
Still kept the sandal. Flip it! it was too cool do die.
Still kept the sandal. Flip it! it was too cool do die.
internal product pages
extra pages
awards
2009 - HAVAIANAS - HAVAIANAS SITE
CANNES LIONS - GOLD PRIZE
CANNES LIONS - GOLD PRIZE
2006 - HAVAIANAS - HAVAIANAS SITE
FLASH FORWARD FESTIVAL 1ST PRIZE
LONDON INTERNATIONAL ADVERTISING AWARDS - GOLD PRIZE
EL OJO DE IBEROAMERICA - GOLD PRIZE
MM ONLINE - SILVER PRIZE
FAVORITE WEBSITE AWARDS
COMMUNICATION ARTS ANNUARY
Art Directors Club - Merit
FLASH FORWARD FESTIVAL 1ST PRIZE
LONDON INTERNATIONAL ADVERTISING AWARDS - GOLD PRIZE
EL OJO DE IBEROAMERICA - GOLD PRIZE
MM ONLINE - SILVER PRIZE
FAVORITE WEBSITE AWARDS
COMMUNICATION ARTS ANNUARY
Art Directors Club - Merit
Agency: almap bbdo
creative Direction: Sergio mugnaini
Art direction/illustration: Adhemas Batista
copy: Luciana Haguiara
code: Flavio Ramos
creative Direction: Sergio mugnaini
Art direction/illustration: Adhemas Batista
copy: Luciana Haguiara
code: Flavio Ramos
this was the homepage, insane, right? (2500x1800 pixels)
