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
710
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
1.1k
CSS in the editor
tammielis
0
320
Global styles the story so far
tammielis
1
800
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.3k
Being Brave
tammielis
2
1.7k
Lessons from growing design in the open
tammielis
0
1.1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
780
Opportunity of Open Source
tammielis
0
640
Other Decks in Design
See All in Design
root COMPANY DECK / We are hiring!
root_recruit
PRO
1
24k
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
150
maki setoguchi
maki_setoguchi
0
540
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
200
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
170
「UXとUIの違い」v2
shirasu3
0
270
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4.4k
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
250
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
160
portfolio.pdf
onof003
0
210
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
720
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.5k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Leading Effective Engineering Teams in the AI Era
addyosmani
8
720
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Six Lessons from altMBA
skipperchong
29
4k
Designing Experiences People Love
moore
142
24k
A Modern Web Designer's Workflow
chriscoyier
697
190k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
Fireside Chat
paigeccino
41
3.7k
A better future with KSS
kneath
239
18k
Site-Speed That Sticks
csswizardry
13
940
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