Stilguider & atomic design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Stilguider & atomic design

  • 1,301 views
Uploaded on

Marcus Linder & Sara Ingmar, Valtech ...

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,301
On Slideshare
321
From Embeds
980
Number of Embeds
12

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 980

http://www.valtechlabs.se 413
http://valtech.local 253
https://valtech.se 218
http://phoenix-valtech.valtech.se 76
http://valtech.com.local 7
http://www.slideee.com 5
http://phoenix-valtech.azurewebsites.net 2
https://phoenix.valtech.se 2
http://www.google.se 1
http://valtechlabs.se. 1
https://www.google.se 1
http://accessibility_checker.siteimprove.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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