Creating UI design guidelines for your project
Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. Designers use such guidelines to judge how to adopt principles such as intuitiveness, learnability, efficiency and consistency so they can create compelling designs and meet and exceed user needs.
(interaction-design.org)
According to the definition above, we’d know that design guidelines are a set of guidelines that gives us recommendations into the best practice in creating a product design according to the design principles. It explains the instructions and give suggestions for the designers on how to use design principles. Designers use principles like visibility, findability and learnability to address basic human behaviors. Other than that, Design Guidelines also help us designers to keep on the lane with the 10 Usability Heuristics.
A design guideline sheet would look pretty much like this:
It contains many stuff like coloring, layouting, typography, etc. based on some of the UI Guidelines types like explained below:
- Style, that defines the visual expression of a product that it presents to the world. Every product has its own style guides which they use to build logos, colors, icons and typography.
- Layout, the overall user interface structures. For example in my project, we are creating table layout for list view, and form layouts, details layout, etc.
- UI Components, that provide the usage of UI Components that display on the interface and interacts with them. Examples of UI components are like form input, cards, windows, dialogs, panels, scrollbars, searchboxes, tables, etc.
- Textual Guidelines, that cover things from languages used, wordings, to typography like font, font size, colors, etc.
- Interaction and Behaviors, that accommodates types of behavior in prototyping, like animations, gestures, click behaviors, voices, etc. and the system’s response to these behaviors.
- Platforms, that changes rapidly because software and apps nowadays need to be designed in platforms like various mobile devices, laptops, desktops, wearables, to auto car like the tabs in Teslas. Designers need to agree to design in which platforms with which screen resolutions.
Creating UI Components Design with Figma Variants
Like working in JS component-based frameworks for front-end developments like Svelte or React, we can also create reusable components in Figma. Using Figma UI Components and variants, we can make designing pages a lot simpler, a lot more efficient, and it will save us a bunch of time.
Variants in Figma introduce a new way to group and organize variants of the same component. This makes components easier to maintain and more intuitive to use. With this, we can make many things like reusable color libraries, assets, etc. You can see the example of color variants library usage below:
With color library, designers don’t have to look back and forth to the color palette and copy-paste the hex code of the colors. By using color library, we just have to look up at the colors we have created before with certain name properties to make our work easier and faster.
Besides color variants, you can also create other stuff liek Effects, grid, and screen variants library like this
You can also create Assets and its variants in Figma like I did on my HCI project below:
Using assets are very simple. You can just drag and drop the asset and place it wherever you want it to be. And you can just switch variants according to any variant you want to use like below:
Also, as you can see in the example above, when you change or modify the styles of the variant in the main component, every other similar component used in the project also being modified. So if you are using 100 same components in a project, if you wanna modify it, you just need to change the style once from one of the components (doesn’t have to be the main component). It definitely will save designers huge amount of time.
Creating a Simple Design Guidelines for Rapid Product Design Sprint
In our project, the Design Sprint was pretty rapid. It only took a week of designing and another week for revisions, yet we need to design about 150 pages of it :) so that was super duper rapid. We couldn’t make proper design guidelines like in the Xd Style Guides above. At that time also, I was still learning Figma and me and my team didn’t know that we could work faster by creating UI Components using Variants in Figma as explained above. I’ve just learned it very recently for my Human-Computer Interaction (HCI) Design class project, and I learned that from one of my teammates there.
But one of my teammates helped to manage to create a simple sheet of our design guidelines outside of the design sprint. I’ll explain them below.
- Color Guidelines
At first, let me explain the process of us until we land in this color guidelines. At first, we chose the color green for the main overall color of our project. Why? Because in Indonesia, judiciary process are kind of identical with the color green. The logos of courts are green-based. Even when you take your business to the court, they will call it taking things to the “green table”.
I was the one who initially looked for the main color palettes. I was using various websites like coolors.co, colorhunt.co, and instagram.com/uiuxcreative. Then I brig it to my friends raw, then we modify it together until we land in the color palette above. We use primary colors for our overall design, like navbar, sidebar, buttons, table colors, placeholders, etc. that results like below for example:
We use black color for texts, white color for several layout backgrounds like tables, forms, and sheets/card, and we’re using the background color palette for obviously, our main background. The accent colors are for form validation colors (red) and things like status (light green) etc.
- Textual Guidelines
In the sheet above, we have stated the fonts that we’re using. We use 3 fonts (Poppins, Mulish, TW Cen MT) for different parts like titles, headlines, callouts, captions, body, etc. We choose them to add variations while still maintaining the consistency of each page, because all 3 fonts difference are not that obvious. Besides the typography, in textual guidelines we have also chosen to use languages to apply to the entire system. We chose Indonesian language for the whole system in order to be easily understood by our end users who are most likely to be people aged 25–60.
- Layout Guidelines
For layouts like inputs, forms, sheets, tables, dropdown, etc. we setup the guidelines to be a floating component with border radius of 8 and white backgrounds, although it would look the same as the backgrounds, we setup the border to be a drop shadow with settings like below:
we setup the axis and the blurred area to be pretty wide so we could make a clear bounds between the components and the background. We also style the buttons like above with border radius of 15. We do this to maintain a consistency with the table layout and a modern, sophisticated UI look yet still keeping things simple to maximize the user experience for the end users.
- Miscellaneous
These icons are being used for things such as sidebar logos, notification logos, profile logos, widgets like calendars, placeholder for upload fields, and confirmation modals. We get these icons from Figma plugins like Iconify.
Well, that’s all for the last article of the semester yaaaaaaaaay! Thank you for reading my article (and maybe other articles as well, check out if you haven’t). Hope you’ve gotten a little insights about UI Design Guidelines for today. Have a great day and a great summer everyone!
