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
150
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
990
Testing Layers - ngBigParty
andreipfeiffer
0
73
Automatizarea proceselor cu Grunt
andreipfeiffer
0
130
Other Decks in Programming
See All in Programming
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
760
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
3
370
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
130
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
330
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
140
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
330
情報漏洩させないための設計
kubotak
1
130
HTTP compression in PHP and Symfony apps
dunglas
2
1.7k
nekko cloudにおけるProxmox VE利用事例
irumaru
3
430
From Translations to Multi Dimension Entities
alexanderschranz
2
130
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The World Runs on Bad Software
bkeepers
PRO
65
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Unsuck your backbone
ammeep
669
57k
Facilitating Awesome Meetings
lara
50
6.1k
GraphQLとの向き合い方2022年版
quramy
44
13k
Making the Leap to Tech Lead
cromwellryan
133
9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
Agile that works and the tools we love
rasmusluckow
328
21k
Building Adaptive Systems
keathley
38
2.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
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