UX designer spend lot of time on research and analyzing the user need. Based on their finding they would create the mock-up and make the final design after testing. But many a time developer won't take the design seriously. It is the responsibility of the UI developer and the QA team, that the designs are executed same as proposed and to measure the final outcome with users.
But in my experiences I had found several deviations on the development. Though it is the role of the QA team to ensure the quality of the product, I found they are more focused on functionality issues rather than aesthetics. With my discussion with them I figured out they need clear instruction on how to do that. Since they are not from design background I felt, they would need a clear instructions on how to review and ensure at least the basic aesthetic are followed, hence our job would become easy when we do the final review.
Since we use Zeplin, we could share the actual designs to the developer and QA person. They can check even the CSS codes of the design. Hence design specs for each development may not be required, but they need access to the pattern which we are following other style guidelines.
Hence I have created a Basic checklist which the developer and the QA team should verify to ensure the aesthetic are followed well. Here are the 5 basic aspects which the QA team needs to taken care,
- Layout and Grid
- Color
- Typography
- Spacing
- Interaction
Designer would follow a certain grid pattern to organize the content and to make the page look balanced. For a normal screen 12 column grid would be used. The grid count would vary depends on screen size. [Pattern link for grid]
How to check:
- Take the screenshot of the final page (You can use the browser add-ons like Nimbus or something similar)
- Compare the screenshot with Mock-up at 90% opacity overlay (You can use power point to do this)
By doing so, you can figure out the key difference on placement and position of each segment on the page
Typography:
The design should follow the typeface mentioned on the pattern. Depends on use cases, few variants of text would also use on design. The QA should verify the text styling is same as mockup which includes font, size, color, line space etc. Pattern link for typography
How to verify:
Check the text styling using inspect mode on browser (You can use CSS Viewer plugin for Mozilla browser)
Color:
Check the colors used for the text, background, button etc. same as shared mockup. The colors should not be altered or changed.
How to verify:
- Check the page colours using web master tool (Alternatively You can also use CSS Viewer plugin or another Mozilla plugin)
Spacing
Check the padding and margin around the individual element or a section. Maintain it same as Mockup design.
How to verify:
Interaction:
On interact, certain UI elements has effects like hover effect for button, focus color for Text input etc. The interaction effect can be a change of color, twinning, transition etc. Please check the pattern library for the guidelines.