1. UI Design Fundamentals
Uday Gajendar
Principal Product Designer
Citrix | Santa Clara
SVCC / 10.6.12

2. My#5th#time#speaking.
A#lot’s#changed#since#2007.

3. RIA.%Flash.%Ajax.%iPhone.
Android.%Flat%widescreen%displays.%
Hi:res%Retina%displays.%CSS%+%HTML%5.%
Responsive%design.%JS%frameworks.%
Social.%Mobile.%Local.%Cloud.%Video.

4. But#some#things#
are#the#same...

8. Is#it#really#2012?#
sigh...

9. “ The$public$is$more$familiar$with$bad$design$than$
good$design.$It$is,$in$effect,$conditioned$to$prefer$
bad$design,$because$that$is$what$it$lives$with.$The$
new$becomes$threatening,$the$old$reassuring.
”
Paul%Rand,%graphic%designer

12. Complexity lack of careful diligence
&
extraneous redundancy Craftsmanship
Too many fonts Too many icons
Too many colors No hierarchy
Too many lines Everything emphasized
Overdone effects No useful groupings

13. Every button, icon, text, tab, menu item is another visual &
cognitive signal that a user must process & learn, thus
increasing complexity and error! Even for a split second.

14. Dialogues (not dialogs)

15. Start with target audience

16. Consider diverse contexts

17. Apply OS guidelines

18. YMMV

19. clear, effective
Patterns
& Principles
potent, useful

20. Patterns
A pattern describes an optimal solution to a common
problem within a specific context.

21. !

22. Ta ke
note!
Patterns#books#to#keep#nearby!
Bill#Scott Jenifer#Tidwell Erin#Malone

23. Principles
A principles provides a governing basis for decision-
making and foundation for evolution.
Principles are your lighthouse for guidance when lost.

24. Citrix Product Design 5 Principles

25. Dieter Rams’ “Good Design Principles”

26. Windows Metro Principles

27. Make#it#direct
Keep#it#lightweight
Stay#on#the#page
Provide#an#invitation
Use#transitions
React#immediately
from%Bill%Scott,%PayPal

28. But#what#about#
that#damn#UI?

29. Do’s#&#Don’ts

30. ake
Do’s#&#Don’ts T
note!
Don’t clutter the screen with noise
Don’t use every font or color in the palette
Don’t fill every inch of the screen with “stuff”
Don’t be verbose and redundant
Don’t have slow irritating performance
Don’t leave users hanging with no exit
Don’t be painful and frustrating

31. ake
Do’s#&#Don’ts T
note!
Do leverage a good metaphor
Do use well-defined, clean grid layouts
Do use fonts sparingly (No more than 3+)
Do apply color judiciously (No more than 5+)
Do use clear, concise language (Read vs scan)
Do use icons purposefully (Do you really need them?)
Do create clear behaviors with feedback

32. Grids / Layouts / Structure
A#wellSdesigned#UI#must#be#grounded#in#strong#layouts#
with#a#grid.#Grids#provide#order,#regularity,#rhythm,#and#
control.#Knowing#how#to#work#with#grids#is#a#vital#
interface#design#skill,#which#takes#years#to#master.#
Structure • Alignment • Spacing

35. Grids: where to start?
CSS#Grid#Frameworks#like#960.gs,#Blueprint,#The#Golden#Grid
Flexible,#responsive#grid#designs:#scalability,#xSdevice#use

36. Typography
Type#is#about#tone#of#voice,#readability,#legibility.#Diligently#
crafted#type#is#paramount#for#effective#communication.
Leading • Kerning • Tracking

37. Typography
Most#design#problems#are#simply#type#issues.#As#a#good#
rule,#start#your#design#with#three%fonts,#where#a#font#is#
any#variation#of#the#typeface,#size,#weight,#style,#color,#etc.
Most design problems are simply type
issues. As a good rule, start your design
with three fonts, where a font is any
variation of the typeface, size, weight,
style, color, etc.
Most design problems are simply type issues. As a good rule,
start your design with three fonts, where a font is any
variation of the typeface, size, weight, style, color, etc.

42. Color
Color#follows#the#same#constraints#as#type,#with#the#
exception#that#color#gets#to#the#core#emotional#impact#
of#the#product#in#a#more#direct,#visceral#way#that#type#
does#not.#While#type#speaks,#color#punctuates.#

45. Color: where to start
Pick#a#color#palette#of#just#a#few#core#colors:#
1#base,#3#complements,#1#highlight,#and#black#/#white
Use#the#color#system#to#solve#functional#issues#_irst,#
then#add#expressive,#emotive,#brand#qualities.

46. Icons / Imagery
Icons#are#visual#indicators#of#status,#functionality,#or#
branding.#They#should#complement#the#main#content,#
and#not#contribute#to#UI#clutter#or#noise.#Just#like#type#
and#color,#should#be#used#judiciously.
Before8you8insert8an8icon,8always8ask8WHY.8

48. Language
Many#design#problems#are#simply#issues#of#poor%
terminology:#button#labels,#menu#items,#feature#
names,#etc.#Generally#speaking,#product#language#
should#be#no#more#complicated#than#everyday#
conversation.#Ask#your#target#audience.#

49. Behavior
A#digital#product#is#used#to#do#something.#
Interactive#behavior,#and#speci_ically,#the#ability#to#
directly%manipulate%data#with#an#input#device#as#
an#intuitive,#seamless#extension#of#the#user’s#hand/
mind,#are#critical#in#that#regard.
Affordances,#motion,#feedback#are#key.

51. Matrix of Interesting Moments
from#Bill#Scott,#PayPal
Prototype#behaviors#iteratively#&#obsessively.

52. Coherence

53. Total Balance ke
Ta
In#the#end,#a#carefully#balanced#consideration#of#these# note!
will#result#in#a#rewarding,#effective#UI#people#enjoy.
Layout Type Color Icons
Metaphor Pa4erns Behavior Principles
Coherence • Choreography • Integrity

55. “The key to good design is not Metro or any other
language or principle. The key to good design is to be
able to execute good design judgment.”
Erik Stolterman, HCI Professor,
Indiana University

56. References ke
Ta
Designing#Visual#Interfaces#by#Mullet/Sano note!
Designing#Web#Interfaces#by#Bill#Scott
Envisioning#Information#by#Edward#Tufte#
Designing#Interfaces#by#Jenifer#Tidwell

57. Contact info
Uday%Gajendar
email udanium@gmail.com
twitter% @udanium
web www.udanium.com
blog www.ghostinthepixel.com
linkedin www.linkedin.com/in/udanium