Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TOOLS & TECHNIQUES TO
VALIDATE VISUAL DESIGN
JAIDEEP SINGH UI DEVELOPER, THOUGHTWORKS
RAMAN KANSAL QUALITY ASSURANCE SPECI...
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 & G...
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 L...
FIXED VS FLUID LAYOUTS
VALIDATING THE LAYOUT FOR MULTIPLE RESOLUTIONS
USING THE BROWSER ZOOM
FLUID LAYOUTS
NOT EVERYTHING ...
RESPONSIVE DESIGN
THE SNAP POINTS
SUPPORTING MULTIPLE SCREENS WITH MEDIA QUERIES
DECIDING UPON THE NUMBER OF SNAP POINTS
T...
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
...
THANK YOU!
@_jaideep
@kansal_raman
Upcoming SlideShare
Loading in …5
×

Tools and techniques to validate visual design jaideep and raman

  • Be the first to comment

  • Be the first to like this

Tools and techniques to validate visual design jaideep and raman

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

×