Upload
valtech-ab
View
1.270
Download
5
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
Stilguider & atomic designSara Ingmar & Marcus Linder @ Valtech Tech Day 2014 #vtd14
https://www.flickr.com/photos/bdesham/2432400623
http://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)
• Styrkor och svagheter
Agenda
Vad är en stilguide?
yelp.com/styleguide
starbucks.com/static/reference/styleguide
getbootstrap.com
Vad är de 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.”
bradfrostweb.com/blog/post/atomic-web-design
Atomic design1. Atomer
2. Molekyler
3. Organismer
4. Mallar
5. Sidor
1. Atomer
2. Molekyler
3. Organismer
4. Mallar
5. Sidor
Stilguider på
.psd
.psd
Stilguider på
Styrkor och svagheter
• Kodreferens
• Testbarhet
• Översikt och struktur
Tack!Sara Ingmar
[email protected] @saraingmar
Marcus Linder [email protected]
@marcuslinder
Valtech Tech Day 2014 #vtd14