|
Design Layout | Web
Page Design Resources
Web Page Design Resources
Page Length
and Width
A general guide for pages containing
text is that the width of text on the page should
not exceed 75% of the window or one to 2 screens in length.
This will eliminate the need for excessive scrolling. The
average single page of text on paper is represented by
2 screen lengths on the computerscreen.
Text should be broken with bullets or blocks of text in
order to improve its readability online.
If web pages are to be added to content modules in Blackboard,
it may be advisable to center the table on the page. Multiple
content pages should be placed in separate Content Modules
for better organization and clarity.
Sources:
http://info.med.yale.edu/manual/contents.html
Adding and Organizing WebCT Content Workshop
WebCT 2002 4th Annual User Conference
July 22-23/2002
Why? This is because the eye becomes tired having to scan
back and forth across the entire screen. In terms of length,
it is recommended that each page of information be no longer
than one or two screens. Two computer screens equal one
page of written text. It is very hard to conform to this
rule, but scrolling down excessively long pages of text
can become tedious for the user. An effective way to limit
the page length is to break up the material, and use bullets
and links for main points rather than explaining everything
in detail.
Fonts
There is no hard and fast rule here, but some sources
contend that the Arial font you see on this screen,
is easier
on the eyes on a computer screen, than the traditional
Times New Roman font that is seen on a page of text
in a book. Italic font is difficult to read because
the
pixels don't line up neatly.
Headings are very important, so use bold sparingly,
to help your readers move through the text to important
themes.
Alignment
Use tables on your web page to help align elements. Alignment
means that items on the page are lined up with each other.
Items can be lined up on the left side, right side, or
center of the page.
It is generally considered good practice to choose one
alignment and to stay with it. On this page we have used
a table with three columns. Alignment applies to both vertical
and horizontal elements on the page.
Repetition
Repetition means that throughout the web page or pages,
certain elements are repeated that provide a coherency
to the site. For example, navigation buttons are the same
colour and size, and in the same location on every page.
Colours also help users know where they are.
See this site for an example of good use of repetition.
What elements of repetition exist to make the pages of
this site look as if they belong together?
Contrast
Contrast refers to the degree of difference between 2
elements on a page. The use of black text on a white background
provides an example of contrast. Contrast may refer to
colour, size, boldness, degree of white space around an
object etc. It is very important to ensure that the text
is in strong contrast to the background colour of a page
in order to ensure that the user can read it.
View this site for a look at the element of contrast. Is
there sufficient contrast here? If not, how might the contrast
be improved?
Proximity
Proximity refers to the relationship of one item on the
page to another. When items are close together, they appear
to be connected; when they are separated, they appear not
to be connected. Titles, picture captions, etc., should
be close to the text to which they are related. Notice
in this paragraph, there is a small space between the title
and the text. This is done to ensure proximity.
Source: Williams, Robin and Tollett, John.1998.
The Non-Designer's Web Book:
An easy guide to creating, design, and posting your own
web site.
California: Peachpit Press
- Put text in a 70 to 80% table and place table in the center
so there is a margin on both sides
- Break up material
- Use bullets or blocks of text
- Limit Scrolling
- Each page no more than 2 – 3 screens
- Use Arial Font, Colored Text Headings
- Separate Content Modules for each Unit
- Reference: http://info.med.yale.edu/manual/contents.html
- Adding and Organizing Blackboard Content Workshop
- WebCT 2002 4th Annual User Conference July 22-23/2002
|
