Design Checklist

"*" indicates required fields

Client Information

Perform Q/A process

Use the website links provided by the developer to compare and check for any discrepancies between developed page and mockup / style guide.*
Use Markup.io: Easiest Way to Leave Feedback on Digital Content to leave comments.*
If not using Markup.io, a Google doc is acceptable but URLs and screenshots should be included.

Notes

Browser Check

Start with the home page and work through each additional page using the screen sizes and browsers noted below.

Browsers

Safari*
Chrome*
Firefox*

Screen Sizes

(You can use howbigismybrowser.com to confirm sizes.)

Desktop view @1440, @1200*
Tablet view @991 (landscape), @768 (portrait)*
Mobile Device*
Do not check “mobile size” using a desktop browser. Use iPhone and/or Android phone if available. Note: Designer can alternatively, perform Q/A at the designated viewports using the Chrome browser inspect tool. Right-click on the browser and select “Inspect”.

Notes

Cosmetic

Layout

Correct layout on the different viewports – especially how the desktop view has been translated into the tablet and mobile views*
Correct use of typography and px sizes*
Correct use of backgrounds, textures and colors*

Buttons

Active vs. Hover styles*

Navigation

Main navigation*
Sticky navigation (if being used)*
Mega menu (if being used)*
Mobile menus*

Images

Used and quality of them: If an image seems off or pixelated, provide a new image to the developer.*

Other Elements

Padding*
Linking*
Form styles*
Interactive elements*
User experience flow throughout the website*

Notes