Look And Feel Of UI

Visual redesign and institution of detailed visual language of the application.

Sneak peek of the new look and feel of Kentico CMS.

My role
analysis of graphic principles, workflows and frameworks, moodboards, design system, evaluation process, participation in the creation of the CSS/HTML component library with styleguide, implementation review

More detailed description avaliable at my blogpost.

Issue

Inconsistent UI was not helping the learning process and was a problem for the Kentico development team as well, since there was old markup and no design patterns. Moreover, the old-fashioned look and feel cost our sales representatives several important leads.

Old UI in the Pages application.

Example of old UI in the Pages application.

Old UI in the WebAnalytics application.

Example of old UI in the WebAnalytics application.

Old UI in the Newsletter application.

Example of old UI in the Newsletter application.

Visual Language

Moodboard

Everybody had their own idea how the new UI should look like and the moodboard helped us to reduce innumberable options of approaches to final one. It is based on three previous variants and was evaluated with the stakeholders. Thanks to moodboard everybody was on the same boat from the beginning of the visual redesign.

Design Principles

Graphic rules were instituted into every building block throughout the system, e.g. skeuminimalism, text as interface, accesible colors, etc. Main motto of the visual redesign was The best design is invisible.

New look and feel moodboard.

Design System

The reserach revealed that our development workflow had to change completely as well, since not only aesthetic but also development trends have radically changed over the past few years. Style Tiles aprroach helped us to deliver the graphics in 12 weeks from the research to the deployment of the HTML/CSS component library.

Design system of new Kentico UI, part 1.
Design system of new Kentico UI, part 2.

Evaluation Process

Semantic differential was held to obtain relevant results and avoid any non-conclusive statements. The feedback was gathered at our Kentico Connection conferences in Boston, Sydney and London.

Just the Style Tiles were evaluated, then adjusted according to the feedback and completed already in a browser via HTML/CSS.

Semantic differential for visual appeal evaluation

Component Library

The goal was to have dynamic visual representations of components that would be available from any browser, so developers could see the code and designers could adjust the behavior or look right via HTML/CSS.

Moreover, it also maintained a joint vocabulary among all people around the project. Later we added styleguide rules in order to help developers and designers to make consistent decisions.

Component library for new Kentico UI.

Skip to another project:

Contact

Meet me on my social networks.

Matej Kvasnovsky on LinkedInMatej Kvasnovsky on FacebookMatej Kvasnovsky on InstagramMatej Kvasnovsky on TwitterMatej Kvasnovsky on GoodreadsMatej Kvasnovsky on Vimeo

Or say hello in person on my trips throughout the world, from which I love to upload Instagram pictures. Join me on the streetball court and shoot a few hoops with me.