16
CREATING AND SHAPING Web Page Design Chapter 2

CREATING AND SHAPING Web Page Design Chapter 2. Text Matters Even though when thinking about building Web pages people think of design first, the heart

Embed Size (px)

Citation preview

Page 1: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

CREATING AND SHAPINGWeb Page DesignChapter 2

Page 2: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Text Matters

Even though when thinking about building Web pages people think of design first, the heart of every Web page is content. After all, people build Web pages because they have a message to share.

To be successful, your Web page must provide information that captures viewers’ attention; otherwise, they won’t stay but a couple of seconds and probably won’t return in the future.

Even if you’re a good writer, online text varies in many ways from printed text.

Page 3: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Text Matters (cont.)

In 2000, webreview.com conducted an informal poll in which readers ranked their general impression of the quality of writing found on the Internet. Of those responding:

55% ranked the quality as fair. 22% ranked the quality as poor. 21% ranked the quality as good. Only 1% ranked the quality as excellent.

Page 4: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Reader’s Approach

Reading a block of text online takes approximately 25% longer than reading the same text printed on paper. Online users have responded to this slowdown by scanning Web page text instead of reading every word. Keep this in mind when creating content for your Web page.

Page 5: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Scannability

When scanning a page, the reader is looking for key words that grab their attention. Consider the following example of an ineffective presentation of information. www.creationguide.com/ants/bulletant-

bad.html Now look at a more effective presentation.

www.creationguide.com/ants/bulletant-good.html

Page 6: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Textual Elements

Title Bar Make it concise, clear, and useful. Hint: skip

leading articles (the, a, an) in a Web page’s title bar text.

Content Should be clear, brief, easy to scan,

informative, timely, and grammatically correct. Hyperlinks

Provide form and clarity to a group of Web pages by linking your home page to areas that contain specific related information. Should be clear, consistent, and appropriately placed.

Page 7: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Textual Elements (cont.)

Logos, Graphical Text, WordArt Can be used to add a professional look.

Helps your Web site appear interrelated so that users can clearly see they are still in the realm of your Web site even as they click from page to page. Also used for consistency.

Forms and Menu Items Key is clarity. Users must know what to

select, how to enter text in a form’s boxes, and which action they should perform next.

Page 8: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Textual Elements (cont.)

Plain-Text Navigational Options If using graphical hyperlinks, it is recommended

that navigation hyperlinks be displayed as plain text also. Useful because some viewers turn off their browser’s graphics capabilities to expedite Web page downloads.

Date or “Last Modified” Information Can be a small line located near the bottom of

your page, or if updated info. is one of your page’s main selling points, make it much more noticeable by placing it higher on your page or nearer the “prime” upper left area.

Page 9: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Writing for the Web

Good Web writing shares some basic similarities with well-written printed text. It should be clear, grammatical, well-formulated, and written for a specific audience. But there are some unique considerations that don’t arise when writing for other mediums, such as: Web pages are nonlinear. Users don’t

methodically read through a Web page like they would a novel. Instead, Web surfers scan a page, read a few lines of text, click a link, check out a picture, etc.

Page 10: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Organizing Web Text

Inverted Pyramid Methodology Place the most important information at the

beginning—displayed quickly and jump out at readers. Example: www.iwon.com

Can be achieved by using headlines and hyperlinks and streamlining your text.

Page 11: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Organizing Web Text (cont.)

Brainstorm Jot down every concept you want to include in

your Web site or page. Write a keyword next to each topic. Review each keyword, and determine which need

to be headings and which should be hyperlinks. A heading calls attention to a brief amount of information on an existing page; in contrast, a hyperlink indicates you have enough related text to create a separate Web page.

Reading online is more arduous than reading printed text. Also, millions of Web pages are also vying for the users’ time. So, keywords are extremely important.

Page 12: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Organizing Web Text (cont.)

The Shape of Body Text Formulate your message in rough draft

form. (Use inverted pyramid style.) Keep in mind that readers will scan your

page before reading your paragraphs.

Page 13: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Organizing Web Text (cont.)

Keep these guidelines in mind as you write: Introduce one idea per paragraph. Keep sentences short without dumbing

down. Use simple sentence structures. Think about how you can highlight

keywords later. Limit paragraphs to approximately 75 words

or less. Use bulleted lists whenever possible.

Page 14: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Organizing Web Text (cont.)

Guidelines (cont.) Use numbered lists only when presenting a series of

steps. Insert headings and subheadings to break up text

and highlight key points. Keep headlines simple and direct; choose meaningful

over clever wording. Ensure that the hierarchy of headings is clear. Separate paragraphs within a section by using white

space. Avoid having too many hyperlinks within paragraphs

unless they are extremely important to your content. (Keep in mind that generally, hyperlinks should be used to aid navigation.)

Page 15: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

Effective Writingfor an Online Audience

Now comes polishing and streamlining your text. Strong sentences—pack as much meaning into

each word or clause as possible. Conciseness—look at each word to make sure the

text implements the following techniques: Precise words—clear, easily understood words. Strong verbs—use short, solid verbs. Active voice—show who or what performs the action. Clear antecedents—replace all unclear pronouns with

specific text. Spelling and grammar—always run your spelling checker…

then print it out and read it aloud. (ALMOST NO OTHER WEB SITE DESIGN ERROR ERODES YOUR CREDIBILITY FASTER THAN MISSPELLINGS AND INCORRECT GRAMMAR!!)

Page 16: CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart

THE END