Creating a Design Guideline: Tips and Tricks
Creating a website design can be a complex task. Sometimes a lot of people are involved in this process. With a lot of people on the task, there needs to be a guide or reference to keep everything consistent and cohesive. This guide is also known as a design guideline.
A design guideline is a set of guides and recommendations that define a brand’s identity with color palettes, typography, etc. These rules should form a single style that can be used within different web pages and components.
Benefits of Design Guidelines
The main benefit of using a design guideline is to maintain consistency. Consistency is a key principle in good UX design. Consistency helps users familiarize themselves with the system they are working with, thus giving them a better user experience. Other than that, consistency helps solidify the brand’s identity. Creating a solid identity helps users distinguish your brand from others.
Another benefit of using design guidelines is that it makes your design team’s job a lot easier. With a design guideline, they don’t have to start designing from scratch. This will also save a lot of time in the long run.
Components of Design Guidelines
Design guidelines can regulate several things depending on your team’s needs, but a design guideline should at least have 6 of the following components.
Color Palette
A color palette is the selection of colors that are used in your software design. Most color palettes are divided into primary colors and secondary colors. Primary colors are the dominant colors that will fill most of your software design. Secondary colors are used as accents that complement the primary colors.
Tips to creating a good color palette:
- Good color palettes limit the primary colors to only 3 colors so that the users don’t get distracted.
- Consider color theory. Each color can convey different emotions and feelings. By understanding color theory, you can use the colors to your advantage.
In the project that I am working on (DocSer), our client already had a collection of colors that we could use in our design. From the collection, we narrowed down the colors to 3 primary colors and 3 secondary colors. We did this because we didn’t want the user to be distracted by too many colors. The primary colors are the colors in the bigger boxes on the left. We used them as the logo color and background colors. The secondary colors are the ones in the smaller boxes on the right. We used them for texts and icons.
Typography
Good typography is not only about how good your texts look, but also about how easy it is for users to read them. Typography includes font style, spacing, and text hierarchy.
Tips to creating good typography
- Use at most 2 type families. Too many fonts can make the texts harder to read.
- Each line of text should have a maximum of 60 words.
- Don’t be afraid to add vertical space in between different text elements.
- Put emphasis by using a heavier font family to create a clear text hierarchy.
Again, in creating DocSer, our client already had a style guide that we followed when designing our product. We used one font family called Metropolis. To direct the user’s visual focus to the important parts of the text, we used a bold font.
Components & Inputs
Components and inputs are standard design elements that are used in almost all software and websites. Components can include buttons, links, checkboxes, and other items that can be used by users to interact with the site. On the other hand, inputs consist of text boxes, dropdowns, and search bars.
Tips on creating good components and inputs
- Create buttons that look like buttons. Users need to be able to identify which element is a button to interact with your site.
- Only display inputs and components that are absolutely required. Unneeded elements only create clutter and can make it harder for users to find what they need.
- Don’t forget to define states for each component (for example normal, disabled, focused, hover).
Here is how we implement our design guides in our product’s design.
Illustrations & Icons
Illustrations and icons are a great way to add more visual value when used correctly. When using illustrations and icons, make sure that they are all in the same style to maintain the design’s consistency. Other than that, make sure that you don’t go overboard with the placements of illustrations and icons. Use them when they can enhance your page, not distract users from it.
In DocSer, we already have a predefined set of icons to use. We use the icons to symbolize information and make it easier for users to distinguish the information presented.
Layout
Once you’ve defined all your design elements, you will need to put them all together on a page. Layouts define the structure and spacing of your design elements on a page. Although each page can have different elements, there might be elements that be constantly displayed on each page. Some examples of these constant elements are logos, side menus, and navigation bars.
In DocSer, we have a side menu that contains all our filters and also a navigation bar. Inside the navbar, we have our client’s logo on the left and the user’s profile information on the left. These elements are always displayed on the dashboard page, even if the search results are changed. The side menu will always be on the left side of the page, while the navigation bar will always be on the top of the page.
References
https://elementor.com/blog/website-color-schemes/
https://gapsystudio.com/blog/what-is-a-style-guide/
