Embracing the Ebb and Flow

Transcript

1. Embracing the
   ebb and flow
   Simon Collison
   Frontend, Oslo, October 2011
   @colly colly.com
   

   View Slide

2. Inspiration
   

   View Slide

3. View Slide

4. Part one
   The individual
   

   View Slide

5. View Slide

6. Strengths & values
   

   View Slide

7. To progress and to create work of
   substance or even greatness, we
   each must start by knowing our
   values, our strengths, and the level
   of expertise we seek
   Strengths and values
   

   View Slide

8. Learning
   

   View Slide

9. The sad, beautiful fact that
   we’re all going to miss almost
   everything.
   Linda Holmes
   

   View Slide

10. View Slide

11. View Slide

12. Craftsmanship
    

    View Slide

13. Cra smanship is a basic human
    impulse: the desire to do a job
    well for its own sake.
    Cra smanship
    

    View Slide

14. View Slide

15. Our tools
    

    View Slide

16. Tools are the scaffold for what we
    produce, the enablers, they help us
    bring our ideas to fruition.
    Our tools
    

    View Slide

17. View Slide

18. View Slide

19. Inquiry
    

    View Slide

20. Inquiring beyond the “necessary”
    to explore other areas, look at
    things differently, and bring these
    findings back into our work.
    Inquiry
    

    View Slide

21. View Slide

22. Think smarter
    

    View Slide

23. Individual lines of inquiry are what
    will, more than anything else, drive
    us to develop greater maturity of
    the discipline of web design.
    Think smarter
    

    View Slide

24. Part two
    The wider web
    

    View Slide

25. Visual grammar
    

    View Slide

26. A rich alphabet of components such as
    line and point, structure, color, shapes,
    rhythm, and movement, which we use
    to shape our messages
    Visual grammar
    

    View Slide

27. View Slide

28. Mistakes
    

    View Slide

29. Those who never made mistakes
    never made anything.
    Proverb
    

    View Slide

30. View Slide

31. Patterns &
    interactions
    

    View Slide

32. The screen brings with it different
    kinds of challenges for visual design,
    some of which occur exclusively in
    interactive media.
    Jason Santa Maria
    

    View Slide

33. The frame
    

    View Slide

34. The frame of reference marks the
    outer limits of a design and defines
    an area within which the created
    elements and le -over blank space,
    if any, all work together.
    The frame
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. http://www.chromeexperiments.com/detail/browser-ball/
    

    View Slide

40. http://wallswaps.com/
    

    View Slide

41. http://wallswaps.com/
    

    View Slide

42. Systems
    

    View Slide

43. We don’t design web pages.
    We design systems.
    Systems
    

    View Slide

44. View Slide

45. http://gregorywood.co.uk/ http://jasonsantamaria.com/
    

    View Slide

46. Vocabulary
    

    View Slide

47. Our community has a shared
    responsibility to expand this visual
    language as it applies to the ebb and
    flow of the web, and in turn evolve
    our wri en and verbal vocabulary.
    Vocabulary
    

    View Slide

48. Responsive
    Web Design
    

    View Slide

49. The terms responsive and adaptive
    are distinct yet related, and have
    evolved naturally from outdated
    web-based layout terminology
    Responsive web design
    

    View Slide

50. View Slide

51. View Slide

52. What next?
    

    View Slide

53. View Slide

54. We are the web. We are the makers,
    the explorers, the end users.
    What next?
    

    View Slide

55. Finally
    

    View Slide

56. View Slide

57. The
    in the
    ordinary
    extraordinary
    

    View Slide

58. Thank you
    Simon Collison
    @colly
    h p://colly.com
    

    View Slide