After working 4 years in the field of digital design I got obsessed with tidying up and sorting information. This lead to the creation of a systematic approach for designing user interfaces.

It is an object-oriented, programming-inspired approach, a collection of various ideas that are universal. Use it for working with your favourite design software or for coding. It helps to connect designers with programmers and puts them on the same page — better communication leads to a better understanding and creating better things.

This approach is used mainly at a later designing stage, usually during finetuning of the project when you have more time to think about the relationships in your visual system. Utilising in the early stages of the project while prototyping and wireframing would mean an easier adaptation into both designing and programming.

Of course, the general idea of visual collections and their application into the design process is old news. I was inspired by Material Design, SCSS variables, Macaw, Origami, Atomic Design and various pattern libraries.

My Intentions Are Pure

While working on larger-scale projects I got fed up with the troublesome designing process in Sketch because of the lack of structure. Although the latest updates (like nesting symbols) and styles plugin in Craft made some progress in the right direction, it still doesn’t reach the level necessary for a flawless workflow. To get a better picture, here are some examples:

Clear Overview Of Variables

I want to have a clearer overview and to see what kinds of rounded corners, font sizes, font colors or background colors I am using, to avoid ending up with 20 various text sizes or 50 shades of grey.

What is this mess?

Grouping Of Styles

Which parts of the design are linked with certain changes in variables? I want to define which font is suitable for certain cases — a sans-serif for the UI styles and serif for larger texts to ensure better readability. In another example: having 2 types of typography styles — one version for light backgrounds and one for dark ones.

Um … which font do I use for what?

Pairings of Variables

I want all of my 16px font sizes of Karla to have a height of 1.2, regardless of it being a paragraph, a note, an item description or a quote.

Trying to maintain the same font-weight/line-height combo is a struggle.

Changing Only One Variable

I want to make a small change in the middle of the project with a 50+ artboards and I don’t want to go through all of them. Let’s say I want to change a font for all of the headings in one place and see it synchronized in each heading style.

But I just want to change the headline font…

I realized that I keep repeating the same course of action in every project– like using the main font color, the secondary font color and disabled font color. I also realized I don’t have any control of the visual hierarchy I have created. That’s why I tried to automate the changes I applied the most.

Basic Principles

Everything Is An Object

Every layout consists of objects — headers, footers, headlines, buttons, dropdowns, links. You can think of these objects as separate entities and design them on their own.