Werken in stijl

Transcript

2. Styleguides & werkwijze WERKEN IN STIJL
3. IK BEN SYB •  Front-end designer •  Afgestudeerd in 2011 •  Responsive design •  Typografie
5. travel retail finance b2b
6. INHOUD •  Praktijkvoorbeelden •  Waarom styleguides •  De beste styleguide •  Tips voor werkwijze
7. Even door de tijd HOE MIRABEAU WERKT MET STYLEGUIDES
8. NATIONALE- NEDERLANDEN
9. DE PAPIEREN STYLEGUIDE •  Visual Design kijkt er vrij weinig naar •  Binnen 3 maanden al out of date •  FED heeft doorontwikkeld •  FED kijkt er ook weinig naar
11. COMPONENTEN- LIBRARY •  Alles moet handmatig •  Veel extra werk •  Geen documentatie voor backend •  Visual Design kijkt er niet naar
16. ALGEMENE PROBLEMEN •  Documenten niet in sync •  Heel veel uur werk PDF •  Klant kijkt wel naar styleguide
17. TRANSAVIA
18. EEN ANDER PROJECT •  Scrum •  Iedereen betrokken •  Nieuwe site, nieuwe stijl •  Voorbereiding op rebranding
19. ONLINE STYLEGUIDE •  Designen in de browser & Photoshop •  VD & IO hadden ook andere deliverables •  Alles op één URL te vinden •  Toegankelijker
24. HEEL VET •  Reclamebureau gebruikte het als basis •  Klant gebruikte het in meetings •  Collega’s wilden het ook gebruiken
25. LEASEPLAN
26. DYNAMIC STYLEGUIDE •  Eindelijk automatisch •  Visual design •  Interaction design •  Documentatie voor backend •  Basis voor testen
30. Straks meer…
31. DYNAMIC STYLEGUIDE •  Meer web based •  Sneller •  Nóg toegankelijker •  Realistisch ontwerp tonen
32. Alles is beter WAAROM DEZE WERKMETHODE?
33. JE HEBT GEEN CONTROLE OVER HOE HET DESIGN ERUIT KOMT TE ZIEN Het web van nu kan & hoeft niet pixel perfect
34. RESPONSIVE DESIGN •  Photoshop is niet meer genoeg •  Alles moet schaalbaar zijn •  Componenten veranderen in het proces
35. PERFECTE INTEGRATIE Product backlog Sprint backlog Sprint Demo
36. AUTOMATISEREN •  Veel werk is hetzelfde in projecten •  Testen vergemakkelijken •  Bugs sneller oplossen •  Meer tijd voor vette dingen
38. OVERDRACHT •  Mirabeau is een groot bedrijf •  Flexibiliteit is nodig •  Overdragen van werk kost tijd
39. FRONT-END DEVELOPERS ZIJN EIGENLIJK DE ECHTE DESIGNERS VAN NU Henk Haaima, art director
40. SAMEN AAN DE SLAG Webdesign done right
41. EN VERDER ü Embedding brand values ü Style definition ü Visual & interaction principles ü Team integration Design Interaction
42. De heilige graal DE BESTE STYLEGUIDE
43. die is er niet
44. ER ZIJN HEEL VEEL •  KSS •  SourceJS •  Style Prototype •  SC5 •  …
45. WAAROM NIET? •  Te technisch •  Weinig aansluiting gebruikte tools •  Afhankelijkheid van derden •  Aanpasbaarheid lastig •  …
46. demo
48. GEVOLGEN •  Meer bewustzijn bij iedereen •  Controle over uitwerking •  Designers meer betrokken bij uitvoering
49. Sneller & beter werken FRONTEND BASELINE
50. KLANTEN VERWACHTEN KWALITEIT & CONTINUITEIT Ongeacht wie er aan het project werkt
51. STANDAARD •  Kleuren & typografie •  Formulieren •  Hoe zet je het project op? •  Varianten van een component? •  Responsive states
52. BETER SAMENWERKEN •  Zorg voor werkafspraken •  Richtlijnen per vakgebied •  Iedereen raakt bekend met tools
53. HOE INTEGREREN? •  Bouw zelf iets •  Gebruik het •  Leer designers •  Presenteer ermee
54. HOE VERDER? •  Toegankelijkheid voor iedereen •  Documentatie standaardiseren •  Alles makkelijker maken
56. LEES VERDER •  http://tiny.cc/pdf-naar-styleguide •  https://github.com/mirabeau-nl/ frontend-bootstrap
57. vragen
58. visuals door Ewout van Lambalgen