Page Layout

1
Page Layout

• Jennifer Smith

2
Good Design

• Beaird defines good design with two standpoints -
  Usability and aesthetics
• Usability - available or convenient for use
• Aesthetics - the study of the mind and emotions
  in relation to the sense of beauty
• Usability and aesthetics go hand in hand

3
Standard Layout
4
Reading

• We dont just read books from left to right
• Pictures and movies are also read in the same way
• Websites are no exception
• On a side note, stronger emphasis is placed on
  elements on the left and weaker emphasis is
  placed on elements on the right

5
(No Transcript)
6
Navigation

• Because we read left to right, navigation is
  usually kept on the left hand side or top of the
  screen
• There are, however, exceptions

7
(No Transcript)
8
Mystery Meat Navigation

• Coined by author and usability analyst Vincent
  Flanders
• Navigation that is impossible to figure out

9
Radioqualia
10
Rule of Thirds

• Mostly thought of as a photographic tool
• Make a grid of nine squares
• Align points of interest where the grids intersect

11
Balance

• Symmetrical or asymmetrical
• Color balance
• Rule of thirds comes into play
• Things that come in threes or triangles are
  pleasing to the eye because they balance each
  other out

12
Symmetry vs. Asymmetry
13
Unity

• The layout should have a unified theme spanning
  all pages of the site
• Fonts
• Colors
• Headers
• Footers

14
Accentuation

• Draws the viewer in to a certain point on the
  website
• Minimalism
• Contrast
• Size
• Shape
• Texture

15

• The beta section on digg.com is small and
  otherwise unnoticeable, but the bright red
  against the green makes it stand out

16
Dimensions

• A small amount of people (monitors with a resolution of 800x600 pixels
• Designing a website that is bigger than 800x600px
  will cause those people to horizontal scroll
• The resolution for a page to show completely on
  an 800x600px monitor is 760x410px

17
Layouts on Layouts

• Layouts can also be added on top of other layouts
• Myspace, livejournal, xanga
• Makes the website more personal to whosever it is

18
The Making of a Page Layout
19
Links

• http//www.blackcowboymusic.com/main.html
• http//www.deviantart.com
• http//www.nytimes.com/
• http//www.yahoo.com/
• http//www.alternativetransportservices.co.uk/