We care deeply about design at Mixpanel and that extends to our Data Driven Conference 2013. The design team put together a quick visual case study to share the process behind the design of the DDC2013 website. Sometimes the best parts of a project get lost so here are some of the highlights.
1. Layout ideation
First we put on paper all the ideas, thoughts we had, and what we wanted the layout of this page to be. It had to be a single page and the content had to be easy to digest and scan.
2. The top level framework
Once we had a clear direction on the layout we created a top level framework that focuses much more on the content than the visual style. Sometimes you can already tell, by just looking at it, if its gonna turn out great or not.
3. The color and typography choices
We chose a color scheme really close to the Mixpanel site. For the typography we used “Dosis”. An awesome Google font you can download here. We try at Mixpanel to go for fonts with a futuristic look. Dosis felt like it.
4. The visual direction
The idea of the layout was to use modules (kind of metro style) that would adjust according to the size of your screen. Each module was treated with a lot of love. We also added small interactions to make your experience even more enjoyable.