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
210
Living Standard
rem
1
280
State of the Gap
rem
1
850
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
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
High Performance PHP
cmuench
0
140
現場で役立つAPIデザイン
nagix
29
10k
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
240
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
KATA
mclloyd
29
14k
Designing for Performance
lara
604
68k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
A better future with KSS
kneath
238
17k
Raft: Consensus for Rubyists
vanstee
137
6.8k
A designer walks into a library…
pauljervisheath
205
24k
How to train your dragon (web standard)
notwaldorf
90
5.8k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
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