Your SlideShare is downloading. ×
Svcc12 designfundamentals
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Svcc12 designfundamentals

168
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
168
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UI Design FundamentalsUday GajendarPrincipal Product DesignerCitrix | Santa ClaraSVCC / 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...
  • 5. Is#it#really#2012?# sigh...
  • 6. “ 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
  • 7. 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
  • 8. Every button, icon, text, tab, menu item is another visual &cognitive signal that a user must process & learn, thusincreasing complexity and error! Even for a split second.
  • 9. Dialogues (not dialogs)
  • 10. Start with target audience
  • 11. Consider diverse contexts
  • 12. Apply OS guidelines
  • 13. YMMV
  • 14. clear, effectivePatterns & Principles potent, useful
  • 15. PatternsA pattern describes an optimal solution to a commonproblem within a specific context.
  • 16. !
  • 17. Ta ke note! Patterns#books#to#keep#nearby!Bill#Scott Jenifer#Tidwell Erin#Malone
  • 18. PrinciplesA principles provides a governing basis for decision-making and foundation for evolution.Principles are your lighthouse for guidance when lost.
  • 19. Citrix Product Design 5 Principles
  • 20. Dieter Rams’ “Good Design Principles”
  • 21. Windows Metro Principles
  • 22. Make#it#direct Keep#it#lightweight Stay#on#the#pageProvide#an#invitation Use#transitions React#immediately from%Bill%Scott,%PayPal
  • 23. But#what#about#that#damn#UI?
  • 24. Do’s#&#Don’ts
  • 25. akeDo’s#&#Don’ts T note!Don’t clutter the screen with noiseDon’t use every font or color in the paletteDon’t fill every inch of the screen with “stuff”Don’t be verbose and redundantDon’t have slow irritating performanceDon’t leave users hanging with no exitDon’t be painful and frustrating
  • 26. akeDo’s#&#Don’ts T note!Do leverage a good metaphorDo use well-defined, clean grid layoutsDo 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
  • 27. Grids / Layouts / StructureA#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
  • 28. Grids: where to start?CSS#Grid#Frameworks#like#960.gs,#Blueprint,#The#Golden#GridFlexible,#responsive#grid#designs:#scalability,#xSdevice#use
  • 29. TypographyType#is#about#tone#of#voice,#readability,#legibility.#Diligently#crafted#type#is#paramount#for#effective#communication. Leading • Kerning • Tracking
  • 30. TypographyMost#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 typeissues. As a good rule, start your designwith three fonts, where a font is anyvariation 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 anyvariation of the typeface, size, weight, style, color, etc.
  • 31. ColorColor#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.#
  • 32. Color: where to startPick#a#color#palette#of#just#a#few#core#colors:#1#base,#3#complements,#1#highlight,#and#black#/#whiteUse#the#color#system#to#solve#functional#issues#_irst,#then#add#expressive,#emotive,#brand#qualities.
  • 33. Icons / ImageryIcons#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
  • 34. LanguageMany#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.#
  • 35. BehaviorA#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.
  • 36. Matrix of Interesting Momentsfrom#Bill#Scott,#PayPal Prototype#behaviors#iteratively#&#obsessively.
  • 37. Coherence
  • 38. Total Balance ke TaIn#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
  • 39. “The key to good design is not Metro or any otherlanguage or principle. The key to good design is to be able to execute good design judgment.” Erik Stolterman, HCI Professor, Indiana University
  • 40. References ke TaDesigning#Visual#Interfaces#by#Mullet/Sano note!Designing#Web#Interfaces#by#Bill#ScottEnvisioning#Information#by#Edward#Tufte#Designing#Interfaces#by#Jenifer#Tidwell
  • 41. Contact infoUday%Gajendaremail udanium@gmail.comtwitter% @udaniumweb www.udanium.comblog www.ghostinthepixel.comlinkedin www.linkedin.com/in/udanium