Interaction Implementation

5,652 views
4,928 views

Published on

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
5,652
On SlideShare
0
From Embeds
0
Number of Embeds
127
Actions
Shares
0
Downloads
31
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Interaction Implementation

  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

×