DEsign your living Styleguide

2018 - October 18th

Samuel Snopko - @samuelsnopko

WONDROUS LTD

Big thanks to

#BaselOne

18

WEb Design

Web Design is not only about how it looks like. 

core content 

content structure

hostile browsers 

slow connections 

interactions

and much more !!

performance

user actions

backend logic

workflows

real content 

animations

colors

reuseabilty

a11y

typography

story telling

mobile first

content first

We are not designing pages, we are designing system of components.

>>

Stephen Hay

<<

Atomic Design

Atomic design is methodology for creating design systems.

>>

<<

Mark Boulton

Design process

The design process is weird and complicated because it involves people and organisations, which often are weird and complicated.

>>

<<

problem OF perspective

Designer

Developer

Business

Product

how to start?

Designer

Developer

Business

Atomic Workflow

1. Design with Text

2. Visual Exploration

3. Living Styleguide / Prototype

4. Integrate - automate if you can

5. ReDesign and repeat

living Styleguide

Style guide is a living document of code, which details all the various elements and coded modules of your site or application.

<<

<<

Susan Robertson

source - alistapart

static vs. living

WHY?

- Divide and conquer your code

- creates Documentation

- establishes Project Vocabulary

- show behaviour / rapid prototyping

- shows HTML & S/CSS &  JS code

- enhance Collaboration

KEY!

Collaboration

idea: UX Worshop, Vitaly Friedman

PM / Account

Good luck  suckers, I'm done my part!

Designer:

My uniform is more stylish!

Developer:

What kind of sport is this?

 UX, CM, Testers, ...

 Guys! Let us also  play.

Photo Qbyuino Al on Unsplash

DOWNSIDES

- take some time up front

- overcome Trust issues

- change of Workflow

- customer / team

- brave customer

- good relationship

- education

what you get!

- prototype / playground

- reusable elements (DRY)

- future maintenance & development

- clear communication

- onboarding time for new team member

- collaboration in Browser - real world

- decoupled development

tooling

- Fractal

- Pattern Lab

- Vue Styleguidist

- React Styleguidist

github.com/davidhund/styleguide-generators

- list goes on ....

styleguides.io

Fractal

- Open Source

- Components Based

- built in Web Server

- shows Code Sources

- multiple templating languages

- markdown documentation

- highly customisable

Demo

Time

let's wrap IT up

Takeaway #1

helps with Challenges of RWD

Prototyping

Development

Browser Testing

Maintenance

Takeaway #2

don't
repeat
yourself

Integration

Reusable Components

Takeaway #3

design once
develop once
=
utopia

Communication helps!

Creating reusable components is hard

Takeaway #4

better collaboration

with Team / Customer

One Source Of TRUTH

Project Vocabulary

Takeaway #;

work decoupleD

start together, it's a team sport

Big thanks to

#BaselOne

18

thank

you

DEsign your living Styleguide

2018 - October 18th

Samuel Snopko - @samuelsnopko

www.wearewondrous.com

www.wondrous.slides.com/wondrousllc/design-your-living-styleguide-public

Design Your Living Styleguide - [PUBLIC]

By WONDROUS LLC

Design Your Living Styleguide - [PUBLIC]

Slides for the Basel One Conference 2018 Samuel Snopko - @samuelsnopko

  • 1,251
Loading comments...

More from WONDROUS LLC