Tools and techniques to validate visual design

A talk about tools for validating your designs - VodQA, 2013

Transcript

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