stanford hci group http://cs147.stanford.edu
Scott KlemmerAutumn 2009
Visual Design
typography, color, layout.
My first graphic design class ever was typography I; the first assignment to draw the Futura R (Paul Renner in 1927, this is Gill 1928). In black plaka. * In the middle of a 12” white square board in black paint * type is the center of design. * do this for the entire week, over & over
This is an easy, clean typeface to read (especially compared to say “cartoon” font)
Type Classifications
Sans Serif Serif
Simply place to start is the di!erence between Sans Serif and Serif typefaces
Until 1900, all type faces were Serif type faces.
Most modernist are Sans Serif,
Both are useful, depends on what you are trying to use them for.
German type faces were original straight up and the Italians had a slant to it. At some point in the 18th & 19th century, people figured out they could make 2 versions of the same typeface and use the di!erence to convey information.
Oblique is bad. That is the automatically transformed typeface you get if you don’t own the Italic version.
Jan Tschichold’s Revolution
Champion of Modernist Typography
Die Neue Typographie Berlin, 1928
Bauhaus schoolDessau, 1925-26
Graphic design as we know it today started with the Bauhaus
Jan Tschichold was the lead graphic designer in the Bahuaus
Asymmetric Typography
How blocks used to be arranged in magazines. Schematic, thoughtless centering of blocks (= ugly).
The same blocks, correctly arranged in the same type-area. Constructive, meaningful, and economical (= beautiful).
J A N T S C H I C H O L D
Main tenant of modernist design
In books before the Bauhaus, everything was centered.
Harder to read.
Asymmetric: 1) feels more dynamic (energy to the type), 2) don’t have di"cult to read narrow columns around the figures.
Quotes: Bringhurst & Tufte
“Some space must be narrow so that other space may be wide, and some space must be emptied so that other space may be filled.”
– Robert Bringhurst The Elements of Typographic Style
“Information consists of di!erences that make a di!erence.”
– Edward Tufte Envisioning Information
Similar things – really close togetherThings not related – far apart
“In anything at all, perfection is attained not when there is no longer anything to add, but when there is no longer anything to take away.”
--Antoine de Saint Exupery
This is a modernist belief: Anything you add that people don’t care about is simply clutter. from Neal Leach “Dali despised Le Corbusier and his “abject architecture, the Swiss heaviness of which gave indigestion to thousands of young architects and artists” [229]. “The world,” Dali noted, “has had enough of logic and rationalism as conceived by Swiss schoolmasters. I have nothing against Swiss bankers or cuckoos, on the contrary, but the country ought to stop exporting architects!”. The future of architecture, Dali predicted, would be “soft and hairy””
http://nymag.com/nymetro/health/features/11700/index1.html
http://nymag.com/nymetro/health/features/11700/index1.html
http://www.adobe.com/type/topics/info5.html
Ligatures
Upper and lower case numbers
Tips & tricks to make type look good:
1) Capitals only appropriate for the beginning of sentences. Use “small capitals” if you want it to read smoothly. Can still read it and see there is something di!erent. (HTML “small” tag lets you do this)
2) see f’s crashing into each other. Good type faces (in print & books) have letters properly designed to go together (fi, fl, !)3) numbers come in upper & lower case. Upper cases numbers are like all CAPS. Hard to read. More variation in lower case (some acenders & decenders). Lower case
numbers also called “old style”
Scan of a well typeset book. Umberto Eco’s “ ? “
Plenty of line space, but not double space.
Good use of roman and italic version of the face. Character talking to himself is in italics.
Beginning of chapter has the first few words in small caps. Common in good typeset magazines & books.
Lower case numbers.
Lots of white space around the edge. Easier to read (less distracted by what is behind the book). Also don’t curve things near the spine.
Tend to be 75-80 characters a line in well typeset books (printing in IE might give you 150 characters / line – you have to move your head to read it).
Some Starting Points
Gather materials you find successful Could be from a very di!erent domain “Good artists borrow, great artists steal” - Picasso
Include visual design professionals in the iterative design cycle
Much of picasso’s paintings came from stealing the design of African masks.
Grid Systems A key pattern for implementing rationality,
modernism, asymmetry Note that no elements are “centered”
Java Look and Feel Design Guidelines
One take-away on how to design a lot of information on a page, a grid system is a good place to start.
Using the grid gives you consistency and if you use someone else's grid, you get to take advantage of professional designed system.
Find is easy to see since it is in a column all by itself.
Space is consistent between the buttons.
Things that are similar are closer (i.e., radio buttons).
Bigger space to the buttons at the bottom – there di!erent.