The Right Tool for the Job: Designing in the Browser (Sometimes)

2822ffe52dff31cb708edd4469704d2f?s=47 Andi Graham
July 12, 2014

The Right Tool for the Job: Designing in the Browser (Sometimes)

Designing a website is a daunting process - especially for our clients. Doing all of that work in the browser makes it even more complex.

This presentation outlines what we love about designing in the browser, problems we have (and when it's best to return to Photoshop), and how we can keep our clients (or bosses) happy, engaged and excited along the way.

2822ffe52dff31cb708edd4469704d2f?s=128

Andi Graham

July 12, 2014
Tweet

Transcript

  1. DESIGNING IN THE BROWSER 
 (Sometimes.) THE RIGHT TOOL FOR

    THE JOB: with Andi Graham / @andigrahambsd
  2. I’m from

  3. So, why are you here?

  4. None
  5. None
  6. None
  7. Sorry! It’s not you, it’s me.

  8. What  I  sense  is  a  real  tension  between  the  web

     as  we   know  it,  and  the  web  as  it  would  be.  It’s  the  tension   between  an  existing  medium,  the  printed  page,  and  its   child,  the  web.  And  it’s  time  to  really  understand  the   relationship  between  the  parent  and  the  child,  and  to   let  the  child  go  its  own  way  in  the  world. John Allsopp, “A Dao of Web Design” on A List Apart, 2000
  9. WE <3 DESIGNING IN THE BROWSER

  10. Eliminates redundant redundancy.

  11. Click. Tap. Hover. Scroll. Swoop. Slide. Slither.

  12. But what about my iPad mini?

  13. That beige reminds me of my childhood.

  14. It works! It really works!

  15. WHY WOULD YOU DO IT ANY OTHER WAY?
 That’s all

    pretty great stuff, right?
  16. Colors, shapes and fonts!

  17. None
  18. None
  19. You need what? By when?

  20. I  cannot  design  directly  into   the  browser  …  goodness

     knows   I’ve  tried,  but  my  designs  end  up   suffering,  looking  boxy,  bland   and  uninspiring. Sarah Parmenter, Feb. 2012
  21. It’s not made for that.

  22. If it walks like a duck and talks like a

    duck …
  23. None
  24. Clients just don’t UNDERSTAND

  25. Get over it!

  26. (Here’s how.)

  27. 1 Get on the same page 


  28. None
  29. None
  30. None
  31. None
  32. None
  33. Understand project constraints 
 2

  34. You can put wings on a pig, but you don’t

    make it an eagle. Bill Clinton, discussing welfare reform legislation in 1996
  35. 3 Show your work


  36. We all have ugly babies.

  37. 4 Help them help you 


  38. None
  39. 5 Pick up the phone 


  40. 6 Don’t be afraid of Photoshop 


  41. Let the creative vision
 dictate the best approach. 
 


  42. • Get on the same page • Understand project constraints

    • Show your work • Pick up the phone • Help them help you • Don’t be afraid of Photoshop Remember!
  43. To design is to communicate clearly by whatever means you

    can control or master. Milton Glaser, CSD Magazine, 1999
  44. Thanks! with Andi Graham / @andigrahambsd