Placing Items on a Page(6.2)

Category: Entertainment

Presentation Description

No description available.


Presentation Transcript

Placing Items on a Page:

Placing Items on a Page

Date: :

Date: Objective: What steps can you take to ensure you have created a proper web layout? Bellringer: What is an information design?

Main Idea:

Main Idea The best web pages have clear, attractive layouts, which you can achieve by understanding simple web design guidelines

Web Page Dimensions:

Web Page Dimensions The size of a web page affects its readability If a web page is too wide or too long, then online readers will have to scroll to locate information Too much scrolling can annoy web viewers

Web Page Dimensions:

Web Page Dimensions A web page’s dimensions are defined by the width and height of the page To prevent scrolling, a web page’s width and height should roughly match the width and height of the viewer’s monitor screen


Pixels A screen’s viewing area is measured in pixels A pixel (short for pic ture el ement) is a single point in a graphic image Thousands of pixels combine to display an image on a monitors screen

Page Dimension Guidelines:

Page Dimension Guidelines Most early computer monitors had a screen area of 640 pixels wide by 480 pixels high Today computers have a screen area of 800x600 or higher Users can make content appear smaller or larger by changing their screen resolution The amount of pixels that a monitor can display

Page Dimension Guidelines:

Page Dimension Guidelines The perfect page dimension cannot be precisely defined There is a certain amount of space available on every Web browser/system combination This area is called the safe area Defined as 640 X 480 Smallest monitor available Users usually see the content included in the safe area first

Using the Safe Area:

Using the Safe Area Always try to place the most important items in your web page in the safe area In a web page, this is the upper-left corner No matter how much a user resizes the browser window, the upper left corner always remains in view

Page Layout Guidelines:

Page Layout Guidelines Some common design principles can guide you in laying out Web pages Eliminate Clutter Create Visual Rest Stops Emphasize Important Content Group Related Items Align Text Consistently Keep Download Time Short

1. Eliminate Clutter:

1. Eliminate Clutter One of the biggest mistakes people make when creating web pages is placing too much content on a page Too much content can confuse a visitor and cause him or her to go to a different site

Eliminate Clutter:

Eliminate Clutter Remove Unnecessary Content Delete unnecessary content Divide information into logical sections and place each section on a separate page within your site

Eliminate Clutter:

Eliminate Clutter Choose Function over Form Keep elements that fill a need and discard elements that just add visual interest Avoid using too much of one element on a web page (too many pictures, animations or links)

2. Create Visual Rest Stops:

2. Create Visual Rest Stops Long unbroken blocks of text tire the eye Include plenty of white space to give the eyes a rest White Space: an area without content An area where the eye can take a break as it scans the page Using white space creates visual breaks and adds interest to the areas that do have content

3. Emphasize Important Content:

3. Emphasize Important Content Size elements on your page in proportion to their importance The bigger the design the more important the information Most users look for the boldest largest elements on a page first

4. Group Related Items:

4. Group Related Items If items are grouped closely together, people will assume that these items are related Proximity: closeness of elements on a page Can cause readers to make assumptions about how elements relate to each other

5. Align Text Consistently:

5. Align Text Consistently When laying out your page, line up items with each other Text can be aligned to the left, right or to the center Try not to mix alignments on a page Since English speakers read left to right, most often paragraphs are aligned to the left

6. Keep Download Time Short:

6. Keep Download Time Short Because every text or graphic item you add to a page you should not cram too many elements into your web page You only have a few seconds to catch a viewers attention so your site’s download time must be short!

authorStream Live Help