Design Sistems

There is certain topic discussed in every company: communication between departments.
As FE developers, we sit in between UX designers and BE developers.
Our apps must follow the guidelines from the UX, be compatible with the BE APIs while meeting the business requirements from our POs.
In this presentation I am addressing the relationship between UX and FE devs.
One way to collaborate better with our UX colleagues is to… learn a bit of UX and maybe share some Front End knowledge with them too.

Transcript

1. /razvan-rosu /razvan-rosu @rzvn_rosu Răzvan Roșu Design Systems
2. I am a Front End developer at ING Tech Romania meetups & conferences a short intro about myself...
3. I hike I draw I travel I read comics
4. a short intro to this presentation... There is certain topic discussed in every company: communication between departments. As FE developers, we sit in between UX designers and BE developers. Our apps must follow the guidelines from the UX, be compatible with the BE APIs while meeting the business requirements from our POs. In this presentation I am addressing the relationship between UX and FE devs. One way to collaborate better with our UX colleagues is to… learn a bit of UX and maybe share some Front End knowledge with them too.
5. What are Design Systems? An ecosystem of tools, guidelines, shared values and principles which help teams ship more efficiently consistent design.
6. Why Design Systems? DS enable product teams to get to consistent results faster by: • synchronizing all designers and product teams • build a shared vocabulary to reduce communication issues • have one solution* for one component • easier testing at component level • faster iterations with established design patterns • future-proof base for extensions and refinements Developer Experience User Experience Design Systems Maintainer Experience
7. “69% of enterprise companies either actively use a design system or are currently working on one” By UXPin https://www.uxpin.com/enterprise-ux-design-2017-2018-industry-report Who uses Design Systems?
8. Who uses Design Systems? Material Design by Google Carbon DS by IBM Lightning by Salesforce Polaris by Shopify Atlassian Design by Atlassian Fluent by Microsoft AirBnb Design by AirBnb Human Interface by Apple
9. Testimonial “... one day, while putting together a last-minute prototype, our team was able to create nearly 50 screens within just a few hours using the framework our library provided.” by Karri Saarinen (Airbnb.com) http://airbnb.design/co-creating-experiences-with-our-community
10. Testimonial “That’s the beauty of building a design system. By deciding on a detail once, you free up your entire product development team to focus on solving actual customer problems.” by Hubspot team http://product.hubspot.com/blog/how-building-a-design-system-empowers-your-team-to-focus-on-people-not-pixels
12. thanks to @uxgoodies
13. Style Guides A Style Guide is a collection of predefined rules, designers and developers should follow to ensure consistency across apps, websites and print.
14. Style Guides A Style Guide covers the following topics: • Color Palette • Typography • Grid System • Spacing • Iconography • Imagery • Tone of Voice
15. Color Palette Primary colors: the main colors that are specific for the company Secondary colors: additional colors that are used for highlighting Neutral colors: shades of grey used for increasing readability Throughout the history, color schemes have been used to define different feelings, seasons and ceremonies based on culture and origin. There are numerous study cases on colors that can help us choose (e.g.: Psychology of colors ) https://graf1x.com/color-psychology-emotion-meaning-poster/
16. https://www.carbondesignsystem.com/guidelines/color/overview
17. Typography Typography is the art of arranging letters and text in a way that makes the copy legible, clear and visually appealing to the reader. It involves font style, appearance and structure. Typography was specialized initially for books and magazines. Eventually it found it’s way into the digital world. https://material.io/design/typography/the-type-system.html#type-scale https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/
18. Vertical Rhythm Vertical Rhythm is a typographic practice that aims to provide a better reading experience by establishing a vertical harmony between text elements. https://iamsteve.me/blog/entry/a-guide-to-vertical-rhythm basic vertical rhythm with css variables: https://24ways.org/2018/managing-flow-and-rhythm-with-css-custom-properties
19. Grid System A Grid System is a layout structure which aids in implementing flexible and device-agnostic user interfaces. https://material.io/design/layout/responsive-layout-grid.html advanced grid with css variables: https://www.smashingmagazine.com/2019/03/robust-layouts-container-units-css
20. Spacing Spacing is used everywhere, therefore it is mentioned in the Style Guide. It is encountered in the grid, between headlines, buttons, images, forms, etc https://material.io/design/layout/spacing-methods.html#spacing
21. Iconography Icons give users an instant idea of what will happen next. They should be chosen while taking into consideration the target audience religion and history in order to avoid misunderstandings and misconceptions. Icon matrixes - https://atlassian.design/guidelines/product/foundations/iconography
22. Imagery The Imagery defines the style and direction of pictures the application should use based on the brand and it’s mission. http://styleguide.daimler.com/en/style/imagery/
23. Tone of Voice Tone of Voice refers to the actual copy. The tone of voice can be professional, welcoming, funny, a mix of feelings, etc. https://github.com/404-error-page
25. Component Libraries A Component Library is a repository which contains all components. It provides a view of the source code, a rough documentation and component renders. PatternLab.io Fractal.build Storybook.js.org
26. City of Ghent DS: https://stijlgids.stad.gent/v3 Bolt DS: https://boltdesignsystem.com/pattern-lab IBM Carbon DS: https://carbon-custom-elements.netlify.com
27. Testimonial “No thorough conversation about Front End today can end without the mention of Pattern Libraries. Sometimes a Pattern Library appears in the form of a Living Style Guide or as a Design System or as an all-knowing UI framework. In all of these cases, designers and developers seek the right strategy to approach the complexity of the web with a modular, component based approach.” by SmashingMagazine
29. UX tools etc...
30. reminds me of ... etc...
31. So why pick one over the other? etc...
32. aaa Photoshop Although intended for photo editing, Photoshop had enough tooling for building layouts: - Layer concept - Text tooling (Typography) - Line guides (Grid System and Vertical Rhythm) - Drawing tooling (Iconography) - Smart Object concept (sort of a “component”: it groups multiple layers into a single entity)
34. Sketch Sketch is intended for prototyping. 1. Interactive Flows - flows can be previewed on an actual device with Mirror app 2. Symbol concept (component-like implementation): - grouping elements into a single entity - control over the way elements resize (fluid responsive components) - can define a symbol library and use it for building products (component library) - updating a symbol in the library will reflect in every product (npm update)
36. Figma is a web based solution. eXperience Design is Adobe’s implementation of a dedicated prototyping software (lesser features). Framer X allows the user to import actual React components. Users can add microinteractions and animations on top of them.
38. UX laws We defined our Style Guide. We’ve chosen a Component Library. It’s time to design and develop components! Here is a top 7 of UX laws to have in mind when doing so. thanks to @aleausejo #DesignTipsAleausejo
39. 1. Von Restorff Effect When multiple similar objects are present the one that differs from the rest is most likely to be remembered. TIP: make important information or key actions visually distinctive
40. 2. Hick’s Law The time it takes to make a decision increases with the complexity and number of choices.
41. TIP: keep main CTA’s big and closer to the thumb. 3. Fitt’s Law The time to acquire a target is a function of the distance to and size of the target.
42. 4. Zeigarnik Effect People remember uncompleted or interrupted tasks better then completed tasks. TIP: use progress bars
43. 5. Serial Position Effect People tend to remember best the first and the last items in a serie TIP: emphasize key info in the beginning and the end
44. 6. Law of Common Region Elements tend to be perceived into groups if they are sharing an area with a defined boundary TIP: add a background around a group of elements
45. 7. Law of Proximity Elements that are near each other tend to be grouped together.
47. Component cutout workshop The scope of this exercise is to practise to think in components by reverse engineering an already built interface. Print the UI of an app or web page of your choice. Cut it into paper components from big to small. Classify each component. https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517
52. Atomic design “A model for thinking about UIs as hierarchical, interconnected sets of components that build real screens.” by Brad Frost http://atomicdesign.bradfrost.com/ https://www.invisionapp.com/inside-design/design-systems-brad-frost/
53. Design Tokens Design Tokens are an agnostic way to store variables such as typography, color and spacing. They are not actual components. https://bradfrost.com/blog/post/extending-atomic-design Atoms Atoms are the smallest building blocks of UI e.g.: icons, labels, input fields, buttons etc
54. Molecules Groups of atoms bonded together to serve specific purpose. e.g.: a Search Form (label + input + button) Organisms Groups of molecules joined to form a complex section of an interface. e.g.: Header (logo + menu + search form)
55. Templates Groups of organisms combined to form generic page layouts. e.g.: News article template (header + body + footer) Pages Pages are templates populated with real content.
58. Pitfalls when building a DS
59. The first bad practice is to stop at design stage. Without a working a component library available to development teams, design consistency is never fully achieved. Common scenario: Developers aren’t aware of design requirements, aren’t good at implementing design standard or simply ignore them. 1. Stopping at design
60. 2. Building a HTML and CSS only library The 2nd bad practice is building a DS using pure HTML and CSS components. Common scenario: Each team will copy+paste the markup/styles, write the functionality and maintain it. The copied code needs to be tracked and maintained.
61. 3. Limited component building expertise Lacking in-house component building expertise can slow down DS development and limit adoption if the custom component doesn’t deliver on the required functionality, accessibility, platform compatibility and performance.
62. 4. Betting on a single technology The last misstep is building a DS on top of a single technology. Common scenario: A team builds a component library based on their framework of choice. Once rolled out in the organization (which uses another framework or multiple others), the library meets friction.
63. Testimonial “In a working design system, the time savings at the second use of an existing pattern are much larger than the effort to introduce the pattern in the first place. The design system won’t work if the effort is much bigger or the pattern library is getting out-of-date very quickly.” by Wolf Brüning (Otto.de)
64. Formula of success for building a DS
65. Formula of success for building a DS 1. Fully working components: Dynamic working components properly versioned. 2. Access to component-building expertise: Borrow expertise from existing component libraries or access expertise in order to build from scratch. 3. Technology-agnostic The component library must work with any framework and technology.
66. Formula of success for building a DS 1. Fully working components: Dynamic working components properly versioned. 2. Access to component-building expertise: Borrow expertise from existing component libraries or access expertise in order to build from scratch. 3. Technology-agnostic (HINT: Web Components): The component library must work with any framework and technology.
68. Design Systems with Web Components The larger the organization is, the more difficult is to deliver consistent user experiences across teams and projects. In large organizations one can encounter: distributed teams, concurrent projects and a diversity of frameworks. One way to solve this problem is by implementing a Design System using custom, framework-agnostic Web Components.
69. We don’t know yet: • if Web Components will replace third-party app frameworks • if Web Components are more suited towards leaf/style/design nodes We know that: • existing frameworks which are already good, are getting better (smaller, faster and more efficient) • existing frameworks are increasing their support for Web Components
70. Angular and Web Components Angular provides decent support for Web Components. However: • it lacks two-way data binding • it has limited type support • it is unable to access Angular-specific properties
71. React and Web Components React has very limited support for Web Components. React cannot listen to custom events. It can only pass in strings and numbers.
72. Vue and Web Components Vue provides good support for Web Components. It has one painful limitation: developers aren’t able to use v-model on inputs.
73. Stencil Stencil is a compiler that generates Web Components. Web Components can be paired with any JS framework. Stencil has built-in special-purpose bindings (available as part of StencilDS). The StencilDS bindings allow developers to use Web Components at full potential.
74. “At Porche, we have a heterogenous ecosystem of products built with Angular, React or without any framework. As a design system team with a small number of developers, to give us the flexibility we needed and keep pace with our development roadmap, we wanted to standardize on one set of UI components that would work across any product. Building a custom design system based on Web Components has enabled us to do that.” by Marcel Bertam, Design System Lead (Porsche)
75. Quick Tips on starting a DS 1. Kick off the Design System with a pilot project 2. Ideal project: a page redesign or a new small app 3. View the pilot project as an opportunity to establish the DS’ components through the lens of a project by Dan Mall (Design Lead @ SuperFriendly & SuperBooked) Digital Design: Creating Design Systems for easier, better & faster design
76. by Dan Mall (Design Lead @ SuperFriendly & SuperBooked) Digital Design: Creating Design Systems for easier, better & faster design Quick Tips on starting a DS Refining steps: • Determine your daily workflow • Determine the most frustrating part • What would you like to see? • How does success/failure look like? Research steps: • Screenshots • Categorizing • Present findings • Establish next steps
78. Before closing...
80. Thank you! Questions ?
81. References • inVision Design System video series: https://invisionapp.com/design-system-manager/expert-advice/ • SmashingConf - Brad Frost: Let’s build a design system: https://vimeo.com/331529230 • SmashingMagazine Pattern Libraries study case: https://smashingmagazine.com/taking-pattern-libraries-next-level • UX laws - additional to those from the presentation: https://uxplanet.org/the-psychology-principles-every-ui-ux-designer-needs- to-know-24116fd65778 • Apple ships Web Components in production: https://dev.to/ionic/apple-just-shipped-web-components-to-production-an d-you-probably-missed-it-57pf