Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

UI Fundamentals for Programmers

Avatar for Juanda Zapata Juanda Zapata
September 24, 2015
Programming
330
0

UI Fundamentals for Programmers

UI fundamentals for programmers. Chilango Rails Mexico DF.

Avatar for Juanda Zapata

Juanda Zapata

September 24, 2015

More Decks by Juanda Zapata

See All by Juanda Zapata
Principles of Visual Design
Avatar for Juanda Zapata juanzuluaga
0
85
Adapter Pattern
Avatar for Juanda Zapata juanzuluaga
0
180
Maintainable CSS
Avatar for Juanda Zapata juanzuluaga
0
89
Elixir 101 - The Erlang VM
Avatar for Juanda Zapata juanzuluaga
5
340
UI fundamentals for programmers
Avatar for Juanda Zapata juanzuluaga
0
410
Programming in paradise
Avatar for Juanda Zapata juanzuluaga
1
150
Intro to Ruby
Avatar for Juanda Zapata juanzuluaga
1
700

Other Decks in Programming

See All in Programming
Web Framework Benchmark Battle 2026, Any%
Avatar for Akira Matsuda a_matsuda
3
3.2k
AI時代のシニアエンジニアとは
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
15
11k
AIが実装を担う時代の「技術設計」と「チームマネジメント」
Avatar for Kaito Minatoya kamina_zzz
2
250
Seven New Principles of Software Engineering
Avatar for Yegor Bugayenko yegor256
0
470
エージェントを使い続けるためのメタワーク / Meta-work for keeping using the agent
Avatar for r-kagaya rkaga
6
2.3k
DroidKnights 2026 Android A2UI Jetpack Compose 기반의 안전한 AI UI 렌더링 - 박제창
Avatar for JaiChangPark itsmedreamwalker
1
220
そのデザイントークン、Flutterでも同じ見た目になりますか？
Avatar for nakamizu nakamizu
0
330
全ての永続トークンを、生まれる前に消し去りたい！
Avatar for sylph01 sylph01
3
1.7k
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
420
Apple Intelligenceとオンデバイス時代の到来
Avatar for Yahiro Sugiyama yahir0
0
240
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
Avatar for aoshi aoshi
0
650
複数ドメインを一つのアプリに統合するFlutterの設計と運用_FlutterKaigi2026登壇資料（須永高弘）
Avatar for 須永高弘 takahirosunaga
0
170

Featured

See All Featured
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
11
37k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.5k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
470
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
68
60k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
640
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
380
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
70
68k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
3k

Transcript

  1. UI FUNDAMENTALS for programmers

  2. @juanzuluaga

  3. None

  4. personal experiences and discussions

  5. UI

  6. is everywhere!

  7. UI presentations

  8. UI presentations emails

  9. UI presentations emails television

  10. UI presentations emails television software

  11. UI presentations emails television software

  12. UI is another layer of your software

  13. None

  14. database, etc

  15. business rules database, etc

  16. UI business rules database, etc

  17. for some people, the UI is the software!

  18. software is not about requirements

  19. None

  20. it's about people

  21. mental models

  22. [email protected] ***************

  23. None

  24. Your payment failed Your payment was successful

  25. a mental model is a preconception

  26. the user feels stressed when that preconception is not met

  27. None

  28. a stressed user means that you're losing money

  29. least effective difference

  30. 1 2 3 4 5 6 7 8 9

  31. 1 2 3 4 5 6 7 8 9

  32. less is more

  33. None

  34. fitt's law

  35. the larger an item is, and the closer it is

    to your cursor the easier it is to click on
  36. None

  37. stress

  38. a stressed user means that you're losing money

  39. None
  40. None
  41. None
  42. None

  43. fluxes

  44. stop spiting your DB schema into the UI

  45. stop for a minute and think

  46. design actions, not screens

  47. add a phone number

  48. add a phone number delete a blog post

  49. add a phone number delete a blog post view my

    hostel bookings

  50. break each action in three steps

  51. 1. how
 how do I get there? which sections take

    me there?
  52. None

  53. 2. what
 add a new contact into the platform

  54. None

  55. 3. later
 what happens after I completed the action

  56. None

  57. color psychology

  58. excitement
 energy fun increases heart rate stimulate appetite

  59. None

  60. calming
 lowers aggressiveness

  61. men's favorite lowers appetite lowers heart rate increases productivity

  62. eye tiring grabs attention quickly taxis and warning signs around

    the world babies cry more in yellow rooms uncomfortable and stressful if used in excess
  63. None

  64. pure
 innocent doctors and hospitals

  65. elegance power status

  66. None

  67. tools

  68. bootstrap getbootstrap.com

  69. coolors coolors.co

  70. consume products with good UI

  71. thanks!

  72. questions?