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
81
HTML5
jaideepsingh
1
210
Memory profile your JavaScript application
jaideepsingh
0
820
The mechanics of iconography
jaideepsingh
0
150
Interactive prototyping
jaideepsingh
2
96
AngularJS
jaideepsingh
1
360
Other Decks in Programming
See All in Programming
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
220
try! Swift Tokyo 初参加報告LT
hinakko2
0
210
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
270
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
230
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
360
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
코틀린으로 멀티플랫폼 만들기
pangmoo
0
140
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
160
Hanami and htmx
bkuhlmann
0
200
見た目から始める生産性向上
ikumatadokoro
7
790
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Code Reviewing Like a Champion
maltzj
513
39k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Six Lessons from altMBA
skipperchong
20
3k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
Automating Front-end Workflow
addyosmani
1355
200k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
The Pragmatic Product Professional
lauravandoore
24
5.8k
How GitHub (no longer) Works
holman
304
140k
Building Your Own Lightsaber
phodgson
98
5.7k
Faster Mobile Websites
deanohume
298
30k
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