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.

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