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
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
GAEログのコスト削減
mot_techtalk
0
110
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
Honoとフロントエンドの 型安全性について
yodaka
4
250
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Immutable ActiveRecord
megane42
0
130
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Statistics for Hackers
jakevdp
797
220k
Documentation Writing (for coders)
carmenintech
67
4.6k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Side Projects
sachag
452
42k
Docker and Python
trallard
44
3.3k
KATA
mclloyd
29
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Navigating Team Friction
lara
183
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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