Stilguider & atomic design
Sara 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)

• Styrk...
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 pic...
Atomic design
1. 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

sara.ingmar@valtech.se

@saraingmar

Marcus Linder

marcus.linder@valtech.se

@marcuslinder
Valtech Tec...
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Stilguider & atomic design
Upcoming SlideShare
Loading in...5
×

Stilguider & atomic design

1,651

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,651
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Stilguider & atomic design

  1. 1. Stilguider & atomic design Sara Ingmar & Marcus Linder @ Valtech Tech Day 2014 #vtd14
  2. 2. https://www.flickr.com/photos/bdesham/2432400623
  3. 3. http://shop.lego.com/en-SE/Sydney-Opera-House-10234
  4. 4. • Vad är en stilguide? • Atomic Design som koncept • Hur jobbar vi med stilguider? (Länsförsäkringar och Boxer) • Styrkor och svagheter Agenda
  5. 5. Vad är en stilguide?
  6. 6. yelp.com/styleguide
  7. 7. starbucks.com/static/reference/styleguide
  8. 8. getbootstrap.com
  9. 9. Vad är de bra för?
  10. 10. Atomic Design
  11. 11. –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
  12. 12. Atomic design 1. Atomer 2. Molekyler 3. Organismer 4. Mallar 5. Sidor
  13. 13. 1. Atomer
  14. 14. 2. Molekyler
  15. 15. 3. Organismer
  16. 16. 4. Mallar
  17. 17. 5. Sidor
  18. 18. Stilguider på
  19. 19. .psd
  20. 20. .psd
  21. 21. Stilguider på
  22. 22. Styrkor och svagheter
  23. 23. • Kodreferens • Testbarhet • Översikt och struktur
  24. 24. Tack! Sara Ingmar sara.ingmar@valtech.se @saraingmar Marcus Linder marcus.linder@valtech.se @marcuslinder Valtech Tech Day 2014 #vtd14
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×