svcc12 designfundamentals
DESCRIPTION
TRANSCRIPT
![Page 1: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/1.jpg)
UI Design Fundamentals
Uday GajendarPrincipal Product DesignerCitrix | Santa Clara
SVCC / 10.6.12
![Page 2: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/2.jpg)
My#5th#time#speaking.A#lot’s#changed#since#2007.
![Page 3: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/3.jpg)
RIA.%Flash.%Ajax.%iPhone.Android.%Flat%widescreen%displays.%Hi:res%Retina%displays.%CSS%+%HTML%5.%Responsive%design.%JS%frameworks.%Social.%Mobile.%Local.%Cloud.%Video.
![Page 4: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/4.jpg)
But#some#things#are#the#same...
![Page 5: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/5.jpg)
![Page 6: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/6.jpg)
![Page 7: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/7.jpg)
![Page 8: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/8.jpg)
Is#it#really#2012?#sigh...
![Page 9: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/9.jpg)
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
“
”
![Page 10: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/10.jpg)
![Page 11: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/11.jpg)
![Page 12: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/12.jpg)
ComplexityCraftsmanship&
extraneous redundancy
lack of careful diligence
Too many fontsToo many colorsToo many linesOverdone effects
Too many iconsNo hierarchyEverything emphasizedNo useful groupings
![Page 13: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/13.jpg)
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.
![Page 14: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/14.jpg)
Dialogues (not dialogs)
![Page 15: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/15.jpg)
Start with target audience
![Page 16: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/16.jpg)
Consider diverse contexts
![Page 17: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/17.jpg)
Apply OS guidelines
![Page 18: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/18.jpg)
YMMV
![Page 19: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/19.jpg)
PrinciplesPatterns
& potent, useful
clear, effective
![Page 20: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/20.jpg)
PatternsA pattern describes an optimal solution to a common problem within a specific context.
![Page 21: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/21.jpg)
!
![Page 22: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/22.jpg)
Bill#Scott Jenifer#Tidwell Erin#Malone
Patterns#books#to#keep#nearby!
Take
note!
![Page 23: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/23.jpg)
Principles
Principles are your lighthouse for guidance when lost.
A principles provides a governing basis for decision-making and foundation for evolution.
![Page 24: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/24.jpg)
Citrix Product Design 5 Principles
![Page 25: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/25.jpg)
Dieter Rams’ “Good Design Principles”
![Page 26: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/26.jpg)
Windows Metro Principles
![Page 27: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/27.jpg)
Make#it#directKeep#it#lightweightStay#on#the#page
Provide#an#invitationUse#transitions
React#immediately
from%Bill%Scott,%PayPal
![Page 28: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/28.jpg)
But#what#about#that#damn#UI?
![Page 29: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/29.jpg)
Do’s#&#Don’ts
![Page 30: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/30.jpg)
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
Take
note!Do’s#&#Don’ts
![Page 31: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/31.jpg)
Do leverage a good metaphor
Do use well-defined, clean grid layouts
Do use fonts sparingly
Do apply color judiciously
Do use clear, concise language
Do use icons purposefully
Do create clear behaviors with feedback
(No more than 3+)
(No more than 5+)
(Do you really need them?)
(Read vs scan)
Take
note!Do’s#&#Don’ts
![Page 32: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/32.jpg)
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.#
AlignmentStructure Spacing••
![Page 33: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/33.jpg)
![Page 34: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/34.jpg)
![Page 35: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/35.jpg)
Grids: where to start?
CSS#Grid#Frameworks#like#960.gs,#Blueprint,#The#Golden#GridFlexible,#responsive#grid#designs:#scalability,#xSdevice#use
![Page 36: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/36.jpg)
TypographyType#is#about#tone#of#voice,#readability,#legibility.#Diligently#crafted#type#is#paramount#for#effective#communication.
KerningLeading Tracking••
![Page 37: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/37.jpg)
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.
Typography
![Page 38: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/38.jpg)
![Page 39: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/39.jpg)
![Page 40: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/40.jpg)
![Page 41: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/41.jpg)
![Page 42: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/42.jpg)
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.#
Color
![Page 43: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/43.jpg)
![Page 44: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/44.jpg)
![Page 45: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/45.jpg)
Pick#a#color#palette#of#just#a#few#core#colors:#1#base,#3#complements,#1#highlight,#and#black#/#white
Color: where to start
Use#the#color#system#to#solve#functional#issues#_irst,#then#add#expressive,#emotive,#brand#qualities.
![Page 46: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/46.jpg)
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.
Icons / Imagery
Before8you8insert8an8icon,8always8ask8WHY.8
![Page 47: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/47.jpg)
![Page 48: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/48.jpg)
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.#
Language
![Page 49: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/49.jpg)
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.
Behavior
![Page 50: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/50.jpg)
![Page 51: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/51.jpg)
Matrix of Interesting Momentsfrom#Bill#Scott,#PayPal
Prototype#behaviors#iteratively#&#obsessively.
![Page 52: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/52.jpg)
Coherence
![Page 53: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/53.jpg)
Total Balance
In#the#end,#a#carefully#balanced#consideration#of#these#will#result#in#a#rewarding,#effective#UI#people#enjoy.
Layout Type Color Icons
Metaphor Pa4erns Behavior Principles
ChoreographyCoherence Integrity••
Take
note!
![Page 54: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/54.jpg)
![Page 55: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/55.jpg)
“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
![Page 56: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/56.jpg)
References
Designing#Visual#Interfaces#by#Mullet/SanoDesigning#Web#Interfaces#by#Bill#ScottEnvisioning#Information#by#Edward#Tufte#Designing#Interfaces#by#Jenifer#Tidwell
Take
note!
![Page 57: Svcc12 designfundamentals](https://reader038.vdocuments.us/reader038/viewer/2022110303/54c7f2704a795921328b46b2/html5/thumbnails/57.jpg)
Contact info
Uday%Gajendar
emailtwitter%
webbloglinkedin
www.udanium.comwww.ghostinthepixel.com
@udanium
www.linkedin.com/in/udanium