Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Tricothomy of UI Development

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

The Tricothomy of UI Development

Avatar for Andrei Pfeiffer

Andrei Pfeiffer

November 27, 2019

More Decks by Andrei Pfeiffer

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

Other Decks in Programming

See All in Programming
Apache Hive: そしてCloud Native Lakehouseへ
Avatar for okumin okumin
1
200
Apache Hive: Toward a Cloud Native Lakehouse
Avatar for okumin okumin
0
180
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
290
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
Avatar for endo shiki shiki_kakaku
0
1.6k
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
Avatar for ternbusty ternbusty
1
120
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
170
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ～ 一本の登り道の、行き先 ～
Avatar for HideyukiKitao panda728
PRO
0
200
yield再入門 #phpcon
Avatar for hideki kinjyo o0h
PRO
0
910
ビデオ通話が繋がる0.2秒で何が起きているのか
Avatar for Miyamoto Naoyuki supurazako
2
170
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計｜Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
Avatar for Tomohisa Takaoka tomohisa
1
520
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
Avatar for Kanaru kanaru0928
0
200
霧の中の代数的エフェクト
Avatar for funnycat funnyycat
1
450

Featured

See All Featured
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
240
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
610
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.9k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
170
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.8k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
240
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
420
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
300
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k

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