Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interaction Implementation


Published on

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

Published in: Technology, Business
  • Be the first to comment

Interaction Implementation

  1. InteractionImplementation
  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
  4. In mypreviouslife I wasa frackingangsta.
  5. R Gr r OA rrR Designer Developer
  6. I love you, man Designer Developer
  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
  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%;}
  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.
  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...
  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...
  25. Costing [bling image] ๏ Never give quotes off the bat ๏ Break down into components ๏ Deadlines are a cost factor ๏ Cost IE6 separately
  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%
  29. Experience will help too :)
  30. Deadlines GoodBad
  31. Deadlines๏Dont miss them๏Dont slip and slip and slip๏Very few deadlines cant be moved๏Urgent rarely means urgent
  32. Approach
  33. Prototype early
  34. KISS
  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
  38. jQuery plugins Good for fast prototyping Quality is mixed, and often do way more than you need,, 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๏๏ 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
  43. RewriteRule ^db/(.*)$$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!
  46. Otherwise: rock