expression web 2 concepts and techniques expression web design feature web design basics
TRANSCRIPT
Expression Web 2Concepts and Techniques
Expression WebDesign Feature
Web Design Basics
Expression Web Design Feature: Web Design Basics
Feature Objectives
• Identify a Web site’s purpose, target audience, and structure
• Plan a site’s navigation system• Use color and page layout to unify the look and
feel of a Web site• Write and format effective Web page text• Select and format appropriate Web page images,
animation, and multimedia elements• Perform pre- and post-publishing testing
2
Expression Web Design Feature: Web Design Basics
Introduction• A successful Web site communicates its overriding message• Creating a successful site begins with developing a solid
design plan:– Why will the site exist?– Who is likely to visit the site and why will they do so?– What types of Web pages will be included?– How will the site’s structure, color scheme, and page
layout support its overall message?– How will visitors navigate among the site’s pages?– What content will appear on the site’s individual pages?– How can I make certain that the site’s features continue
to work correctly and its content remains up-to-date and accurate?
3
Expression Web Design Feature: Web Design Basics
Web Site Purpose, Target Audience, and Structure
• First step should be to establish the site’s goals and objectives in order to clarify the site’s overall purpose– Web site goal
• Primary goal• Secondary
goals– Web site
objective
4
Expression Web Design Feature: Web Design Basics
Web Site Purpose, Target Audience, and Structure• Potential visitors to a site are called its target
audience– Develop a general profile for audience members
• Your site will have a starting page, called a home page– Should contain the following:
• Who owns and publishes the site?• What information is available at the site?• Where is specific information located at the site?
5
Expression Web Design Feature: Web Design Basics
Web Site Purpose, Target Audience, and Structure
6
Expression Web Design Feature: Web Design Basics
Web Site Purpose, Target Audience, and Structure
• Other types of pages– Subsidiary pages– Splash or entry page
7
Expression Web Design Feature: Web Design Basics
Web Site Purpose, Target Audience, and Structure
• The way in which you organize the pages at your site creates their linking relationships and is called the site’s structure– Linear structure– Hierarchical structure– Webbed structure
8
Expression Web Design Feature: Web Design Basics
Web Site Purpose, Target Audience, and Structure
9
Expression Web Design Feature: Web Design Basics
Site Navigation System
• Your site’s navigation system should combine different types of links
• Navigational elements include:– Text link– Navigation menu– Navigation bar– Navigation tabs– Image links– Site map– Breadcrumb trail– Site search feature
10
Expression Web Design Feature: Web Design Basics
Site Navigation System• Follow these guidelines when creating and positioning
your site’s links:– Be consistent in style and placement– Place the most important navigational elements at the
top or down the left side of your pages– Clearly identify a link’s target– Never use color alone to identify a link– Place a Home Page link on all subsidiary pages– Provide a site map and a site search feature– Add a breadcrumb trail
• Usability testing can help ensure that your site’s navigation system will be easy to use
13
Expression Web Design Feature: Web Design Basics
Color Schemes and Page Layout
14
• Unify your site’s look and feel through the consistent application of color and repeating content elements
Expression Web Design Feature: Web Design Basics
Color Schemes and Page Layout
15
• Color is an important design tool
Expression Web Design Feature: Web Design Basics
Color Schemes and Page Layout• Web site visitors characteristically dislike scrolling Web
pages either vertically or horizontally• 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
16
Expression Web Design Feature: Web Design Basics
Color Schemes and Page Layout
• Balance refers to the symmetric (in balance) or asymmetric (out of balance) arrangement of elements in relationship to each other
• Placing related content elements near each other — for example, an image and its caption — uses proximity to visually link the related elements
• Alignment of page elements either horizontally and/or vertically gives a page a well-organized, professional look
• Develop a good focal point
17
Expression Web Design Feature: Web Design Basics
Color Schemes and Page Layout
18
Expression Web Design Feature: Web Design Basics
Writing Web Page Text
• Users typically scan Web pages• Write scannable text by:
– using simple, modern language– avoiding slang or industry jargon– 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
– 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
19
Expression Web Design Feature: Web Design Basics
Writing Web Page Text
– 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
– avoiding excessive use of uppercase characters that are more difficult to scan
20
Expression Web Design Feature: Web Design Basics
Writing Web Page Text
• A font is a combination of typeface, size, and style– Serif– Sans serif
22
Expression Web Design Feature: Web Design Basics
Web-Ready Images and Multimedia
• Include only those images and multimedia elements that are in context with and support the other content at your site
• Use animated images and multimedia sparingly• Select images whose colors harmonize with your site’s
color scheme• Prepare Web-ready images by using image creating and
editing software• Add alternate text to each image• Never use images alone to convey information
23
Expression Web Design Feature: Web Design Basics
Pre- and Post-Publishing Testing• You should personally test all of the site’s features and
content by:– Reviewing the site’s pages in various browsers and
browser versions running under different operating systems
– Verifying that all link text clearly indicates the link’s target and that navigational elements work as designed
– 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
– Establishing that all textual content is accurate and current
24
Expression Web Design Feature: Web Design Basics
Feature Summary
• Identify a Web site’s purpose, target audience, and structure
• Plan a site’s navigation system• Use color and page layout to unify the look and feel of a
Web site• Write and format effective Web page text• Select and format appropriate Web page images,
animation, and multimedia elements• Perform pre- and post-publishing testing
25