Tools and Techniques Design Jaideep Raman
0 likes822 views
This document discusses tools and techniques for validating visual design implementations against mockups or designs. It outlines how to spot differences in images, fonts, backgrounds, layouts, and responsiveness across devices using browser developer tools like the Chrome Inspector, extensions like Measurelt and Eye Dropper, and emulation tools like the iOS simulator. The goal is to ensure visual fidelity by testing for deviations in these visual elements across resolutions, browsers, and devices.
Tools and Techniques Design Jaideep Raman
- 1. TOOLS & TECHNIQUES TO VALIDATE VISUAL DESIGN JAIDEEP SINGH UI DEVELOPER, THOUGHTWORKS RAMAN KANSAL QUALITY ASSURANCE SPECIALIST, THOUGHTWORKS
- 2. SPOT THE DIFFERENCES VISUAL DESIGN WEBPAGE IMPLEMENTATION
- 3. SPOT THE DIFFERENCES VISUAL DESIGN WEBPAGE IMPLEMENTATION FLUID VS FIXED LAYOUTS COLORS, BACKGROUNDS IMAGES FONT
- 4. SPOT THE DIFFERENCES - II VISUAL DESIGN WEBPAGE IMPLEMENTATION
- 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. IMAGES TOOLS FOR SIZE & ASPECT RATIO MEASURELT EXTENSION FOR CHROME CHROME INSPECTOR
- 7. FONTS FINDING OUT FONT FROM MOCKUP/SCREENSHOTS HTTP://WWW.MYFONTS.COM/WHATTHEFONT/ INSPECTING FONTS WITH CHROME INSPECTOR
- 8. BACKGROUNDS VALIDATING THE COLORS & GRADIENTS EYE DROPPER EXTENSION FOR CHROME TEST FOR PATTERN CONSISTENCY VARYING TEXT LENGTHS VIA CHROME INSPECTOR
- 9. FIXED VS FLUID LAYOUTS VALIDATING THE LAYOUT FOR MULTIPLE RESOLUTIONS USING THE BROWSER ZOOM FLUID LAYOUTS NOT EVERYTHING NEEDS TO BE FLUID
- 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. ICONS & GRAPHICS TESTING FOR RETINA DEVICES IOS SIMULATOR THE SOLUTION MEDIA QUERIES (MIN-DEVICE-PIXEL-RATIO)
- 12. THE TOOLKIT THE CHROME INSPECTOR MEASURELT WHAT THE FONT EYE DROPPER EXTENSION WINDOW RE-SIZER EXTENSION THE BROWSER ZOOM IOS SIMULATOR