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
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
990
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
140
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
470
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
640
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
230
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
370
現場で役立つAPIデザイン
nagix
32
11k
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
3
300
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
210
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
150
The Future of SEO: The Impact of AI on Search
badams
0
160
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
120
Featured
See All Featured
Code Review Best Practice
trishagee
66
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Designing for humans not robots
tammielis
250
25k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Why Our Code Smells
bkeepers
PRO
336
57k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
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