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. Design Systems Laura Kalbag @laurakalbag laurakalbag.com

  2. #1

  3. None
  4. Where we’ve been going wrong…

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. devices, not content. deliverables, not process.

  13. making assumptions about users and devices based on nothing but

    the width of the viewport
  14. None
  15. None
  16. Design Systems : The Principles

  17. what are design systems?

  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. components you might keep the same across viewports: • typeface

    • base unit • colour • shape/form
  25. components you might differentiate across viewports: • grids • layout

    • font size • measure (line-length) • leading (line-height)
  26. content is always the same

  27. “we need to build on what we do know: content”

    — Chris Armstrong
  28. Design Systems : The Practical, the core visual components

  29. typography first

  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
  31. base unit

  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
  33. grids and layout

  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
  35. grid concept

  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
  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
  38. shape/form

  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.
  40. colour

  41. None
  42. Design Systems : The Process

  43. detaching design considerations from viewport widths

  44. designing in the browser

  45. None
  46. None
  47. None
  48. mockups and breakpoints

  49. None
  50. None
  51. the future

  52. nobody is an expert

  53. None
  54. experiment and communicate

  55. Laura Kalbag @laurakalbag laurakalbag.com

  56. If you like icons: Glyphicons Noun Project Picto Foundry Pixeds

    Pixicon Symbolicons