Tools and techniques to validate visual design jaideep and raman

459 views
320 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
459
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×