Why design systems don't always stay updated?
- it was never intended to be living
- maintaining it was too much work
- nobody in the team uses it
How can we get people to take ownership and use them?
- Why Design systems are awesome
- they keep your website consistent, both visually and in usability.
- your team has a shared vocabulary, referring to the same patterns with the same names.
- they can help educate people about the web. Components, styles and templates helped with the mental shift from 'print' to web.
- you can develop new features faster ... which could save money.
- they can help future proof your website
When you see other company's pattern libraries and design systems you think:
"I gotta get me one of those"
Right now, it feels like everybody's building design systems - so you start to think "...maybe I should, too"
- Why designs systems are not so great
- they're a lot of work
- the maintenance of them are hard (Vitaly Tweet)
- they're all kinds of confusing - as there's many ways to create one
- you cannot guarantee on the ROI from creating it. You can't guarantee it will be used
- it's not foolproof
"No pattern library will fix bad design. Patterns can still be badly designed, misused or combined in what that don't work as a whole" – Alla (@craftui)
- What kind of design system do you need? How to determine what kind of design system you need
- what is the size of your team? Jon Gold photo
NEED > EFFORT ... does the need for the type of design system you need outweigh the effort involved.
- how mature is your brand?
- do you have the right mentality?
- do you have a problem? Are you using a design problem to solve a real problem?
- We're not creating a design system, we're creating a solution to a problem.
- The business case for a design system Laura quote photo Is there any solid evidence of this? tweet poll
- Amazon AWS 722 services and features, over 70 teams across the globe -- design system
- Future Learn 2/3x to create reusable component but the value increases after it's been reused ... but sometimes it's making something reusable for sake of it
- EA - Joystick - much quicker than many large teams.
- How to get buy-in for the design system
- find a common pain what could a design system fix. speak to people about what problems they have, what frustrates them.
NEED => EFFORT to put a design system into action
- gather data make a small test project
"You don't need to get the client's blessing to follow your craft's best practices" – Brad Frost
-
Invention wake up - unplug - here noise - try to repeat - scream -- you are frankenstien's monster - an organism made from components
-
Language in Patterns how do you record your vocabulary and language? everyone has a different understanding of the word "story" to when talking about design systems ... "it's the thing that keeps all the parts together"
1977 - Christopher Alexander - a pattern language
design guidelines - a way to socialise our patterns.
"you cannot merely build in isolation"
atomic design - with organisms what hold them together?
how do you begin to look after you patterns in the real world.
"with a great pattern comes great responsibility"
the 3.5 layers of language in modular design
- where humans talk to humans - how we talk about things within teams
- objects communicating with objects - how patterns connect to each other
- objects that talk to humans - how a website communicates to the visitor
- humans communicate with objects - talking to Siri, Alex
- how to create identity? How do we make our patterns communicate with humans Thingness - by assigning vocabulary to objects we give them meaning.
Heidegger - tool being - how our relationships with objects are linked until they break.
Designing Identity
- sentimental objects - teddy, blanket
- branded objects - coca cola - a brand built around a product
- anthropomorphism - clippy, mail chimp monkey -- Siri, Alexa
- human-likeness - uncanny valley - objets that look like humans
We need to build our story in early.
What is the story so far? Story = Experience in Space over Time
... How do I use this now?
from a project - working out what principles were decided upon. The important one being: What's the personal story? Encourage authentic voices and rap stories in pictures and words
To keep the story alive after the design is done, create guidelines (voice & tone).
How to look after your organism.
Organism Kit: for making guidelines
- who is responsible (in future)?
- how does it relate to the wider environment
- what is the story
- how does it change over time
- how does it behave
We are designing things that are coming alive
It is time to design the wider network, to connect humans with humans, objects with objects and humans with objects so we have a shared eco-system and live all together, happily ever after.
76.4 million weekly visitors to BBC News - 64% comes from outside UK
BBC Worldwide 29 Site 58.8 million users 99.3% outside UK
World Service 2020 -- 12 new services / sites
BBC user targets: 2022 half a billion, online target of 170 million.
- what it means
- lots of users
- lots of pages
- what it needs
- easy to rest
- localisable
- lightweight
focussing on lightweight, localisable, easy to use
localisable -- language translation, content, and direction
If you start out by thinking about these needs and building them into the systems as we go - it's easier than shoe-horning them at the end
Grandstand - a Sass based CSS architecture and framework, built by BBC Sport which contains:
- objects
- utilities
- sass tools
- gel grid
- gel typography
- gel iconography
Objects: an example, three patterns:
- live pulse
- timestamp
- media
drilling down to similar parts of these three patterns
- an icon
- spacing
- some text
a bullet pattern, because it looks like bullet points, a shared vocabulary
why pull out this pattern from three patterns?
- don't want components with repeated CSS
"Namespace all the things"
gs- for all grandstand classes gs-o for all objects within grandstand e.g. gs-o-bullet, gs-o-bullet__icon
What else does Grandstand include?
Utilities
gs-u- margin, padding, display, float
gs-u-mr which includes spacing, 4px/6px/8px etc standard spacing units to avoid the odd pixel here and there being implentend - for consistency.
Sass Tools
colour variables - $bw-c-ebon: #222; mixing - flip and calc
GEL Typography, Grid, Iconography
Global Experience Language
typography - canon, trafalgar, double pica, great primer, pica, long primer, brevier, minis
grid
icons
the hierarchy for Grandstand is actually
GEL Grid GEL Typography GEL Iconography Objects Utilities Sass Tools
name-spacing, a set of classes that don't overlap specific for what it does, not what it is (as such)
you add these generic classes different combination to build up your components
gel-waterloo -- typography gs-o-bulldt -- pattern style gs-u-mr -- add margin right
make it smaller by changing the type - gel-pica
Localisation:
- Content!
- Typography
- Layout
how do we allow our design system to cope with localisation
Typography is it enough to just choose a font?
- system fonts aren't that great as they're usually for Latin based language
- line-height - ascenders and descenders in other languages
- vertical rhythm - paragraph spacing (see above)
- at each breakpoint
Grid
direction: ltr; - text-align: left; job done?
use a Sass function to flip the left to right value so you're not duplicating 'all the codes'.
but for localising properties ... margin-right?
use Sass variables and interpolation -
#{$padding-right}: $gel-spacing-unit;
How to build your own Grandstand ...
localisation: Use Sass mixin & variables typography style & size
setup: standard spacing units breakpoints colour palette
lightweight: choose object patterns carefully do you really need that variation? communicate with others.
patterns.perchcms.com
Perch is 8 years old - the redesign
Perch allows for additional third-party add-ons so they sometimes have no control on how it looks.
"The Perch UI had to exist as a set of independent components that can be displayed in any order."
started with just HTML:
lots of duplication slow to make changes had to encode for display and keep up to date ... would we be likely to keep it up to date after launch as changes were painful?
Pattern library tooling: research showed that most were build to make a website -- not an 'app' or collection of components for an app.
what did we want?
- somewhere to document design decisions
- a system to organise and separate components
- something that would remain up to date
- something we could make available to third party add-on developers as a reference for add-ons
Fractal ... <3
it's pretty agnostic about what you're building, it doesn't really care what you're creating.
- it doesn't assume the shape of your projects
- leaves the organisation of components an naming to us
- it didn't dictate build tools
- allow documentation to be stored alongside
- could export to HTML
Pattern Library - as a source of truth
making a 'quick change' to the app -- I'll add that to the pattern library at the end of the week
Because of how fractal works - decided to use it as the single source of truth.
Fractal is where the CSS for the perch UI is built - you cannot edit it in the perch environment - it pulls the CSS from the pattern library. Stops temptation from quickly changing something.
Now moving everything to Fractal and having the CSS from within Fractal being the source of truth
Naming this is hard
had no better ideas - so started with Brad Frost's Atomic Design naming conventions.
Found that as Perch had so many little things - it was difficult to find things
Deciding on organising things by the 'type' of thing - typography, icons, forms, tables, etc.
Fractal helped build the UI without needing to build it into the application.
"Don't stress about naming. It will become clearer as you build."
Make sure you have a tool that lets you do this, let's you move things if/when you need to. (hot take - Fractal does this well)
Reduced Test Case First development
By working with a pattern library we've started to build the up to date experience with the up to date methods (grid/flexbox) ... if you build a float based layout and add grid on top you might as well not bother.
With a pattern library, when faced with a confusing broken mess, it allows us to strip it back to a reduced test case. The patterns in your pattern library are your reduced test case. Already.
Browser testing
work in the pattern library to test and fix each component in turn, starting with the smallest version. When you get to the main layouts you should find it 'just works'
Keep fallback code with the component in the pattern library. It ensures we don't end up moving the fallback after the new fun codes. Also, in the future, it will be easier to see what can be removed as browser support improves.
Pattern Libraries have transformed how I make websites.
- (as a developer) Designing a component seems less overwhelming than designing a whole site.
- Developing CSS in the Pattern Library makes CSS more manageable.
- Pattern Library first keeps the build process and the runtime process separate.
- Components are reduced test case. Allowing you to more easily embrace new techniques and deal with old browsers.
- Choose tools that allow you to refactor the pattern library as things change.
- Make the pattern library the spruce of truth nd it can't get out of date.
Origami
4 person team who develop front end tools for services at FT
- reduce time spent repeated work
- unify design across FT
How?
Building components.
... not a talk about design systems - this is about what you build once you have your design system.
FT Solar System
further out the solar system less 'like' FT
- FT.com
- nested brands
- tools & services
- sub brands
- branded business
several products - all using different products and tools by different teams
Teams all over the world built in house built by agencies actively maintained not maintained
FT has about 250 sites
Maanging this complexity and keeping all of these sites aligned is what we use Origami for
What's in a component system?
- components
- tools
- documentation
- Components HTML + CSS + JS === a component, although sometimes a component doesn't require all three. Over ~5 years, Origami has grown to 50 patterns
Each component have their own repo and their own version number.
Most components systems look kind of the same.
Where they differ is tooling
- Tools
Components + Appication Code == Websites
the + is quite difficult.
The best tooling, is no tooling.
When you have to ship to more than one thing you will need some sort of tooling
How do we get HTML, CSS, JS out to all these applications?
templating - but in what? What language dependencies are required?
no templating - people could leave off or remove things they don't understand. You've created something that couldn't be easily changed in the future. You can't update easily.
There's no good option if you're wanting to make something super flexible.
Origami uses copy/paste
pick and stick to a css naming convention get really good at understanding and resolving dependent problems
Getting CSS and JS to people is a lot easier. as <script> and <link> are language agnostic.
ship the whole thing - redundant CSS and JS could be ok, depending on the overall 'size' and 'complexity' of your site.
The FT.com is a little more strict. 50 patterns, using Bower.
using bower packages == critical path rendering can use only the Sass mixin you need rather than be forced to download all the classes for things gives uses option to manage their own build process and assets
some teams don't want to have the hassle of a build process or asset management. Built a build service for each pattern so that people can 'request' the patterns as needed - 4.3 million requests per day.
Both approaches are application language agnostic (apart from the need for Bower).
- Documentation, marketing and support
Origami - is competing with any other tool, or not tool at all. It's important to focus on this as the team for Origami is funded by it being used.
Research teams in FT about Origami ...
found out the documentation was 'boring'. "I just wish this was more like Bootstrap's documentation" re-write docs built on Django's documentation principles
now have documentation styleguide on how to author the documentation. Active voice.
The amount of marketing you had to do should scale with the numbers of users you have (or want).
Marketing isn't just about making pretty websites - you will need a comms plan for releases, publish incident reports, you should have a support channel.
"People won't fight you, they'll just ignore you"
Dulle, Quorre, Christoph, Stilgyde, Jenn, The Head Wizard, The league of Wizards, Spells, The league of Dragons, Spellbooks, Strass, Stella, Ben, Firebolt, The Book of Strap, Villagers, The Baron, The Duchess
Focus on the magic and the spells, but Firebolt still needs the attention.
Watch the video.
Where would you start, if you were asked to design a city? Would you start with the roads, what shape would make it? A bird
Designing an inland capital for Brazil in 5 years, instead of 50.
A model utopia of egalitarianism.
A work of art, that fails as a place to live.
"Software is eating the world." – Marc Andreessen
Silicon Valley has become an outsized influence.
Needing to qualify subjective decisions, is not a new problem for designers.
Optical Adjustment: Logic vs. Designers - Luke Jones
"Agile as a methodology tens to focus so quickly on the details of ta product that it's hard to get a sense of the bigger picture."
speed of delivery over the consequences
the parts versus the whole
all the things make sense in isolation, but not necessarily work together.
Our focus works towards looking at the smaller part, looking at how the little thing works without seeing how it works within the whole.
naming things is hard, but sticking to those names is harder.
How are tools dictating our approach?
fractal, fabrication, pattern lab
These are all designed around a modular approach.
As the definitions blur we need to make sure our tools are keeping up.
Consistency Vs Coherence
what do we mean by consistency?
Are we confusing consistency with coherence or conformity?
Is complexity the price we need to pay for consistency?
What role does consistency play within a design system?
When systems fail us.
decisions are defined by the culture of the people making them.
"When systems echo more complex the number of possible weaknesses can increase, yet become less apparent." – Stephen Hay
How does a culture affect our choices?
Who does your design system serve?
Sipgate, realised that each product was diluting their brand, duplicating code and design - so they created a pattern library.
A year later, there were so many patterns, it become hard to find the pattern you needed.
"A design system doesn't start or end at building a pattern library"
How do we stop this?
-
The strictness of the rules
-
The modularity of the parts
-
The organisation using them
-
The rules
- strict / loose
AirBnB - strict TED - loose
strict - predictable outcomes and consistency ... but can become rigid and restricting loose - experimentation and sensitive to context ... but can become messy and fragmented.
- the modularity
- modular / integrated
the extent of modularity should reflect the needs of your team and your product.
modular approach is suit for projects that
- scale and evolve
- ...
- ...
- ...
integrated approach
- one specific purpose
- don't need to scale
- need art direction
- have few repeated parts
- ...
modular approach - adaptable, scalable, cost effective in the long run ... but - high initial investment, can lead to generic outcomes or patchwork designs
integrated approach - specific, coherent, can be built quicker first time ... but - not scalable, not adaptable, not reusable.
- Organisation
- centralised / distributed
centralised organisation - ownership, reliability, focused creative direction ... but can slow down the team, can take away autonomy
distributed organisation - autonomy, resilience, distributed design knowledge ... but - can get neglected, can dilute creative direction
"A team's culture is reflected in a design systems they will product" - Conway's Law
"The right system for you is not someone else's system."
It's not the tools, it's the people