Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Werken in stijl
Search
Sybren Wartna
June 25, 2015
Technology
0
76
Werken in stijl
Sybren Wartna
June 25, 2015
Tweet
Share
More Decks by Sybren Wartna
See All by Sybren Wartna
Typography on the web
syb
0
68
Everything can break
syb
1
80
Responsive webdesign - webdesign done right
syb
3
290
Other Decks in Technology
See All in Technology
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
570
私が trocco を推す理由
__allllllllez__
1
220
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
520
アクセス制御にまつわる改善 / Improving access control
itkq
0
530
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
730
MapLibreとAmazon Location Service
dayjournal
1
150
本当のAWS基礎
toru_kubota
0
520
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
310
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
360
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
200
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
Cracking the KubeCon CfP
inductor
2
250
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Web Components: a chance to create the future
zenorocha
305
41k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
A Modern Web Designer's Workflow
chriscoyier
689
190k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Statistics for Hackers
jakevdp
789
220k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Unsuck your backbone
ammeep
663
57k
Building Adaptive Systems
keathley
31
1.9k
Transcript
None
Styleguides & werkwijze WERKEN IN STIJL
IK BEN SYB • Front-end designer • Afgestudeerd in 2011
• Responsive design • Typografie
None
travel retail finance b2b
INHOUD • Praktijkvoorbeelden • Waarom styleguides • De beste styleguide
• Tips voor werkwijze
Even door de tijd HOE MIRABEAU WERKT MET STYLEGUIDES
NATIONALE- NEDERLANDEN
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
None
COMPONENTEN- LIBRARY • Alles moet handmatig • Veel extra werk
• Geen documentatie voor backend • Visual Design kijkt er niet naar
None
None
None
None
ALGEMENE PROBLEMEN • Documenten niet in sync • Heel veel
uur werk PDF • Klant kijkt wel naar styleguide
TRANSAVIA
EEN ANDER PROJECT • Scrum • Iedereen betrokken • Nieuwe
site, nieuwe stijl • Voorbereiding op rebranding
ONLINE STYLEGUIDE • Designen in de browser & Photoshop •
VD & IO hadden ook andere deliverables • Alles op één URL te vinden • Toegankelijker
None
None
None
None
HEEL VET • Reclamebureau gebruikte het als basis • Klant
gebruikte het in meetings • Collega’s wilden het ook gebruiken
LEASEPLAN
DYNAMIC STYLEGUIDE • Eindelijk automatisch • Visual design • Interaction
design • Documentatie voor backend • Basis voor testen
None
None
None
Straks meer…
DYNAMIC STYLEGUIDE • Meer web based • Sneller • Nóg
toegankelijker • Realistisch ontwerp tonen
Alles is beter WAAROM DEZE WERKMETHODE?
JE HEBT GEEN CONTROLE OVER HOE HET DESIGN ERUIT KOMT
TE ZIEN Het web van nu kan & hoeft niet pixel perfect
RESPONSIVE DESIGN • Photoshop is niet meer genoeg • Alles
moet schaalbaar zijn • Componenten veranderen in het proces
PERFECTE INTEGRATIE Product backlog Sprint backlog Sprint Demo
AUTOMATISEREN • Veel werk is hetzelfde in projecten • Testen
vergemakkelijken • Bugs sneller oplossen • Meer tijd voor vette dingen
None
OVERDRACHT • Mirabeau is een groot bedrijf • Flexibiliteit is
nodig • Overdragen van werk kost tijd
FRONT-END DEVELOPERS ZIJN EIGENLIJK DE ECHTE DESIGNERS VAN NU Henk
Haaima, art director
SAMEN AAN DE SLAG Webdesign done right
EN VERDER ü Embedding brand values ü Style definition ü Visual & interaction
principles ü Team integration Design Interaction
De heilige graal DE BESTE STYLEGUIDE
die is er niet
ER ZIJN HEEL VEEL • KSS • SourceJS • Style
Prototype • SC5 • …
WAAROM NIET? • Te technisch • Weinig aansluiting gebruikte tools
• Afhankelijkheid van derden • Aanpasbaarheid lastig • …
demo
None
GEVOLGEN • Meer bewustzijn bij iedereen • Controle over uitwerking
• Designers meer betrokken bij uitvoering
Sneller & beter werken FRONTEND BASELINE
KLANTEN VERWACHTEN KWALITEIT & CONTINUITEIT Ongeacht wie er aan het
project werkt
STANDAARD • Kleuren & typografie • Formulieren • Hoe zet
je het project op? • Varianten van een component? • Responsive states
BETER SAMENWERKEN • Zorg voor werkafspraken • Richtlijnen per vakgebied
• Iedereen raakt bekend met tools
HOE INTEGREREN? • Bouw zelf iets • Gebruik het •
Leer designers • Presenteer ermee
HOE VERDER? • Toegankelijkheid voor iedereen • Documentatie standaardiseren •
Alles makkelijker maken
None
LEES VERDER • http://tiny.cc/pdf-naar-styleguide • https://github.com/mirabeau-nl/ frontend-bootstrap
vragen
visuals door Ewout van Lambalgen