Design guidelines : define your brand!
Two months ago, my team and I started working on a project to build a web application. We’ve gone through all sorts of meetings to prepare the project. Long story short, we created the persona, sketched the wireframe, and have come to an agreement. When it’s time for us to start designing the user interface, we established a guide for us to follow. This article will cover about what design guideline is and how it’s useful in my project.
Why design guidelines?
Imagine you’re working on a team of five people and you have to design a user interface. I bet five heads will think of five different designs. So how do we unite these five people? We use design guidelines.
Design guideline is a set of rules that gives directions on how designers should communicate the brand. It is a tool made to help designers reach one of the design principles that is consistency. It covers almost every aspect of a design such as font types, font colors, font size, button colors, margin, and even padding.
For example, take a look at Google. You’ll immediately recognize Google thanks to its consistent red, blue, green, and yellow hue, won’t you? This is a result of their consistency in maintaining their design. In fact, Google made a guideline for all of their resources to help designers synchronize their design with Google’s. Imagine if they don’t have a design guideline and one of their designers hates yellow and wants to replace it with purple instead. People would be confused of Google’s image if that happens.
Who benefits from having design guidelines?
Well, almost everyone. Design guideline provides consistency for designers, making it easier to do a collaboration with other designers. It also reduces the time spent for designing. In my case, my team and I don’t have to ask each other’s opinion anymore on whether this button should be blue or green or whatever. We save time from collecting opinions and being frustrated over a few options because we have a clear guide on what we should use.
Design guideline is also useful for the developers. When developers code, they usually put all of the elements style in one file and let various components apply that style. It is a more effective way to code — reducing redundant code. As an example, the style for an input field has specifications as written below. By having a guideline, all of the input field in the application will have the same style and therefore achieve consistency.
On the other hand, design guideline benefits the brand as well. A consistent design will create an image for the customers, making it easier for the brand to be recognized.
How to create a design guideline
When creating a design guideline, make sure that it covers these aspects:
- Style
Start with the easiest! Determine the colors you’d like to use in the design and create restrictions on how to use the colors. For example, red should be used for cancel or delete button only, all text color should be black, submit button should be blue, et cetera. It’s also important not to use too many colors. Most brands use at most four colors aside from black, white, and grey. Lighter colors are good for backgrounds, darker colors are good for texts, and neutral colors are good for components that need to stand out. When picking colors, you also need to determine three types of colors :
- Primary Colors : The color that will be mainly used on the application
- Secondary Color : The color that will be used to show actions such as progress bar
- Accent Color : The color that will be used to show user informations such as error and
To choose a color palette, I usually use Adobe Explore Color or Pinterest.
However, since in the project I’m working on I have to follow the client’s existing design guideline, I don’t have to determine anything anymore. All I need to do is follow the guide.
2. Layout
When you’re done determining colors, you need to decide what goes where and make sure that it stays there. In this project for example, side menu is on the left side and the list of files are displayed as one item per row. Not just that, you also need to determine the margin and the padding between each item. Check that between two items of the same type lies the same distance. When talking about layout, you need to make sure that the structure of the page is clear and consistent as it should stay like that forever.
To make sure that each file has the same margin and container size, we declare these specifications in styles.js file.
3. UI Components
The components of User Interface ranges from button to icons. When it comes to buttons, you need to decide the color when it’s clickable, when it’s disabled, and when an action is put on them such as cursor hover. This is an example on how I design the log out button and radio button, following the design guideline made by the client.
Another example is the use of icons. Use the correct icon for a specific purpose. For example, the left arrow and right arrow are used for indicating the next and previous page in pagination.
To ease our work, we store all of the icons in the assets folder in the front end. That way, whenever we need to use an icon, we can just import them right away. u
4. Text
Text includes all about font type, font size, font style, and everything in between (literally in between, such as alignment and spacing). It might get tricky here since the text size may be different for each element. However, typography is a very important aspect that affects user attention. Therefore, its usage must be thought thoroughly. Here’s an example of how we guide the text style for various purposes and how we implement it in the project. We use Metropolis for all text. The difference would only be the weight of the text. For keywords that the user search, the text will be bold. For breadcrumbs and additional info, it will be considered as label.
We also keep the fonts centered in one folder so all files will be synchronized.
Conclusion
Design guideline is a set of rules made to help designers achieve the design principles easily. It covers almost everything that appears on the screen such as layout, fonts, colors, buttons, icons, et cetera. By having a design guidelines, designers can reduce the time used for designing process and guarantee consistency. Design guidelines will also have developers to code the design. In addition, design guideline also helps the company to create an everlasting image for their customer to recognize.
This article is written based on my experience in creating and following a design guideline for PPL Project. I hope it can be useful for anyone who wants to know what design guideline is and how to create it. Cheers!
