Svcc12 designfundamentals
1 like456 views
This document provides an overview of UI design fundamentals. It discusses key principles like grids and layouts, typography, color, icons, language, behavior, and coherence. It emphasizes keeping designs simple, focused and easy to use. Examples are given of design dos and don'ts. References for further reading on design are also provided, along with contact information for the author.
Svcc12 designfundamentals
- 1. UI Design Fundamentals Uday Gajendar Principal Product Designer Citrix | Santa Clara SVCC / 10.6.12
- 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.
- 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.
- 15. Start with target audience
- 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”
- 27. Make#it#direct Keep#it#lightweight Stay#on#the#page Provide#an#invitation Use#transitions React#immediately from%Bill%Scott,%PayPal
- 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.
- 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
- 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