Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

The Tricothomy of UI Development

Avatar for Andrei Pfeiffer Andrei Pfeiffer
November 27, 2019
Programming
0
170

The Tricothomy of UI Development

Avatar for Andrei Pfeiffer

Andrei Pfeiffer

November 27, 2019
Tweet

More Decks by Andrei Pfeiffer

See All by Andrei Pfeiffer
How Full is your Stack?
Avatar for Andrei Pfeiffer andreipfeiffer
2
55
A Vue over React
Avatar for Andrei Pfeiffer andreipfeiffer
6
1k
Testing Layers - ngBigParty
Avatar for Andrei Pfeiffer andreipfeiffer
0
81
Automatizarea proceselor cu Grunt
Avatar for Andrei Pfeiffer andreipfeiffer
0
140

Other Decks in Programming

See All in Programming
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
5
1.3k
CSC509 Lecture 14
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
220
『実践MLOps』から学ぶ DevOps for ML
Avatar for Satsuki Nagae nsakki55
2
550
30分でDoctrineの仕組みと使い方を完全にマスターする / phpconkagawa 2025 Doctrine
Avatar for Takashi Kanemoto ttskch
3
730
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
Avatar for PADAone pd1xx
1
580
CSC305 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
270
「文字列→日付」の落とし穴 〜Ruby Date.parseの意外な挙動〜
Avatar for sg4k0 sg4k0
0
360
テストやOSS開発に役立つSetup PHP Action
Avatar for Atsushi Matsuo matsuo_atsushi
0
140
ソフトウェア設計の課題・原則・実践技法
Avatar for 増田 亨 masuda220
PRO
24
21k
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
Avatar for matsu_chara matsu_chara
1
210
S3 VectorsとStrands Agentsを利用したAgentic RAGシステムの構築
Avatar for とすり tosuri13
5
270
20 years of Symfony, what's next?

Avatar for Fabien Potencier fabpot
2
310

Featured

See All Featured
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
80
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k

Transcript

  1. THE TRICOTHOMY OF UI DEVELOPMENT

  2. UI

  3. USER INTERFACE

  4. INTERFACE

  5. The shared boundary between 2 components of a system that

    allows them to exchange information
  6. None
  7. None
  8. None

  9. THINKING LIKE A FRONT-END DEVELOPER CHRIS COYIER

  10. DESIGN, CSS/SVG UX, A11Y FRAMEWORKS, BUNDLERS CSS-IN-JS, ARCHITECTURE

  11. None

  12. ANDREI PFEIFFER CODE DESIGNER EVENT ORGANIZER TECHNICAL WRITER

  13. None
  14. None
  15. None

  16. FRONT-END BACK-END PUBLIC ACCESS CLIENT FACING LIMITED ACCESS BACK OFFICE

  17. CLIENT FACING BACK OFFICE

  18. CLIENT FACING vs. BACK OFFICE

  19. BACK OFFICE LAYOUT

  20. CLIENT FACING LAYOUTS

  21. NAVIGATION

  22. TABLES

  23. FORMS

  24. by Alejandro Ausejo

  25. by Olia Gozha

  26. by Peter Deltondo by Anna Wangler

  27. IMAGES

  28. TYPOGRAPHY

  29. ANIMATIONS

  30. CROSS BROWSER

  31. SEO a11y i18n

  32. WEBSITE APP

  33. WEBSITE vs. APP

  34. STATE / DATA MANAGEMENT

  35. None

  36. DESIGN PATTERNS

  37. FRAMEWORKS

  38. None
  39. None

  40. (AUTOMATED) TESTS

  41. COMPONENTS LIBRARY

  42. 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

  43. CLIENT FACING APP BACK OFFICE WEBSITE

  44. CLIENT FACING APP BACK OFFICE WEBSITE

  45. CLIENT FACING WEBSITE

  46. APP BACK OFFICE

  47. WEBSITE BACK OFFICE

  48. CLIENT FACING APP

  49. CLIENT FACING APP

  50. by Darin Senneff

  51. 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

  52. CLIENT FACING WEBSITE BACK OFFICE APP CLIENT FACING APP

  53. CLIENT FACING APP ACCOUNTING ISSUE TRACKER CHAT

  54. ACCOUNTING ISSUE TRACKER CHAT USER COUNT / DIVERSITY

  55. CONCLUSIONS

  56. REUSABILITY CUSTOMIZATION CLIENT-FACING APPS

  57. CLIENT-FACING APPS AND REUSABILITY CUSTOMIZATION

  58. REUSABILITY CUSTOMIZATION

  59. None
  60. None

  61. /andreipfeiffer @pfeiffer_andrei /@andrei.pfeiffer THANK YOU