Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UI Fundamentals for Programmers
Search
Juanda Zapata
September 24, 2015
Programming
0
210
UI Fundamentals for Programmers
UI fundamentals for programmers. Chilango Rails Mexico DF.
Juanda Zapata
September 24, 2015
Tweet
Share
More Decks by Juanda Zapata
See All by Juanda Zapata
Principles of Visual Design
juanzuluaga
0
72
Adapter Pattern
juanzuluaga
0
170
Maintainable CSS
juanzuluaga
0
82
Elixir 101 - The Erlang VM
juanzuluaga
5
330
UI fundamentals for programmers
juanzuluaga
0
390
Programming in paradise
juanzuluaga
1
140
Intro to Ruby
juanzuluaga
1
700
Other Decks in Programming
See All in Programming
CSC305 Lecture 04
javiergs
PRO
0
230
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
360
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
750
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
150
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2k
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.8k
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
320
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
410
CSC509 Lecture 01
javiergs
PRO
1
430
CSC305 Lecture 01
javiergs
PRO
1
380
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
250
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Automating Front-end Workflow
addyosmani
1371
200k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building an army of robots
kneath
306
46k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Transcript
UI FUNDAMENTALS for programmers
@juanzuluaga
None
personal experiences and discussions
UI
is everywhere!
UI presentations
UI presentations emails
UI presentations emails television
UI presentations emails television software
UI presentations emails television software
UI is another layer of your software
None
database, etc
business rules database, etc
UI business rules database, etc
for some people, the UI is the software!
software is not about requirements
None
it's about people
mental models
[email protected]
***************
None
Your payment failed Your payment was successful
a mental model is a preconception
the user feels stressed when that preconception is not met
None
a stressed user means that you're losing money
least effective difference
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9
less is more
None
fitt's law
the larger an item is, and the closer it is
to your cursor the easier it is to click on
None
stress
a stressed user means that you're losing money
None
None
None
None
fluxes
stop spiting your DB schema into the UI
stop for a minute and think
design actions, not screens
add a phone number
add a phone number delete a blog post
add a phone number delete a blog post view my
hostel bookings
break each action in three steps
1. how how do I get there? which sections take
me there?
None
2. what add a new contact into the platform
None
3. later what happens after I completed the action
None
color psychology
excitement energy fun increases heart rate stimulate appetite
None
calming lowers aggressiveness
men's favorite lowers appetite lowers heart rate increases productivity
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
None
pure innocent doctors and hospitals
elegance power status
None
tools
bootstrap getbootstrap.com
coolors coolors.co
consume products with good UI
thanks!
questions?