This document discusses tools and techniques for validating visual design implementations against mockups or designs. It outlines how to spot differences in images, fonts, backgrounds, layouts, and responsiveness across devices using browser developer tools like the Chrome Inspector, extensions like Measurelt and Eye Dropper, and emulation tools like the iOS simulator. The goal is to ensure visual fidelity by testing for deviations in these visual elements across resolutions, browsers, and devices.

1. TOOLS & TECHNIQUES TO
VALIDATE VISUAL DESIGN
JAIDEEP SINGH UI DEVELOPER, THOUGHTWORKS
RAMAN KANSAL QUALITY ASSURANCE SPECIALIST, THOUGHTWORKS

2. SPOT THE DIFFERENCES
VISUAL DESIGN WEBPAGE IMPLEMENTATION

3. SPOT THE DIFFERENCES
VISUAL DESIGN WEBPAGE IMPLEMENTATION
FLUID VS FIXED LAYOUTS
COLORS, BACKGROUNDS
IMAGES
FONT

4. SPOT THE DIFFERENCES - II
VISUAL DESIGN WEBPAGE IMPLEMENTATION

5. TYPES OF DEVIATIONS
IMAGES — QUALITY, SIZE & ASPECT RATIO
FONTS — FAMILY & SIZE, WEIGHT
BACKGROUNDS — COLORS, PATTERNS & GRADIENTS
FLUID VS FIXED LAYOUTS — CHOOSING APPROPRIATE WIDTHS
RESPONSIVE DESIGN — SNAP POINTS & DIFFERENT SCREEN SIZE
ICONS & GRAPHICS — QUALITY, SIZES FOR RETINA DISPLAYS

6. IMAGES
TOOLS FOR SIZE & ASPECT RATIO
MEASURELT EXTENSION FOR CHROME
CHROME INSPECTOR

7. FONTS
FINDING OUT FONT FROM MOCKUP/SCREENSHOTS
HTTP://WWW.MYFONTS.COM/WHATTHEFONT/
INSPECTING FONTS WITH CHROME INSPECTOR

8. BACKGROUNDS
VALIDATING THE COLORS & GRADIENTS
EYE DROPPER EXTENSION FOR CHROME
TEST FOR PATTERN CONSISTENCY
VARYING TEXT LENGTHS VIA CHROME INSPECTOR

9. FIXED VS FLUID LAYOUTS
VALIDATING THE LAYOUT FOR MULTIPLE RESOLUTIONS
USING THE BROWSER ZOOM
FLUID LAYOUTS
NOT EVERYTHING NEEDS TO BE FLUID

10. RESPONSIVE DESIGN
THE SNAP POINTS
SUPPORTING MULTIPLE SCREENS WITH MEDIA QUERIES
DECIDING UPON THE NUMBER OF SNAP POINTS
TESTING DIFFERENT SCREEN SIZES
WINDOW RE-SIZER EXTENSION FOR CHROME
IOS SIMULATOR

11. ICONS & GRAPHICS
TESTING FOR RETINA DEVICES
IOS SIMULATOR
THE SOLUTION
MEDIA QUERIES (MIN-DEVICE-PIXEL-RATIO)

12. THE TOOLKIT
THE CHROME INSPECTOR
MEASURELT
WHAT THE FONT
EYE DROPPER EXTENSION
WINDOW RE-SIZER EXTENSION
THE BROWSER ZOOM
IOS SIMULATOR

13. THANK YOU!
@_jaideep
@kansal_raman