Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Svcc12 designfundamentals

403 views

Published on

  • Be the first to comment

  • Be the first to like this

Svcc12 designfundamentals

  1. 1. UI Design FundamentalsUday GajendarPrincipal Product DesignerCitrix | Santa ClaraSVCC / 10.6.12
  2. 2. My#5th#time#speaking.A#lot’s#changed#since#2007.
  3. 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. 4. But#some#things# are#the#same...
  5. 5. Is#it#really#2012?# sigh...
  6. 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. 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. 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. 9. Dialogues (not dialogs)
  10. 10. Start with target audience
  11. 11. Consider diverse contexts
  12. 12. Apply OS guidelines
  13. 13. YMMV
  14. 14. clear, effectivePatterns & Principles potent, useful
  15. 15. PatternsA pattern describes an optimal solution to a commonproblem within a specific context.
  16. 16. !
  17. 17. Ta ke note! Patterns#books#to#keep#nearby!Bill#Scott Jenifer#Tidwell Erin#Malone
  18. 18. PrinciplesA principles provides a governing basis for decision-making and foundation for evolution.Principles are your lighthouse for guidance when lost.
  19. 19. Citrix Product Design 5 Principles
  20. 20. Dieter Rams’ “Good Design Principles”
  21. 21. Windows Metro Principles
  22. 22. Make#it#direct Keep#it#lightweight Stay#on#the#pageProvide#an#invitation Use#transitions React#immediately from%Bill%Scott,%PayPal
  23. 23. But#what#about#that#damn#UI?
  24. 24. Do’s#&#Don’ts
  25. 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. 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. 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. 28. Grids: where to start?CSS#Grid#Frameworks#like#960.gs,#Blueprint,#The#Golden#GridFlexible,#responsive#grid#designs:#scalability,#xSdevice#use
  29. 29. TypographyType#is#about#tone#of#voice,#readability,#legibility.#Diligently#crafted#type#is#paramount#for#effective#communication. Leading • Kerning • Tracking
  30. 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. 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. 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. 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. 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. 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. 36. Matrix of Interesting Momentsfrom#Bill#Scott,#PayPal Prototype#behaviors#iteratively#&#obsessively.
  37. 37. Coherence
  38. 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. 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. 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. 41. Contact infoUday%Gajendaremail udanium@gmail.comtwitter% @udaniumweb www.udanium.comblog www.ghostinthepixel.comlinkedin www.linkedin.com/in/udanium

×