Embed Size (px)
Citation preview
Ramon CliquetFull-stack Senior Designer
www.ramon.im
Design Systems:Delivering a Consistent Design-led Customer Experience.
What we will cover .
1. Industry facts and challenges
2. How a design system can help
3. What a design system really is
4. How to create a design system
5. The adoption of a design system
6. Q&A
Olá!About me.
● From Brazil, settled in Perth WA
● 15+ years of design experience cross discipline
● Co-created apps & sites used by millions of people
● Involved in the creation and governance of three Design Systems
So,First things first.
#1------------------------------------ The Problem.
Brands are investing in design to go digital.
But digital is complexand is everywhere.
Customers are demandingfor disruption and innovation.
But 79% of products miss their launch dates* . * Source: 1CGT/Sopheon Survey
Fellow designers, It is time to productionizeour services.
We must empower our teams and customers .
The digital design drama. 0_0
Rapidly growth with too much demand
Tailor -made for individual problems
Difficult to scale and maintain consistency
Slow response to metrics and data collection
Hum.But how can a Design System save us all?
#2 ------------------------------------- The Solution
A Design System aims to enable empower and enforce great experiences :)
Allow internal and external teams to speak the same language
Accelerate product development and design hand-over
Provide a consistent and unique experienceto your customer
This is why corporations like Google, Apple and IBM have created and shared their design systems.
http://styleguides.io/
https://material.io/design/
http://carbondesignsystem.com/
https://atlassian.design/
https://developer.apple.com/design/human-interface-guidelines/
Let’s not only make great design.
Let’s make design great.For everyone.
Let's make design
reusable.
Let's make design
consistent.
Let's make design
efficient.
Let's make design
robust.
Let's make design
reliable.
Some core benefitsof a Design System.
Avoids duplication and re-work
Creates unification, alignment and consistency
Provides ready-to-use material
Saves time, money and hussle
Cool.But what da heck a Design System really is?
#3 ---------------------------------- The Approach.
Design System is your product interface & experience, living & briefing one single source of truth.
It should include your GUI elementsdesign, code and documentation- Part 1.
Colors:
Hierarchy, usage, combinations, reserved, etc.
Typography:
Size, weights, typefaces, line -height, etc.
Visual Layout:
Grids, spacing, positioning, structure, etc.
Visual Assets:
Logos, icons, images, illustration, etc.
It should include your GUI elementsdesign, code and documentation-Part 2.
Common components:
Buttons, forms, tables, cards, etc.
Common Patterns:
Validations, do’s and don'ts, etc.
Content tone and voice:
Use of words, sentences, etc.
Motion, sounds and gestures
Interaction specs for touch devices, etc
But it could easily go beyondthe visuals.
Principles And criterias:
Guidelines, accessibility checks and etc.
Processes and activities:
Ways of working, design stages and etc.
Team structure and roles:
Responsibilities, deliverables and contact details.
People, you don’t need to start from scratch.
Awesome.How do I create a Design System then?
#4 ------------------------------------ The Process.
You might just get started as a side project.
But at some point, you will need a working team.
Bear in mind:
A design system is meant to be a ever evolving product.Not a project.
Organisingyour Design System.
● Principles
● Basics
● Components
● Patterns
● Areas
● Layouts
Hey,ensure a design pack.
● Components and symbols
● Team contribution and visibility
● Version control
● Naming conventions
● Peer review
● https://materialdesignkit.com/android -gui/
Hey,ensure a code base.
● Self-contained components
● Standalone dependency
● Code snippets and formatting
● Naming conventions
● Version control
● Code review
● GIT YARN and NPM packages
Hey,ensureusability .
● Mobile-first approach
● Built in accessibility from component level
● W3C compliance checks
● Check components and page performance
● Interactions responses and consistency
Hey,ensure testing .
● Use your design system to build your design system
● Test regularly cross device
● Use packages to facilitate adoption
● Provide confidence in your code
Boom! Implemented.Now what?
#5 -------------------------------- The Governance.
Now, here comes the hard bit !Believe me. 0_o
Buy-in and Adoption
Feedback and Communication
Governance and Collaboration
Storytelling and documentation
It must evolve. Listen to users feedback andreimagine it.
Revisit content and structure
Regroup elements and components
Rethink solutions and purpose
Rewrite code and performance
Reduced design and production effort
Source: https://gel.westpacgroup.com.au/case -studies/summary/
Consistency guides a userthrough a product.
You’ll havemeaningful conversationsabout your product.
Some examples and references
http://styleguides.io/
https://www.designbetter.co/design -systems-handbook
http://atomicdesign.bradfrost.com/
https://theblog.adobe.com/building -design-system-speed-scale-collaboration -innovation/
https://designmodo.com/design -system/
And that’s a wrap.Questions?
#6 --------------------------------------------- Q&A.
Ramon CliquetFull-stack Senior Designer
www.ramon.im
Design Systems:Delivering a Consistent Design-led Customer Experience.
