1. Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics

2. 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 Expression Web Design Feature: Web Design Basics 2

3. 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? Expression Web Design Feature: Web Design Basics 3

4. 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 Expression Web Design Feature: Web Design Basics 4

5. 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? Expression Web Design Feature: Web Design Basics 5

6. Web Site Purpose, Target Audience, and Structure Expression Web Design Feature: Web Design Basics 6

7. Web Site Purpose, Target Audience, and Structure Other types of pages –Subsidiary pages –Splash or entry page Expression Web Design Feature: Web Design Basics 7

8. 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 Expression Web Design Feature: Web Design Basics 8

9. Web Site Purpose, Target Audience, and Structure Expression Web Design Feature: Web Design Basics 9

10. 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 Expression Web Design Feature: Web Design Basics 10

11. Site Navigation System Expression Web Design Feature: Web Design Basics 11

12. Site Navigation System Expression Web Design Feature: Web Design Basics 12

13. 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 Expression Web Design Feature: Web Design Basics 13

14. Color Schemes and Page Layout Expression Web Design Feature: Web Design Basics 14 Unify your site’s look and feel through the consistent application of color and repeating content elements

15. Color Schemes and Page Layout Expression Web Design Feature: Web Design Basics 15 Color is an important design tool

16. 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 Expression Web Design Feature: Web Design Basics 16

17. 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 Expression Web Design Feature: Web Design Basics 17

18. Color Schemes and Page Layout Expression Web Design Feature: Web Design Basics 18

19. 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 Expression Web Design Feature: Web Design Basics 19

20. 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 Expression Web Design Feature: Web Design Basics 20

21. Writing Web Page Text Expression Web Design Feature: Web Design Basics 21

22. Writing Web Page Text A font is a combination of typeface, size, and style –Serif –Sans serif Expression Web Design Feature: Web Design Basics 22

23. 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 Expression Web Design Feature: Web Design Basics 23

24. 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 Expression Web Design Feature: Web Design Basics 24

25. 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 Expression Web Design Feature: Web Design Basics 25