Week 7 – “The Principles of Beautiful Web Design”

I finally got this chapter to come up the way I guess it should have from the start.  Did anyone else have trouble with this?  I tried several times at the college computers.  This is the first time I tried at home and it came right up.   Well, here’s my summary:

In the Article: Design beautiful websites with Fireworks, by Jason Beaird, to begin the web site design, sketch a few layouts, choose one, pick the color scheme, and draw a comp of it. 

Defining Good Design

• Aim for good visual appeal and user functionality

• User should be happy with the design, but attracted to the content.
• Design should have easy navigation
• All pages should be easily recognized as being a part of the same site

·        Consistent use of colors

·        Consistent navigation

·        Repetition of identity (e.g., logo)

Components of web site

• Containing Block
• Company Identity (e.g., logo, color, business cards, letterhead, brochures)
• Navigation (keep close to top)
• Content (important – user must be able to find info in seconds)
• Footer (copyright, contact info, legal info, & links to main sections of site.
• White space (should guide the user around the page & help to create balance & unity)

Grid Theory

Golden Ration or divine proportion – divide length by about 1.62

            Occurs a lot in nature

            Compositions using this proportion are “aesthetically pleasing”

Rule of Thirds

            Use to layout page design

Balance

Symmetrical – mirror images on either side of layout

            Horizontal

            Bilateral

            Radial

Last two rarely used in web design, but used in logo creation

Asymmetrical – objects of differing size, shape, tone, or placement – placed in such a way as to equalize the weight on the page – size vs. number

Unity

Different pieces work together as a whole

Unity achieved with proximity and repetition

Repetition refers to a group of similar objects or like colors, shapes or textures

Emphasis

Focal point – a particular element draws user’s attention.

Emphasis can be made with

• Dominance
• Placement (direct center)
• Continuance (e.g., arrow pointing to focal point)
• Isolation
• Contrast (difference in color, size or shape)
• Proportion (difference in the scale of objects – i.e., something much larger or much smaller than it should be in life compared to other objects in picture)

HTML tags & CSS properties designed to create emphasis:

• Block quote – HTML tag used for isolation
• CSS position property
• Blink & Marquee – avoid these

Layouts

Left-column Navigation – most common

Right-column Navigation (allows content to be first thing user sees)

Three-column Navigation (use for lots of navigation, small content, or advertising)

Getting Inspired

Check out these web sites:

http://www.csszengarden.com

http://www.cssbeauty.com

http://www.stylegala.com/archive

http://cssvault.com

http://www.designinternet.com/sow/

Using a Morgue File

Capture screen shots of web site pages:

• Press Alt Print Screen
• Paste
• Save

Fresh Trends

Expansive Footer Navigation

Instead of main links & copyright notice – use footnote for contact info, expanded site navigation, & extra content such as blogrolls, link rolls, Flikr badges,… – bonus navigation vs. main navigation

  

Three Columns with Content First

Content on far left

Homepage – 3 columns, inside pages – 2 columns

Content expands naturally on inside pages

Resizing:  Fixed Width vs. Liquid Width

Fixed Width

• Designer has more control over appearance of floated image within content
• Allows for planned white space
• Narrower text blocks are easier to read
• Can appear dwarfed in large windows
• User loses control

Liquid Width

• Adjusts to most screen resolution & devices
• Decreases user scrolling
• Text extending over a wide area is harder to read
• More difficult to execute
• Can change white space – changing balance & unity

An Alternative:  Variable Fixed-Width Layout

When expand browser window from 800 pixels to 1024 pixels wide, the right column separates into a 3^rd column.

Screen Resolution

In 2006, 58% of users had their screens set to 1024 x 768 pixels, 19% had higher, and 17% had 800×600.

To design for 800 and 1024 resolutions, design important content within 800 pixels width; display another column for search functionality, topic links, & advertising.  That way important info is shown without need for scrolling.