Design Systems In Websites & Apps

A talk that looks at responsive web design, front-end style guides and building and refining your own design systems.

Presented at the Zengenti Rocket Conference 2014, in Aston Court Birmingham.

A video that accompanies these slide can be watched here: https://www.youtube.com/watch?v=z_ZLkEZtwLk

Transcript

1. DESIGN SYSTEMS IN WEBSITES & APPS
2. Richard Saunders Senior UX Lead @rdsaunders
3. RESPONSIVE WEB DESIGN
4. Creating a great experience across multiple devices
5. We are dealing with a wide range of variables
14. 1024px 768px
18. Photoshop is impractical for responsive web design mockups
19. - making changes to multiple layouts 
 is time-consuming - fonts render differently between Photoshop and a web browser - difficult to visualise animation and behaviour - usual comes before any content has been produced, and we rely on good old Lorem Ipsum, which make sense to no one.
20. Why not start the process with something we know? 
 Content is one variable we can be sure of.
21. Rather than trying to figure out what a site should look like as the major output of a design phase, focus instead on what a site should feel like. Dan Mall
22. http://styletil.es/
23. http://styletil.es/
24. http://styletil.es/
25. Content precedes design. Design in the absence of content is not design, it’s decoration. Jeffery Zeldman
26. http://danielmall.com/articles/rif-element-collages/ http://clearleft.com/thinks/visualdesignexplorations/
27. http://sparkbox.github.io/style-prototype/
28. RWD Recap - there are many variables to consider. We need to start with content; the variable that we know - using style prototypes early on in the process will save headaches down the line - we need to experience design on real devices and not printed on paper or in PDF format
29. Design is not just what it looks like and feels like, but also
 how it works. Steve Jobs
30. FRONT-END STYLE GUIDES
31. a front-end style guide
 deconstructs everything that makes up your digital product
32. http://serenbrands.co.uk/
33. http://serenbrands.co.uk/
34. http://voiceandtone.com/
35. http://www.theguardian.com/info/series/guardian-and-observer-style-guide
36. it gives an overview of what the product is made up of
37. https://www.gov.uk/service-manual/user-centred-design/resources/buttons.html
38. https://www.gov.uk/service-manual/user-centred-design/resources/colour-palettes.html
39. establishes a common language between designers and developers
40. http://style.codeforamerica.org/
41. http://style.codeforamerica.org/
42. helps create a centralised location for all design, prototyping and documentation
43. http://getbootstrap.com/components/#btn-dropdowns
44. IDENTIFY PATTERNS
45. Title / summary Content selector Tabbed layout Drop down menu with title / summary
46. Toggle with title / summary Number input with title / summary
47. BUILDING THE STYLE GUIDE
48. http://brettjankord.com/projects/style-guide-boilerplate/
49. http://warpspire.com/kss/
50. https://github.com/adactio/Pattern-Primer
51. A front-end style guide - it gives an overview of what the product is made up of - establishes a common language between designers and developers - helps create a centralised location for all design, prototyping and documentation
52. DESIGN SYSTEMS
53. Contensis R7.2
54. Contensis R8
55. sys-tem | ‘sistəm’ | noun A set of connected parts 
 forming a complex whole
59. a design system assembles rather than deconstructs
62. http://getbootstrap.com/ http://foundation.zurb.com/
63. We’re not designing pages. We’re designing systems of components. Stephen Hay
64. Elements
65. T table tbody thead tfoot tr td th track time title textarea I i ins input img iframe M meta menu map mark meter ! ! ! A a abbr article aside address audio area N noscript nav B b br body bdi bdo base blockquote button O output ol optgroup option object C caption colgroup col canvas command code cite S span summary select source style script samp s small strong section sub sup H hr h1 h2 h3 h4 h5 h6 hgroup header html head P p pre progress param D dl dt dd div dfn details datalist del V video var L legend label li link R ruby rt F footer figure figcaption form fieldset ! ! Q q E embed em ! ! ! U u ul K kbd keygen HTML ELEMENTS
66. Label <label>Label</label> <button class=“sys_button”><i class=“sys_icon-browse-white”> </i></button> <input type="text" placeholder="Type text here"></input>
67. Components
68. Date Picker Component Button Input Start Date Label
69. Filter Bar Component Select Drop Down Filter Label Filter Actions (Standard Icon Button) Date Picker Component
70. Modules
71. Content Schedule Module Filter / Query Component Rules Component
72. Modules Components Elements
73. http://bradfrostweb.com/blog/post/atomic-web-design/
74. WHY DESIGN SYSTEMS
76. Danger DANGER Danger Danger Positive Good Positive positive This Not this
78. The benefits of a front-end style guide - overview of everything that makes up your product - establishes a common design language - central location for design, prototyping and documentation
79. APPLYING DESIGN SYSTEMS
80. http://bem.info/ http://smacss.com/
81. http://sass-lang.com
82. http://patternlab.io
83. EXAMPLE DESIGN SYSTEMS
84. http://getbootstrap.com/components/#alerts
85. http://stuffandnonsense.co.uk/blog/about/rock-hammer-a-curated-responsive-project-library
86. https://ux.mailchimp.com/patterns/
87. Create tiny Bootstraps for every client. Dave Rupert project
88. Responsive Web Design is hard, with a range of variables. Our tools and processes need to adapt with the changing landscape
89. Front-end Style Guides help you and your team better understand the digital products you make
90. Design Systems allow us to refine and refactor the building blocks of our digital products
91. [RE] THINK {RE} DESIGN (RE) FACTOR
92. Thank you @rdsaunders