Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Tools and techniques to validate visual design
Search
jaideepsingh
May 18, 2013
Programming
0
190
Tools and techniques to validate visual design
A talk about tools for validating your designs - VodQA, 2013
jaideepsingh
May 18, 2013
Tweet
Share
More Decks by jaideepsingh
See All by jaideepsingh
Mobile app analytics
jaideepsingh
0
130
Measuring the in-broswer experience
jaideepsingh
0
86
HTML5
jaideepsingh
1
210
Memory profile your JavaScript application
jaideepsingh
0
840
The mechanics of iconography
jaideepsingh
0
160
Interactive prototyping
jaideepsingh
2
100
AngularJS
jaideepsingh
1
360
Other Decks in Programming
See All in Programming
Domain-Driven Transformation
hschwentner
2
1.9k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
Unity Android XR入門
sakutama_11
0
140
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Ruby on cygwin 2025-02
fd0
0
140
Formの複雑さに立ち向かう
bmthd
1
720
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Featured
See All Featured
Bash Introduction
62gerente
610
210k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Typedesign – Prime Four
hannesfritz
40
2.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
How STYLIGHT went responsive
nonsquared
98
5.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Become a Pro
speakerdeck
PRO
26
5.1k
GitHub's CSS Performance
jonrohan
1030
460k
Transcript
TOOLS & TECHNIQUES TO VALIDATE VISUAL DESIGN JAIDEEP SINGH UI
DEVELOPER, THOUGHTWORKS RAMAN KANSAL QUALITY ASSURANCE SPECIALIST, THOUGHTWORKS
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 & GRADIENTS FLUID VS FIXED LAYOUTS — CHOOSING APPROPRIATE WIDTHS RESPONSIVE DESIGN — SNAP POINTS & DIFFERENT SCREEN SIZE ICONS & GRAPHICS — QUALITY, SIZES FOR RETINA DISPLAYS
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 LENGTHS VIA CHROME INSPECTOR
FIXED VS FLUID LAYOUTS VALIDATING THE LAYOUT FOR MULTIPLE RESOLUTIONS
USING THE BROWSER ZOOM FLUID LAYOUTS NOT EVERYTHING NEEDS TO BE FLUID
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
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 IOS SIMULATOR
THANK YOU! @_jaideep @kansal_raman