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

Other Decks in Programming

See All in Programming
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.3k
Reactive ❤️ Loom: A Forbidden Love Story
Avatar for Francesco Nigro franz1981
2
210
Nuxt Server Components
Avatar for wattanx wattanx
0
220
今年もTECHSCOREブログを書き続けます！
Avatar for 平奥真一（ひらおくしんいち） hiraoku101
0
200
ロボットのための工場に灯りは要らない
Avatar for watany watany
12
3.2k
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
Avatar for shin1x1 shin1x1
0
270
最初からAWS CDKで技術検証してもいいんじゃない？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
4
180
GoのDB アクセスにおける 「型安全」と「柔軟性」の両立 - Bob という選択肢
Avatar for tak tak848
0
290
OTP を自動で入力する裏技
Avatar for Megabits_mzq megabitsenmzq
0
130
「速くなった気がする」をデータで疑う
Avatar for Leaf senleaf24
0
110
CS教育のDX AIによる育成の効率化
Avatar for ニフティ株式会社 niftycorp
PRO
0
170
AI-DLC 入門 〜AIコーディングの本質は「コード」ではなく「構造」〜 / Introduction to AI-DLC: The Essence of AI Coding Is Not “Code” but “Structure”
Avatar for shiro seike seike460
PRO
0
130

Featured

See All Featured
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
190
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
280
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
950
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
190
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
280
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
53k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.8k

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