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
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
67
A Vue over React
andreipfeiffer
6
1k
Testing Layers - ngBigParty
andreipfeiffer
0
89
Automatizarea proceselor cu Grunt
andreipfeiffer
0
150
Other Decks in Programming
See All in Programming
自動化したのに回らない テスト運用の壁―AI時代の品質責任と生産性
mfunaki
0
440
jsmini JavaScript Engine を作ってみた話
yosuke_furukawa
PRO
0
350
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
dachi023
0
7.7k
言葉の格闘技のススメ~紙とペンと言葉から始める、キャリアの描き方~
progresscicada
2
170
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
junyaokabe
0
120
まだ間に合う!今年の夏こそSchemeのマクロ展開器を完全理解!
omasanori
0
470
Loosening the Reins: Go Generics Get More Flexible
kuro_kurorrr
0
300
Flow は今どうなっているか
mizdra
PRO
0
690
コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo
izumin5210
0
210
「寝てても仕事が進む」Claude Codeで組む第二の脳
tomoyafujita2016
0
350
AI Engineeringは、AIプロダクトだけのものか? 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
rkaga
5
520
Pythonの実行はどこまで賢くなったのか? CPythonとPyPyから見る最適化のしくみ
curekoshimizu
3
1.8k
Featured
See All Featured
Design in an AI World
tapps
1
290
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
250
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
280
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
500
How to make the Groovebox
asonas
2
2.3k
KATA
mclloyd
PRO
35
15k
How to Talk to Developers About Accessibility
jct
2
520
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
4 Signs Your Business is Dying
shpigford
187
23k
The Spectacular Lies of Maps
axbom
PRO
1
940
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