The Cardano Roadmap refreshment came as a part of a general refurbishing program. The aim was to create a recognizable overall look and feel for all the online platforms Cardano have. I was asked to design the pages in a way that they share the same characteristics but have their own identity, as it was called ‘being the same but different’.

Read about the full team effort

cardano-roadmap1cardano-roadmap1

GROUNDWORK

The first steps for me was finding out the style direction and creating those core visual elements that can be shared amongst the pages and serving as a backbone of the further design efforts. I started with choosing iconography and compiling a base color theme that could be used to compare different arrangement and pick from the potential style directions (eg. flat/minimal/futuristic…).

cardano-roadmap2cardano-roadmap2

For each potential direction a test design was created using that base theme in different manner (variations in icon style, typography, spacing, color swatches and gradient options…). The test versions were shared with the colleagues to gather feedback and to be able to pick those elements that can be taken further. After several review rounds and internal discussions the 4th test design eventually bacame an agreed starting point of building up the new design system.

BRAND CONCEPT

To establish the brand personality I created a flexible style guide prototype where all the newly born sub-brand could be added without losing the coherence between the brand elements.

cardano-roadmap3bcardano-roadmap3b

LAYOUT AND CONTENT ARCHITECTURE

The main goal at this stage was to optimize the layout and provide an easily scannable/readable content arrangement. Aligned with the external feedbacks I started to work on the in-page navigation, the content hierarchy and filtering options.

cardano-roadmap4bcardano-roadmap4b

GOURCE - INTERFACE FOR A LIVING ARTWORK

The last step of the refinement work was related to the header artwork, the Gource, which is a dynamic project visualization created from the git repository directory structure. Its form is continually evolving in real-time based on developer commits. The last step of the refinement work was related to the header artwork, the Gource, which is a dynamic project visualization created from the git repository directory structure. Its form is continually evolving in real-time based on the developers' commits. I needed to create a flexible layout for the control elements and a theme for the overall look and feel, that can be customized for the upcoming pages as well.

cardano-roadmap6bcardano-roadmap6b
cardano-roadmap-gource-art-workcardano-roadmap-gource-art-work
button-live2button-live2