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
45
A Vue over React
andreipfeiffer
6
1k
Testing Layers - ngBigParty
andreipfeiffer
0
73
Automatizarea proceselor cu Grunt
andreipfeiffer
0
130
Other Decks in Programming
See All in Programming
Flatt Security XSS Challenge 解答・解説
flatt_security
0
730
ASP.NET Core の OpenAPIサポート
h455h1
0
120
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
300
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
250
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
360
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
950
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
590
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
1.2k
Scaling your build logic
antalmonori
1
100
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
420
ドメインイベント増えすぎ問題
h0r15h0
2
570
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
A designer walks into a library…
pauljervisheath
205
24k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Six Lessons from altMBA
skipperchong
27
3.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
A better future with KSS
kneath
238
17k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
How GitHub (no longer) Works
holman
312
140k
Navigating Team Friction
lara
183
15k
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