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

WHAT IS A LIVING STYLEGUIDE

Do you remember me? Yuk!

http://styleguides.io/

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!