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
270
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
74
Adapter Pattern
Avatar for Juanda Zapata juanzuluaga
0
170
Maintainable CSS
Avatar for Juanda Zapata juanzuluaga
0
85
Elixir 101 - The Erlang VM
Avatar for Juanda Zapata juanzuluaga
5
330
UI fundamentals for programmers
Avatar for Juanda Zapata juanzuluaga
0
390
Programming in paradise
Avatar for Juanda Zapata juanzuluaga
1
140
Intro to Ruby
Avatar for Juanda Zapata juanzuluaga
1
700

Other Decks in Programming

See All in Programming
Vibe NLP for Applied NLP
Avatar for Ines Montani inesmontani
PRO
0
580
CDK Deployのための ”反響定位”
Avatar for watany watany
5
920
Lightning-Fast Method Calls with Ruby 4.1 ZJIT / RubyKaigi 2026
Avatar for Takashi Kokubun k0kubun
3
2.2k
Don't Prompt Harder, Structure Better
Avatar for Yusuke Kita kitasuke
0
810
t *testing.T は どこからやってくるの？
Avatar for Kotaro Otaka otakakot
1
890
【26新卒研修】OpenAPI/Swagger REST API研修
Avatar for ディップ株式会社 dip_tech
PRO
0
130
Agent Skills を社内で育てる仕組み作り
Avatar for jackchuka jackchuka
0
300
(Re)make Regexp in Ruby: Democratizing internals for the JIT
Avatar for TSUYUSATO Kitsune makenowjust
3
970
空間オーディオの活用
Avatar for Yuki Yasoshima objectiveaudio
0
120
How We Practice Exploratory Testing in Iterative Development( #scrumniigata ) / 反復開発の中で、探索的テストをどう実施しているか
Avatar for teyamagu teyamagu
PRO
3
610
PicoRuby for IoT: Connecting to the Cloud with MQTT
Avatar for Y_uuu yuuu
2
730
UIの境界線をデザインする | React Tokyo #15 メイントーク
Avatar for SASAPIYO sasagar
2
420

Featured

See All Featured
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
200
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
820
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
540
Between Models and Reality
Avatar for mayunak mayunak
3
280
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
170
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
180
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.1k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
200
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
570
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
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?