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
Thinking in patterns - London Sass version
Search
Tammie Lister
February 14, 2016
Design
2
600
Thinking in patterns - London Sass version
This is an iteration on my thinking in patterns talk for London Sass in Feb 2016.
Tammie Lister
February 14, 2016
Tweet
Share
More Decks by Tammie Lister
See All by Tammie Lister
Growing the WordPress design system
tammielis
1
970
CSS in the editor
tammielis
0
240
Global styles the story so far
tammielis
1
640
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.1k
Being Brave
tammielis
2
1.5k
Lessons from growing design in the open
tammielis
0
980
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
610
Opportunity of Open Source
tammielis
0
550
Other Decks in Design
See All in Design
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
150
アフォーダンスとシグニファイア
ryokanakai
1
320
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
200
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.8k
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
890
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
410
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
490
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
180
ブランドづくりの双視点 - GUILD #31 ブランディング勉強会
yampuu
0
110
Arborea Art Book
thebogheart
1
290
Slip N Slime - Character Design Ideation
thebogheart
0
310
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
290
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Automating Front-end Workflow
addyosmani
1366
200k
A Tale of Four Properties
chriscoyier
156
23k
Teambox: Starting and Learning
jrom
133
8.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Navigating Team Friction
lara
183
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Music & Morning Musume
bryan
46
6.2k
Transcript
THINKING IN PATTERNS
None
Atomic Style Guide Component Pattern Library
None
None
EVOLUTION
None
None
school /s/-/k/-/oo/-/l/
A successful person isn't necessarily be er than her less
successful peers at solving problems; her pa ern-recognition facilities have just learned what problems are worth solving. - RAY KURZWEIL
DESIGN
To work our way towards a shared language once again,
we must first learn how to discover pa erns which are deep, and capable of generating life. - CHRISTOPHER ALEXANDER
PATTERNS
None
None
ui-pa erns.com/pa erns
None
PATTERN ANALYSIS
None
None
Everything should begin with research
None
None
None
None
None
None
None
PATTERN LIBRARY?
Speed
Iteration
Consistency
we define our design in a single location and use
a system to cascade it down to all platforms. We call it our Single Source of Truth. - LIVING DESIGN SYSTEMS @SALES FORCE
Understanding
THEME pa ern library
Pa ern library : WITHOUT DESIGN Style guide : WITH
DESIGN
None
not a design process. It’s manufacturing. It’s a cupcake machine
churning out identical cakes with different icing. But they all taste the same. - MARK BOULTON
None
= RJ : NYC Lego Street Art
Colville -Anderson
Colville -Anderson Eirik Newth
Nathan Sawaya
None
The Art of the Brick Expo
Without foundations, there can be no fashion. - CHRISTIAN DIOR
Always leave your library OPEN
None
None
James F Clay
None
components.underscores.me github.com/Automa ic/theme-components
None
SASS in components
None
None
??
??
Jeff Eaton
None
Tammie Lister @karmatosed THANKS, ANY QUESTIONS?
RESOURCES h p://pa ernlab.io/resources.html h p://clearleft.com/thinks/165 h p://ui-pa erns.com/ h
p://styleguides.io h ps://medium.com/@bradhaynes/designing-products-that-scale- c8f3001f709b h p://markboulton.co.uk/journal/design-abstraction-escalation