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
The Tricothomy of UI Development
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Andrei Pfeiffer
November 27, 2019
Programming
180
0
Share
The Tricothomy of UI Development
Andrei Pfeiffer
November 27, 2019
More Decks by Andrei Pfeiffer
See All by Andrei Pfeiffer
How Full is your Stack?
andreipfeiffer
2
58
A Vue over React
andreipfeiffer
6
1k
Testing Layers - ngBigParty
andreipfeiffer
0
86
Automatizarea proceselor cu Grunt
andreipfeiffer
0
140
Other Decks in Programming
See All in Programming
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
nrslib
11
3k
サーバーレスで作る、動画データ管理基盤
oyasumipants
0
310
AI駆動開発で崩れていくコードベースを立て直す
kyoko_nr_nr
1
390
1人1案件のプロダクトエンジニア時代に、"プロセス監督"としてチャレンジしたこと
non0113
0
350
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
susisu
1
1.3k
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
3
460
ECR拡張スキャンでSBOMを収集して サプライチェーン攻撃の影響調査を 爆速で終わらせてみた
akihisaikeda
2
210
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
minako__ph
4
1.1k
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
kuranuki
1
480
TSKaigi 2026 TypeScriptバックエンドのオブザーバビリティ戦略 — Datadog × NestJSの実践
taiseiyamamotoan
1
210
TypeSpec で繋ぐ複数プロダクトの型安全
maroon8021
1
260
LLM Plugin for Node-REDの利用方法と開発について
404background
0
130
Featured
See All Featured
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.5k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.3k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
130
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
370
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
Prompt Engineering for Job Search
mfonobong
0
320
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
350
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
240
Transcript
THE TRICOTHOMY OF UI DEVELOPMENT
UI
USER INTERFACE
INTERFACE
The shared boundary between 2 components of a system that
allows them to exchange information
None
None
None
THINKING LIKE A FRONT-END DEVELOPER CHRIS COYIER
DESIGN, CSS/SVG UX, A11Y FRAMEWORKS, BUNDLERS CSS-IN-JS, ARCHITECTURE
None
ANDREI PFEIFFER CODE DESIGNER EVENT ORGANIZER TECHNICAL WRITER
None
None
None
FRONT-END BACK-END PUBLIC ACCESS CLIENT FACING LIMITED ACCESS BACK OFFICE
CLIENT FACING BACK OFFICE
CLIENT FACING vs. BACK OFFICE
BACK OFFICE LAYOUT
CLIENT FACING LAYOUTS
NAVIGATION
TABLES
FORMS
by Alejandro Ausejo
by Olia Gozha
by Peter Deltondo by Anna Wangler
IMAGES
TYPOGRAPHY
ANIMATIONS
CROSS BROWSER
SEO a11y i18n
WEBSITE APP
WEBSITE vs. APP
STATE / DATA MANAGEMENT
None
DESIGN PATTERNS
FRAMEWORKS
None
None
(AUTOMATED) TESTS
COMPONENTS LIBRARY
FEW LAYOUT AESTHETICS ACCESSIBILITY DEVICE SUPPORT SOFTWARE COMPLEXITY CLIENT FACING
WEBSITE BACK OFFICE APP COMPLEX SIMPLE HIGH LOW HIGH LOW HIGH LOW LOW HIGH INTERACTIVITY AUTOMATED TESTS LOW HIGH MANY NO COMPONENTS LIBRARY YES
CLIENT FACING APP BACK OFFICE WEBSITE
CLIENT FACING APP BACK OFFICE WEBSITE
CLIENT FACING WEBSITE
APP BACK OFFICE
WEBSITE BACK OFFICE
CLIENT FACING APP
CLIENT FACING APP
by Darin Senneff
BACK OFFICE APP CLIENT FACING WEBSITE MANY CLIENT FACING APP
COMPLEX HIGH COMPLEX HIGH HIGH HIGH CUSTOM FEW COMPLEX HIGH HIGH HIGH LOW LOW NO SIMPLE LOW LOW LOW HIGH HIGH MANY YES LAYOUT AESTHETICS ACCESSIBILITY DEVICE SUPPORT SOFTWARE COMPLEXITY INTERACTIVITY AUTOMATED TESTS COMPONENTS LIBRARY
CLIENT FACING WEBSITE BACK OFFICE APP CLIENT FACING APP
CLIENT FACING APP ACCOUNTING ISSUE TRACKER CHAT
ACCOUNTING ISSUE TRACKER CHAT USER COUNT / DIVERSITY
CONCLUSIONS
REUSABILITY CUSTOMIZATION CLIENT-FACING APPS
CLIENT-FACING APPS AND REUSABILITY CUSTOMIZATION
REUSABILITY CUSTOMIZATION
None
None
/andreipfeiffer @pfeiffer_andrei /@andrei.pfeiffer THANK YOU