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