Design Systems

From a talk at Handheld conference in November 2012

Transcript

1. Design Systems Laura Kalbag @laurakalbag laurakalbag.com
2. #1
4. Where we’ve been going wrong…
12. devices, not content. deliverables, not process.
13. making assumptions about users and devices based on nothing but the width of the viewport
16. Design Systems : The Principles
17. what are design systems?
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
42. Design Systems : The Process
43. detaching design considerations from viewport widths
44. designing in the browser
48. mockups and breakpoints
51. the future
52. nobody is an expert
54. experiment and communicate
55. Laura Kalbag @laurakalbag laurakalbag.com
56. If you like icons: Glyphicons Noun Project Picto Foundry Pixeds Pixicon Symbolicons