Design System in General

Transcript

1. Design System GENERAL in
2. Hello, I’m Hai @ngHai.dev @DeveloperWhoLearn Facebook
3. @The.Coffee.House.2014
4. Design System WHY do we have to start building our
5. The Challenges We’re Facing Today
6. “Over time, no matter how consistent or small a team is, different people will contribute new solutions and styles, causing experiences to diverge.” Building a Visual Language, Karri Saarinen, Principal Designer and creator of Airbnb design system
7. Without a Design System Team Team Product ⇡⇡⇡ ⇡⇡⇡ ⇡⇡⇡ New styles, ideas New styles, patterns New styles, ideas
8. Without a design system, software development process becomes gradually slower and slower and the experience of users suffers from growing inconsistencies.
9. - Are we happy with the speed of product development? Let’s think… - Do our interface share the same patterns, colors, typo? - Do we always have enough time to deliver a quality product? - How much time and money do we spend on redundant design or code task? - How much time and money do we spend cleaning up design or technical debt?
10. One NO make creation of the design system worthwhile
11. Let’s take a look at TIKI button collection Not share the same styling, classes or components
12. They’re not alone
13. To overcome these challenges, thoundsand of companies are investing in the Design Systems U.S. Web Design System
14. Design System WHAT is a
15. “A scalable framework of decisions & team behaviors across a product portfolio to converge on a cohesive experience.“ Nathan Curtis, Founder of UX firm @eightshapes
16. A presentation at Respond 2017 in May 2017 in Sydney NSW, Australia by Mina Markham
17. The Structure Color Palettes Typographic Scales Grid Definitions Icons & Assets Building Blocks Templates Modules Components Elements UI Patterns Design Principles Implementation Guidelines Editorial Guidelines Rules
18. Is it worth it?
19. Where is our logo? Are designers spending 30min/day on any of these? Can you redesign this, we can’t build it? What is the size of this pattern? Which is the right color? How many percent for the opacity? …
20. Where is our components? Are developers spending 30min/day on any of these? Can you rebuild this, it doesn’t match the design? How do we build this patterns? What is the latest documentation? Does this meet the code standards? …
21. Return on investment for the team 2.5h/week * 52 weeks * * = /year = Salary per hour = Number of team member = Total salary
22. “Design systems also save time and money. Just by eliminating code redundancy, more than 20% of a developer’s time can be regained.” Drew Loomer, projekt202’s Managing Architect
23. Is it worth it? Just the time and money saved thanks to a design system makes the whole project worth it.
24. And this isn’t even the entire value.
25. We’ll deliver better experiences faster. Customers will notice.
26. By using well-tested components, we’ll lower the cost of long-term maintenance.
27. And we’ll get the most out of every new hire, due to faster standardized onboarding with the design system.
28. The bottom line Decreased development and design cost Faster time to market Better product quality Happier customers
29. Design System HOW to use React within a
30. Atomic Design Here comes methodology for creating design systems
31. Josh Duck’s HTML Periodic Table gives a great breakdown of web designers’ atomic elements.
32. Five distinct levels Image from “Atomic Design with React” article @Medium
33. Tweak with React Icons made by Yannick, Freepik from www.flaticon.com
34. Atoms - The basic building blocks - HTML tags: a form label, an input, a button… - Can also include color palettes, fonts, animations. - Aren’t too useful by themselves
35. Molecules - Groups of atoms bonded together - The smallest fundamental units of a compound - Serve as the backbone of our design systems - Do one thing and do it well
36. Organisms - Groups of molecules joined together - Relatively complex, distinct section of an interface - Consist of similar and/or different molecule types - Standalone, portable, reusable components
37. Ecosystems - Container components which are composed of multiple organism components - Organize, manage, and delegate messages to organism components as well as communicate with other ecosystems through a shared environment - As in nature, ecosystems can be nested
38. Enviroment - We compose multiple ecosystems into a single environment, the application - Because there are typically no pages in React, the environment represents the whole within which all ecosystems, organisms, molecules, and atoms compose one another and communicate.
39. Nice React libraries to build UI components Used by these fine folks
40. Most notable impact to the community development and growth. Storybook is the most popular UI component development tool for React, Vue, and Angular. It helps you develop and design UI components outside your app in an isolated environment.
41. Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
42. Demo Questions ⁉ AND
43. Thanks