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
12
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
80
Recreating the ZX Spectrum loader with Web APIs
rem
0
150
Living Standard
rem
1
220
State of the Gap
rem
1
750
The Art of Debugging
rem
2
2k
EdgeConf - Progressive Enhancement
rem
0
220
Toxic Side of Free. Or: how I lost the love for my side project.
rem
0
660
Muddling my way through real time
rem
0
610
The Bits Behind JS Bin
rem
4
810
Other Decks in Technology
See All in Technology
知識と実践を紡ぐGenAI / Connecting Knowledge and experience with GenAI
aki_moon
2
130
Password cracking: past, present, future
openwall
0
130
cgroup v2 で何が変わったのか / TechFeed Experts Night #28
tenforward
2
140
パスワードを保存しますか?
hanacchi
0
240
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
0
2k
CockroachDB はどのくらい「しぶとい」のか? / How tough is CockroachDB?
kota2and3kan
13
4.8k
Max out Local LLM in Challenging Environments
sashimimochi
2
230
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
12
7.8k
「できる!」を増やすGitHub Copilot活用法 / How to use GitHub Copilot to expand your possibilities
sansan_randd
1
210
AWSやJAWS-UGとの出会いを振り返る
yoyoyopg
1
200
Deno で作る快適な “as Code” プラットフォーム – TSKaigi 2024
pizzacat83
2
120
[2024년 5월 세미나] 생성형 AI와 함께하는 데이터 분석가 커리어
datarian
0
570
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Debugging Ruby Performance
tmm1
70
11k
How GitHub (no longer) Works
holman
305
140k
Ruby is Unlike a Banana
tanoku
96
10k
KATA
mclloyd
16
12k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
Being A Developer After 40
akosma
67
580k
Writing Fast Ruby
sferik
622
60k
Building Applications with DynamoDB
mza
88
5.7k
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