Interaction Implementation
Upcoming SlideShare
Loading in...5

Interaction Implementation



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.



Total Views
Views on SlideShare
Embed Views



10 Embeds 124 61 32
url_unknown 12 6 6 3 1 1 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Interaction Implementation Interaction Implementation Presentation Transcript

  • InteractionImplementation
  • 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.
  • My Plan:๏ Mock ➡ Developer๏ Deconstructing the mock: work, risk, costs๏ Approach to coding
  • In mypreviouslife I wasa frackingangsta.
  • R Gr r OA rrR Designer Developer
  • I love you, man Designer Developer
  • Designers: How to prepare a design that devs can use Developers: Process tips for dev and testing+ work flow with clients/manages
  • lube === good
  • BasicsSeeing all the problemsin a mock immediately
  • If youre using a grid,make exceptions.Dont make exceptions,the rule of thumb.
  • WTF? oh...WTF?..."flick"
  • <img id="home" src="home-headline.png" alt="...">#home { max-width: 100%;}
  • Dont let yourdesign deficientdeveloper dothis design -itll look crap.
  • Good Great
  • Quote Messer Upperers ๏Liquid layouts ๏Fixed sizes ๏Responsive design ๏Tiny variances
  • Deconstructthe design
  • What cant you see?The invisibles will always bite you in the arse.
  • ๏ Whats clickable?๏ Whats touchable?๏ Whats the target platform?๏ Browser support?
  • ๏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 dont immediately know how to solve๏ Where you cant visualise a solution
  • Costing You. [bling image] You wish. Sorta...
  • Costing [bling image] ๏ Never give quotes off the bat ๏ Break down into components ๏ Deadlines are a cost factor ๏ Cost IE6 separately
  • Google supportlatest-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%
  • Experience will help too :)
  • Deadlines GoodBad
  • Deadlines๏Dont miss them๏Dont slip and slip and slip๏Very few deadlines cant be moved๏Urgent rarely means urgent
  • Approach
  • Prototype early
  • KISS
  • Style: choose๏ Style for design/desktop fixed width๏ Style for lowest possible size๏ Style for multiple deployed versions - ala gmail
  • Do JavaScript Last
  • jQuery plugins Good for fast prototyping Quality is mixed, and often do way more than you need,, 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.
  • Third Party Libraries๏๏ Check commits & last activity๏ Check issues being opened and closed
  • Offline → Not quite offline๏ Lets the client see it in prototype stage๏ Dropbox is your friend๏ Get a short url for mobile testing
  • RewriteRule ^db/(.*)$$1 [L]RewriteCond %{REQUEST_FILENAME}.html -fRewriteRule (.*) $1.html [L]
  • Recap Time๏Remember function as well as form๏Anticipate the invisibles๏Prototype๏KI(RF)SS
  • And... remember to cuddle!
  • Otherwise: rock