Living Styleguide: design and development workflows
-
Upload
fabio-fabbrucci -
Category
Design
-
view
614 -
download
1
Transcript of Living Styleguide: design and development workflows
STYLEGUIDE DESIGN AND
DEVELOPMENT
Hi, I’m a happy styleguide!
TOPICS FOR TODAY
Why and when we need a styleguide What is a living styleguide
Different workflows
Find me on Twitter: @Fabbrucci
This is Nody
YO!
I feel fine here
I feel strange here …
Thanks for wrapping me!
Thanks for overriding me!
“Every day a Nody becomes sad. We can’t turn our back on it.”
This is Teamy
We have super powers!
We did a great job!
We have to change something …
For instance: change the new menu, support blackberry, sell on kindle …
Oh oh! We are screwed …
For instance: we can’t cahnge the code, we need to restart …
“Every day a Teamy become sad. We can’t turn our back on it.”
This is Needy
I need a cool product!
HasDoesn’t want
Needs
Be sadRisksFears Uncertainties
Product
looks for
come to an agreement
Collaborators Competitors
Rubbish Different Product (that works)
Initial Product
“Every day a Needy become sad. We can’t turn our back on it.”
How can we css
help them?
A LITTLE BIT OF CONTEXT
Once upon a time …
Risks Management
Artifacts focus on blame
WHAT THE HELL!!!
Reality Check
Plan —————
Idea
Execution ————— Reality
This is heaven Does it exist?
Agile
Short cycles Focus on value Soft planning
Side Effects
New risks, more fears, more uncertainties
More reality, more chances
It’s where needy starts to see things “Yes, it’s what I want but more…”
Design becomes crucial
Offers reality check Teamy provides feasibility
Empowers decision making Tactical and strategic
Enables distributed ownership emergent leadership, emergent respect
Design is execution, but also discovery
The way you design CSS
changes in each context
Why a living styleguide is important?
Discovery Enable “rapid hi-fi prototyping” Fast feedback from stakeholders
Execution Continuous Reality Check
Visual consistency brings brand reputation
1. Pattern library
A bucket list of components that people can “use”
(typography, colors, icons, visual patterns, buttons…)
Its focus is granularity.
2. Prototype
A rudimentary working model for demonstration purpose
(working prototypes, static pages, a pre-product)
Its focus is consistency.
Salesforce Example
3. Repository
A collection of assets and knowledge
(build tools, coding standard, frontend architecture…)
Its focus is simplicity.
A living styleguide is a multilanguage
dictionary
WORKFLOWS
I love Italian food!
1. All-in
Visual Interfaces
time
Living Styleguide
Prototype Product
Understand and
decide
Risks and builds
Problems: Whose?
2. Upfronttime
Living Styleguide
Prototype Product
Understand and decide
Risks and builds
Problems: Whose?
3. Small Stepstime
Living Styleguide
Prototype Product
Understand and decide. Problems: whose?
Risks and build
Pro & Cons1 2 3
Easy to plan
No visual imprinting
Risks are more distributed
Emergent lean design
High level of reality-check
Lack of reality-check
All risks are on team
Getting meaningful feedback is hard
Hard to plan
Leadership and conflicts emerge
Collaborators
Competition
StableAlpha
1 All-in
2Upfront
3Small steps
Choose the workflows that best fit
product success and
Needy relationship
TECHNIQUES AND
TOOLS
1+2 … 3!
Huge Costellation
OOCSS Design
Refactoring
Team
Build toolsDevices
Responsive Design
Naming
BrowsersPerformance
My favourite four CSS tips
for you
How and when should I use helpers, mixins, extends, OOCSS?
1. Focus on changeability
2. Start thinking in
terms of components more than pages
visual regression, deferral commitment
3. Learn how to refactor
4. Spend 10% of your time
on a toolkit
Let your computer do the job for you
5. Calibrate quality
Continuous relearning, be able to downgrade when needed
How to start your experimentation?
Where are my feet?
1. Explore other
people CSS architecture
2. Go
and build your first styleguide
3. Which of your
clients best fit this approach?
CSS is definitely for real pro
It’s PROMO time
Frontend Automation 27-28th Oct, Bologna
Digital products design
Thank YOUhttp://fabbrucci.me @fabbrucci
Credits
BAZINGA!