How to create a design system that works
How to create a design system that works | 'All the shapes of UI' Series 3/3
'All the shapes of UI' Series comes to an end with the journey of a design process. Find out the steps you should take into consideration: from the much-needed research phase, to what a design system should include, and the way screens should be created. Is creativity the secret ingredient for a unique project?
Mihai Radu
4 min. read
How to create a design system that works | 'All the shapes of UI' Series 3/3

This is the last part of the 'All the shapes of UI' series conducted by Mihai Radu, Art Director at Linnify. The series aims to educate anyone on how the UI design process should look like, do's and don'ts, and help you find the right resources for inspiration and tips&tricks.

I. Step one: Research 

Before starting to create the UI for a brand, always start with the research part

Tip: Know who the top competitors of your client are. Get to know your client’s design style. 

Each domain has its own style and you should be able to understand the equivalent one for your project’s domain. 

“Personally, I imagine myself as some sort of constructor, as part of the domain, so it’s easier to build a design for something I’m not familiar with.”

Once you have the brand and the wireframes well-established, you can start determining what your design system is going to look like. 

II. Step two: Define what you need

The design system includes:

As I’ve mentioned before, you will need to create a basic design system that will be completed once you advance with the UI part. 

By adding new features as you go, you will manage to build the design system in an efficient way: you’d have allocated enough time for feedback and edits, and thus you will bring it to its final form. 

Tip: For example, when talking about the text you should have clear information about the size and the font so that you can drag and drop everything, instead of losing precious time with errors that can easily be avoided. 

The choice of pictures and animations also fall into this category. All of these must be well-documented before giving them to the development team.

III. Step three: Screens

After creating the design system and documenting each phase, you can go on with creating the screens for your project. 

You don’t need to create everything in this phase as you should focus more on designing blocks of 10-15 screens for each category (eg. the log-in section). 

Once you have all of these categories, together with their designated screen, you can move further and validate them with your PM/PO or directly with your client. 

Creating an MVP with 10 to 15 screens (from the main categories that you’ve previously established - log-in, home) that contain most of the assets from the design system and the whole brand is the easiest way to receive the green light from the client. 

Tip: Prepare a set of questions to guide your client and make sure that you receive the answers you need.

Tip: Find a rule in terms of spacing in each of your designs. It can be multiple of 8, or 10. 

You need to create a logical structure for guidelines and design systems. This way you can preserve consistency between each version and avoid issues such as the design looking different from one phone to another. 

Are you making the right design choices? You must be validating

Validating your decisions and design process is always a priority.

The actions that you can take depend a lot on the size of the projects and the size of the team you might be working with or not. 

What you can do to make sure you’re on the same page is:

  • Brainstorming session with the team (to see what’s working and what is not working, what can be improved)
  • Feedback session with the client 
  • Focus groups or interviews with users
  • Comparing study cases (to check if your design process is the same as the ones of other designers that may or may not be more experienced than you)
  • Participating in conferences (discussing directly with other designers that can validate if your design process is efficient or not)
  • Watching tutorials

What really makes your design project stand out?

The thing I’ve observed in the UI is that all the websites tend to look the same. Don’t get me wrong, there’s nothing wrong with using the same template, I really support not starting everything from scratch and saving valuable amounts of time.

But...Here's the deal, you can use the same templates and components but the most important thing that you need to do is to make it unique. Your application or website needs to stand out from the others. 

Here, we go back to discussing creativity. That’s the secret recipe to unique projects. It also needs to be logical and to make sense without putting much thought into it.

To wrap this up, I’d say creativity and patience are the secret ingredients to becoming the best version of your designer self. You should dedicate as much time as you need to research, whether we’re talking about seeing who your client’s competitors are, which are the current trends in design, or what other designers are doing right within their projects. Keep your eyes open as you can find inspiration wherever you look, just be open-minded and curious. 

In the end, I’d like to challenge you.

Think about your ideal UI design, how does it look? What’s unique about it?

For me, an app or website that is completely black and white would be amazing, as I believe this is the most readable version. 

About the author 

Mihai Radu is the Art Director at Linnify. With more than 5 years of experience in branding, 2 years in the UX/UI domain, he describes himself as “a normal designer, just like the others”. Occasionally, he enjoys putting his creativity to the test within 3D modeling and video editing. 

His career in design started while volunteering in OSUT (Technical University Student Organization), and it truly kicked off in 2015, when he became the lead designer of the European Youth Capital, Cluj-Napoca. Since then, he has worked with over 50 national and international companies within 15 different domains of activity. In his free time, he’s an avid gamer and cooking enthusiast.

My colleagues, Andrada Farcaș and Adrian Miclăuș have joined their forces to create a design white paper to help individuals from all kinds of backgrounds to simplify their customers' experience, create a design that matters, and set a product successfully on the market. It’s called Unleash your UX/UI design superpowers - Your essential handbook for generating the design that matters and you should definitely check it out. It will cost you less to read it than it will if not.  

Read more
Related articles
Why work-life balance is not the solution
Why work-life balance is not the solution
Life is a whole spectrum of activities and feelings to manage. Work is a big part of it, true. But is it really enough to talk about work-life balance as if there is a clear separation that wouldn’t allow them to intertwine? And what about all the other aspects of life? Read Alexandru Bogdan’s take on how life and work can be viewed. Shake off the paradigm and walk with confidence on your growth journey.
Alexandru Bogdan
How poolside remote-work boosts motivation and lowers stress | Linnify’s authentic take on remote work abroad
How poolside remote-work boosts motivation and lowers stress | Linnify’s authentic take on remote work abroad
Explore the challenges and the strengths of remote working from abroad. Get inspired by this daring pilot experiment, learn from our experience, and step into the Future of Work by finding the most suitable option for you and your company.
Teodora Istrati