style guide presentation
DESCRIPTION
Vid det här tillfället visade Marcus Linder och Sara Ingmar, gränssnittsutvecklare på Valtech, upp de case de jobbat med där stilguider implementerats. Detta 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ärfunktionella projektteamet som kunden. De berättade även om koncepten kring atomic design.TRANSCRIPT
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
.psd
.psd
Styrkor och svagheter
• Kodreferens
• Testbarhet
• Designöversikt och struktur