SlideShare une entreprise Scribd logo
1  sur  101
Télécharger pour lire hors ligne
Nightof the
LIVINGstyleguides
triggersandsparks.com/talks/styleguide @sarahsemark
Night
LIVINGstyleguides
triggersandsparks.com/talks/styleguide @sarahsemark
of the
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
what
it’s
alive!
why
fitter
happier
moreproductive
how
tools
important
Night of the living style guides (front endnorth)
Whatisthatthing?
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
changes
it’salive!
it’salive!
(well, at least sort of)
magic!
pattern
library
components
toolkit
style guide
style tiles
element
collages
atomic

design
design
documentation
WhydoIneedone?
consistency
consistency
consistency
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
abetter
workflow
dominos
nomore
test
more!
Night of the living style guides (front endnorth)
selfietime!
performance
isadesignproblem
dust me selectors
dust me selectors
happier
co-workers
showoff
alittle
Night of the living style guides (front endnorth)
beauty
more
Whatgoesinside?
branding
colours
colours
typography
forms
layout
icons
components
animations
codestandards
copy
what PRIMARY ACCENT
medium blue
how
what PRIMARY ACCENT
medium blue
#86C8DB
$color__blue-medium
how
what
why
PRIMARY ACCENT
medium blue
#86C8DB
$color__blue-medium
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Howtogetstarted
barely
breathing
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
resurrected
getting
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
wireframes
styleguide
=website!
+
Night of the living style guides (front endnorth)
github.com/sarahmonster/zombie-style-guide
looking
livelier...
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
avoiding
zombies
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
whatworks
foryou
findout
Thisoneweirdtrick…
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
tints
shades
#00824D
rgb(0, 130, 77)
hsb(155, 100%, 50%)
hue
saturation
brightness
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
togodarker...
red
0 green
120 blue
240
green
120new colour!
130
S: 65, L: 40
original
144
S: 60, L: 50
togodarker...
togolighter...
yellow
60 cyan
180 magenta
300
cyan
180new colour!
150
S: 40, L: 70
original
144
S: 60, L: 50
togolighter...
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Night of the living style guides (front endnorth)
Thankyou!
Thankyou!triggersandsparks.com/talks/styleguide @sarahsemark

Contenu connexe

Similaire à Night of the living style guides (front endnorth)

Come creare e manutenere una Styleguide visiva per i tuoi clienti - Fabio Fab...
Come creare e manutenere una Styleguide visiva per i tuoi clienti - Fabio Fab...Come creare e manutenere una Styleguide visiva per i tuoi clienti - Fabio Fab...
Come creare e manutenere una Styleguide visiva per i tuoi clienti - Fabio Fab...Codemotion
 
Living Styleguide: design and development workflows
Living Styleguide: design and development workflowsLiving Styleguide: design and development workflows
Living Styleguide: design and development workflowsFabio Fabbrucci
 
The unbearable likeness of web design
The unbearable likeness of web designThe unbearable likeness of web design
The unbearable likeness of web designsarah semark
 
How to Design a Killer Deck - 8 Essential Tips in Presentation Design
How to Design a Killer Deck - 8 Essential Tips in Presentation DesignHow to Design a Killer Deck - 8 Essential Tips in Presentation Design
How to Design a Killer Deck - 8 Essential Tips in Presentation DesignCarole Alalouf
 
Webpage Design Basics for Non-Designers
Webpage Design Basics for Non-DesignersWebpage Design Basics for Non-Designers
Webpage Design Basics for Non-DesignersMike Wilcox
 
Design for non-designers: five visual principles to guide you
Design for non-designers: five visual principles to guide youDesign for non-designers: five visual principles to guide you
Design for non-designers: five visual principles to guide youDavid Hall
 
Mastering Podcast Promotion
Mastering Podcast PromotionMastering Podcast Promotion
Mastering Podcast PromotionJeff Sieh
 
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style GuideSimplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style GuideMark Meeker
 
What Can Creative Leaders Learn from Rockstars?
What Can Creative Leaders Learn from Rockstars?What Can Creative Leaders Learn from Rockstars?
What Can Creative Leaders Learn from Rockstars?tim richards
 
Effective Pair Programming
Effective Pair ProgrammingEffective Pair Programming
Effective Pair ProgrammingDaniel Jimenez
 
How brands make design choices
How brands make design choicesHow brands make design choices
How brands make design choicesVinay Dixit
 
Exploring the Design Process
Exploring the Design ProcessExploring the Design Process
Exploring the Design ProcessStacy Kvernmo
 
Back to blogging school blog design 9 27-14 full
Back to blogging school blog design 9 27-14 fullBack to blogging school blog design 9 27-14 full
Back to blogging school blog design 9 27-14 fullJenni Bost
 
The unbearable likeness of web design
The unbearable likeness of web designThe unbearable likeness of web design
The unbearable likeness of web designSarah Semark
 
Design and Visual Identity
Design and Visual Identity  Design and Visual Identity
Design and Visual Identity Ankit Khandelwal
 
un-suck your presentations
un-suck your presentationsun-suck your presentations
un-suck your presentationsAaron Levy
 

Similaire à Night of the living style guides (front endnorth) (20)

Design 123
Design 123Design 123
Design 123
 
I am-designer
I am-designerI am-designer
I am-designer
 
I am-designer
I am-designerI am-designer
I am-designer
 
Come creare e manutenere una Styleguide visiva per i tuoi clienti - Fabio Fab...
Come creare e manutenere una Styleguide visiva per i tuoi clienti - Fabio Fab...Come creare e manutenere una Styleguide visiva per i tuoi clienti - Fabio Fab...
Come creare e manutenere una Styleguide visiva per i tuoi clienti - Fabio Fab...
 
Living Styleguide: design and development workflows
Living Styleguide: design and development workflowsLiving Styleguide: design and development workflows
Living Styleguide: design and development workflows
 
The unbearable likeness of web design
The unbearable likeness of web designThe unbearable likeness of web design
The unbearable likeness of web design
 
How to Design a Killer Deck - 8 Essential Tips in Presentation Design
How to Design a Killer Deck - 8 Essential Tips in Presentation DesignHow to Design a Killer Deck - 8 Essential Tips in Presentation Design
How to Design a Killer Deck - 8 Essential Tips in Presentation Design
 
Webpage Design Basics for Non-Designers
Webpage Design Basics for Non-DesignersWebpage Design Basics for Non-Designers
Webpage Design Basics for Non-Designers
 
Design for non-designers: five visual principles to guide you
Design for non-designers: five visual principles to guide youDesign for non-designers: five visual principles to guide you
Design for non-designers: five visual principles to guide you
 
Mastering Podcast Promotion
Mastering Podcast PromotionMastering Podcast Promotion
Mastering Podcast Promotion
 
Simplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style GuideSimplifying Massive Changes with a Live Style Guide
Simplifying Massive Changes with a Live Style Guide
 
What Can Creative Leaders Learn from Rockstars?
What Can Creative Leaders Learn from Rockstars?What Can Creative Leaders Learn from Rockstars?
What Can Creative Leaders Learn from Rockstars?
 
Effective Pair Programming
Effective Pair ProgrammingEffective Pair Programming
Effective Pair Programming
 
How brands make design choices
How brands make design choicesHow brands make design choices
How brands make design choices
 
Branding Aiesec
Branding AiesecBranding Aiesec
Branding Aiesec
 
Exploring the Design Process
Exploring the Design ProcessExploring the Design Process
Exploring the Design Process
 
Back to blogging school blog design 9 27-14 full
Back to blogging school blog design 9 27-14 fullBack to blogging school blog design 9 27-14 full
Back to blogging school blog design 9 27-14 full
 
The unbearable likeness of web design
The unbearable likeness of web designThe unbearable likeness of web design
The unbearable likeness of web design
 
Design and Visual Identity
Design and Visual Identity  Design and Visual Identity
Design and Visual Identity
 
un-suck your presentations
un-suck your presentationsun-suck your presentations
un-suck your presentations
 

Dernier

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 

Dernier (19)

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 

Night of the living style guides (front endnorth)