Interaction Implementation
-
Upload
remy-sharp -
Category
Technology
-
view
3.799 -
download
1
description
Transcript of Interaction Implementation
![Page 1: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/1.jpg)
Interaction Implementation
http://www.flickr.com/photos/dm-set/3396228103/
![Page 2: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/2.jpg)
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.
![Page 3: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/3.jpg)
๏Mock ➡ Developer๏Deconstructing the
mock: work, risk, costs๏Approach to coding
My Plan:
http://www.flickr.com/photos/zervas/3848962977/
![Page 4: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/4.jpg)
In my previous life I was a frackin' gangsta.
![Page 5: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/5.jpg)
![Page 6: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/6.jpg)
http://www.flickr.com/photos/jojakeman/3825935283/
GrrrrROAR
DesignerDeveloper
![Page 7: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/7.jpg)
http://www.flickr.com/photos/jojakeman/3825935283/
DesignerDeveloper
I love you,man
![Page 8: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/8.jpg)
http://www.flickr.com/photos/jojakeman/3825935283/
![Page 9: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/9.jpg)
Designers:How to prepare a design that devs can use
+ work flow with clients/manages
Developers:Process tips for dev and testing
![Page 10: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/10.jpg)
http://www.flickr.com/photos/barbaradoduk/195689523
lube === good
![Page 11: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/11.jpg)
BasicsSeeing all the problems in a mock immediately
![Page 12: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/12.jpg)
![Page 13: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/13.jpg)
![Page 14: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/14.jpg)
![Page 15: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/15.jpg)
![Page 16: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/16.jpg)
![Page 17: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/17.jpg)
![Page 18: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/18.jpg)
![Page 19: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/19.jpg)
![Page 20: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/20.jpg)
If you're using a grid, make exceptions. Don't make exceptions,the rule of thumb.
![Page 21: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/21.jpg)
![Page 22: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/22.jpg)
WTF?WTF?... oh..."flick"
![Page 23: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/23.jpg)
![Page 24: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/24.jpg)
![Page 25: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/25.jpg)
<img id="home" src="home-headline.png" alt="...">
#home { max-width: 100%;}
http://www.flickr.com/photos/adactio/5818096043
![Page 26: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/26.jpg)
![Page 27: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/27.jpg)
![Page 28: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/28.jpg)
Don't let your design deficient developer do this design - it'll look crap.
![Page 29: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/29.jpg)
Good Great
![Page 30: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/30.jpg)
Quote Messer Upperers
๏Liquid layouts๏Fixed sizes๏Responsive design๏Tiny variances
![Page 31: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/31.jpg)
![Page 32: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/32.jpg)
![Page 33: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/33.jpg)
![Page 34: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/34.jpg)
![Page 35: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/35.jpg)
![Page 36: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/36.jpg)
Deconstruct
the design
![Page 37: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/37.jpg)
What can't you see?The invisibles will always bite you in the arse.
http://www.flickr.com/photos/remysharp/1163289602/
![Page 38: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/38.jpg)
๏What's clickable?
๏What's touchable?
๏What's the target platform?
๏Browser support?
![Page 39: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/39.jpg)
http://www.flickr.com/photos/dannynic/3295160732/
๏Touch vs.๏Hold vs.๏Drag vs.๏Double tap over a tap
hotspot vs...
![Page 40: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/40.jpg)
Recommendation: sit with client & drawing
and touch that.
![Page 41: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/41.jpg)
Risk = screw ups = time = £
![Page 42: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/42.jpg)
๏When third parties are involved
๏What you don't immediately know how to solve
๏Where you can't visualise a solution
![Page 43: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/43.jpg)
[bling image] You.You wish.Sorta...
Costing
http://www.flickr.com/photos/deronkamisato/4965826757
![Page 44: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/44.jpg)
[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
![Page 45: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/45.jpg)
Google support latest-1. So do I.
![Page 46: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/46.jpg)
Add 40%for IE6 support
![Page 47: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/47.jpg)
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/
![Page 48: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/48.jpg)
Experience will help too :)
![Page 49: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/49.jpg)
Deadlines
http://www.flickr.com/photos/klif/2847294014
BadGood
![Page 50: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/50.jpg)
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
![Page 51: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/51.jpg)
Approach
![Page 52: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/52.jpg)
Prototype early
http://www.flickr.com/photos/donsolo/1301608111/
![Page 53: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/53.jpg)
KISShttp://www.flickr.com/photos/anirudhkoul/3725928708/
![Page 54: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/54.jpg)
KI(RF)SSKI(RF)SShttp://www.flickr.com/photos/nathaninsandiego/2723174963/
![Page 55: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/55.jpg)
![Page 56: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/56.jpg)
Style: choose
๏ Style for design/desktop fixed width
๏ Style for lowest possible size๏ Style for multiple deployed
versions - ala gmail
![Page 57: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/57.jpg)
Do JavaScript Last
http://www.flickr.com/photos/charliebrewer/2897862701
![Page 58: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/58.jpg)
jQuery pluginsGood for fast prototypingQuality is mixed, and often do way more than you need ixedit.com, jqueryfordesigners.com, try out some coding!
![Page 59: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/59.jpg)
1. Build without jQuery.
2.Design the start and end of your effects without jQuery.
3.Add jQuery a little at a time.
![Page 60: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/60.jpg)
![Page 61: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/61.jpg)
๏github.com
๏Check commits & last activity
๏Check issues being opened and closed
Third Party Libraries
![Page 62: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/62.jpg)
Offline → Not quite offline
๏Lets the client see it in prototype stage
๏Dropbox is your friend
๏Get a short url for mobile testing
![Page 64: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/64.jpg)
RewriteRule ^db/(.*)$ http://dl.dropbox.com/u/43399/$1 [L]RewriteCond %{REQUEST_FILENAME}.html -fRewriteRule (.*) $1.html [L]
![Page 65: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/65.jpg)
Recap Time
๏Remember function as well as form
๏Anticipate the invisibles
๏Prototype
๏KI(RF)SS
![Page 66: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/66.jpg)
And... remember to cuddle!
http://www.flickr.com/photos/jojakeman/3825935283/
![Page 67: Interaction Implementation](https://reader038.fdocuments.net/reader038/viewer/2022103114/5558bd60d8b42a7e298b5181/html5/thumbnails/67.jpg)
Otherwise: rock on.@rem
leftlogic.com