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
0
160

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
51
A Vue over React
Avatar for Andrei Pfeiffer andreipfeiffer
6
1k
Testing Layers - ngBigParty
Avatar for Andrei Pfeiffer andreipfeiffer
0
79
Automatizarea proceselor cu Grunt
Avatar for Andrei Pfeiffer andreipfeiffer
0
130

Other Decks in Programming

See All in Programming
コードとあなたと私の距離 / The Distance Between Code, You, and I
Avatar for YAMAOKA Hiroyuki hiro_y
0
110
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
Avatar for aokirishima aokswork3
0
220
あなたとKaigi on Rails / Kaigi on Rails + You
Avatar for Hiroshi Shimoju shimoju
0
120
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
Avatar for もっち mottyzzz
10
6.6k
What's new in Spring Modulith?
Avatar for Oliver Drotbohm olivergierke
1
140
After go func(): Goroutines Through a Beginner’s Eye
Avatar for Vaibhav Gupta 97vaibhav
0
360
ポスターセッション: 「まっすぐ行って、右！」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
Avatar for komo_fr komofr
0
1.2k
大規模アプリのDIフレームワーク刷新戦略 ～過去最大規模の並行開発を止めずにアプリ全体に導入するまで～
Avatar for GO Inc. dev mot_techtalk
0
430
アメ車でサンノゼを走ってきたよ！
Avatar for Shigure Shimotori s_shimotori
0
220
Writing Better Go: Lessons from 10 Code Reviews
Avatar for Konrad Reiche konradreiche
0
170
(Extension DC 2025) Actor境界を越える技術
Avatar for Himeshi teamhimeh
1
250
The Flutter Journey of Building a Live Streaming App — With a Side of Performance Tuning
Avatar for Sugiy u503
1
110

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.3k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
20k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Making Projects Easy
Avatar for Brett Harned brettharned
119
6.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
KATA
Avatar for Megan Lloyd mclloyd
32
15k

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