Download Special Feature 1 - Web Design Basics

Feature Objectives
0 Identify a Web site’s purpose, target audience, and
structure
0 Plan a site’s navigation system
0 Use color and page layout to unify the look and feel of
a Web site
0 Write and format effective Web page text
0 Select and format appropriate Web page images,
animation, and multimedia elements
0 Perform pre- and post-publishing testing
Special Feature 1: Web Design
Basics
2
Introduction
0 A successful Web site communicates its overriding
message
0 Creating a successful site begins with developing a solid
design plan:
0 Why will the site exist?
0 Who is likely to visit the site and why will they do so?
0 What types of Web pages will be included?
0 How will the site’s structure, color scheme, and page
layout support its overall message?
0 How will visitors navigate among the site’s pages?
Special Feature 1: Web Design
Basics
3
Introduction
0 What content will appear on the site’s individual
pages?
0 How can I make certain that the site’s features
continue to work correctly and its content remains
up-to-date and accurate?
Special Feature 1: Web Design
Basics
4
Web Site Purpose, Target
Audience, and Structure
0 First step should be to establish the site’s goals and
objectives in order to clarify the site’s overall purpose
0 Web site goal
0 Primary goal
0 Secondary
goals
0 Web site
objective
Special Feature 1: Web Design
Basics
5
Web Site Purpose, Target
Audience, and Structure
0 Potential visitors to a site are called its target
audience
0 Develop a general profile for audience members
0 Your site will have a starting page, called its home
page
0 Should contain the following:
0 Who owns and publishes the site?
0 What information is available at the site?
0 Where is specific information located at the site?
Special Feature 1: Web Design
Basics
6
Web Site Purpose, Target
Audience, and Structure
Special Feature 1: Web Design
Basics
7
Web Site Purpose, Target
Audience, and Structure
0 Other types of
pages
0 Subsidiary
pages
0 Splash or
entry page
Special Feature 1: Web Design
Basics
8
Web Site Purpose, Target
Audience, and Structure
0 The way in which you organize the pages at your site
creates their linking relationships and is called the
site’s structure
0 Linear structure
0 Hierarchical structure
0 Webbed structure
Special Feature 1: Web Design
Basics
9
Web Site Purpose, Target
Audience, and Structure
Special Feature 1: Web Design
Basics
10
Site Navigation System
0 Your site’s navigation system should combine different
types of links
0 Navigational elements include:
0 Text link
0 Navigation menu
0 Navigation bar
0 Navigation tabs
0 Image links
0 Site map
0 Breadcrumb trail
0 Site search feature
Special Feature 1: Web Design
Basics
11
Site Navigation System
Special Feature 1: Web Design
Basics
12
Site Navigation System
Special Feature 1: Web Design
Basics
13
Site Navigation System
0 Follow these guidelines when creating and positioning
your site’s links:
0 Be consistent in style and placement
0 Place the most important navigational elements at the
top or down the left side of your pages
0 Clearly identify a link’s target
0 Never use color alone to identify a link
0 Place a Home Page link on all subsidiary pages
0 Provide a site map and a site search feature
0 Add a breadcrumb trail
0 Usability testing can help ensure that your site’s navigation
system will be easy to use
Special Feature 1: Web Design
Basics
14
Color Schemes and Page
Layout
0 Unify your site’s look and feel through the consistent
application of color and repeating content elements
Special Feature 1: Web Design
Basics
15
Color Schemes and Page
Layout
Special Feature 1: Web Design
Basics
16
Color Schemes and Page
Layout
0 Color is an important
design tool
Special Feature 1: Web Design
Basics
17
Color Schemes and Page
Layout
Special Feature 1: Web Design
Basics
18
Color Schemes and Page Layout
0 Web site visitors characteristically dislike scrolling Web pages
either vertically or horizontally
0 The screen resolution at which visitors view your Web pages will
vary and can affect their need to scroll pages either vertically or
horizontally (or both) to view the pages’ content
Special Feature 1: Web Design
Basics
19
Color Schemes and Page
Layout
0 Balance refers to the symmetric (in balance) or
asymmetric (out of balance) arrangement of elements
in relationship to each other
0 Placing related content elements near each other —
for example, an image and its caption — uses
proximity to visually link the related elements
0 Alignment of page elements either horizontally
and/or vertically gives a page a well-organized,
professional look
0 Develop a good focal point
Special Feature 1: Web Design
Basics
20
Color Schemes and Page Layout
Special Feature 1: Web Design
Basics
21
Writing Web Page Text
0 Users typically scan Web pages
0 Write scannable text by:
0 using simple, modern language
0 avoiding slang or industry jargon
0 structuring your topic paragraphs in a chunked text
style composed of a short sentence or two followed by a
bulleted or numbered list that summarizes the
paragraph’s essential information
0 organizing your text so that the main point or masthead
appears on the home or major level page in the site’s
structure and relevant details appear on subsidiary
pages
Special Feature 1: Web Design
Basics
22
Writing Web Page Text
0 avoiding text formatting that implies a link, such as the
traditional colors of blue or purple or underlining the
text, and using bold or italic formatting sparingly
0 avoiding excessive use of uppercase characters that are
more difficult to scan
Special Feature 1: Web Design
Basics
23
Writing Web Page Text
Special Feature 1: Web Design
Basics
24
Writing Web Page Text
0 A font is a combination of typeface, size, and style
0 Serif
0 Sans serif
Special Feature 1: Web Design
Basics
25
Web-Ready Images and
Multimedia
0 Include only those images and multimedia elements
that are in context with and support the other content
at your site
0 Use animated images and multimedia sparingly
0 Select images whose colors harmonize with your
site’s color scheme
0 Prepare Web-ready images by using image creating
and editing software
0 Add alternate text to each image
0 Never use images alone to convey information
Special Feature 1: Web Design
Basics
26
Pre- and Post-Publishing
Testing
0 You should personally test all of the site’s features and
content by:
0 Reviewing the site’s pages in various browsers and
browser versions running under different
operating systems
0 Verifying that all link text clearly indicates the link’s
target and that navigational elements work as
designed
Special Feature 1: Web Design
Basics
27
Pre- and Post-Publishing
Testing
0 Ensuring that all images appear in the correct
position on each page, that text equivalents are
available for each image, and that alternate text is
provided if browser images are turned off
0 Establishing that all textual content is accurate and
current
Special Feature 1: Web Design
Basics
28
Lab for Special Feature
0 Do Lab 1 on page 238.
0 Should have time to do this in class TODAY
0 No test on this section
Special Feature 1: Web Design
Basics
29