TOOLS & TECHNIQUES TOVALIDATE VISUAL DESIGNJAIDEEP SINGH UI DEVELOPER, THOUGHTWORKSRAMAN KANSAL QUALITY ASSURANCE SPECIALI...
SPOT THE DIFFERENCESVISUAL DESIGN WEBPAGE IMPLEMENTATION
SPOT THE DIFFERENCESVISUAL DESIGN WEBPAGE IMPLEMENTATIONFLUID VS FIXED LAYOUTSCOLORS, BACKGROUNDSIMAGESFONT
SPOT THE DIFFERENCES - IIVISUAL DESIGN WEBPAGE IMPLEMENTATION
TYPES OF DEVIATIONSIMAGES — QUALITY, SIZE & ASPECT RATIOFONTS — FAMILY & SIZE, WEIGHTBACKGROUNDS — COLORS, PATTERNS & GRAD...
IMAGESTOOLS FOR SIZE & ASPECT RATIOMEASURELT EXTENSION FOR CHROMECHROME INSPECTOR
FONTSFINDING OUT FONT FROM MOCKUP/SCREENSHOTSHTTP://WWW.MYFONTS.COM/WHATTHEFONT/INSPECTING FONTS WITH CHROME INSPECTOR
BACKGROUNDSVALIDATING THE COLORS & GRADIENTSEYE DROPPER EXTENSION FOR CHROMETEST FOR PATTERN CONSISTENCYVARYING TEXT LENGT...
FIXED VS FLUID LAYOUTSVALIDATING THE LAYOUT FOR MULTIPLE RESOLUTIONSUSING THE BROWSER ZOOMFLUID LAYOUTSNOT EVERYTHING NEED...
RESPONSIVE DESIGNTHE SNAP POINTSSUPPORTING MULTIPLE SCREENS WITH MEDIA QUERIESDECIDING UPON THE NUMBER OF SNAP POINTSTESTI...
ICONS & GRAPHICSTESTING FOR RETINA DEVICESIOS SIMULATORTHE SOLUTIONMEDIA QUERIES (MIN-DEVICE-PIXEL-RATIO)
THE TOOLKITTHE CHROME INSPECTORMEASURELTWHAT THE FONTEYE DROPPER EXTENSIONWINDOW RE-SIZER EXTENSIONTHE BROWSER ZOOMIOS SIM...
THANK YOU!@_jaideep@kansal_raman
Upcoming SlideShare
Loading in...5
×

Tools and Techniques Design Jaideep Raman

370

Published on

Presentation from vodQA Bangalore Get Set Test

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
370
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Tools and Techniques Design Jaideep Raman"

  1. 1. TOOLS & TECHNIQUES TOVALIDATE VISUAL DESIGNJAIDEEP SINGH UI DEVELOPER, THOUGHTWORKSRAMAN KANSAL QUALITY ASSURANCE SPECIALIST, THOUGHTWORKS
  2. 2. SPOT THE DIFFERENCESVISUAL DESIGN WEBPAGE IMPLEMENTATION
  3. 3. SPOT THE DIFFERENCESVISUAL DESIGN WEBPAGE IMPLEMENTATIONFLUID VS FIXED LAYOUTSCOLORS, BACKGROUNDSIMAGESFONT
  4. 4. SPOT THE DIFFERENCES - IIVISUAL DESIGN WEBPAGE IMPLEMENTATION
  5. 5. TYPES OF DEVIATIONSIMAGES — QUALITY, SIZE & ASPECT RATIOFONTS — FAMILY & SIZE, WEIGHTBACKGROUNDS — COLORS, PATTERNS & GRADIENTSFLUID VS FIXED LAYOUTS — CHOOSING APPROPRIATE WIDTHSRESPONSIVE DESIGN — SNAP POINTS & DIFFERENT SCREEN SIZEICONS & GRAPHICS — QUALITY, SIZES FOR RETINA DISPLAYS
  6. 6. IMAGESTOOLS FOR SIZE & ASPECT RATIOMEASURELT EXTENSION FOR CHROMECHROME INSPECTOR
  7. 7. FONTSFINDING OUT FONT FROM MOCKUP/SCREENSHOTSHTTP://WWW.MYFONTS.COM/WHATTHEFONT/INSPECTING FONTS WITH CHROME INSPECTOR
  8. 8. BACKGROUNDSVALIDATING THE COLORS & GRADIENTSEYE DROPPER EXTENSION FOR CHROMETEST FOR PATTERN CONSISTENCYVARYING TEXT LENGTHS VIA CHROME INSPECTOR
  9. 9. FIXED VS FLUID LAYOUTSVALIDATING THE LAYOUT FOR MULTIPLE RESOLUTIONSUSING THE BROWSER ZOOMFLUID LAYOUTSNOT EVERYTHING NEEDS TO BE FLUID
  10. 10. RESPONSIVE DESIGNTHE SNAP POINTSSUPPORTING MULTIPLE SCREENS WITH MEDIA QUERIESDECIDING UPON THE NUMBER OF SNAP POINTSTESTING DIFFERENT SCREEN SIZESWINDOW RE-SIZER EXTENSION FOR CHROMEIOS SIMULATOR
  11. 11. ICONS & GRAPHICSTESTING FOR RETINA DEVICESIOS SIMULATORTHE SOLUTIONMEDIA QUERIES (MIN-DEVICE-PIXEL-RATIO)
  12. 12. THE TOOLKITTHE CHROME INSPECTORMEASURELTWHAT THE FONTEYE DROPPER EXTENSIONWINDOW RE-SIZER EXTENSIONTHE BROWSER ZOOMIOS SIMULATOR
  13. 13. THANK YOU!@_jaideep@kansal_raman
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×