graphic design aesthetics l.
Skip this Video
Loading SlideShow in 5 Seconds..
Graphic Design & Aesthetics PowerPoint Presentation
Download Presentation
Graphic Design & Aesthetics

Loading in 2 Seconds...

play fullscreen
1 / 55

Graphic Design & Aesthetics - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Graphic Design & Aesthetics' - Jeffrey

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
graphic design aesthetics

Graphic Design & Aesthetics

Christine Robson

November 1, 2007

  • Reading
  • Internationalization
  • Review: Colors & Lines
  • In the footsteps of others…
  • Facebook Style
  • Good and Bad Websites
the text on your page
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
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
Reading Buttons
  • Use Short Descriptive Text
  • Don’t make your users read more then they need to!




Save the file 11-01.ppt

Discard the file 11-01.ppt


  • Think global from the outset
  • Other languages
  • Other cultures
  • Right-Left vs. Left-Right page layouts
volume of text
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
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

1 dom

2 domy

3 domy

4 domy

5 dom'w

21 dom'w

22 domy

24 domy

30 dom'w



  • 1 house
  • 2 houses
  • 3 houses
  • 1st
  • 2nd
  • 3rd
  • 4th

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!

  • Always use text
    • never use an image of text
  • Never hard-code the size of buttons










review less is more
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
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
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
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

you never get a blank canvas
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
  • 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
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
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
reminder steal good design ideas
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
jakob nielsen s top ten mistakes in web design
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

facebook causes app guest lecture nov 6th
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

Chris Chan

  • Facebook Causes Application Product Manager
  • Designer and Product Manager at 
set up your 1 on 1 demo
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