UI UX Product QC list

Font styles - Font size, color, and family

Font styles

Font color

Font size

Font weight

Check the CSS properties of an element

CSS styles

Layout

Font size

Font weight

Style

Brand color

Check if the images are not breaking and don’t have any watermarks

High quality

Low quality

Pixel breaking

Image stretched

SVG format

Check if elements are not breaking or distorted on different browsers and

screen resolutions

Default desktop screen resolution

Ipad resolution

Iphone device

Android device

Check if the label te x t is clearly readable

Text alignment

R eadability

Icon position

E rror messages

Check if the error and validation messages are displaying correctly

Text alignment

R eadability

Check if there are no spelling mistakes in the fi eld labels and web page
headings

M anual review

Browser spell check

O nline spell check

Check if the disabled fi elds are not accepting any input

M anual test

Check if the links are visible and distinguishable from the other te x t

Text visible

Link color

R eadability

Text alignment

Font size

Font weight

Check if there are no broken links on the web page

M anual test

Check if there are no unnecessary blank spaces between the elements on the
web page

White space

Padding

Text and Icon spacing

Header and subtitle spacing

App bar spacing

Left navigation category

Left navigation sub - category

Ad banner spacing

Footer spacing

Iconography / Illustration placement & Spacing

Check if the horizontal and vertical scrollbars are appearing wherever

necessary

Desktop Horizontal scrolling

Ipad Horizontal scrolling

Iphone Horizontal scrolling

Android Horizontal scrolling

Desktop vertical scrolling

Ipad vertical scrolling

Iphone vertical scrolling

Android vertical scrolling

Check if our logo is visible and clickable

Desktop MM H logo

Ipad MM H logo

Iphone MM H logo

Android MM H logo

Check if the web elements are not overlapping anywhere on the web page

Text overlapping

Button overlapping

Dropdown menus overlapping

Image overlapping

Form E lements overlapping

R esponsive design overlapping

M odal overlapping ( popup )

Table cell content overlapping

Icon overlapping

Floating elements overlapping

Check if banner images or any other large images are not e xceeding the
screen limit

M anual testing

R esponsive design

Test on di ff erent device ( desktop , laptops , tablets and smartphones )

Check if the P rivacy policy links are readable and clickable

Text visible

Link color

R eadability

Text alignment

Font size

Font weight

Verify if elements in the dropdown are not overlapping

M anual test

Check if the menu or submenu that is selected remains highlighted

M anual test

I f there are any country fi elds or phone number fi elds, check if the country
codes are displayed correctly

M anual test

Check if the auto fi ll function is working as e x pected and that there are no UI
issues

M anual test

P rimary button (G reen )

Button

: 6
Button color DFF E
Border color : 60 2
D A
Font Size : 16 - M useo sans – 70
Font color : #00000
Stroke : 2 p
Height : 56 p
W idth : Auto responsive

P rimary button (G rey )

Button

Button color E E A E : 4
Border color C CBC : 4
Font Size : 16
- M useo sans – 70
Font color : #00000
Stroke p :2
Height p : 56
:
W idth Auto responsive

P rimary button ( isable )D

Button

: 4
Button color E E A E D ( 40%
opacity
Border color C CBCF (: 4 40%
opacity
Font Size : 16
- M useo sans – 700 40% opacity
(
Font color : #00000
Stroke p :2
Height p : 56
:
W idth Auto responsive

Secondary button (G reen )

button
Button color DFF E : 6
Border color D A : 60 2
Font Size : 16
- M useo sans – 70
Font color : #00000
Stroke p :2
Height p : 44
:
W idth Auto responsive

Secondary button (G rey )

button
Button color E E A E : 4
Border color C CBC : 4
Font Size : 16
- M useo sans – 70
Font color : #00000
Stroke p :2
Height p : 44
:
W idth Auto responsive

Secondary button ( isable ) D

button
: 4
Button color E E A E D ( 40%
opacity
Border color C CBCF (: 4 40%
opacity
Font Size : 16
- M useo sans – 700 40% opacity
(
Font color : #00000
Stroke p :2
Height p : 44
:
W idth Auto responsive

G rid table cell

Header border, Font , Icon color : #00000

Header fi ll color FFFFF:#
Header Font Size : 16
- M useo sans 9 – 0
Header border stroke p :2
R ow border, Font , Icon color : #00000
R ow color :#
FFFFF
R ow color selected DFF E :# 6
R ow Font Size : 14
- M useo sans – 50
R ow border stroke p :1
Pagination font color : #00000
Pagination font size : 14
- M useo sans – 50
Pagination active page number color : #2B976E
I nput fi eld with I con ( N ormal state )

Normal state

Input fi eld color :#

FFF 8 F
Input fi eld border, Font , Icon color : # 00000
Font size : 16
- M useo sans – 50
Stroke p:1
Height p: 56
:
W idth Auto responsive

I nput fi eld without I con ( N ormal state )

Normal state

Input fi eld color :#

FFF 8 F
Input fi eld border, Font : # 00000
Font size : 16
- M useo sans – 50
Stroke p:1
Height p: 56
:
W idth Auto responsive

I nput fi eld with I con ( H over state )

Normal state

Input fi eld color :#

FFF 8 F
Input fi eld border color EC : # 660
Input fi eld text , Icon color : # 00000
Font size : 16
- M useo sans – 50
Stroke p:2
Height p: 56
:
W idth Auto responsive

I nput fi eld without I con ( H over state )

Normal state

Input fi eld color :#

FFF 8 F
Input fi eld border color EC : # 660
Input fi eld text color : # 00000
Font size : 16
- M useo sans – 50
Stroke p:2
Height p: 56
:
W idth Auto responsive

D
I nput fi eld with I con ( isable mode )

Normal state

Input fi eld color :#

FFF 8 F 3 ( opacity 40%
Input fi eld border, Font , Icon color : # 000000 40% opacity
(
Font size : 16
- M useo sans ( – 500 40%
opacity
Stroke p:1
Height p: 56
:
W idth Auto responsive

D
I nput fi eld without I con ( isable mode )

Normal state

Input fi eld color :#

FFF 8 F 3 ( 40% opacity
Input fi eld border, Font color : # 000000 (40% opacity
Font size : 16
- M useo sans – 500 (40% opacity
Stroke p:1
Height p: 56
:
W idth Auto responsive

I nput fi eld with I con ( Focused state )

Field label

Normal state

Input fi eld color :#

FFFFF
Input fi eld border color EC : # 660
Input fi eld label , Icon , text color : # 00000
Font size : 16
- M useo sans – 50
:1
Label font size 3 - M useo sans – 50
Stroke p:2
Height p: 62
:
W idth Auto responsive

I nput fi eld without I con ( Focused state )

Field label

Normal state

Input fi eld color :#

FFFFF
Input fi eld border color EC : # 660
Input fi eld label , text color : # 00000
Font size : 16
- M useo sans – 50
:1
Label font size 3 - M useo sans – 50
Stroke p:2
Height p: 62
:
W idth Auto responsive

I nput fi eld with I con ( Completed state )

Field label

Normal state

Input fi eld color :#

FFFFF
Input fi eld label , text , Icon & border color : # 00000
Font size : 16
- M useo sans – 50
:1
Label font size 3 - M useo sans – 50
Stroke p:1
Height p: 62
:
W idth Auto responsive

I nput fi eld without I con ( Completed state )

Field label

Normal state

Input fi eld color :#

FFFFF
Input fi eld label , text , border color : # 00000
Font size : 16
- M useo sans – 50
:1
Label font size 3 - M useo sans – 50
Stroke p:1
Height p: 62
:
W idth Auto responsive

37 (a). Input field with Icon (Completed state disable mode)

Field label

Normal state

Input fi eld color :#

FFFFFF ( 40%
opacity
Input fi eld label , text , icon and border color : # 000000 (40% opacity
Font size : 16
- M useo sans ( – 500 40%
opacity
:1
Label font size 3 - M useo sans ( – 500 40%
opacity
Stroke p:1
Height p: 62
:
W idth Auto responsive

37 (b). Input field without Icon (Completed state disable mode)

Field label

Normal state

Input fi eld color :#

FFFFFF ( 40%
opacity
Input fi eld label , text , border color : # 000000 40%
( opacity
Font size : 16
- M useo sans ( – 500 40%
opacity
:1
Label font size 3 - M useo sans ( – 500 40%
opacity
Stroke p:1
Height p: 62
:
W idth Auto responsive

Checkbox empty

Checkbox name

Border color : #00000

Icon in between text Spacing : 12p
Font size : 16
px - M useo sans - 500
Checkbox Fill

Checkbox name

Border color : #00000

Icon in between text Spacing : 12p
Font size : 16
px - M useo sans - 500
R adio option ( unselected )

R adio off

Border color : #00000

Icon in between text Spacing : 12p
Font size : 16
px - M useo sans - 500
R adio option ( Selected )

R adio on

Border color : #00000

Icon in between text Spacing : 12p
Font size : 16
px - M useo sans - 500
Switches

N Ame 1 N ame 2 N ame 3

Selected tab color :# 6

DFF E
Selected tab Border color : # 60 2
D A
Text color : # 00000
U nselected tab color :# 4
E EAE
Font size : 14 –
M useo sans – 70
Stroke for selected option px:2
Notification / Snackbars

Information

// Body text// Body text// Body text// Body text//

Info fi eld Border, text & Icon color : # 00000

Info fi eld Heading Font size : 14
- M useo sans – 70
Info fi eld Font size : 14
- M useo sans – 50
Field stroke px :1
P opup

Information

Lorem ipsum dolor sit amet consectetur. Diam

justo ac vel aliquet velit suspendisse. A amet luctus
risus augue proin . Dolor adipiscing tellus penatib

cancel ok

Heading font size : 20

- M useo sans – 90
Content font size : 14
- M useo sans – 50
Field stroke p : 20
Primary Button color DFF E : 6
Primary Border color D A : 60 2
Font Size : 16
- M useo sans – 70
Font color : #00000
Stroke p:2
Green button Height p : 44
:
Green button W idth Auto responsiv
Secondary Button color E E A E : 4
Secondary Border color C CBC : 4
Font Size : 16
- M useo sans – 70
Font color : #00000
Stroke p:2
Grey button Height p : 44
:
Grey button W idth Auto responsive

Dropdown list

Title 1
Title 2
Title 3

Font color : #00000

Font size p : 14
Font weight : 50
Hover color DFF E:# 6
Background color :#
FFFFFFF

Error message with dropdown

Field label

Focused State

E rror message

Input fi eld color :#

FFFFF
Input fi eld border color F 3D :# 4 0
Input fi eld label , text color : # 00000
Font size : 16
- M useo sans – 50
:1
Label font size 3 - M useo sans – 50
Icon color : #00000
Stroke p:2
Height p: 62
:
W idth Auto responsive

Error message - Input field

Field label

Focused State

E rror message

Input fi eld color :#

FFFFF
Input fi eld border color F 3D :# 4 0
Input fi eld label , text color : # 00000
Font size : 16
- M useo sans – 50
:1
Label font size 3 - M useo sans – 50
Stroke p:2
Height p: 62
:
W idth Auto responsive

!Information list

T he hyperlink color code must be #EC6608

T he font color of the tabs should be black , as indicated by #000000. Let me
know if you need any further assistance .

It is important to note that there should be no space between the word Text " "
and the colon . T he space should only be used after the colon . Please ensure
that you follow this rule to ensure correct punctuation .

"
Please ensure that there is no space between the M andatory mark and the "
corresponding text . Also , kindly check for any spelling , grammar, or
punctuation errors .

T he color and icon of the navigation bar on the left - hand side menu should
be black #000000
It is necessary to align the spacing of the cells in the Grid based on the
content they contain .

Font and icon color throughout the application should be black #000000,
instead of grey.

T he font color of the disabled button should be black with an opacity of 40%
and identi fi ed by the code # 000000.
T he button border weight should be 2 pixels.
Foundations - Figma link

Components - Figma link

-- Thank you --

:
-- Prepared by Haneef M --