Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dr Weblove or: How I Learned to Stop Worrying About Photoshop and Love Designers

Dr Weblove or: How I Learned to Stop Worrying About Photoshop and Love Designers

Once upon a time, in a galaxy far, far away, developers and designers worked in harmony creating amazing web sites and applications. Back on Earth though it's not quite the fairy tale story. Remy's a developer, who has worked with more than healthy handful designers over the last decade and more ("but he's so young and good looking!" we hear you cry). His session will share what worked and what didn't, tips and tricks to make life a little easier. What's simple in a design to implement and what was hard. How he looks for risk in a project and how that's shared with the designers and client. How do you quote and how do you get your quotes right. When to choose an off the shelf library or when to build something bespoke.

C8b387c489181844b3ffc704fadc0f14?s=128

Remy Sharp

May 15, 2012
Tweet

Transcript

  1. Dr. Weblove Or: How I Learned to Stop Worrying About

    Photoshop and Love Designers http://www.flickr.com/photos/x-ray_delta_one/4152356696
  2. 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.
  3. ๏Mock ➡ Developer ๏Deconstructing the mock: work, risk, costs ๏Approach

    to coding My Plan: http://www.flickr.com/photos/zervas/3848962977/
  4. In my previous life I was NOT a designer.

  5. None
  6. http://www.flickr.com/photos/jojakeman/3825935283/ Grrrr ROAR Designer Developer

  7. http://www.flickr.com/photos/jojakeman/3825935283/ Designer Developer I love you, man

  8. http://www.flickr.com/photos/jojakeman/3825935283/

  9. Designers: How to prepare a design that devs can use

    + work flow with clients/manages Developers: Process tips for dev and testing
  10. http://www.flickr.com/photos/barbaradoduk/195689523 lube === good

  11. Basics Seeing all the problems in a mock immediately

  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. If you're using a grid, make exceptions. Don't make exceptions,

    the rule of thumb.
  21. None
  22. WTF? WTF?... oh... "flick"

  23. None
  24. None
  25. <img id="home" src="home-headline.png" alt="..."> #home { max-width: 100%; } http://www.flickr.com/photos/adactio/5818096043

  26. None
  27. None
  28. Don't let your design deficient developer do this design -

    it'll look crap.
  29. Good Great

  30. Quote Messer Upperers ๏Liquid layouts ๏Fixed sizes ๏Responsive design ๏Tiny

    variances
  31. None
  32. None
  33. None
  34. None
  35. None
  36. Deconstruct the design

  37. What can't you see? The invisibles will always bite you

    in the arse. http://www.flickr.com/photos/remysharp/1163289602/
  38. What's clickable? What's touchable? What's the target platform? Browser support?

  39. http://www.flickr.com/photos/dannynic/3295160732/ Touch vs. Hold vs. Drag vs. Double tap over

    a tap hotspot vs...
  40. Recommendation: sit with client & drawing and touch that.

  41. Risk = screw ups = time = £

  42. ๏When third parties are involved ๏What you don't immediately know

    how to solve ๏Where you can't visualise a solution
  43. [bling image] You. You wish. Sorta... Costing http://www.flickr.com/photos/deronkamisato/4965826757

  44. [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
  45. Google support latest-1. So do I.

  46. Add 40% for IE6 support

  47. 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/
  48. Experience will help too :)

  49. Deadlines http://www.flickr.com/photos/klif/2847294014 Bad Good

  50. 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
  51. Approach

  52. Prototype early http://www.flickr.com/photos/donsolo/1301608111/

  53. KISS http://www.flickr.com/photos/anirudhkoul/3725928708/

  54. KI(RF)SS KI(RF)SS http://www.flickr.com/photos/nathaninsandiego/2723174963/

  55. None
  56. Style: choose ๏Style for design/desktop fixed width ๏Style for lowest

    possible size ๏Style for multiple deployed versions - ala gmail
  57. Do JavaScript Last http://www.flickr.com/photos/charliebrewer/2897862701

  58. 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!
  59. 1. Build without jQuery. 2.Design the start and end of

    your effects without jQuery. 3.Add jQuery a little at a time.
  60. None
  61. ๏github.com ๏Check commits & last activity ๏Check issues being opened

    and closed Third Party Libraries
  62. Offline → Not quite offline ๏Lets the client see it

    in prototype stage ๏Dropbox is your friend ๏Get a short url for mobile testing
  63. RewriteRule ^db/(.*)$ http://dl.dropbox.com/u/43399/$1 [L] RewriteCond %{REQUEST_FILENAME}.html -f RewriteRule (.*) $1.html

    [L]
  64. Recap Time 1. Remember function as well as form 2.

    Anticipate the invisibles 3. Prototype 4. KI(RF)SS
  65. And... remember to cuddle! http://www.flickr.com/photos/jojakeman/3825935283/

  66. Otherwise: rock on. @rem Hire me @ leftlogic.com