Designing World 2016
Now, when the World 2016 is finally published we want to share a little on how we designed the interactive story.
Aim
Our main goal was to easily present the most important events from 2016. We anticipated that there is going to be a lot of them and through the careful selection process we ended up with selecting almost 40 events.
Process
Designing process is always divided between desktop and mobile and we think about the story per platform. Everywhere
- approach we used was based on timeline,
- didn’t want to show too many details at the first sight but provide them on demand
- we assumed that people will click on the calendar items they didn’t know about or forgot (“Ow, that happened this year?!”)
- there are extra commentaries, written by experts, which we wanted to link from the story but not include as their length differs and they deserve to be treated as separate entities
- every event is also an anchor so you can link directly to it but it opens the whole description.
Inspiration
Having this in mind we look for some inspirations and begin sketching initial prototypes. After some attempts we decided to go with timeline of calendar cards — like the old paper calendars we used to hang on hands. The navigation based on scrolling was not to “go down”, but instead from left to right.
Wireframes
Most of our projects is first drawn on paper. As soon as we have sketches done we move on the next phase. Wireframes. Now it’s time to prototype and check if it works, and all functions and user flow is right.
Some prototypes and research after we got it! We can start last and the most exciting part of the design.
Illustrations
We didn’t have a picture for every story we wanted to add. Nor the budget to buy. This limitation pushed us into going into drawings. It also influenced the key visual to be more related to the fact that we join forces with illustrator.
The key background is chaotic paint circling around some unseen but imaginative center.
Each illustration was prepared just for this story. Small drawings, with 1–3 colors and background.
Having all of that ready we wait for the final design to arrive.
<months later ;) >
Here it is:
Desktop version
Mobile version
Illustrations provided the whole story with different angle “world illustrated” and generated extra interest from the audience to see and read the whole interactive.
You can enjoy it HERE.
