Your SlideShare is downloading. ×
0
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Interaction Implementation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Interaction Implementation

3,824

Published on

How I approach the task of: how do you get a design mock to implemented project.

How I approach the task of: how do you get a design mock to implemented project.

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,824
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. InteractionImplementation http://www.flickr.com/photos/dm-set/3396228103/
  • 2. Or more specifically: How I go from a visual design (i.e. a mock) andmake it a real weby thingy But thats a crap title.
  • 3. My Plan:๏ Mock ➡ Developer๏ Deconstructing the mock: work, risk, costs๏ Approach to coding http://www.flickr.com/photos/zervas/3848962977/
  • 4. In mypreviouslife I wasa frackingangsta.
  • 5. R Gr r OA rrR Designer Developer http://www.flickr.com/photos/jojakeman/3825935283/
  • 6. I love you, man Designer Developer http://www.flickr.com/photos/jojakeman/3825935283/
  • 7. http://www.flickr.com/photos/jojakeman/3825935283/
  • 8. Designers: How to prepare a design that devs can use Developers: Process tips for dev and testing+ work flow with clients/manages
  • 9. lube === good http://www.flickr.com/photos/barbaradoduk/195689523
  • 10. BasicsSeeing all the problemsin a mock immediately
  • 11. If youre using a grid,make exceptions.Dont make exceptions,the rule of thumb.
  • 12. WTF? oh...WTF?..."flick"
  • 13. <img id="home" src="home-headline.png" alt="...">#home { max-width: 100%;} http://www.flickr.com/photos/adactio/5818096043
  • 14. Dont let yourdesign deficientdeveloper dothis design -itll look crap.
  • 15. Good Great
  • 16. Quote Messer Upperers ๏Liquid layouts ๏Fixed sizes ๏Responsive design ๏Tiny variances
  • 17. Deconstructthe design
  • 18. What cant you see?The invisibles will always bite you in the arse. http://www.flickr.com/photos/remysharp/1163289602/
  • 19. ๏ Whats clickable?๏ Whats touchable?๏ Whats the target platform?๏ Browser support?
  • 20. ๏Touch vs.๏Hold vs.๏Drag vs.๏Double tap over a tap hotspot vs... http://www.flickr.com/photos/dannynic/3295160732/
  • 21. Recommendation:sit with client & drawing and touch that.
  • 22. Risk = screw ups = time = £
  • 23. ๏ When third parties are involved๏ What you dont immediately know how to solve๏ Where you cant visualise a solution
  • 24. Costing You. [bling image] You wish. Sorta...http://www.flickr.com/photos/deronkamisato/4965826757
  • 25. Costing [bling image] ๏ Never give quotes off the bat ๏ Break down into components ๏ Deadlines are a cost factor ๏ Cost IE6 separatelyhttp://www.flickr.com/photos/deronkamisato/4965826757
  • 26. Google supportlatest-1. So do I.
  • 27. Add 40%for IE6 support
  • 28. 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/
  • 29. Experience will help too :)
  • 30. Deadlines GoodBad http://www.flickr.com/photos/klif/2847294014
  • 31. Deadlines๏Dont miss them๏Dont slip and slip and slip๏Very few deadlines cant be moved๏Urgent rarely means urgent http://www.flickr.com/photos/klif/2847294014
  • 32. Approach
  • 33. Prototype earlyhttp://www.flickr.com/photos/donsolo/1301608111/
  • 34. KISS http://www.flickr.com/photos/anirudhkoul/3725928708/
  • 35. KI(RF)SS http://www.flickr.com/photos/nathaninsandiego/2723174963/ KI(RF)SS
  • 36. Style: choose๏ Style for design/desktop fixed width๏ Style for lowest possible size๏ Style for multiple deployed versions - ala gmail
  • 37. Do JavaScript Last http://www.flickr.com/photos/charliebrewer/2897862701
  • 38. 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!
  • 39. 1. Build without jQuery.2.Design the start and end of your effects without jQuery.3.Add jQuery a little at a time.
  • 40. Third Party Libraries๏ github.com๏ Check commits & last activity๏ Check issues being opened and closed
  • 41. Offline → Not quite offline๏ Lets the client see it in prototype stage๏ Dropbox is your friend๏ Get a short url for mobile testing
  • 42. http://inliner.leftlogic.com
  • 43. RewriteRule ^db/(.*)$ http://dl.dropbox.com/u/43399/$1 [L]RewriteCond %{REQUEST_FILENAME}.html -fRewriteRule (.*) $1.html [L]
  • 44. Recap Time๏Remember function as well as form๏Anticipate the invisibles๏Prototype๏KI(RF)SS
  • 45. And... remember to cuddle!http://www.flickr.com/photos/jojakeman/3825935283/
  • 46. Otherwise: rock on.@remleftlogic.com

×