Graphic Design _ Aesthetics

Document Sample
Graphic Design _ Aesthetics Powered By Docstoc
					Graphic Design &
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

   Most website design is about text and
   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         Discard          Cancel

    Save the file 11-01.ppt   Discard the file 11-01.ppt   Cancel

   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
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
 English      Polish       Japanese & Chinese
  1 house     1 dom       Pluralization is a
  2 houses    2 domy       different character
  3 houses    3 domy
                             depending on what
                             you’re counting
  …           4 domy        本 long, thin , narrow objects such as
                               trees, pencils, bottles etc
               5 dom'w       枚 thin, flat objects such as paper, bills,
                               tickets, plates etc.
    1st       21 dom'w      台 mechanical objects such as
                               appliances, vehicles etc
    2nd       22 domy       人 people
    3rd       24 domy       匹 small animal, fish, insects etc

    4th       30 dom'w
                              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

             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
    – 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
You never get a blank
   Your projects are somewhat “stuck”
    with the Facebook look & feel
   Get used to it!
    – You almost never get to start from
    – 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
    – 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
   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
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

Chris Chan
 Facebook Causes Application Product Manager
 Designer and Product Manager at
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

Shared By: