A few weeks ago I got the idea to create some sort of an interactive infographic. As part of my journey on leveling up my skill set in design and programming I decide, to rise up the bar and start a new personal project. Therefore I want to visualize some of the Data, of this website and turn them into an interactive Unity application that fits well
into the CI of the Design Zoo.
Concept
The main idea is to have an application with different screens that visualize different aspects of the Website Visitors. Each screen gonna transit via an animation to the next state and offer the User new ways to interact with the information. Accordingly, these interactive touchpoints gonna be implemented:
- 3D world that the user can turn around with highlighted visitor countries.
- most viewed portfolio item,
- switch for different site events
- Visitor progress over year 2017
Basic composition and visual design
After I did some research on 2018 design trends, I decided to start with exploring different compositions that would attract the user attention. Therefore I constrained myself on not using colors so I could focus entirely on the different shapes in the composition. While designing this start screens here, I utilized already some of the design trends like mixing of different fonts, big type and a large use of negative space.
I continued my design process with adding more visual information like gradients, backgrounds, and the simple world. With the use of five different grid systems, I experimented with the look and feel of various layouts and different UI elements for the interactive touch points. I based the different screens designs on these grids:
- Four horizontal cols + three vertical cols in a small,
medium and large distribution - Rule of thirds
- 12 equal cols
- Mirrored golden ratio
- Golden canon grid
My goal was to give the composition a modern, clean and reduced look while incorporating current design trends and combine them with the CI of the Design Zoo. In addition, this designs should work as a wireframe for different UI elements and the upcoming visual design. Furthermore, they gone be used as a storyboard for some prototyping animations that
gonna visualize the user interactions.
Do you have questions or feedback? Get in touch I’m always curious to hear from you.
