4.1. Theory

4.1.1. Reading: Visual Hierarchy

Visual Hierarchy

Visual Hierarchy : the arrangement of elements according to importance and emphasis. “What is the message?” Question needs to be answered before knowing which text and graphics should be emphasized.
The ABC's of Visual Hierarchy (according to John Rea, vice president/creative director of McCann Erickson , New York ) are:

Where do you look first?
Where do you look second?
Where do you look third?

To establish a visual hierarchy, decide the order of importance for each piece of information on your page. Create a flow of information from the most important element, which should be the focal point of your page, to the least.
If you try to give equal importance to everything, nothing will be considered important. You will just end up with visual confusion. (Landa 1996)
Try the ABC test (above) on the following layouts:

See http://www.stcroixrods.com/
See http://www.audiusa.com/

See http://www.tazo.com/ [AWESOME TEA SITE!!!]

Things to keep in mind when trying to design a good visual hierarchy...
In general, people from Western cultures will:

Quickly scan from upper left to bottom right to get an overview of the screen.
Tend to look at larger items first and smaller items last
Be attracted to bright colors first, but also look at colors that contrast with or are different from other colors.
Interpret item places above other items as more important than items placed below.
Look at items that appear “heavier” first.
Assume arrows and elements pointing to the right mean forward while arrows pointing to the left mean backward.
Look at moving elements before static ones.
Tend to look at moving images of another human (such as a video) before moving on to other elements.

(Graham 1999)
The following list contains some of the visual techniques you can use to emphasis the focal point in your visual hierarchy.

Make it the biggest
Make it the brightest
Enclose the item in a different shape than that of the other content screen.
Make the item a different shape that that of the other content screen.
Add a border to the shape around it.
Change the color of the item to make it contrast with other items onscreen
Isolate it from other items onscreen
Add a special effect to it (like texture)
Make it bright if everything else is dull (or visa versa)
Make it sharp if everything else is out of focus (or visa versa)
Position the item so all the other elements lead to or point toward it.
Animate it (make it blink or change colors, apply a rolling texture to it, or create a looping image animation)
Use another animated element to call attention to the item.

(Landa 1996)

4.1.2. Reading: Wireframes

Wireframes

Wireframe : A diagram that illustrates the layout of a Web page using different shapes (such as boxes, ovals, and diamonds) to represent content, functional, and navigational elements to show their placement on the page. (Phyo 2003)
Storyboard : A visual document depicting the style, layout, action, navigation, and interactivity on every screen of your Web site (Graham 1999) . Storyboards should contain enough information to serve as a blue print. In theory, a storyboard should be self-explanatory enough to allow a third party to construct your Web site without any needed consultation.
Ani Phyo, author of Return on Design: Smarter Web Design That Works (2003), suggests that initially, wire frames should be used instead of storyboards. She argues that much time and money can be saved in developing a Web site if you can get your client to understand and appreciate the usability of the proposed elements on your site before becoming emotionally involved in the visual style.

A wireframe document showing the general layout of a Web page. See below for detailed explanation.
Components of a Wireframe (see numbers on illustration above):

Global Navigation
Local Navigation
Page Specific Content
Administrative Navigation
Page Title
Search Capability (if available)
Page Footer

Global Navigation : Visitors need to know, on every page of the site, where he or she is in the context of the site as a whole. As a result, global navigation should appear consistently on every page. Global navigation refers to the major sections of the Web site, not every single page.
Local Navigation : A submenu of links within each of the major sections of the Web site. Local navigation should appear near the top and at the bottom of every page.
Page-Specific Content : Includes headers (aka headlines), sub headers, text, images (including photos, drawings, charts, etc), video, audio, animation, and captions / copyright notices (for images and other media elements). Most pages will contain a combination of these elements. The most prominent content should appear in the center of the page.
Administrative Navigation: This is a separate group of links to utility information unrelated to the actual content of the site, such as “help”, “site map”, “contact us”, and/or “about us”.
Page Title: Your page title should match the link that led to the page as well as the header for the page. It is often ignored but very important because it is the information listed when bookmarks are displayed and search engines give their results. Page titles are best used in this format: Site Name: Section Name: Page Name. 40 characters or less is best.
Search Capability : Some people can't be bothered browsing – especially if they're in a rush. If you can, implement search facilities for your Web site and make them consistently available on every page.
Page Footer: Be sure to use a consistent footer at the bottom of each of your pages.

The Rule of Five, Plus or Minus Two…
When presenting any kind of information on a page, its best to use no fewer than three and no more than seven groupings of elements. Otherwise you are likely to overwhelm your visitors with too many choices.
For example, your global navigation should have no more than seven top level links. By the same token, other information in your site should be categorized into at least 3 groups instead of just listing a bunch links or other information.

Wireframe Design Guidelines
Global and local navigation on your Web site should be discreet, and not detract from the meat of your content on your site. Once your visitors familiarize themselves with the usability of your site, they tend to tune out repetitive navigation panels and concentrate on your content (as they should). They'll feel confident that they'll always know how to navigate around the site when they need to. Using wireframes to plan your layout helps you concentrate on these issues without getting sidetracked on other visual design issues.
Tips to follow:

Use a Hierarchical Structure – Place items of higher importance at the top of the page in easy to find places.
Text Links in Lists vs in Paragraphs – Better to keep links separate from textual content.
The Home Page Is the Doorway to Your Site – As with feng shui, the entry of your site has the power to make people feel welcome or scare them away. You home page design is very important. Be sure it clearly identifies your site.
Keep Pages Short and Concise – Long scrolling pages are difficult to read online.
Provide a Link to a Site Map on Each Page – This would normally be part of your administrative or utility set of links.
Use Consistent Navigation Cues – Keep your link sets in their same locations on each page. Think about conventions you see in the outside world and how they're consistent followed: road signs, street addresses, page numbers, book indexes, etc..
Use Links Thoughtfully – Label your links using clear and obvious terminology. Bury your external links deep in the site to force visitors to use your site before they leave it. Sending external links to new browser windows allows your visitors to easily pick up where they left off on your site.
Test As You Go Along – Even at the wireframe stage, you should be getting feedback from others. Show them your pages and see if they can understand how you use your site.

(Phyo 2003)

4.1.3. Reading: Flowcharting

Flowcharting

By way of definition a flowchart is a diagram showing the paths through a particular situation. In this case it is through a Web site. It provides an overview of the presentation strategy.
Flow charts are used for:

Ensuring all aspects are covered
Clarifying sequences
Showing relationships
Ensuring them are no closed loops (by revealing branching logic)
Ensuring all responses are considered
Communicating intentions to team members and clients

Selected Flowchart Symbols

N.B. symbols used vary among designers and companies.

Flowchart Conventions

When producing flowcharts the following guidelines exist :

Draw top to bottom
Use arrows to show directions
Try and avoid lines crossing
Try and keep a flowchart to one page (A3 or A4)
Number flowcharts and nest them, beginning with a conceptual level
At the high level, one box represents a sequence
Can be three dimensional, e.g. by using plastic children's toys

Examples
Following from the objectives for the table setting training, a basic working model of the flow between the content will be developed.
At this stage we will limit our use to the symbols given above.

Notes:

The package name section will have the aim, credits and copyright notices as well
The menu has three menu items, as indicated by chart.
Help and Quit are always available, (perpetuals)
Each section must be accessed from the main menu
Main menu is also always available
Each subsections can be paged through
The package title, and each of the subsections need more detail

4.2. Practice

4.2.1 Reading & Exercises: Serious HTML: Standards, Compliance, and All That Jazz

Tutorial Exercise
DONE!	Read and do the exercises and quizes in Chapter 6 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 223-264). Learn from your mistakes by checking to see if your solutions are correct.

4.2.2 Reading & Exercises: Putting the ‘X’ into HTML: Moving To XHTML

Tutorial Exercise
DONE!!	Read and do the exercises and quizes in Chapter 7 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 265-284). Learn from your mistakes by checking to see if your solutions are correct.

4.2.3 Reading & Exercises: Meeting the Media: Adding Images To Your Pages

Tutorial Exercise
DONE!!!	Read and do the exercises and quizzes in Chapter 5 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 165-221). Learn from your mistakes by checking to see if your solutions are correct.