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
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
Featured
See All Featured
A better future with KSS
kneath
238
17k
Six Lessons from altMBA
skipperchong
27
3.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Scaling GitHub
holman
459
140k
We Have a Design System, Now What?
morganepeng
51
7.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Designing for Performance
lara
604
68k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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