Design Systems

From a talk at Responsive Day Out in March 2013

Transcript

1. Design Systems Laura Kalbag @laurakalbag laurakalbag.com
3. #1
5. where we’ve been going wrong…
11. devices, not content. deliverables, not process.
13. making assumptions about users and devices based on nothing but the width of the viewport
17. design systems : the principles
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
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
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
53. mockups and breakpoints
54. why do we mockup?
57. the future
58. nobody is an expert
60. experiment and communicate
61. Laura Kalbag @laurakalbag laurakalbag.com
62. If you like icons: Glyphicons Noun Project Picto Foundry Pixeds Pixicon Symbolicons