Understanding Basics Styles Guides of UI Designs.
What is UI Guide? These are all the rules and guidelines for the design of the product’s user interface.
Importance of UI Style Guides
- The product will have a consistency look and feel which creates a more professional appearance
- It gives room for collaboration since designers have already set areas of references.
- It saves on time and money since the designed elements can be reused.
Components of Style Guides
Color Pallets: Set of complementary colors in your product.
The mandatory section consist of;
- Primary colors
- Text colors.
The optional section includes: Secondary color pallets, Tertiary color pallets, and pallets of Grays.
Choosing primary color pallets.
Try to limit primary color into two depending on the context within your site. Try to choose your colors based on the harmony colors.
- Cool
- Warm
- Split
- Tetradic
- Square
How to apply color pallets
- Call-to-action-buttons
- Links
- Page readers
- Interactive elements such as tabs, drop-downs etc.
To learn more about color pallets visit: https://www.linearity.io/blog/color-palette/
Iconography
These are set of rules for using Icons. These includes everything from from the style of the icon to their colors to their sizes.
UI Icons speed up user interactions since they immediately recognized by the users upon landing on the application. Example is Google Website logo.
Rules to Consider when UI Creating Icons
- Keep the icons simple.
- Make them recognizable
- Give Icons Meaning.
- Make sure they are scalable
- Make icons accessible.
- Be careful with color.
- Always use vectors.
- Keep icons Uniform
- Prioritize clarity
- Use universal icons
Topography
Refers to all the rules for formatting and place type. This includes everything from the typefaces, and font sizes to line spacing and the hierarchy of the heading and subheadings.
- Define a minimum font size to ensure optimal legibility.
- Stick to one font family or when using more than one, understand the font pairing basics.
- Define font sizes for the page titles, subheadings, and paragraphs. Clearly distinguish font sizes, weight and color.
UI Elements
These are visual elements that people can see on a website or app interface ( including the buttons, menus, text fields, progress bars, and so on).
They enable users to interact smoothly with the website or mobile app and get what they want from it.
They are also essential tools for designers looking to create a unique visual language and to ensure consistency across different products.
Example of UI element representation in a website.
