TOOLS & TECHNIQUES TO VALIDATE VISUAL DESIGN
JAIDEEP SINGH UI DEVELOPER, THOUGHTWORKS
RAMAN KANSAL QUALITY ASSURANCE SPECIALIST, THOUGHTWORKS
SPOT THE DIFFERENCES
VISUAL DESIGN WEBPAGE IMPLEMENTATION
SPOT THE DIFFERENCES
VISUAL DESIGN WEBPAGE IMPLEMENTATION
FLUID VS FIXED LAYOUTS
COLORS, BACKGROUNDS
IMAGES
FONT
SPOT THE DIFFERENCES - II
VISUAL DESIGN WEBPAGE IMPLEMENTATION
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
IMAGES
TOOLS FOR SIZE & ASPECT RATIO
MEASURELT EXTENSION FOR CHROME
CHROME INSPECTOR
FONTS
FINDING OUT FONT FROM MOCKUP/SCREENSHOTS
HTTP://WWW.MYFONTS.COM/WHATTHEFONT/
INSPECTING FONTS WITH CHROME INSPECTOR
BACKGROUNDS
VALIDATING THE COLORS & GRADIENTS
EYE DROPPER EXTENSION FOR CHROME
TEST FOR PATTERN CONSISTENCY
VARYING TEXT LENGTHS VIA CHROME INSPECTOR
FIXED VS FLUID LAYOUTS
VALIDATING THE LAYOUT FOR MULTIPLE RESOLUTIONS
USING THE BROWSER ZOOM
FLUID LAYOUTS
NOT EVERYTHING NEEDS TO BE FLUID
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
ICONS & GRAPHICS
TESTING FOR RETINA DEVICES
IOS SIMULATOR
THE SOLUTION
MEDIA QUERIES (MIN-DEVICE-PIXEL-RATIO)
THE TOOLKIT
THE CHROME INSPECTOR
MEASURELT
WHAT THE FONT
EYE DROPPER EXTENSION
WINDOW RE-SIZER EXTENSION
THE BROWSER ZOOM
IOS SIMULATOR
THANK YOU!@_jaideep
@kansal_raman