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
Interaction Implementation
Search
Remy Sharp
July 08, 2011
Technology
0
14
Interaction Implementation
How I approach the task of: how do you get a design mock to implemented project.
Remy Sharp
July 08, 2011
Tweet
Share
More Decks by Remy Sharp
See All by Remy Sharp
Using a Modern Web to Recreate 1980s Horribly Slow & Loud Loading Screens
rem
0
110
Recreating the ZX Spectrum loader with Web APIs
rem
0
220
Living Standard
rem
1
290
State of the Gap
rem
1
860
The Art of Debugging
rem
2
2.2k
EdgeConf - Progressive Enhancement
rem
0
270
Toxic Side of Free. Or: how I lost the love for my side project.
rem
0
750
Muddling my way through real time
rem
0
730
The Bits Behind JS Bin
rem
4
890
Other Decks in Technology
See All in Technology
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
170
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
160
Pwned Labsのすゝめ
ken5scal
2
430
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
3
6k
クラウド食堂とは?
hiyanger
0
110
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
290
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
140
組織におけるCCoEの役割とAWS活用事例
nrinetcom
PRO
4
130
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
510
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
190
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
680
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Typedesign – Prime Four
hannesfritz
40
2.5k
A Philosophy of Restraint
colly
203
16k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Bash Introduction
62gerente
611
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Six Lessons from altMBA
skipperchong
27
3.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A better future with KSS
kneath
238
17k
GitHub's CSS Performance
jonrohan
1030
460k
The Language of Interfaces
destraynor
156
24k
Transcript
Interaction Implementation http://www.flickr.com/photos/dm-set/3396228103/
How I go from a visual design (i.e. a mock)
and make it a real weby thingy Or more specifically: But that's a crap title.
๏Mock ➡ Developer ๏Deconstructing the mock: work, risk, costs ๏Approach
to coding My Plan: http://www.flickr.com/photos/zervas/3848962977/
In my previous life I was a frackin' gangsta.
None
http://www.flickr.com/photos/jojakeman/3825935283/ Grrrr ROAR Designer Developer
http://www.flickr.com/photos/jojakeman/3825935283/ Designer Developer I love you, man
http://www.flickr.com/photos/jojakeman/3825935283/
Designers: How to prepare a design that devs can use
+ work flow with clients/manages Developers: Process tips for dev and testing
http://www.flickr.com/photos/barbaradoduk/195689523 lube === good
Basics Seeing all the problems in a mock immediately
None
None
None
None
None
None
None
None
If you're using a grid, make exceptions. Don't make exceptions,
the rule of thumb.
None
WTF? WTF?... oh... "flick"
None
None
<img id="home" src="home-headline.png" alt="..."> #home { max-width: 100%; } http://www.flickr.com/photos/adactio/5818096043
None
None
Don't let your design deficient developer do this design -
it'll look crap.
Good Great
Quote Messer Upperers ๏Liquid layouts ๏Fixed sizes ๏Responsive design ๏Tiny
variances
None
None
None
None
None
Deconstruct the design
What can't you see? The invisibles will always bite you
in the arse. http://www.flickr.com/photos/remysharp/1163289602/
๏What's clickable? ๏What's touchable? ๏What's the target platform? ๏Browser support?
http://www.flickr.com/photos/dannynic/3295160732/ ๏Touch vs. ๏Hold vs. ๏Drag vs. ๏Double tap over
a tap hotspot vs...
Recommendation: sit with client & drawing and touch that.
Risk = screw ups = time = £
๏When third parties are involved ๏What you don't immediately know
how to solve ๏Where you can't visualise a solution
[bling image] You. You wish. Sorta... Costing http://www.flickr.com/photos/deronkamisato/4965826757
[bling image] Costing ๏Never give quotes off the bat ๏Break
down into components ๏Deadlines are a cost factor ๏Cost IE6 separately http://www.flickr.com/photos/deronkamisato/4965826757
Google support latest-1. So do I.
Add 40% for IE6 support
Estimates & Quotes ๏Get it wrong first. ๏Track your hours.
๏Compare to the quote. ๏Repeat ๏Mine was consistently out by 20% http://www.flickr.com/photos/pacdog/213744694/
Experience will help too :)
Deadlines http://www.flickr.com/photos/klif/2847294014 Bad Good
Deadlines ๏Don't miss them ๏Don't slip and slip and slip
๏Very few deadlines can't be moved ๏Urgent rarely means urgent http://www.flickr.com/photos/klif/2847294014
Approach
Prototype early http://www.flickr.com/photos/donsolo/1301608111/
KISS http://www.flickr.com/photos/anirudhkoul/3725928708/
KI(RF)SS KI(RF)SS http://www.flickr.com/photos/nathaninsandiego/2723174963/
None
Style: choose ๏Style for design/desktop fixed width ๏Style for lowest
possible size ๏Style for multiple deployed versions - ala gmail
Do JavaScript Last http://www.flickr.com/photos/charliebrewer/2897862701
jQuery plugins Good for fast prototyping Quality is mixed, and
often do way more than you need ixedit.com, jqueryfordesigners.com, try out some coding!
1. Build without jQuery. 2.Design the start and end of
your effects without jQuery. 3.Add jQuery a little at a time.
None
๏github.com ๏Check commits & last activity ๏Check issues being opened
and closed Third Party Libraries
Offline → Not quite offline ๏Lets the client see it
in prototype stage ๏Dropbox is your friend ๏Get a short url for mobile testing
http://inliner.leftlogic.com
RewriteRule ^db/(.*)$ http://dl.dropbox.com/u/43399/$1 [L] RewriteCond %{REQUEST_FILENAME}.html -f RewriteRule (.*) $1.html
[L]
Recap Time ๏Remember function as well as form ๏Anticipate the
invisibles ๏Prototype ๏KI(RF)SS
And... remember to cuddle! http://www.flickr.com/photos/jojakeman/3825935283/
Otherwise: rock on. @rem leftlogic.com