$30 off During Our Annual Pro Sale. View Details »

The Web Native Designer (January 2012)

The Web Native Designer (January 2012)

What does it mean to be designing for the web? The web can't be pinned down to a specific device, to a specific screen-size, or to a specific anything. How do we embrace this reality to deliver the best possible experiences to the widest possible audience.

Paul Robert Lloyd

January 11, 2012
Tweet

More Decks by Paul Robert Lloyd

Other Decks in Design

Transcript

  1. WEB NATIVE
    Andy Hume Paul Lloyd
    DESIGNER
    University of Greenwich: MA Web Design Content Planning
    11 January 2012
    THE

    View Slide

  2. View Slide

  3. e power of the Web is in its universality.
    Access by everyone regardless of disabili is an
    essential aspect.
    Tim Berners-Lee
    http://www.w3.org/People/Berners-Lee/UU.html

    View Slide

  4. flickr.com/photos/lukeredmond/1795084139/
    Design?

    View Slide

  5. e power of the Web is in its universality.
    Access by everyone regardless of disabili is an
    essential aspect.
    Tim Berners-Lee
    http://www.w3.org/People/Berners-Lee/UU.html

    View Slide


  6. View Slide

  7. reenwich

    View Slide

  8. .container {
    width: 960px;
    }

    View Slide

  9. From now on, ins ad of lking about making
    a si accessible, I’m going to lk about
    keeping it accessible.
    Jeremy Keith
    adactio.com/journal/1224

    View Slide



  10. View Slide

  11. View Slide

  12. View Slide

  13. flickr.com/photos/jglitten/3167874991
    Progressive Enhancement

    View Slide

  14. flickr.com/photos/auntiep/51207712/
    A maturing web
    e power of the Web is in its universality.
    Access by everyone regardless of disabili is an
    essential aspect.
    Tim Berners-Lee
    w3.org/People/Berners-Lee/UU.html

    View Slide

  15. flickr.com/photos/jurvetson/167197691/
    Network Effects

    View Slide

  16. flickr.com/photos/24444656@N05/6618115427/
    REST (Representational State Transfer)

    View Slide

  17. How can we design for the web
    as a medium in it’s own right?

    View Slide

  18. flickr.com/photos/22416200@N05/5055993048
    Radio with pictures

    View Slide

  19. flickr.com/photos/paulwatson/308973659
    Print with interactivity?

    View Slide

  20. Wanting control
    needing constraints

    View Slide

  21. 640×480

    View Slide

  22. 800×600

    View Slide

  23. 1024×768

    View Slide

  24. View Slide

  25. Ag Ag Ag
    Ag Ag Ag
    ARIAL VERDANA TREBUCHET MS
    GEORGIA TIMES NEW ROMAN COURIER NEW

    View Slide

  26. The ‘Mobile Web’

    View Slide

  27. flickr.com/photos/adactio/6153481666
    Everything is web enabled

    View Slide

  28. Collective hallucination

    View Slide

  29. What does web design
    mean today?

    View Slide

  30. View Slide

  31. Web typography

    View Slide

  32. View Slide

  33. Keeping it DRY with
    media queries
    .product .title {
    font-size: 1em;
    }
    @media screen and (max-width: 320px) {
    .product .title {
    font-size: 0.75em;
    }
    }

    View Slide

  34. Adaptive layouts

    View Slide

  35. Responsive Design

    View Slide

  36. ethanmarcotte.com

    View Slide

  37. paulrobertlloyd.com

    View Slide

  38. pt px
    PRINT SCREEN WEB
    % em
    Proportions not fixed values

    View Slide

  39. Beyond responsive design

    View Slide

  40. Where are our constraints?

    View Slide

  41. In order to embrace designing na ve layouts for
    the web—wha ver the device—we need to
    shed the no on that we crea layouts om a
    canvas in. We need to flip it on its head, and
    create layouts from the content out.
    Mark Boulton
    markboulton.co.uk/journal/comments/a-richer-canvas

    View Slide

  42. ‘Content is king’

    View Slide

  43. View Slide

  44. Microcopy
    flickr.com/photos/fstorr/6512990915
    flickr.com/groups/microcopy/

    View Slide

  45. Letting go

    View Slide

  46. Patterns not pages

    View Slide

  47. Collaborative
    design development

    View Slide

  48. USER EXPERIENCE
    DESIGNER
    GRAPHIC/INTERACTION
    DESIGNER
    FRONT-END
    DEVELOPER
    ENTIRE TEAM

    View Slide

  49. USER EXPERIENCE
    DESIGNER
    GRAPHIC/INTERACTION
    DESIGNER
    FRONT-END
    DEVELOPER
    ENTIRE TEAM

    View Slide

  50. Design for all

    View Slide

  51. Thank-you!
    paulrobertlloyd.com
    @paulrobertlloyd
    andyhume.net
    @andyhume
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc

    View Slide