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

UI Fundamentals for Programmers

Avatar for Juanda Zapata Juanda Zapata
September 24, 2015
Programming
290
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
80
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
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
190
Built Our Own Background Agent at LayerX #aidevex_findy
Avatar for LayerX layerx
PRO
9
4.3k
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
130
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
120
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ～ 一本の登り道の、行き先 ～
Avatar for HideyukiKitao panda728
PRO
0
200
yield再入門 #phpcon
Avatar for hideki kinjyo o0h
PRO
0
860
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
Avatar for nori se4weed
1
300
Terraform標準の組織で AWS CDKをどう使うか
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
450
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
2.7k
信頼性について考えてみる（SRE NEXT 2026 miniLT）
Avatar for hayama hayama17
0
230
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
Avatar for petamoriken / 森建 petamoriken
0
190
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
12
17k

Featured

See All Featured
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
430
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
470
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
650
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
290
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
66
57k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
190
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
450
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
1
34k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
500
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k

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?