Multimedia Design Guidelines MMP 100 - 141

Metaphor A metaphor is a figurative representation that links the content of your website to an

established mental model. Using metaphors in your website allows the users to understand the

elements on the webpages easier by relating to their familiar objects or concepts. A good

example of metaphor used in many websites is the shopping cart:

Figure 1: Shopping cart in Amazon.com

Figure 2: Shopping cart in B&H Photo Video

A well selected metaphor should be concrete and obvious, and preferably with an icon for

instant recognition. The selected metaphor must be appropriate, otherwise it might mislead

users. The eventual goal of a metaphor is to reinforce the message and appeal to the target

audience without detracting from the content and navigability of the website.

Consistency Both the appearance of each webpage and the navigation scheme of the whole website should

be consistent. A consistent website allows the target audiences to use it efficiently without

confusion.

For example, if you use a three-column layout in some of your webpages, the same layout

should be applied to other webpages too unless you have a compelling reason not to do so. Also,

if you place the navigation bar at the top in some webpages, you’d better use the same

navigation bar at the same place in the rest of your webpage. See Figure 3 for example.

Template A template is a precise layout indicating where various elements will appear on the webpage.

For example, you can define where to place website banner, the page title, the navigation bar,

the main text, and so on. You can also define the page background, font sizes/styles, and so on

with a template.

Figure 3: Consistent appearance and

navigation in Apple.com

Figure 4: Dreamweaver template (Class 5 exercise)

By using templates in your project, you receive the benefits of providing consistency throughout

the website, shorten the development time, and prevent “object shift” (e.g. when the same

object in your website is slightly shifted even for only 1 pixel, it causes a noticeable and

disconcerting jump when the user switches back and forth among webapges).

We discussed two ways in MMP 100 in using templates to keep consistency. The first way is to

use Dreamweaver templates, and the second way is to use cascading style sheets (CSS). It is

possible to combine these two ways to make your work extremely efficient and flexible.

Contents The contents are the King of your website. In most cases, people visit your website because

they are interested in the contents of your website. The media (texts, pictures, sounds, videos)

and the design of your website should complement the contents of the site, not to replace them,

unless the purpose of your website is to entertain or showcase artworks.

There are a few principles to follow when you design the contents on the webpages:

Don’t put too much content on a single webpage because it will overwhelm the users. Web

users generally do not read a webpage, instead, they simply scan it. If your webpage clusters

tons of information on it, the user will most likely navigate away. If you have a lot of

information to present, separate them into different webpages that are hyperlinked with

each other.

Organize the contents on the webpage so that a webpage only talks about one thing at a

time.

Make your content easy to read on the webpage. Generally speaking, your page background

cannot be too complicated, and the texts should stand out from the background.

Figure 5: The content is not readable because the texts don’t stand out from the complex

background

Balanced Layout Geographically balance the distribution of texts, images, buttons, videos, and animations in a

webpage. Don’t cluster a lot of content in certain parts of the webpage while leaving other parts

blank.

To achieve a balanced layout in the webpage, you can place elements of the same type

symmetrically by mirroring the elements horizontally or vertically on both sides of a center line

(Figure 6). You can also arrange nonidentical elements on both sides of a center line to achieve

an asymmetrical balance (Figure 7).

Figure 6: Symmetrical balance

Figure 7: Asymmetrical balance

Movement Web users’ eyes usually are drawn to particular locations on a webpage instead of the whole

screen. And their eye focus moves while they are reading. Therefore you need to consider the

movement of the users’ eyes when you arrange the elements in the webpage.

Generally speaking, web users in the western culture tend to read a webpage from the upper

left, and gradually shift the focus toward the lower right. Contents at the top and on the left

tend to receive more attention from users. Therefore, it’s important for web developers to

consider this tendency especially if the purpose of the website is for education and training. For

example, by placing the headline, leading question, or other eye-catching elements on the top

left can attract attention from the user and make them start reading your webpage. You can

also place further instructions, extended readings, etc. on the right and on the bottom, so that

when the user continues reading the webpage they will learn further information.

Unified Piece Finally, the website must be presented as a unified piece. A web designer must be concerned

about two types of unity: intra-page unity and inter-page unity.

Intra-page unity refers to the integrity of various elements on the same webpage. As previously

mentioned, contents of a webpage should be well organized so that a single webpage is focused

on one topic. Do not put irrelevant topics in the same webpage as it is very confusing.

Inter-page unity requires related webpages to be organized in the same section or level. Usually

inter-page unity is achieved by using multi-level navigations. For example, the first-level

navigation of a website divides all webpages into different categories. And the second-level

navigation associates webpages of the same category together (Figure 8).

Figure 8: Two-level navigation creates inter-page unity

It is important that any element in a webpage must not be irrelevant to the topic of the

webpage, and any webpage in a website must not be irrelevant to the purpose of the website. If

an element or a webpage is irrelevant, one would rather discard the element or the webpage to

make sure the whole website is a unified piece.

This handout is created based on Multimedia For the Web Revealed (Deluxe Education Edition)

by Calleen Coorough and Jim Shuman; published by Thompson Course Technology, 2006.

Usage is limited to BMCC MMP-100 course: Introduction to Multimedia

Zhou Zhou

05/13/2011