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

Embracing the Ebb and Flow

Simon Collison
October 10, 2011

Embracing the Ebb and Flow

Presented at Frontend, Oslo, Norway, October 2011.

Craftsmanship and communication are at the heart of everything we do on the web. With our ability to understand and overcome challenges, we should deliver engaging experiences without compromising our integrity or failing the end user. Still, we're often naive and we make the same mistakes over and over. We get hung up on our tools and confuse our goals. It's time to think and talk smarter, get our priorities straight, and learn from our mistakes.

Simon Collison

October 10, 2011

More Decks by Simon Collison

Other Decks in Design


  1. Embracing the ebb and flow Simon Collison Frontend, Oslo, October

    2011 @colly colly.com
  2. Inspiration

  3. None
  4. Part one The individual

  5. None
  6. Strengths & values

  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
  8. Learning

  9. The sad, beautiful fact that we’re all going to miss

    almost everything. Linda Holmes
  10. None
  11. None
  12. Craftsmanship

  13. Cra smanship is a basic human impulse: the desire to

    do a job well for its own sake. Cra smanship
  14. None
  15. Our tools

  16. Tools are the scaffold for what we produce, the enablers,

    they help us bring our ideas to fruition. Our tools
  17. None
  18. None
  19. Inquiry

  20. Inquiring beyond the “necessary” to explore other areas, look at

    things differently, and bring these findings back into our work. Inquiry
  21. None
  22. Think smarter

  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
  24. Part two The wider web

  25. Visual grammar

  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
  27. None
  28. Mistakes

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

  30. None
  31. Patterns & interactions

  32. The screen brings with it different kinds of challenges for

    visual design, some of which occur exclusively in interactive media. Jason Santa Maria
  33. The frame

  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
  35. None
  36. None
  37. None
  38. None
  39. http://www.chromeexperiments.com/detail/browser-ball/

  40. http://wallswaps.com/

  41. http://wallswaps.com/

  42. Systems

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

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

  46. Vocabulary

  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
  48. Responsive Web Design

  49. The terms responsive and adaptive are distinct yet related, and

    have evolved naturally from outdated web-based layout terminology Responsive web design
  50. None
  51. None
  52. What next?

  53. None
  54. We are the web. We are the makers, the explorers,

    the end users. What next?
  55. Finally

  56. None
  57. The in the ordinary extraordinary

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