Your personal projects need a Design System too

Once you learn user experience design and think it’s time to start applying for jobs, you take up problem statements and solve them to create content for your portfolio. You design five to ten screens and show your design thinking process through targeted case studies. But that will not cut it in this rapidly growing industry with a demand for end-to-end designers. When you move from designing screens to solve a tiny problem to creating a product shift through large-scale solutions, there needs to be a shift in mindset as well.

We may think that building a complete design system and managing it is unnecessary when we aren’t working with developers. But as we move forward, that’s the mindset that compromises our value as a designer.

These are a few instances that can pose to be a glitch in your design journey without a governing principle:

• Introducing new features — You spend time debating design decisions for individual elements instead of focussing on the problem statement.
• Meeting Deadlines — User experience can be compromised trying to make time for pixel perfection.
• Keeping up with Trends — It’s harder to make design changes at a screen level instead of changing it globally across all screens.

Building a design system at an early stage of your design process helps overcome these stopgaps along with a touch of professionalism to build trust in your clients.

What is a Design System?

It is a system comprising reusable design components in the most simple terms. According to the Neilson-Norman Group, A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.

The result is a permutation and combination of a million possible outcomes. The idea is to ensure consistency in design language and development and create a brand identity while creating an infinite range of solutions based on the product.

Design is simply not a sauce you put on top.

We’re not designing pages, we’re designing systems of components.

— Stephen Hay

Why must you create one today?

The universal design language governing the two major operating systems are Human Interface Guidelines for iOS and Material You for Android. Apart from this, we have come across public design systems of the world’s largest companies like Google, Microsoft, and IBM. They have developed their design system whose applications comply with the governing design languages. It helps them establish an identity of their own that retains their customers’ loyalty.

It is pretty straightforward why such large-scale companies need a governing language to bind all the cross-functional teams in product development. Building an entire design system from scratch with typography, buttons, icons, colors, and input fields can be a time-consuming task. You may wonder why an individual freelancer or a solo designer needs to build one of their own. Well, here are a few reasons for you to establish one of your own:

1. Consistency and Design Discipline — Ensuring a shared design language across all screens gets easier. You learn to work smarter instead of harder. You eliminate the chances of making a mistake.
2. Solution-Oriented — You can focus on building the appropriate user experience instead of spending time on pixel perfection.
3. Quick Iterations and Global Changes — When you find a new style that suits your brand better and have to make changes on all screens, you either give up midway or ignore it. But now, you can make it a win-win situation through components and constraints.
4. Keeping up with Trends — It just got more accessible to experiment with new trends without compromising the quality of design and meeting deadlines.
5. Professional and Organized — Presenting your work to take stakeholders and taking them through your design thinking process is more structured now. You can ensure you cater to all types of clientele.
6. Better Communication — You can put your ideas, work style, and design decisions in interviews and talks easier through systematic design documentation.
7. Easy Handoff for Development — Easier for developers to find and replicate all components of design used in your project when correctly labeled, is consistent, and well-categorized.
8. Reusable Components — You can just copy-paste components like buttons, text fields, and font style used in your previous projects and alter them to fit the new project rather than redesign from scratch.

Get Started

When you google Design System, you might get overwhelmed looking at the quantity of work it entails. Finding the correct starting point to start the design process with the least resistance is equally confusing. Building a system from scratch and managing it can be scary. But there are easier ways to start, and I assure you it’s worth the process.

To help you get started, you could download open-source design systems with pattern libraries and style guides already laid out for you. If the components are well nested, all you need to do is alter it to your brand guidelines and drag and drop it onto your workflow. You have plenty in the Figma community to download or use as a reference for your design system.

Now you’re familiar with the different components a system consists of, you are ready to venture out independently. The tricky part is to lay out a solid foundation and build on top of it in layers. If you don’t find the correct building blocks, it may even call for revamping the whole system from scratch. The product must feel the same across different devices. It’s a vast ocean, and you can get lost without a direction. That’s where Brad Frost comes to our rescue. Atomic Design is much spoken about and for a good reason. He draws a parallel between the structure of atoms of matter and the building blocks of a web page design.

There are five layers to it:

1. Atoms — text label, input field, buttons, color palettes, fonts, icons
2. Molecules — forms (atom + atom) eg: input field + label + button
3. Organisms — sections (molecule + molecule) eg: logo + primary navigation, search form + social media icons
4. Templates — groups of organisms form a layout
5. Pages — layouts are put together to form pages

Based on this, make sure your design system has at least three sections to it to bring about a sense of structure in your project:

Section 1 — Design Guidelines

Think of it as a Rule Book the designer must follow while designing screens. It’s where you set the standard for atom level elements such as Typeface, Type Scale, Line Height, Spacing, Colour Scheme, Colour Guide, Iconography, and Illustrations.

Usage

1. Typeface: Establish the fonts, font types, and respective use. For example, you may use two fonts on a screen, one for the heading and one for the body. Based on the screen, you may also use the same font in different forms like bold, medium, and regular to emphasize certain types of texts.
2. Type scale, spacing & line height: List out the pixel size of the different kinds of texts used, their spacing, and specify the line height for each to ensure consistency. For instance, the heading is 20 pixels, bold with a 1.25x line-height.
3. Colour Scheme: Fix a primary and secondary color for the app and mention their hex codes. You can also note the tertiary colors used for tertiary actions, such as highlighting text and drop shadow. Make sure you specify the usage of the different colors as well — Primary for CTA, secondary for text and numbers, etc.

Section 2 — Components Library

Consider this section holy. It is your go-to for every tiny repetitive element used throughout the app. When you create components with correct auto-layout and constraints, you can design an app for one platform and across various devices using the same. All that is required is to label it, categorize it correctly and drag and drop it onto your screens. If you need to make global changes on all screens at once, change it at the components level in your components library.

Usage

1. Colors & Buttons: Note the primary, secondary, tertiary, and their hex codes. For buttons, you can have a fixed size for extended and small buttons, selected and unselected states, all in their respective colors.
2. Text Field: The four basic types of text/input fields used in an app or website are — active, typing, empty, and error states. When you make an input field component, include its label placement, text box size, and color of the typing text inside.
3. Typography: Go all out and chart out the font type, font style, text size, kind of text, and color. Use the same to make a style guide of text and colors. It serves as a reference for co-designers, developers, stakeholders, and business heads.

Section 3 — Design Screens

Compile all your final design screens and categorize them correctly. You can give it a bold heading on the artboard, mention the device type it is designed for, name the different flows and name each artboard with the function it performs.

Final Thoughts

As an independent designer, creating an extensive design system gives you a sense of structure, helps formulate a design process, and builds managerial qualities within you. Developers can use this as a single reference source for the complete app, ensuring smooth communication and turnover, saving time, and maintaining professionalism.

In the process, you will realize that you picked up quick knacks to execute even the slightly more challenging function in your design software as well. Try this out in your next project and become the designer you strive to be!

Here are a few other articles you might like 

Let Your Sales Tech Stack Work For You Instead

How product-led growth is about effective interaction design