41
Stilguider & atomic design Sara Ingmar & Marcus Linder @ Valtech Tech Day 2014 #vtd14

Stilguider & atomic design

Embed Size (px)

DESCRIPTION

Marcus Linder & Sara Ingmar, Valtech Design för en webbsajt kan modulariseras på olika nivåer, från dess minsta beståndsdelar till större komponenter. Här visar Marcus och Sara case de jobbat med där stilguider har implementerats, för att på en och samma plats samla design och element som används på sajten - och vilken nytta det medfört för alla inblandade, såväl det tvärfukntionella projektteamet som kunden.

Citation preview

Page 1: Stilguider & atomic design

Stilguider & atomic designSara Ingmar & Marcus Linder @ Valtech Tech Day 2014 #vtd14

Page 2: Stilguider & atomic design

https://www.flickr.com/photos/bdesham/2432400623

Page 3: Stilguider & atomic design

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

Page 4: Stilguider & atomic design

• Vad är en stilguide?

• Atomic Design som koncept

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

• Styrkor och svagheter

Agenda

Page 5: Stilguider & atomic design

Vad är en stilguide?

Page 6: Stilguider & atomic design

yelp.com/styleguide

Page 7: Stilguider & atomic design

starbucks.com/static/reference/styleguide

Page 8: Stilguider & atomic design

getbootstrap.com

Page 9: Stilguider & atomic design

Vad är de bra för?

Page 10: Stilguider & atomic design

Atomic Design

Page 11: Stilguider & 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.”

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

Page 12: Stilguider & atomic design

Atomic design1. Atomer

2. Molekyler

3. Organismer

4. Mallar

5. Sidor

Page 13: Stilguider & atomic design

1. Atomer

Page 14: Stilguider & atomic design
Page 15: Stilguider & atomic design

2. Molekyler

Page 16: Stilguider & atomic design
Page 17: Stilguider & atomic design

3. Organismer

Page 18: Stilguider & atomic design
Page 19: Stilguider & atomic design

4. Mallar

Page 20: Stilguider & atomic design
Page 21: Stilguider & atomic design

5. Sidor

Page 22: Stilguider & atomic design
Page 23: Stilguider & atomic design

Stilguider på

Page 24: Stilguider & atomic design
Page 25: Stilguider & atomic design

.psd

Page 26: Stilguider & atomic design

.psd

Page 27: Stilguider & atomic design
Page 28: Stilguider & atomic design
Page 29: Stilguider & atomic design
Page 30: Stilguider & atomic design

Stilguider på

Page 31: Stilguider & atomic design
Page 32: Stilguider & atomic design
Page 33: Stilguider & atomic design
Page 34: Stilguider & atomic design
Page 35: Stilguider & atomic design
Page 36: Stilguider & atomic design
Page 37: Stilguider & atomic design
Page 38: Stilguider & atomic design
Page 39: Stilguider & atomic design

Styrkor och svagheter

Page 40: Stilguider & atomic design

• Kodreferens

• Testbarhet

• Översikt och struktur

Page 41: Stilguider & atomic design

Tack!Sara Ingmar

[email protected] @saraingmar

Marcus Linder [email protected]

@marcuslinder

Valtech Tech Day 2014 #vtd14