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.

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?
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!
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 …
24. Clients just don’t UNDERSTAND
25. Get over it!
26. (Here’s how.)
27. 1 Get on the same page 

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 

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