Elements of Web Page Design

1
Elements of Web Page Design
Objective 6.01
2
Websites

• Vary in content, organization, purpose, and style
• All sites are designed to provide information
  and/or sell products/services
• All sites are designed with much of the same
  basic design elements
• Loading time should be 6-7 seconds
• Top of your home (first) page is the first thing
  users see when accessing your site so the design
  is critical to the sites success
• Good site to visit for design tips
• http//education.ed.pacificu.edu/bailey/resources
  /teachnology/websites.html

3
A Good Website

• Sites should be designed to attract viewers and
  interest them enough to return.
• Communication is the basic reason for all
  websites so keep the message clear.
• Research shows that a website has about 6-7
  seconds to attract and retain viewers.

4
Home Pages

• Point of entry into a website
• Referred to as a Portal into a website
• Sets the tone of the entire website
• Design of the home page will vary, depending on
  the function and needs of the users and nature
  and complexity of the organization as a whole
• URLUniform Resource Locator. The websites web
  address (for example http//www.henderson.k12.nc
  .us).
• URL points visitors to the website
• URL is as important as a street address for a
  traditional business
• First appearances are important in a traditional
  store and just as important on a web page

5
Home Page continued

• In hierarchical organizations, sits at the top.
• Titled index.htm

6
Who is the Target Audience

• Know the target audiencethe people you want to
  reach with the website.
• Expectations for older and younger audiences vary
  greatly.
• Younger audiences like more interactivity and
  visuals but expect quick loading time.
• Older audiences often prefer less flash and more
  substance and also expect quick loading time.
• Remember cultural differences as you design your
  site. More information will be presented later
  in the course on this aspect of the market.

7
Web Page Design/Form

• Form is the layout or design of a websitethings
  to consider and plan prior to coding
• Target audienceintended group of users who will
  visit your site
• Types of menu(s) used in the site and links to
  and from all pages
• Tone of the siteusually set by color choices,
  interactivity, and graphics
• Number and size of graphics to match the site
• Visit the following site for more information
  about web design
• http//en.wikipedia.org/wiki/Web_page

8
Text Menu

• Use keyed text to links from a home page or other
  web pagesoften used as a navigation bar
• Left-hand navigation bars are quick to use and
  easy to design
• Loading time is faster than graphics
• Sometimes boring but can be designed attractively
  in frames or tables
• Color scheme and auto shapes add to the
  appearance of sites with text menus
• Often used in training and educational sites
• Easy to read and easy to code

9
Text-based Menu
10
Graphic Menus

• Use images as links for navigation
• Slower loading time even with Ethernet speed (10
  Mbytes/sec the speed data is transported across
  information lines)may still be ten times slower
  than text-based links
• Grabs attention quicker than text menus
• More attractive than text-based menus
• Key factor is that loading time should stay below
  10 seconds, keeping users from becoming
  impatient.
• More visually attractive than text-based menus
• Slightly slower than text-based
• Smaller images and thumbnails make loading faster
  than large pictures

11
Graphic Menus
12
Combination Menus

• This site uses a combination of text and graphic
  menus.
• The search feature offers more user options while
  providing an interesting home page.
• Loading time is quicker than a graphic menu.

13
Structured vs. Unstructured Menus

• Structured
• Options are listed in logical order.
• Options are easy to use because they are either
  in horizontal or vertical order.
• Unstructured
• Words are hot linked within a paragraph.
• No organization, just keywords hyperlinked.
• Often used for educational information or online
  dictionaries.

14
Unstructured Menus

• Less desirable for a home page.
• Hot linking of key words can result in a great
  deal of distraction of the content.

15
Navigational Efficiency/Function

• Websites that are complex and closer to reality,
  require more digital capacity.
• 10 second loading time is a general rule used by
  many organizations.
• 100K per page will allow
• Text (20K), one photo (2x2 inch photo is about
  65K), and about four icons
• Technology is now available that can push 5-10
  seconds of videoviewer can watch one chunk of
  information while another is downloading
• Text size and contrast combined with simple and
  clear fonts will make your web pages easier to
  read and navigate.

16
Simplicity Enhances a Home Page
This very basic page is easy to navigate. The
menu appears to be text-based but it is relying
on JavaScript for execution. The page loads
quickly.
17
Complex Pages

• Complex pages can contains
• Graphic menu
• Text menu
• Simple search capability
• Forms
• A variety of options

18
Don't Choose, Have it Both Ways!

• The best way to meet the needs of both casual
  browsers and highly targeted frequent users is to
  offer alternative views of your web site.
• One approach is to make a visually-attractive
  main home page aimed at the general audience of
  web browsers, but also offer a more text-oriented
  alternate home page that emphasizes rapid access
  to information via detailed text menus.
• Another approach is to use a graphic banner at
  the top of the home page, followed by a dense set
  of text-based links.
• The design elements that make up a good web page
  are often a personal issue. Although you must
  keep in mind the audience for whom you are
  providing information. 

19
Both Ways continued

• Text size and contrast coupled with simple and
  clear fonts will make web pages easy to read. 
  Keep the number and size of graphics on the main
  page to a minimum (this affects load time). 
• If a page is populated with several graphics,
  create a separate page and use thumbnails
  (smaller graphics that can be expanded if more
  detail is necessary).  A page with text and
  minimal graphics will load fast and keep your
  readers interested. See next page for a website
  example of thumbnails.

20
Thumbnails
Thumbnails allow pages to open
quickly. Click on thumbnails and see larger
picture and more details. Loading time is much
faster with thumbnails.
21
Frames

• Displays the text or graphic menus in one frame
  and the main page in the larger frame
• Consist of separate web pages
• Use only 2-3 frames
• Difficult to copy
• Load time is slower with multiple frames
• The BEST reason to include frames in a web page
  is to make more information visible with little
  scrolling.
• Most web designers recommend that frames not be
  used because they are not user friendly

22
Frames Minimal Use Can Enhance a Home Page
23
Helpful Websites

• Design Tips http//education.ed.pacificu.edu/bail
  ey/resources/teachnology/websites.html
• Web Design
• http//en.wikipedia.org/wiki/Web_page
• http//webmonkey.com
• Search in any search engine for new and updated
  information on web design. Every time you look
  you will find another site that may be useful.