SGS User Interface and User Experience(UI/UX) Quality Assurance Guideline

UI Design Specifications

Keep it simple but professional

Follow these specifications while making UI.

Section your design into 3 parts

1. Components
2. Screens
3. Palettes
4. Typography

Components

Have all the components you use on the designs in the sections. Components are reusable parts of the designs like:

1. Buttons
2. Cards
3. Popups
4. Form elements — text fields, file upload icons and so on

Do not make unnecessary variants of components.
For instance, if you are using a type of button, be consistence with it without changing the design when it is not important.

Note about buttons

Be consistence with button, identify which button is primary and which button is secondary or as the case may be.

Cards

Cards your be bold, easy in the eyes, relatable and with a single focus. Do not make a card too cloggy with lots of text, it should convey the required information on a grant.

Popups

When making popup, consider the screen size, on small screens(mobile apps) use popups for notifications. Every popup should have a title and clear call to action.

Form elements

Forms should be bold, easy to use on the screen it is required. Be consistent in your use of form fields, maintain one design pattern.

Screens

Every screen must have a title, there must be a heading identifying what screen it is for the user.
Every screen must have a single focus, don’t make the screen so cloggy.

Use of images

Use minimal images, use more colours than images, use shapes that can easily be translated during development.
While making a design, consider responsiveness, do not make a design that will be difficult to translate on larger devices or on smaller devices.

Palette

1. List your colours accordingly, identify which colour is primary and which colour is secondary and so on.
2. Consider clear visibility when making a choice of colours, also consider people that are colour blind to certain colours.

Typography

1. Use clear text readable fonts.
2. Identify the fonts you are using
3. Identify your different typographies like
   a. heading/title style
   b. Primary text
   c. General text
   d. Subtext
   e. Micro text and so on as the case may be