Scribd
Upload
25 views4 pages

UI Style Guide Development Steps

The document outlines the steps to create a UI style guide, emphasizing the importance of visual style, logo guidelines, layout, typography, UI elements, text and fonts, color palettes, and guidelines for errors and alerts. Each step is aimed at enhancing brand image and user experience through consistency in design. The final result is a cohesive UI style guide that serves as a crucial tool for digital product design and development.

Uploaded by

aidsbatch1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views4 pages

UI Style Guide Development Steps

The document outlines the steps to create a UI style guide, emphasizing the importance of visual style, logo guidelines, layout, typography, UI elements, text and fonts, color palettes, and guidelines for errors and alerts. Each step is aimed at enhancing brand image and user experience through consistency in design. The final result is a cohesive UI style guide that serves as a crucial tool for digital product design and development.

Uploaded by

aidsbatch1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

EX.

NO:3 DEVELOPING AN INTERFACE WITH PROPER UI


DATE: STYLE GUIDES

AIM:
To create a style guide and to evaluate the style guide

PROCEDURE:
STEP1: creating visual style
Start with the overall visual style before you start creating a style guide from scratch, the first
thing you are supposed to do is to decide the overall visual style.

Step 2: Define logo guidelines

Your logo is one of the most important elements that can help in building your brand and

promoting your products smoothly. So, in your style guide, the logo guidelines should be
included, such as its sizes, colors, the whitespace around it, "dos and don'ts", etc. Also include
some examples to make it clear for everyone.

Step 3: Pick your layout and typography


To enhance your brand image and user experience, you should define the layout and typography
well in the style guide. Many aspects should be included, such as the way to layout the images
and contents, the size of main titles, body text and quotes, the spacing between titles and body
text, typography colors and background colors, etc.

You should not forget about the page grid guidelines if you are planning to layout your page
content with grids.
Step 4: Add UI elements
UI elements are one of the most essential parts of a UI style guide. Many commonly-used
elements, such as buttons, icons, navigation, forms, notifications, etc. should be defined with
their properties and rules to help create product consistency.
Step 5: Choose texts and fonts

Text and fonts are a large part of your UI. To create a better and more comfortable UX, you
should include all fonts and explain how to use them in your style guide.
Step 6: Choose primary color palettes
Color palettes define the overall visual effect of a website/app and evoke the emotions of users
effectively. So, you should not forget to include the color palettes, such as the primary and
secondary colors, typography layout on colored backgrounds, primary colors for highlights,
link and button colors, etc. Images and data are an indispensable part of page design. Your style
guide should include the guidelines for images and data visualizations. For example, it is
necessary to create some guidelines for all images and forms involved, such as photos,
illustrations, charts, infographics, charts, and more.

Step 7: Define the guidelines for errors, alerts and tooltips Error messages, alerts, and tooltips
are important methods for designers to guide users and improve UX. In your style guide, you
should define the guidelines for these elements for better product consistency.
RESULT:
UI Style Guides are a design and Development tool that brings cohesion to a digital products
user interface and Experience.

You might also like