This week we had another solo run, creating a Microsite for an event, this was the challenge: “Your nomad design studio (aka you and your laptop) has been hired to design a ready-to-build website for a festival of your choice that will take place next year.” Don't forget that we need to create a responsive Microsite, so we need to start mobile first and then “grow” to desktop.

The existing website is dedicated to promoting the Panda channel and its shows. It's very childish and dedicated to children’s needs.

By being integrated into the Canal Panda´s website, as a simple information tab, the Festival loses impact. That’s is why there was the decision to create a Microsite, to support directly the user's needs regarding the Festival. To do so, I started to learn about the Festival and more specifically about the Panda Brand.

As I said the brand is very child-focused, using very simple fonts and colors, and the only information regarding the Panda Festival inside the Panda Channel website is about prices, dates and not much more. 

There are some other Festivals that, despite not being children's festivals, have dedicated spaces and activities for children, like Meo Sudoeste and Sol da Caparica.

With all of this in mind, I went for inspiration and created a Moodboard, even though it wasn't used exactly as planned, all the images and colors help me focus and keep on the mood that I’ve decided for the Microsite.

After a lot of experiences with colors, I’ve decided to use the Logo colors as my colors, black for texts, white for the spaces and backgrounds and that “oranged yellow” as a splash of color to draw attention to what I´ve needed to.

So, it was time to start my Low-fidelity prototypes and testing them, as you guys know, this is very, very important. Always test, and test and test, its an amazing source of information to use in your designs. Mobile first, don't forget…

With the learning from the tests on the Low-fidelity prototypes, we apply them in the next step: Mid-fidelity prototypes. Even if you think that its not necessary going from Low-fi to Mid-fi and then to Hi-fi, trust me, its so much better, you get to test your solutions on more time, so you have more feedback and when its time to the final stage, the Hi-fidelity, its much easier if you have your Mid-fidelity, its almost as a template that, now, you just need to fill with the final content.

And with that said, here you have my final designs, the Hi-fidelity prototype:

So, after all the designs where finished, it was time to document the work, so I’ve created my Style tile.

A little video demonstrating the Style tile that we can create with Zeplin:

The major learning in dedicated to Zeplin and the developer's hand-off, with this project and especially after learning the basics on HTML and CSS, I’ve found out the importance of well documenting our designs so that the next step of the process, and it's a hard one, can be easier.