![Page 1: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/1.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Basics ofvisual interface design
John ZimmermanHCII and School of DesignCarnegie Mellon University
November 2008
All slides copyright 2007 Carnegie Mellon University
![Page 2: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/2.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Goals of this session
• Explore issues that pertain to communicationdesign and visual interface design
• Become familiar with the language andterminology of design
• Understand how issues come together toform a larger design process
![Page 3: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/3.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Agenda
• What is design?• What is communication design?• Typography and communication design• Color and communication design• Design composition, layout and systems• What is interface design?• Navigation• Graphic systems• Wrap-up
![Page 4: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/4.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is design?
![Page 5: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/5.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is design?
Everyone designs who devises courses of action aimed at changingexisting situations into preferred ones.
--Herb Simon
Design is the human power to conceive, plan, and realize productsthat serve human beings in the accomplishment of any individualor collective purpose.
--Richard Buchanan
![Page 6: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/6.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
![Page 7: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/7.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
![Page 8: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/8.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
![Page 9: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/9.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is interaction design?
Interaction Design is the creation of a dialogue between a personand a product, service or system. This dialogue is usually found inthe world of behavior, and deals with issues such as experience,time, complexity and emotion.
--Jon Kolko
Interaction design is the art of facilitating or instigatinginteractions between humans (or their agents), mediated byproducts.
--Dan Saffer
![Page 10: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/10.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
![Page 11: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/11.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
![Page 12: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/12.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
![Page 13: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/13.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Communication design
![Page 14: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/14.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is communication design?
Designers work conceptually, combining words,pictures, and other graphic elements to form acommunicative gestalt.
![Page 15: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/15.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is communication design?
Designers work with a specific audience inmind, and create an artifact that best suits theneeds of that audience.
Designs connect client/company to the userthrough their experience with the product.
![Page 16: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/16.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is communication design?
Phone Book
![Page 17: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/17.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is communication design?London Underground
![Page 18: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/18.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is communication design?
Starbucks logo and communication system Logo
![Page 19: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/19.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is communication design?
Napoleon's march
![Page 20: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/20.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is communication design?
BMW kidney grill
![Page 21: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/21.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Information/communication
Information is knowledge about facts and events
Communication is the transfer of knowledgebetween people.
information(sender)
destination(receiver)
transmitter(encoder)
receiver(decoder)
signal(noise source)
Shannon and Weaver
![Page 22: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/22.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is the design process?
The design process is a series of events thatbegins when the designer receives anassignment. It continues until a correct solutionis generated and implemented. The designprocess is not linear, but iterative.
problemdefinition
?implementationinformation
gatheringidea
findingsolutionfinding
!
![Page 23: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/23.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Problem definition (framing)
Understand and define the problem, includingaudience, project goals and objectives, andconstraint such as time, budget, productionlimitations.
![Page 24: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/24.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Information gathering
Fact finding about• end user• client / stakeholders• landscape of competitive products• convention of form• context in which the product will function
![Page 25: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/25.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Idea finding
Each design problem has many solutions.
Designers ideate, generating many possiblesolutions, then iterate a single idea to resolveissues.
Generally work by sketching and thenprototyping. They reflect in and on their actions.
![Page 26: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/26.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Solution finding
The process of narrowing in on one of the manyideas to execute in a finished form.
Designers use a critique, sharing ideas withother designers for feedback.
It is possible to involve users again at this point,to gain reactions to what might be, but this israre in most communication design given thetight deadlines and strong conventions.
![Page 27: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/27.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Implementation
Presenting the solution, gaining its acceptance,and executing the final product.
![Page 28: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/28.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Typographyand communication design
![Page 29: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/29.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Typography
Our communication is based on the alphabetand numerals. These are learned systems, whichhave enabled advances in science and literature.
Typography as we know it is an art ofcommunication, measurement and proportion.
With type the focus of communication movedfrom the spoken word to the written word.
![Page 30: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/30.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Anatomy of a typeface
A typeface is a set of type families of a unifying anddistinctive design, and a font is one instance of thatfamily :
Taz hair 21 italic , 48 pt face, weight, style, size
The standard measuring unit for type is the point,measured from top of ascender to bottom of descender.
The type designer must mix Roman letters and Arabicnumerals.
![Page 31: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/31.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Anatomy of a typeface
There are two kinds of type, serif and sans serif. A type familyconsists of a group of typefaces unified by a similar set ofcharacteristics.
Relationships between type and the space around it is what makesparagraphs look different: size of x-height, type size, leading, andline length. Two key features of legibility are line length andleading.
![Page 32: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/32.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Type samples
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
handgloves
![Page 33: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/33.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Type “etiquette”
leading is expressed as two numbers: 10/12
tight leading makes bodies of text hard to read
general guidelines: 9 to 11 point type needs 1 to 3points of leading; 12 point type, 2-4 points ofleading; 14 point type, 3-6 points of leading
![Page 34: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/34.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Type “etiquette”
line length is the distance between the left and rightmargin of the type
“normal” line length is roughly 10 words< 70 characters
challenges comes from moving the eye from the endon one line to the beginning of the next
more open leading allows for longer lines
![Page 35: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/35.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Making decisions about type
Take inventory of text elements you need.
Choose a type family or two to work with. Makesure that each typeface looks good together, andsupports the intended tone of the content.
Find suitable sizes for each of the elements.Create guidelines and maintain them.
Test line length and leading if applicable. Lookat short and long pieces of text.
![Page 36: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/36.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Making decisions about type
Use of ALL CAPS or all italic slows reading.
Readers pay attention to contrast amongtypographic elements. Changes in weight (bold,etc.) may be noticed more than changes intypeface.
Reversed type is a strong visual element andshould be used judiciously.
Blank space around paragraphs and betweencolumns of type helps increase legibility.
![Page 37: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/37.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Making decisions about type
Portfolio
Portfolio
PortfolioPortfolio
![Page 38: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/38.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
A word about digital type
Reading text on computer screens is problematic.Many of the same rules of printed text apply, withnew variables :
• Users have to scroll to read long texts
• RSVP presentation is not detrimental toreading speed
• Presenting text on the screen in a way thatmimics reading structure (phrasing) mayincrease performance
![Page 39: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/39.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Typographic goals
To remain invisible to the reader
To increase clarity and readability
To subtly indicate voice and tone of speaker
![Page 40: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/40.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
![Page 41: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/41.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
![Page 42: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/42.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
![Page 43: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/43.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Colorand communication design
![Page 44: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/44.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Color matters!
![Page 45: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/45.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Color matters!
The colors we seen in nature are reflections ofthe visible light around us.
• Helps us to distinguish elements
• Creates an emotional response
• Can create semantic meaning andcommunicate information
![Page 46: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/46.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Color is difficult
Cultural differences and associations – Kodakyellow, Coke red
Different disciplines deal with color indifferently: physics, psychology, engineering,fine arts and design
Highly subjective and relative – affected bylight, context, environment
Simultaneous contrast – color is affected bywhat color is next to it
![Page 47: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/47.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Color is difficult
To make matters worse, print media and digitalmedia use different color models.
The additive model used by screendisplays mixes colors with light(white).
The subtractive model used byprint media and pigment mixescolors with ink (black).
![Page 48: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/48.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Color properties
• Hue
• Saturation
• Value
![Page 49: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/49.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Hue
Hue refers to the name of the color. One hue canbe varied to produce many colors: for example,pink, rose scarlet, maroon, and crimson are allcolors, but the hue in each case is red.
ROYGBIV are the hue names.
![Page 50: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/50.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Saturation
Saturation is sometimes called chroma, orintensity. These terms refer to the brightness ofa color. A color is at full intensity when there isno other pigment present in the color. Mixingblack or white into a color affects its purity andintensity.
A hue is at its full intensity when it is fullysaturated. Adding black or white desaturates thehue.
![Page 51: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/51.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Value
Value refers to the lightness or darkness of a hueor color. In pigment, value can be affected byadding white or black paint to the color.
![Page 52: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/52.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Color strategies
• Primary/secondary/tertiary• Warm /cool• Monochromatic• Neutrals• Complements/split complements• Analogous/harmonious
![Page 53: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/53.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Design composition,layout, and systems
![Page 54: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/54.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Simplicity in composition
People seek order and clarity in communicationand spaces.
They appreciate solutions that solve problems ina clear, economical fashion.
Good communication design is simple.
![Page 55: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/55.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Simplicity in composition
The functional and aesthetic benefits of a simpledesign are
Approachable – use immediately
Recognizable – easy to assimilate andremember
Immediate – have a greater impact on theviewer
Usable – prominent, easy to engage with
![Page 56: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/56.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
How to do it?
Creating a simple and usable design is aboutassessing component parts of a design and therelationship between those parts. Train your eye tolook for these relationships:
• Reduction• Regularization• Scale, contrast and proportion• Harmony• Alignment• Proximity and correspondence• Symmetry and asymmetry
![Page 57: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/57.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Reduction
Reinforce the message by removing non-essential elements from the design. Askyourself, is this (rule line, bolding, etc.) needed?Then try to remove it anyways.
Does the design stand up?
![Page 58: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/58.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Regularization
Establishing regularrelationships (i.e., apattern) allows theviewer to becomecomfortable with thedesign and move toa higher level ofabstraction.
![Page 59: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/59.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Scale, contrast, and proportion
The scale of elementsdetermines where theviewer looks first, andwhat is mostimportant. Large,powerful visualelements must be usedjudiciously,particularly ininterface design.
![Page 60: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/60.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Harmony
Harmony describes theeffect, seen at the levelof the whole, of thepleasing interaction ofthe parts.
![Page 61: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/61.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Alignment
When forms, their edges, or their central axesalign with one another, relationships andconnections between them are established.
Elementsare Center
Aligned
Elementsare LeftAligned
![Page 62: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/62.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Proximity and correspondence
When forms are near to each other, the eyemakes visual groupings of the information.Similar size, shape, color or texture can alsocause groupings.
1 3 21 37 21 3713
![Page 63: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/63.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Symmetry and asymmetry
Symmetry is similarity of form or arrangementon either side of a dividing line or plane. Asymmetric organization symbolizes a restivestate, while asymmetry suggests energy. Contentdrives designers’ choices about symmetry.
![Page 64: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/64.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Design programs
A design program is a comprehensive system oforganization, utilizing repeated sizes,proportions, and design elements to maintainconsistent functional and aesthetic qualitiesover a series of pages, screens, or artifacts.
Elements such as type sizes, styles, placement ofelements, and colors are used consistently tounify a series of designs.
![Page 65: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/65.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Design programs
Design programs are based on grid systems.
![Page 66: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/66.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Design programs
Grid systems allow the layout to be codifiedacross a series of pages, displays, etc.
Grid systems are based on columns and rows.
The more columns and rows, the more flexiblethe design.
![Page 67: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/67.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Design programs
When a grid system is put to good use, it willcreate a regular and rhythmic design.
Consistent use of a grid, paired with visualelements, will create a consistent “look and feel”in a manual, web site, or GUI.
![Page 68: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/68.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Design programs
Why is it good to have a design program?
• Structured: the foundation on which thedesign is built
• Predictable: simplifies the task ofcommunicating information to the user
• Efficient: the basic design work is complete,and the design can be repeated easily
![Page 69: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/69.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Creating a design program
Assess your communication goals. Where willthe information be displayed? Who is theaudience? What is the purpose of thecommunication?
Group each item of information into a smallnumber (5-7) of categories according to originor intended use.
Determine the rank or importance of eachgroup. Organize into a smaller number (3-5) ofechelons based on this ranking.
![Page 70: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/70.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Creating a design program
Use appropriate variables to establish hierarchy.Large, bold type might be used for the mostimportant information. A systemic location onthe grid might be reserved for pictures.
Use a grid to base your designs on.
Use the squint test to make sure echelons arehanging together as a unit, but with enoughdifference to be visually separated from eachother.
![Page 71: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/71.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
interface design?What is
![Page 72: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/72.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is interface design?
An interface is the link between a product andits user. It communicates how a product is used,and creates an experience for the people whouse it.
An interface is an aggregate of characteristicsthat a user initially engages with in order tomake use of a product.
![Page 73: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/73.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is interface design?
context of use
form languagefeaturesaesthetic qualitiesusefulness
emotionsvalues
priorexperience
user product
interaction designer
![Page 74: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/74.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Communication
![Page 75: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/75.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Communication
(Perceptive) Affordance: how does it tell me howto interact with it
Feedforward: what does it tell me it will dobefore I interact with it
Feedback: how does it acknowledge myexpression of intent or an environmental trigger
![Page 76: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/76.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
![Page 77: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/77.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is interface design?
An interface offers the user a story of use. If itmatches how the user thinks, it is easy to use.
If the product is complex, inaccessible,unlearnable, or unfamiliar, the user will not beable to use it.
![Page 78: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/78.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
What is interface design?
Interface design is the act of conceiving of,planning, and executing a set of productcharacteristics. For example:
• A car’s interface
• The Starbuck’s interface
• A software interface
![Page 79: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/79.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Designing an interface system
Use a grid, and establish modular units
Use repeat elements to reinforce structure
Look at the set of information to discerncommonalities from screen to screen
Look for elements that should be visually related
Think about how the user would navigate throughand use the interface
Sketch, iterate, get user feedback, iterate, and refine
![Page 80: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/80.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Navigation
![Page 81: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/81.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Navigation
Navigation is finding one’s position in a place(an electronic information space). Navigationthrough software occurs at multiple levels:
• among multiple windows, views, or pages• among panes or frames within a window,
view or page• among tools, ,commands, or menus• within
information in one pane (scrolling, panning,zooming, following links)
![Page 82: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/82.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Reduce the number of places
Keep the numbers of windows and views to aminimum.
Keep the number of adjacent panes to ~3 (ex:two navigation areas and one content area).
Keep the numbers of controls to as few as usersneed for achieve their goals.
Scrolling should be minimized when possible.
![Page 83: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/83.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Provide signposts
Provide points of reference so people can findtheir way around.
Rely on persistent objects (main navigation andcontrols, menu bars, toolbars, palettes).
Don’t forget use of white space and goodtypography.
![Page 84: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/84.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Provide overviews
Overviews help to orient the user in content,just like signposts orient people in usingfunctions and controls.
• Breadcrumbs
• Annotated scrollbars
![Page 85: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/85.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Map controls to functions
Mapping describes the relationship between acontrol, the thing it affects, and the intendedresult.
Physical mapping (stove burners and controls)
Logical mapping (numerical, alphabetical,hierarchical, etc.)
![Page 86: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/86.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Basics ofvisual interface design
John ZimmermanHCII and School of DesignCarnegie Mellon University
November 2008
All slides copyright 2007 Carnegie Mellon University
![Page 87: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/87.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Resources
General Design and Typography
• Carter, Rob, Meggs, Philip B., and Day, Ben. TypographicDesign: Form and Communication.
• Meggs, Philip B. Type and Image: The Language of GraphicDesign.
• Tufte, Edward. Envisioning Information.
• Tufte, Edward. The Visual Display of Quantitative Information.
Typography and Layout
• Schriver, Karen A. Dynamic Document Design: Creating Text forReaders
![Page 88: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/88.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
Resources
Color
• Albers, Josef. Interaction of Color.
• Itten, Johannes and Birren, Faber. The Elements of Color.
Visual Interface Design
• Mullet, Kevin and Sano, Darryl. Designing Visual Interfaces.
• Cooper, Reimann, and Cronin. About Face 3.
![Page 89: Basics of visual interface designbam/uicourse/08763fall08/cmuonly/lecture… · Copyright 2007Jodi Forlizzi Carnegie Mellon University What is interaction design? Interaction Design](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d20321ba5a82e291a1119/html5/thumbnails/89.jpg)
Copyright 2007Jodi Forlizzi Carnegie Mellon University
ResourcesWeb sites
General Design
Mundi Designhttp://www.mundidesign.com/
Typography
Studiomotivhttp://www.studiomotiv.com/counterspace/
Color
Color research at Brown University:http://www.cs.brown.edu/exploratory/
Web color
http://www.lynda.com/