Design Systems

95b99419138620c939f1582fc0cd8b9b?s=47 Laura Kalbag
March 01, 2013

Design Systems

From a talk at Responsive Day Out in March 2013

95b99419138620c939f1582fc0cd8b9b?s=128

Laura Kalbag

March 01, 2013
Tweet

Transcript

  1. Design Systems Laura Kalbag @laurakalbag laurakalbag.com

  2. None
  3. #1

  4. None
  5. where we’ve been going wrong…

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

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

    the width of the viewport
  14. None
  15. None
  16. None
  17. design systems : the principles

  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. microsoft.com

  30. typography first

  31. None
  32. None
  33. None
  34. base unit

  35. grids and layout

  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. 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 H e r e is som e b o d y text whic h is H e r e is som e b o d y text whic h is H e r e is som e b o d y text whic h is H e r e is som e b o d y text whic h is
  37. grid concept

  38. 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 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 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 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
  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. 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 text which is 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 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 Symmetrical grid
  40. shape/form

  41. 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 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 body text which is 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 circles concept Here is some body text which is probably smaller than the title and is sitting here in columns. Here is some body text
  42. colour

  43. None
  44. None
  45. None
  46. design systems : the process

  47. detaching design considerations from viewport widths

  48. designing in the browser

  49. styletil.es

  50. http://www.paulrobertlloyd.com/about/styleguide/

  51. pea.rs

  52. None
  53. mockups and breakpoints

  54. why do we mockup?

  55. None
  56. None
  57. the future

  58. nobody is an expert

  59. None
  60. experiment and communicate

  61. Laura Kalbag @laurakalbag laurakalbag.com

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

    Pixicon Symbolicons