Download as PDF, PPTX
Uploaded byAlok Jethanandani
Svcc12 designfundamentals
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 UdayGajendar Principal Product Designer Citrix | Santa Clara SVCC / 10.6.12
- 2.
- 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.
- 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.
- 15. Start with targetaudience
- 16.
- 17.
- 18.
- 19. clear, effective Patterns & Principles potent, useful
- 20. Patterns A pattern describesan 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 providesa governing basis for decision- making and foundation for evolution. Principles are your lighthouse for guidance when lost.
- 24. Citrix Product Design5 Principles
- 25. Dieter Rams’ “GoodDesign Principles”
- 26.
- 27. Make#it#direct Keep#it#lightweight Stay#on#the#page Provide#an#invitation Use#transitions React#immediately from%Bill%Scott,%PayPal
- 28.
- 29.
- 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 tostart? CSS#Grid#Frameworks#like#960.gs,#Blueprint,#The#Golden#Grid Flexible,#responsive#grid#designs:#scalability,#xSdevice#use
- 36.
- 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 problemsare 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.
- 45. Color: where tostart 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.
- 48.
- 49.
- 51. Matrix of InterestingMoments from#Bill#Scott,#PayPal Prototype#behaviors#iteratively#&#obsessively.
- 52.
- 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 togood 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