Graphic principles of new UI in Kentico 8

Previously on the Kentico 8 redesign

In the last article I also wrote about the research, which helped us to reveal aesthetic style, and, primarily, to define rules for the next phases. Today, I am going to write more about our graphic principles.

The best design is invisible

A lot of people think of web design as an art. Of course, designers must have good aesthetic feel and must understand theory about typography, composition, colors, etc. But web design in itself is for sure classic utilitarian design. Sometimes an artistic approach is more required and in other occasions it is not so important, depending on the type of project that it is. But in the end, usability and clarity of content is, and will always be, more important than artistic value. This applies twofold for web applications.
 
Because of that, we made it our goal to create a look and feel that the user will neither admire nor notice, but instead, will find it helpful only if it is necessary. In other words, we want the user to focus on his work without any visual disturbance. If after a few months with Kentico 8 someone says that he doesn't know how it looks, for us it will be the best compliment. We think the best design for the UI will be an invisible one. To achieve this we had to focus hard on the background of our design system and set the principles; we found them to be as important as concrete visible parts like buttons, tabs or icons. We have adhered to a few of the following rules.

Grid system

The backbone of the new UI is a vector-based grid system for screen layout definitions, negative spaces and typography as well. Although in the final CSS properties of the browser there are pixels, in the code behind all widths and heights they are defined by the vector unit to bring responsive solution in the next versions. We called it a base-unit, and for the classic desktop screen resolution it is set to 16px; there is nothing easier than to simply change it with media queries to 24px for a mobile device, for example.  
Within the grid system we can also mention that we tried to unify all of the indentations. It is a little bit more complicated depending on the context, but in a nutshell, we can say that the distances among nonrelated elements are two times greater in comparison to the related elements. The new grid system is not perfect, yet. We know about some of its deficits (mainly in the vertical rhythm of the layout), but everything is ready for the next set of improvements.

Skeuminimalism

Flat design is one of the most popular principles in web design today. It is minimalistic, easy to scale, and fast. But on the other hand, it is also too sterile, rough and sometimes tight for complex applications as well. Yet, skeumorphism, which is almost lost, also had some advantages: For instance, its easy nature and many options for accentuation. Because of this we decided to go with the skeuminimalism, which is a combination of these two opposites. It means, that we are using decoration like gradients and shadows in the new UI, but only in the instances when it has a functional purpose.

In practice, it meant that we, first, removed any shadows, border, and gradient across the entire system. Thereafter, we added sharp shadow, to buttons (as an example) because we wanted them to be eye-catching. We also didn't add color to the background of the toolbars because there wasn't any reason to do it, but we added color to the background to organize sections like tiles on the dashboard or tabs. We believe that these small details make the new UI more intuitive in a manner that it wouldn't be able to if we had only used one of the approaches.

Text as interface

Principle, which is also known as Swiss style in graphic design, has been famous since the middle of the 20th century. It claims that the beauty of letters is enough to serve as a decoration, and, that in combination with perfect whitespace art (work with blank spaces), it is possible to show any information with various levels of importance. Nothing else is needed. This 'less is more' approach is also popular in web and UI design over the past years. We can mention Android or Microsoft and various others, as examples. Text became the interface, which is also very comfortable with the responsive design because text without any other graphic elements is easy to adjust to any device.
 
We also wanted clear typographic rules to achieve this great combination of aesthetics with readability and legibility. We tried various well-proven modular scales from traditional graphic design to defining typographic rhythm-relations among different levels of titles and paragraphs in our UI. In the end we chose scale 1.33, which is also called a Perfect Fourth.
For the main font-family we selected Segoe UI, which was developed for Microsoft, and in our opinion, is perfectly suited for any application. It is also part of the operating systems since Windows 7, so there is no external font-family needed to load. The fallback solutions, then, are Helvetica, Arial or another sans-serif. And of course, all of the headings, line-heights and indentations are defined by the vector base-unit, so it will be easy to modify it for another resolution.

Colors

We also defined finite sets of colors; they are reflecting not only moodboard, but also respecting accessibility guidelines according to WCAG recommendation. I agree that this constraint is sometimes limiting and against the aesthetic feelings of many designers because appropriate contrast between the text and its background seems heavy. But it brings more comfort for handicapped users and also for users in challenging light conditions, which is quite common in the era of lightweight and transferable devices.

Illustrations

All graphs are simplified as much as possible and in a way that doesn't affect the usability or meaning. In Kentico 8 we also have totally new icons set, where pictograms are showcased in their rawest form to be easily identified and recognized in various screen sizes and contexts. But I am not going to give you more information about this now because we will look at this issue in more detail in another article.

Find out more about Kentico redesign

This article is part of a series explaining how and why we redesigned the user interface in Kentico 8. Check out the rest of the articles from this series:

1. Introduction to Kentico 8 Redesign
2. New Application Structure
3. Navigation
4. Contextual help
5. Behind new look and feel
6. Graphic principles of new UI
7. Design system and evaluation process of new UI
8. Updating iconography
9. Execution timeline