Tools and Techniques Design Jaideep Raman
Upcoming SlideShare
Loading in...5
×
 

Tools and Techniques Design Jaideep Raman

on

  • 515 views

Presentation from vodQA Bangalore Get Set Test

Presentation from vodQA Bangalore Get Set Test

Statistics

Views

Total Views
515
Views on SlideShare
515
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tools and Techniques Design Jaideep Raman Tools and Techniques Design Jaideep Raman Presentation Transcript

  • TOOLS & TECHNIQUES TOVALIDATE VISUAL DESIGNJAIDEEP SINGH UI DEVELOPER, THOUGHTWORKSRAMAN KANSAL QUALITY ASSURANCE SPECIALIST, THOUGHTWORKS
  • SPOT THE DIFFERENCESVISUAL DESIGN WEBPAGE IMPLEMENTATION
  • SPOT THE DIFFERENCESVISUAL DESIGN WEBPAGE IMPLEMENTATIONFLUID VS FIXED LAYOUTSCOLORS, BACKGROUNDSIMAGESFONT View slide
  • SPOT THE DIFFERENCES - IIVISUAL DESIGN WEBPAGE IMPLEMENTATION View slide
  • 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
  • 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 LENGTHS VIA CHROME INSPECTOR
  • FIXED VS FLUID LAYOUTSVALIDATING THE LAYOUT FOR MULTIPLE RESOLUTIONSUSING THE BROWSER ZOOMFLUID LAYOUTSNOT EVERYTHING NEEDS TO BE FLUID
  • RESPONSIVE DESIGNTHE SNAP POINTSSUPPORTING MULTIPLE SCREENS WITH MEDIA QUERIESDECIDING UPON THE NUMBER OF SNAP POINTSTESTING DIFFERENT SCREEN SIZESWINDOW RE-SIZER EXTENSION FOR CHROMEIOS SIMULATOR
  • 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 SIMULATOR
  • THANK YOU!@_jaideep@kansal_raman