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

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

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.

Andi Graham

July 12, 2014
Tweet

More Decks by Andi Graham

Other Decks in Design

Transcript

  1. DESIGNING IN THE BROWSER

    (Sometimes.)
    THE RIGHT TOOL FOR THE JOB:
    with Andi Graham / @andigrahambsd

    View full-size slide

  2. So, why are you here?

    View full-size slide

  3. Sorry!
    It’s not you, it’s me.

    View full-size slide

  4. 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

    View full-size slide

  5. WE <3
    DESIGNING
    IN THE BROWSER

    View full-size slide

  6. Eliminates redundant
    redundancy.

    View full-size slide

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

    View full-size slide

  8. But what about my
    iPad mini?

    View full-size slide

  9. That beige reminds me
    of my childhood.

    View full-size slide

  10. It works! It really works!

    View full-size slide

  11. WHY WOULD YOU DO IT
    ANY OTHER WAY?

    That’s all pretty great stuff, right?

    View full-size slide

  12. Colors, shapes
    and fonts!

    View full-size slide

  13. You need what?
    By when?

    View full-size slide

  14. 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

    View full-size slide

  15. It’s not made for that.

    View full-size slide

  16. If it walks like a duck
    and talks like a duck …

    View full-size slide

  17. Clients just don’t
    UNDERSTAND

    View full-size slide

  18. Get over it!

    View full-size slide

  19. (Here’s how.)

    View full-size slide

  20. 1
    Get on the same page

    View full-size slide

  21. Understand
    project constraints

    2

    View full-size slide

  22. You can put wings on a
    pig, but you don’t make
    it an eagle.
    Bill Clinton, discussing welfare reform legislation in 1996

    View full-size slide

  23. 3
    Show your work


    View full-size slide

  24. We all have
    ugly babies.

    View full-size slide

  25. 4
    Help them help you

    View full-size slide

  26. 5
    Pick up the phone

    View full-size slide

  27. 6
    Don’t be afraid
    of Photoshop

    View full-size slide

  28. Let the creative vision

    dictate the best approach.


    View full-size slide

  29. • 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!

    View full-size slide

  30. To design is to communicate
    clearly by whatever means
    you can control or master.
    Milton Glaser, CSD Magazine, 1999

    View full-size slide

  31. Thanks!
    with Andi Graham / @andigrahambsd

    View full-size slide