Design Systems

95b99419138620c939f1582fc0cd8b9b?s=47 Laura Kalbag
November 19, 2012

Design Systems

From a talk at Handheld conference in November 2012

95b99419138620c939f1582fc0cd8b9b?s=128

Laura Kalbag

November 19, 2012
Tweet

Transcript

  1. 2.

    #1

  2. 3.
  3. 5.
  4. 6.
  5. 7.
  6. 8.
  7. 9.
  8. 10.
  9. 11.
  10. 14.
  11. 15.
  12. 18.
  13. 19.
  14. 20.
  15. 21.
  16. 22.
  17. 23.
  18. 24.
  19. 25.

    components you might differentiate across viewports: • grids • layout

    • font size • measure (line-length) • leading (line-height)
  20. 30.

    Here is some body text which is probably smaller than

    the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and A lovely example of a title A lovely example of a title A lovely example of a title Here is some body text which is Typeface: Franklin Gothic
  21. 31.
  22. 32.

    Here is some body text which is probably smaller than

    the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and hidden by the frames of the examples. The background grid is made of base units Here is some body text which is probably smaller than the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and hidden by the frames of the examples. Here is some body text which is probably smaller than the title and The background grid is made of base units The background grid is made of base units Here is some body text which is
  23. 34.

    Here is some body text which is probably smaller than

    the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. My four column layout My four column layout Here i s s o m e body t e x t whic h is Here i s s o m e body t e x t whic h is Here i s s o m e body t e x t whic h is Here i s s o m e body t e x t whic h is
  24. 36.

    Here is some body text which is probably smaller than

    the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. My grid based on threes My grid based on threes Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in
  25. 37.

    Here is some body text which is probably smaller than

    the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Symmetrical grid Symmetrical grid Here is some body t e x t w h i c h i s probably smaller than the title and is sitting here in columns. Here is some body text which is probably Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title
  26. 39.

    Here is some body text which is probably smaller than

    the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. My circles concept My circles concept Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text which is probably smaller than the title and is sitting here in columns.
  27. 40.
  28. 41.
  29. 45.
  30. 46.
  31. 47.
  32. 49.
  33. 50.
  34. 53.