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
Andrei Pfeiffer
November 27, 2019
Programming
0
160
The Tricothomy of UI Development
Andrei Pfeiffer
November 27, 2019
Tweet
Share
More Decks by Andrei Pfeiffer
See All by Andrei Pfeiffer
How Full is your Stack?
andreipfeiffer
2
47
A Vue over React
andreipfeiffer
6
1k
Testing Layers - ngBigParty
andreipfeiffer
0
74
Automatizarea proceselor cu Grunt
andreipfeiffer
0
130
Other Decks in Programming
See All in Programming
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
Hack Claude Code with Claude Code
choplin
5
2.3k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
220
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
810
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
4
510
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
Deep Dive into ~/.claude/projects
hiragram
14
4.5k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
600
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
230
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
It's Worth the Effort
3n
185
28k
Side Projects
sachag
455
42k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
BBQ
matthewcrist
89
9.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
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