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
300
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
82
Adapter Pattern
Avatar for Juanda Zapata juanzuluaga
0
180
Maintainable CSS
Avatar for Juanda Zapata juanzuluaga
0
87
Elixir 101 - The Erlang VM
Avatar for Juanda Zapata juanzuluaga
5
340
UI fundamentals for programmers
Avatar for Juanda Zapata juanzuluaga
0
400
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
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
3
480
【DroidKaigi 2026】「アクセシビリティを利用するとき、 アクセシビリティもまたこちらを利用している」 〜マルウェアによる攻撃と防衛について〜
Avatar for HalunoYo. halunoyo
0
410
異なる設計思想のフレームワークを経験して得た学び
Avatar for amekuhideki amekuhideki
2
1.5k
アクセシビリティから考える情報設計
Avatar for high-g high_g_engineer
0
320
業務時間外もAIに働いてもらう話
Avatar for taki colorful12
3
10k
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
4
3.3k
typoなんかねぇよ
Avatar for らすぴー raspython3
0
670
What We Talk About When We Talk About XP
Avatar for seki at druby.org m_seki
2
410
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
Avatar for SlashNephy slashnephy
0
220
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
Avatar for bash0C7 bash0c7
0
150
AIの中の人になってみる
Avatar for tkym htkym
0
170
思考垂れ流し開発　～音声入力 × AIエージェント × 開発ハーネスによる試行錯誤～
Avatar for NPOS npostring
0
970

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.8k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
300
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.8k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
500
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
450
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
4
600
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
270

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?