Graphic Design

1
Graphic Design Aesthetics

• Christine Robson
• November 1, 2007

2
Topics

• Reading
• Internationalization
• Review Colors Lines
• In the footsteps of others
• Facebook Style
• Good and Bad Websites

3
Reading
4
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

5
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

6
(No Transcript)
7
(No Transcript)
8
Reading Buttons

• Use Short Descriptive Text
• Dont make your users read more then they need to!

Save
Discard
Cancel
Save the file 11-01.ppt
Discard the file 11-01.ppt
Cancel
9
Internationalization
10
Internationalization

• Think global from the outset
• Other languages
• Other cultures
• Right-Left vs. Left-Right page layouts

11
(No Transcript)
12
(No Transcript)
13
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.

14
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

15
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 youre 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!
16
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
??
??
??
17
Review Colors Lines
18
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

19
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

20
A note on your Grid

• Remember that screen resolution varies
• Many people are still using 800x600
• 50 or more are on 1024x768
• Dont forget mobile devices!
• Your grid should have a degree of flexibility for
  screen size
• Test on multiple resolutions

21
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

22
In the footsteps of others
23
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

24
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

25
Branding Commits You

• After youve chosen a design, youve branded
  yourself
• Changes have a tangible cost of recognition
• Most websites are very cautious of upgrading
  the look feel

26
(No Transcript)
27
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

28
(No Transcript)
29
(No Transcript)
30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
Facebook Style
34
(No Transcript)
35
(No Transcript)
36
(No Transcript)
37
(No Transcript)
38
(No Transcript)
39
(No Transcript)
40
(No Transcript)
41
ReminderSteal 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

42
Good and Bad Websites
43
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

44
(No Transcript)
45
(No Transcript)
46
(No Transcript)
47
(No Transcript)
48
(No Transcript)
49
(No Transcript)
50
(No Transcript)
51
(No Transcript)
52
(No Transcript)
53
Nuts Bolts
54
Facebook Causes AppGuest 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 

55
Set up your 1 on 1 Demo

• Nov 7th 12noon 3pm
• 15 minute intervals
• 12-1215 1215-1230 etc
• Submit your top 3 choices to Bryan