Building an Interface Design System

When working with excitement on a new project, we hope everything to go smooth; pixel by pixel; but where do we make mistakes and everything turns into a nightmare?

Could we say that there is a fundamental problem?

If you are in the ecosystem and have taken part in many projects over the years, you probably know that we try to be as meticulous as possible when moving forward. Then eventually, the problems could emerge and get bigger.

When we take a closer look we see that we live in a world where we may be oppressed by project managers or clients that have any idea of whatsoever about the design industry. As a reflection of that, our mood affects the complexion of our design. In the end, the quality of the project falls rapidly as we go on further.

Therefore, we better analyze how we can get things in order to satisfy our designer obsessions, in the next phases.

Research

A book I read had the exact sentences; “Nothing is original, so embrace the interaction, learn from others’ work, and dream of building your own way by blending these again.”

These sentences got to me because the first thing I do when starting a new project is research designs that could inspire me.

The name given for this study is “Benchmark” study anyways. So it figures that I was on the right track, and I succeeded all this time thanks to that. Even in the same book, it is mentioned that the honest answer of a designer to the question to designers “How they come up with their ideas?” is “I must be stealing. You first have to figure out what is worthy of stealing.”

Isn’t it rather a pretentious answer? Most of us try to soften the word “stole” to “inspired” according to their perception, but if we create a design thinking about the end user, we have to follow a certain path of structures that repeat itself.

Now if we agree on that, we should benefit from sites like Dribbble and Behance in the research phase and save the links that we think are inspiring; using a tool like Dropmark.

Later on, it is possible to move forward with ideas that you present to the client or team members. Therefore, you can shape the project accordingly; making it possible to have a common ground with your and the client's vision. This eventually becomes an argument that you may use in the following phases and clients will also have a clearer idea.

Building a Design System

You must know the importance of a Style Guide if you have good designers or a development team. Even a poorly constructed design system may result in conflicts within the team and lead to the project running off the rails.

If you do not properly build a design system for a project that blends your imagination and your design skills; you automatically add a second person (developers) with their own imagination into the project. If for some reason the changes developers make to the project bother you, your project gets the first hit.

There is a simple way to tackle this; starting off the project by sticking to the methodology and analyzing the needs of the project effectively.

By methodology, I think most of you already have the notion about where I am heading with this: Atomic Design Methodology.

Don’t mind me saying methodology, this is a design system and to build the system, the interface design tools continue offering us new tools on complicated structures. We can benefit from the blessings of Atomic Design by structures such as Symbol on Sketch; Components on Figma and Adobe XD. I have experience in all, but still having trouble compiling on Pages side. That’s why I have come up with a solution in my own way, and that led to the structure mentioned below.

The Atomic Design compiles of 5 separate structures; Atoms, Molecules, Organisms, Templates, and Pages. Although I’ve noticed that simplifying the Atomic Design System into even basic elements according to projects was more beneficial for my work.

Foundations

The most fundamental information I have like color palettes or fonts; I collect them in these pages; setting the ground rules for my project. In this phase, I generally happen to define the font and color styles, adding icon sets as symbols/components to the related program if there are any.

Components

We define singular-use structures as components. To put it in a simple way, we can give design structures where we build all variations such as a button or input groups as an example.

Naturally, there are certain rules being set here, and initial designs that are acceptable as tangible start to appear.

You can of course construct all of the elements if you have the (UX) User Experience Design. This process may not let you build all elements at the beginning; if you are starting from scratch and UI/UX design proceeds altogether, that is when things start to change.

If you lose your motivation in the later phases of the project, you may be hesitant to build components and therefore get away from design principles in the following process.

According to my previous experience; I could say that this could lead the project duration to extend as twice as much at the minimum. Because of that, it is always beneficial to be careful.

You can define a mini road map to have an organized structure when building any components on Sketch and Figma. Thanks to that, they’ll look put together and you won’t have a hard time using them.

If you name your Symbols shown below, you’ll file up the structure, and a structure shown above starts to emerge. (This is how Sketch and Figma work)

• Primary Button: Components/Buttons/Primary
• Secondary Button: Components/Buttons/Secondary

Modules

There is no need to discuss the countless benefits of the modules. Let’s think together; we have designed a footer and come to its latest phase. Consider that client requests a minor change; and go over each and every single page to update the design, especially on a bigger scale project and become a big problem for you.

Therefore; it is crucial that you are meticulous about these. In fact; there are a couple of tips to take into consideration; we could either call it Symbol within Symbol or Component within Component. The advantage of this is that: let’s say there is a button in the footer and we want it to become a secondary button. It’ll only take 1,2 seconds for us to select the other button we’ve defined in the other buttons among layers on the right-hand side without putting in any extra effort.

Auto Layout

It’s highly pleasing to set up some specific orders and rules on the structures I’ve built on Figma thanks to this system.

The first time you get your hands on it, you may struggle a bit, but once you settle on a system, you can design your structures way more flexibly.

Icon Problem

If you have a solid developer’s team; I’m almost sure that you’ll have someone with an obsession for organizing that will question the quality of your work. The solution to that problem would be to define all icons on their addition phase as a Symbol / Component like I’ve mentioned above. By that; you’ll have save time and effort on the design phase. You can even find time to have some coffee and chat with your developer friends instead! You may gossip about other designers too 😅

The essence of it

We designers are very dependent on our moods and motivation. I am sure that we’ll enjoy the advantages and ease of the system we’d build, if we strictly follow our rules even if the work in our hands is very dull.

I hope this article helps you reflect our love for organizing on flawless projects.

Until next time, see you!