Lesson 7: Layout

Placing items on a page

Visitors are attracted to pages that look uncluttered and are consistent from one page to another.

Common design principles can guide you in laying out web pages. following these principles will help you create a site that is user-friendly.

Eliminate clutter-too much content can confuse a visitor and cause him or her to surf to a different site.

✦ Remove unnecessary content-only include information that you really need.

✦ Update information-instead of including everything at once, update and modify information on a regular basis.

✦ Choose function over form-keep only elements that you need and discard elements that just add visual interest

✦ avoid overkill-avoid using too many different elements such as links, colors, or scrolling text. Avoid blinking text and unnecessary animation.

Use white space (an area without content) so the eye can take a break at it scans the page. Using white space in the manner helps frame and draw attention to your content.

Emphasize Content - size elements on your page in proportion to their importance

✦ a bigger design indicates more important information

✦ a smaller design indicates that an item is less important.

Most users look first at the largest or boldest element on the page, so make your important content larger than your less important content. Format main headings larger than subheadings or place them in unique color or typeface.

Group Related Items-the proximity (closeness) of elements on a page can cause readers to make assumptions about how elements relate to each other. If items are grouped closely together, people will assume that these items are related. Try not to create false impressions by placing items that are not related close to each other.

Align Text consistently-line up items with each other. text can be aligned to the left, to the right, or to the center. try not to mix alignments on a page. switching alignment can confuse your reader.

Keep download time short-every text or graphic item that you add to a page increases that page’s download time. you only have a few seconds to catch a viewer’s attention, so make sure you page downloads as quickly as possible.

Web Page Dimensions

When creating Web pages, you want to make sure that people see your important content first. To do this, you need to know how your audience’s monitors will affect how your site is viewed. A monitor’s viewing point is measured in pixels. A Pixel (short for picture element) is a single point in a graphic image.

Computer monitors typically have a screen area of 800 pixels wide by 600 pixels high (referred to as 800 x 600) or higher. This area is called the safe area because ti displays on every web browser/system combination. Place your most important and eye-catching information in this area because it is the space that viewers will see first.

Navigation and Storyboard

Assignment:

Assignment:
To best understand the principles of design and layout of web pages, you can make a template of your site.

• Download Tutorials 6 and 7
• Follow the directions in each to create a template Web site.