FrontEnd QA

This is a process which focuses on proving implementation of interface to be both accurate and adequate to the design while maintaining flexibility and correct behaviour within different environments or while serving diverse content.

- Monterail

Criteria Based

Every Element must follow certain criteria

Component based

Hierarchical order every component that is defined as part of interface - from most primitive and atomic, through more complex and coupled to whole views and layouts

Criteria based List

• Design Accuracy
• Responsiveness to viewport
• Responsiveness to content
• Components behaviour
• Performance
• 3rd party technologies

Design Accuracy

And it’s not only about “does it look smilar to design”, it’s more about “does it match it in every detail”.

Most common properties that should be revised are:

• sizes (width, height, line height)
• colors
• font family
• font size
• font weight
• spacing (margin, padding)
• borders
• background
• list styling (ul, ol)
• number and date formats

Responsiveness

ViewPort

Content

Components Behaviour

Performance

3rd Party Technologies

Components Based

Components list consists of five levels:

• Basic elements
• Individual components
• Coupled components
• Views
• Layouts

http://patternlab.io/assets/atomic-design.mp4