Style guides, designprinciper & designsystem

Transcript

1. STYLE GUIDES, DESIGNPRINCIPER & DESIGNSYSTEM jens.wedin@valtech.se
5. HUR DESIGNSYSTEM STYLE GUIDE DESIGNPRINCIPER BRAND GUIDELINES VILKA VARFÖR Agenda
6. As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. — Brad Frost
7. Men varför?
8. 1. En designplattform att stå på
9. 2. Arbeta med design på ett metodiskt sätt
10. 3. Effektivisera ditt arbetssätt
11. 4. Ett gemensamt system att kommunicera kring som referensverk, termer och språk
12. 5. Hållbar design som håller utifrån att innehåll och funktionalitet förändras
13. 6. Bättre samarbete inom och mellan team
14. 7. Bättre förstå och förklara designbeslut
15. 8. Ökad flexibilitet
16. 9. Förbättrad manuell och automatiserad testning
17. 10. Snabbare uppstart av projekt
18. 11. Bättre kvalitet på leveranser
19. 12. Vi levererar över förväntan
20. VILKA
21. VILKA
22. VILKA
23. VILKA
24. VILKA
25. VILKA
27. VILKA
28. HIERARKI
29. BRAND GUIDELINES DESIGNPRINCIPER STYLE GUIDE DESIGNSYSTEM
30. BRAND GUIDELINES
31. • Design (logotyp, färg, typografi, olika kanaler) • Kommunikation (reklam, PR, information) • Beteende (värderingar, normer och kultur)
36. DESIGNPRINCIPER
37. • Användaren bör veta var hon är, vart hon har varit och vart hon ska i systemet. • Var vänlig och förlåtande. Visa för användaren när något har gått fel och hur det går att fixa problemet. • Visa vad som är det primära valet • Visa hjälp i samma kontext Gränsnitt
38. Snabbt och inte krascha • Ska vara snabbt och ladda och spara/exportera vyer. Även gränsnittet ska upplevas som rappt och inte krascha så man förlorar det man jobbat med ! Excel • Alla vyer bör gå att spara till excel ! Tangentbord • Det bör finnas stöd för tangentbord mellan vyer, inom vyer och inom tabeller Funktionalitet som inte rör gränsnitt
39. Utgå från användaren Att utgå från användaren låter alltid enkelt men är lätt att glömma bort. Se till att all funktionalitet på något sätt utvärderas av användare. Se till att göra utvärdering så tidigt som möjligt i processen och gärna testa idéer på användare under hela utvecklingscykeln. Exempel
 Se till att utvärdera, intervjua och göra användningstester med ett fåtal användare inom varje eller varannan sprint. Arbetsprocess
40. STYLE GUIDE
41. • Mer praktiskt hur man ska implementera Brand Guidelines och designprinciper • Detaljering av färg, form, typografi, layout & interaktion
45. DESIGNSYSTEM
46. • Ett system för att koppla ihop komponenter till moduler till sidor (atomer, molekyler, organismer, mallar & sidor)* • Gjort med rätt kod t.ex. html, css & javascript • Så nära applikationen/webbplatsen som möjligt * http://bradfrostweb.com/blog/post/atomic-web-design/
47. • http://demo.patternlab.io/ • http://foodbank.bradfrostweb.com/patternlab/v3/? p=pages-program-detail EXEMPEL
48. HUR
49. HUR • Samarbete mellan AD, UX, DEV och PO • Börja med att ta fram ett designsystem innan man gör mallar och sidor • Få avstämt på atom och molekylnivå, sedan organism och mallnivå. Sist sidnivå.
50. HUR • Se till att designsystemet ligger på samma ställe som applikationen / webbplatsen. Ska vara ett ställe att uppdatera. Te.x. Github. • Håll den uppdaterad, ha rutiner & ägarskap
51. Frågor, reflektioner?
52. 3 viktigaste • Se till att ha en style guide/designsystem • Samarbeta inom/mellan team och kompetenser • Bygg och underhåll under en lång tid
53. Fördjupning • http://bradfrostweb.com/blog/ post/atomic-web-design/ • http://ux.mailchimp.com/patterns/ • http://alistapart.com/article/ responsive-comping-obtaining- signoff-with-mockups • http://24ways.org/2012/design- systems/ • http://24ways.org/2011/front- end-style-guides/ • http://www.bbc.co.uk/gel • http://sfdc- styleguide.herokuapp.com/ • https://www.mapbox.com/base/ • http://www.skatteverket.se/ styleguide • http://www.mozilla.org/en-US/ styleguide/ • http://paulrobertlloyd.com/about/ styleguide/ • http://pea.rs/
54. jens.wedin@valtech.se Tack :) Fotografier från http://superfamous.com/ http://nos.twnsnd.co/ http://unsplash.com/