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
87
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
74
Everything can break
syb
1
91
Responsive webdesign - webdesign done right
syb
3
300
Other Decks in Technology
See All in Technology
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
現場で役立つAPIデザイン
nagix
29
10k
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
FastConnect の冗長性
ocise
1
9.6k
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
Featured
See All Featured
BBQ
matthewcrist
86
9.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Practical Orchestrator
shlominoach
186
10k
For a Future-Friendly Web
brad_frost
176
9.5k
GraphQLとの向き合い方2022年版
quramy
44
13k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
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