Stilguider & atomic design

2,007 views
1,928 views

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
2,007
On SlideShare
0
From Embeds
0
Number of Embeds
1,376
Actions
Shares
0
Downloads
4
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

×