Please enable JavaScript.
Coggle requires JavaScript to display documents.
Design System IA (Component Library (Navigation, Main banner, Search bar,…
Design System IA
Component Library
Navigation
Main banner
Search bar
Call to Action / task boxes
Towards Zero
Feature area
Latest News
Ad strip
Footer
Feedback
Banner
Breadcrumbs
Panels
Anchor links
Advise Right or Left Nav
Buttons
Radio Buttons
Checkboxes
Images
Resources
DesignTalk Ep. 65: Design systems—Zero to one
https://designsystemsrepo.com/
Retro on Design System Conference
Design a Systems Team - Nathan Curtis
"How Your Company Benefits by Building a Design System"
awesome design systems list
The Imposter's Design System - Ed Chao, Product Designer, Dropbox
Example: Sproutsocial
Brand Guidelines
Logos
Colours
Spacing
Typography
Photography
Presentations
Brand Mnemonic
Notes from Design Talk ep 66
Defintion:
A
style guide
is an artefact of the design process. A
design system
is a living, funded product with a roadmap and backlog, serving an ecosystem.
~ Nathan Curtis - EightShapes
The system's goal should be that a new team can interpret the system with no guidance
A design system is living. This means that it changes and updates as the company grows and changes
Bus count needs to be increased. This can be achieved through contribution and collective ownership.
Make it easy to maintain by looking for ways to simplify or investing in existing tooling rather than creating something new
Logging. Make changes transparent so that users can understand the thought process behind changes. This also builds greater trust in the system.
Needs to be a single source of truth
Allow teams to update their parts of the system independently
Process
IA
Start building / writing
Create goals for the system to achieve
Identify areas of risk (technical or business)
Socialise and speak with stakeholders about learning
Roll out the system to a small group to learn how they use it
Create processes for contribution and submitting issues
Show good examples in context.
Provide counter examples of what not do to
Counter examples are usually less text which makes them easier to understand and more likely to be
Use a fake brand example
Communicate / Socialise learnings
Team size
Its important for the team responsible for the design system to be small as there will need to be many decisions made. Communication becomes exponentially harder with more people.
Feedback loops
Ask teams who are using the system for feedback
Listen to needs and prioritise
Speak with customers about how the design works for them
Share learnings rather than reporting to stakeholders.
This means telling a narrative of what works and what doesn't work
Explain what actions will be driven from findings
Document learnings in a transparent manner that's accessible. This shows people how the design process can be used to change in the future
Design Patterns
Forms
Sign up flow
Voice and Tone
Definitions and Capitalisation
Notes from The Imposter's Design System
Identify the villains. A big one is:
Insecurity and lack of confidence in developing new things
Borrow authority. This means to mimic established systems to create trust before the design system has its own authority
