Graphic Design &
Aesthetics
Christine Robson
November 1, 2007
Topics






Reading
Internationalization
Review: Colors & Lines
In the footsteps of others…
Facebook Style
Good and Bad Websites
Reading
The text on your page



Most website design is about text and
Reading
Knowing how people read is important
Design your website to convey
information simply and effectively
Reading behavior


Start upper left and work down
Text short + scanable
– No long sentences

Use paragraphs
– concise & coherent
– ~3 sentences


Justified text is easier then ragged left
Bold headers stand out
Reading Buttons


Use Short Descriptive Text
Don’t make your users read more then
they need to!
Save
Save the file 11-01.ppt
Discard
Cancel
Discard the file 11-01.ppt
Cancel
Internationalization
Internationalization

Think global from the outset
Other languages
Other cultures

Right-Left vs. Left-Right page layouts


Volume of Text



Text in Chinese often appears shorter then text in German,
because German words tend to be very long, whereas Chinese
characters are relatively compact.
文本用中文经常出版更短的然后文本用德语, 因为德国词倾向于
是非常长的, 但是汉字是相对地紧凑。
Text auf Chinesen erscheint häufig kürzerer dann Text auf
Deutsch, weil deutsche Wörter neigen, sehr lang zu sein,
während chinesische Schriftzeichen verhältnismäßig kompakt
sind.
Formatting Text

Standard Formats
– Time/ date/ number reversals
– Canada: 1/11/2007
– US: 11/1/2007
– Japan: 2007-11-1

Punctuation & Parsing
– “” marks can be different in different
languages
Pluralization
English
 1 house
 2 houses
 3 houses
 …





1st
2nd
3rd
4th
…
Polish
 1 dom
 2 domy
 3 domy
 4 domy
 5 dom'w
 21 dom'w
 22 domy
 24 domy
 30 dom'w
Japanese & Chinese
 Pluralization is a
different character
depending on what
you’re counting






本 long, thin , narrow objects such as
trees, pencils, bottles etc
枚 thin, flat objects such as paper, bills,
tickets, plates etc.
台 mechanical objects such as
appliances, vehicles etc
人 people
匹 small animal, fish, insects etc
Count in base 10000
not 1000
Never hard-code for any one language!
Buttons

Always use text
– never use an image of text

Never hard-code the size of buttons
Save
Discard
Cancel
außer
Ausschuß
Löschen
之外
摈除
取消
Review: Colors & Lines
Review: Less is More

These elements of your site should be
design choices not necessities:
– Colors
– Lines
– Boxes

Start as simple as possible then add as
necessary to embellish your design
– Never add something without thinking it out fully
Review: The Grid




Structure Content
using hidden lines
Achieves both
alignment and balance
Proximity and grouping
are the key elements
of your layout
Organize text and
images in a rational,
easy to absorb manner
A note on your Grid…

Remember that screen resolution
varies
– Many people are still using 800x600
– ~50% or more are on 1024x768
– Don’t forget mobile devices!


Your grid should have a degree of
flexibility for screen size
Test on multiple resolutions
Review: Rules of Thumb

Stick exactly to the grid
– rely on perceived groupings
– do NOT rely on boxes and lines
– squint at your website to find groupings and check your grid

Pick one font and keep to it
– in your case match Facebook

Keep the design to ~three colors
– use different saturations
– use color pickers
These are guidelines not rules
In the footsteps of
others…
You never get a blank
canvas


Your projects are somewhat “stuck”
with the Facebook look & feel
Get used to it!
– You almost never get to start from
scratch
– stick to the existing look and feel
– Users rely on consistency to help guide
them and to understand your message
Branding

Use the familiar look & feel to your
advantage
– Professional websites look like other
professional websites
– Facebook applications look like other
facebook applications

Matching look and feel to conveys this
information to the user
Branding Commits You



After you’ve chosen a design, you’ve
branded yourself
Changes have a tangible cost of
recognition
Most websites are very cautious of
“upgrading” the look & feel
Visual Fashion

Element of fashion to UI design
– Visual style gives the “era” of the design
– i.e. Looks like windows 95 / Google

Easily confused with branding
– CMU online information design
Facebook Style
Reminder:
Steal Good Design Ideas

“Good artists borrow [from other
artists], but great artists steal! “
– Pablo Picasso

Good graphic designers have much
more training then you do
– They are artists

Feel no shame about stealing their
ideas and designs
Good and Bad Websites
Jakob Nielsen's Top Ten
Mistakes in Web Design
1. Bad Search
2. PDF Files for Online Reading
3. Not Changing the Color of Visited Links
4. Non-Scannable Text
5. Fixed Font Size
6. Page Titles With Low Search Engine Visibility
7. Anything That Looks Like an Advertisement
8. Violating Design Conventions
9. Opening New Browser Windows
10. Not Answering Users' Questions
Nuts & Bolts
Facebook Causes App
Guest Lecture Nov 6th
Sean Parker
 Chairman of Project Agape
 Managing Partner at The Founders Fund
 Co-founder of Napster, Plaxo, and Facebook
Joe Green
 CEO & co-founder of Project Agape
 founder and former CEO of essembly.com
Chris Chan
 Facebook Causes Application Product Manager
 Designer and Product Manager at essembly.com
Set up your 1 on 1 Demo

Nov 7th 12noon – 3pm
15 minute intervals
12-12:15 ; 12:15-12:30 ; … etc

Submit your top 3 choices to Bryan

