Word assignemnt

0

[ Shannon Lee

Designing a Web Site

2

Table of Contents Proximity and Balance ................................................................................ 3

Contrast and Focus ........................................................................................ 4

Consistency .................................................................................................. 4

Appropriate Background ................................................................................ 5

Effective Color Choices ................................................................................. 5

Effective Typography .................................................................................... 7

Graphical and Multimedia Effects ................................................................... 8

Bibliography .............................................................................................. 10

3

The design of a Web site is as critical as the content. Well-designed Web pages

enhance viewers’ experience on the Web site. Well-designed sites assist viewers in

finding information they need quickly and easily through the use of visually

stimulating elements. Ineffectively designed pages, on the other hand, cause viewers

to become bored or frustrated, resulting in few revisits.

Three major principles for effective Web design include the following:

 Proximity and Balance

 Contrast and Focus

 Consistency

Proximity and Balance

Proximity refers to the degree of relationship between items. Highly related items,

such as a title and its following paragraph, should have close proximity. Unrelated

items, such as different sections, should have less proximity. Designers use white

space to indicate the degree of proximity on Web pages. Less white space indicates

close proximity; more white space indicates less proximity1.

Balance refers to the symmetrical placement of elements on a Web page. While a

perfectly balanced Web page is symmetrical, an asymmetrical appearance can be

effective for creating dynamic and vivid Web pages. In either case, all elements

should provide an appropriate level of balance to prevent a very busy area in a

clustered area onscreen with too much quiet area in another part of the screen.

1 Max Rebaza, Effective Websites, Chicago: Windy City Publishing, Inc. (2014)

Commented [ES1]: This section seems incomplete. Please check and add content.

4

Contrast and Focus

Contrast is the level of visual difference of elements. You are most likely familiar

with the concept of contrast when working with pictures in an image editor. Using

contrasting elements helps guide a viewer’s attention. By using contrasting elements,

designers assist a visitor in skimming the page for interesting information. Designers

create contrast through the use of different colors, text size, bolding, etc.

Focus is created through the use of contrast to draw attention to a particular element

on the page. The focal point should be a critical element, such as an important date or

a heading for a special

sale.

Consistency

Consistency within a Web page and within a Web site provides unity. All design

elements must be consistent to achieve continuity and to solidify an organization’s

image.

To achieve consistency, designers use repetition. That is, they repeat an organization’s

name and logo or trademark, color schemes, typeface selection, borders, and

navigation tools and locations.2

2 Kaylene Durocher, “ABCs of Web Site Consistency,” Web Site Magazine 7 (2015): 33-34.

5

Additional Design Guidelines

Appropriate Background

The background should not distract the viewer from the content on the Web page.

Amateur designers often use bright, colorful backgrounds or distracting patterns. For

example, a small tiled image might be attractive in small doses, but when used as a

background can actually interfere with a viewer’s ability to read foreground text.

Consultants recommend white or black backgrounds for most

sites. In some situations, a Web site might use a very light colored

background or a pale, slightly textured background. To

ensure readability, the designer should view the Web page on several

different monitors using different screen resolutions.3

Effective Color Choices

Along with choosing a background, a designer must choose an appropriate color

scheme that complements the background, supports the purpose of the Web site, and

produces the desired responses from readers.

3 Cheyenne Kinyon, “Color, Background, and Themes: Making Wise Decisions,” Web Guidelines and

Conventions (2015): 166-167.

6

Before choosing a color scheme, the designer must thoroughly understand the goals

of the Web site—what message the organization wants to convey, and the action

desired from the viewers. For example, because financial institutions are traditionally

conservative, these organizations use more conservative colors, whereas businesses

selling children’s merchandise use bright, vibrant colors.

In addition to choosing colors that support the goals, the designer must understand

how color affects people. For example, red is a vibrant, stimulating color, in contrast

with yellow, which has a relaxing effect. Knowing the different physiological

reactions of colors helps a designer choose appropriate text colors, heading colors, and

background colors.

Color choices need to provide necessary contrast. If color selections are too similar,

contrast is not achieved; therefore, different parts of the pages are not emphasized or

distinguishable. Contrasts such as black text on a white background or white text on a

dark blue background provide excellent contrast. In the image shown below, the color

choice is pleasant, but not overwhelming, with readable text shown in contrasting

colors of white or black. The large expanse of white as a background is not at all

distracting. In fact, it provides an excellent backdrop for the graphics.

7

Effective Typography

Just as with printed media, the text on a Web site must be error free. Text should

conform to standard spelling, grammar, and mechanics. The main difference between

online text and printed text is the amount of text displayed. While books, newspapers,

and magazines are text intensive, online text is not. People do not want to read text-

intensive Web pages; viewers scan text to find what they are looking for. Therefore,

designers use more concise language on Web pages.

The following list provides general guidelines for displaying text on a Web page:

Element Guideline

Columns Narrow

Headings Hierarchy

Web Pages Several, Small

Text Bulleted Lists

8

In addition to writing concise text and using methods for placing text, the designer

should carefully choose appropriate typography, such as fonts, sizes, and attributes.

Font Faces. As with printed text, online text should use no more than two font faces.

Because Web browsers use fonts stored on individual computer systems, not all

viewers have the same fonts. If a system does not have the font specified by a Web

page, the browser substitutes a different font. The substituted font may be very

difficult or even impossible to read onscreen. Avoid creative fonts (e.g., Chiller),

cursive fonts (e.g., Typo Upright), and typefaces that have minimal (e.g., Antique

Olive) or no descenders (e.g., Hobo). The safest typefaces are Arial, Times, and Times

New Roman.

Font Size and Attributes. To add variety to online text, designers adjust the font size,

using larger size for headings and smaller size for other text. However, font sizes

should be large enough to be easily read. In addition, designers apply bold and italic

attributes to emphasize key words or phrases. Textual hyperlinks are typically

underlined and formatted in a different color.

Graphical and Multimedia Effects

Images are typically included to enhance the visual effectiveness of Web pages. As

with any communication medium, the Web pages must contain relevant images to the

content and not be used to simply decorate the Web page.

Designers should be concerned with image file size because not all viewers have the

fastest

9

Internet connection or most up-to-date browsers. Images should load relatively

quickly because viewers stop loading Web pages if the load time is too long. GIF

images are typically used for logos and icons, whereas JPEG images are more

appropriate for photographs.

Furthermore, designers should not use too many images on any one particular Web

page. Every image added to a Web page increases the amount of time to load the page.

Therefore, some designers use thumbnails, small images that can be clicked to see a

separate full-sized image, in order to reduce load time.

Other multimedia features might include sound or video clips. Again, load time is of

utmost concern. Because sound and video clips might consume too much time for the

average viewer, these clips should not be set to load automatically. Instead, links can

be included for viewers with faster internet connections and faster processors.

10

Bibliography

Durocher, Kaylene. 2015. "ABCs of Web Site Consistency." Web

Site Magazine, 33-34.

Kinyon, Cheyenne. 2015. "Color, Background, and Themes: Making

Wise Decisions." Web Guidelines and Conventions 166-167.

Rebaza, Max. 2014. Effective Websites. Chicago: Windy City

Publishing, Inc.

11

C

content, 2, 4, 7

S

site, 2, 3, 4, 5, 6

W

Web, 2, 3, 4, 5, 6, 7, 8

Web pages. See Web sites

https://1drv.ms/w/s!AgpYQ_kPsnN-gYIOogQIQWtfu5oe_Q