Expression Web Design Feature Web Design Basics. Feature Objectives 0 Identify a Web site’s purpose, target audience, and structure 0 Plan a site’s navigation

Expression Web Expression Web Design FeatureDesign Feature

Web Design Basics

Feature Objectives

0 Identify a Web site’s purpose, target audience, and structure

0Plan a site’s navigation system0Use color and page layout to unify the look and feel of

a Web site0Write and format effective Web page text0Select and format appropriate Web page images,

animation, and multimedia elements0Perform 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?


3

Introduction

0What content will appear on the site’s individual pages?

0How can I make certain that the site’s features continue to work correctly and its content remains up-to-date and accurate?


4

Web Site Purpose, Target Audience, and Structure

0First step should be to establish the site’s goals and objectives in order to clarify the site’s overall purpose0 Web site goal

0Primary goal0Secondary

goals

0 Web site objective


5


0Potential visitors to a site are called its target audience0 Develop a general profile for audience members

0Your site will have a starting page, called its home page0 Should contain the following:

0Who owns and publishes the site?0What information is available at the site?0Where is specific information located at the site?


6



7



8

0Other types of pages0 Subsidiary

pages0 Splash or

entry page


0The way in which you organize the pages at your site creates their linking relationships and is called the site’s structure0 Linear structure0 Hierarchical structure0 Webbed structure


9



10

Site Navigation System0 Your site’s navigation system should combine different

types of links0 Navigational elements include:

0 Text link0 Navigation menu0 Navigation bar0 Navigation tabs0 Image links0 Site map0 Breadcrumb trail0 Site search feature


11

Site Navigation System


12

Site Navigation System


13

Site Navigation System0 Follow these guidelines when creating and positioning

your site’s links:0 Be consistent in style and placement0 Place the most important navigational elements at the

top or down the left side of your pages0 Clearly identify a link’s target0 Never use color alone to identify a link0 Place a Home Page link on all subsidiary pages0 Provide a site map and a site search feature0 Add a breadcrumb trail

0 Usability testing can help ensure that your site’s navigation system will be easy to use


14

Color Schemes and Page Layout

0Unify your site’s look and feel through the consistent application of color and repeating content elements


15



16


0Color is an important design tool


17



18

Color Schemes and Page Layout0 Web site visitors characteristically dislike scrolling Web pages

either vertically or horizontally0 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


19


0Balance refers to the symmetric (in balance) or asymmetric (out of balance) arrangement of elements in relationship to each other

0Placing related content elements near each other — for example, an image and its caption — uses proximity to visually link the related elements

0Alignment of page elements either horizontally and/or vertically gives a page a well-organized, professional look

0Develop a good focal point


20



21

Writing Web Page Text0 Users typically scan Web pages0 Write scannable text by:

0 using simple, modern language0 avoiding slang or industry jargon0 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


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


23



24


0A font is a combination of typeface, size, and style0 Serif0 Sans serif


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

0Use animated images and multimedia sparingly0Select images whose colors harmonize with your

site’s color scheme0Prepare Web-ready images by using image creating

and editing software0Add alternate text to each image0Never use images alone to convey information


26

Pre- and Post-Publishing Testing

0You should personally test all of the site’s features and content by:0Reviewing the site’s pages in various browsers and

browser versions running under different operating systems

0Verifying that all link text clearly indicates the link’s target and that navigational elements work as designed


27

Pre- and Post-Publishing Testing

0Ensuring 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

0Establishing that all textual content is accurate and current


28

Lab for Special Feature

0Do Lab 1 on page 238.

0Should have time to do this in class TODAY

0No test on this section


29

Documents

Expression Web Design Feature Web Design Basics. Feature Objectives 0 Identify a Web site’s purpose, target audience, and structure 0 Plan a site’s navigation