Stilguider & atomic designSara Ingmar & Marcus Linder@saraingmar @marcuslinder

Brown Bag @ Valtech den 8 oktober 2014

flickr.com/photos/bdesham/2432400623

shop.lego.com/en-SE/Sydney-Opera-House-10234

• Vad är en stilguide?

• Atomic Design som koncept

• Hur jobbar vi med stilguider? (Länsförsäkringar och Boxer)

• Stilguiders styrkor och svagheter

Vad är en stilguide?

yelp.com/styleguide

starbucks.com/static/reference/styleguide

getbootstrap.com

starbucks.com/static/reference/styleguide

24ways.org/2011/front-end-style-guides

smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides

slideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012

Vad är stilguider bra för?

Atomic Design

–Brad Frost

“By assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking

patterns after the fact.”

valtech.se/blogg/an-event-apart

1.Atomer

2.Molekyler

3.Organismer

4.Mallar

5.Sidor

bradfrostweb.com/blog/post/atomic-web-design

1. Atomer

2. Molekyler

3. Organismer

4. Mallar

5. Sidor

Stilguider på

lansforsakringar.se

.psd

.psd

Stilguider på

boxer.se

Styrkor och svagheter

• Kodreferens

• Testbarhet

• Designöversikt och struktur

Frågor?

©istock.com/urbancow

Tack!

Sara Ingmar sara.ingmar@valtech.se

@saraingmar

Marcus Linder marcus.linder@valtech.se

@marcuslinder