The Web Native Designer, Greenwich University 2012

What does it mean to be a web designer today? What does it mean to be native to the web? Joint presentation with Paul Lloyd

Transcript

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

   View Slide

2. Friday, 13 January 12
   

   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
   Friday, 13 January 12
   

   View Slide

4. flickr.com/photos/lukeredmond/1795084139/
   Design?
   Friday, 13 January 12
   

   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
   Friday, 13 January 12
   

   View Slide

6. 
   Friday, 13 January 12
   

   View Slide

7. reenwich
   Friday, 13 January 12
   

   View Slide

8. .container {
   width: 960px;
   }
   Friday, 13 January 12
   

   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
   Friday, 13 January 12
   

   View Slide

10. 
    
    Friday, 13 January 12
    

    View Slide

11. Friday, 13 January 12
    

    View Slide

12. Friday, 13 January 12
    

    View Slide

13. flickr.com/photos/jglitten/3167874991
    Progressive Enhancement
    Friday, 13 January 12
    

    View Slide

14. flickr.com/photos/auntiep/51207712/
    A maturing web
    Friday, 13 January 12
    

    View Slide

15. 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
    Friday, 13 January 12
    

    View Slide

16. flickr.com/photos/jurvetson/167197691/
    Network Effects
    Friday, 13 January 12
    

    View Slide

17. flickr.com/photos/24444656@N05/6618115427/
    REST (Representational State Transfer)
    Friday, 13 January 12
    

    View Slide

18. How can we design for the web
    as a medium in it’s own right?
    Friday, 13 January 12
    

    View Slide

19. flickr.com/photos/22416200@N05/5055993048
    Radio with pictures
    Friday, 13 January 12
    

    View Slide

20. flickr.com/photos/paulwatson/308973659
    Print with interactivity?
    Friday, 13 January 12
    

    View Slide

21. Wanting control
    needing constraints
    Friday, 13 January 12
    

    View Slide

22. 640×480
    Friday, 13 January 12
    

    View Slide

23. 800×600
    Friday, 13 January 12
    

    View Slide

24. 1024×768
    Friday, 13 January 12
    

    View Slide

25. Friday, 13 January 12
    

    View Slide

26. Ag Ag Ag
    Ag Ag Ag
    ARIAL VERDANA TREBUCHET MS
    GEORGIA TIMES NEW ROMAN COURIER NEW
    Friday, 13 January 12
    

    View Slide

27. The ‘Mobile Web’
    Friday, 13 January 12
    

    View Slide

28. flickr.com/photos/adactio/6153481666
    Everything is web enabled
    Friday, 13 January 12
    

    View Slide

29. Collective hallucination
    Friday, 13 January 12
    

    View Slide

30. What does web design
    mean today?
    Friday, 13 January 12
    

    View Slide

31. Friday, 13 January 12
    

    View Slide

32. Web typography
    Friday, 13 January 12
    

    View Slide

33. Friday, 13 January 12
    

    View Slide

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

    View Slide

35. Adaptive layouts
    Friday, 13 January 12
    

    View Slide

36. Responsive Design
    Friday, 13 January 12
    

    View Slide

37. ethanmarcotte.com
    Friday, 13 January 12
    

    View Slide

38. paulrobertlloyd.com
    Friday, 13 January 12
    

    View Slide

39. pt px
    PRINT SCREEN WEB
    % em
    Proportions not fixed values
    Friday, 13 January 12
    

    View Slide

40. Beyond responsive design
    Friday, 13 January 12
    

    View Slide

41. Where are our constraints?
    Friday, 13 January 12
    

    View Slide

42. 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
    Friday, 13 January 12
    

    View Slide

43. ‘Content is king’
    Friday, 13 January 12
    

    View Slide

44. Friday, 13 January 12
    

    View Slide

45. Microcopy
    flickr.com/photos/fstorr/6512990915
    flickr.com/groups/microcopy/
    Friday, 13 January 12
    

    View Slide

46. Letting go
    Friday, 13 January 12
    

    View Slide

47. Patterns not pages
    Friday, 13 January 12
    

    View Slide

48. Collaborative
    design development
    Friday, 13 January 12
    

    View Slide

49. USER EXPERIENCE
    DESIGNER
    GRAPHIC/INTERACTION
    DESIGNER
    FRONT-END
    DEVELOPER
    ENTIRE TEAM
    Friday, 13 January 12
    

    View Slide

50. USER EXPERIENCE
    DESIGNER
    GRAPHIC/INTERACTION
    DESIGNER
    FRONT-END
    DEVELOPER
    ENTIRE TEAM
    Friday, 13 January 12
    

    View Slide

51. Design for all
    Friday, 13 January 12
    

    View Slide

52. Thank-you!
    paulrobertlloyd.com
    @paulrobertlloyd
    andyhume.net
    @andyhume
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    Friday, 13 January 12
    

    View Slide