Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
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
190
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
68
A Vue over React
andreipfeiffer
6
1k
Testing Layers - ngBigParty
andreipfeiffer
0
110
Automatizarea proceselor cu Grunt
andreipfeiffer
0
150
Other Decks in Programming
See All in Programming
ハーネス設計入門 〜プロンプト、コンテキストの次〜
kinopeee
56
37k
Webの地図
yosuke_furukawa
PRO
6
4.1k
型解析で実現する Go の言語内 DSL / Conference に Go! タイムテーブルの歩き方 for Gophers
mazrean
0
140
AI Agent時代のリアーキテクチャ戦略と実践
hokaccha
9
3.8k
【高い買い物LT会】初任給で話題の国産フィジカルAIを買った話
akagami
PRO
0
140
Seeing Through Serverless: Observability for AWS Lambda with ADOT and CloudWatch Application Signals
seike460
PRO
1
130
LLMは4年分のCompose移行を再現できるのか?実プロダクト279件のXMLで探る自動化の境界線
makun
0
530
アクセシビリティから考える情報設計
high_g_engineer
0
350
typoなんかねぇよ
raspython3
0
690
[GoCon2026] When Goroutines Are Not Enough: Runtime Locality in High-Throughput Go
takehaya
6
1.8k
AIを上手に使っていこうとしたら越境せざるを得なくなった話 〜実践1年で見えた境界を越えなければならない理由と進め方〜 / Crossing borders with AI
tomoyakitaura
4
1.1k
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
kasacchiful
PRO
1
430
Featured
See All Featured
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
730
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
340
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Designing Experiences People Love
moore
143
24k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
370
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
660
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
Heart Work Chapter 1 - Part 1
lfama
PRO
9
36k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
4.7k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
410
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3k
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