0

Designing a Web Site

Shannon Lee
 2

Table of Contents
Proximity and Balance.....................................................................................................................2

Contrast and Focus...........................................................................................................................3

Consistency......................................................................................................................................3

Additional Design Guidelines.......................................................................................................3

Appropriate Background..............................................................................................................3

Effective Color Choices...............................................................................................................4

Graphical and Multimedia Effects...............................................................................................6

Bibliography....................................................................................................................................7
 3

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

interaction and enhance the overall experience for visitors. If your goal is to produce

sales, there is no better way to begin that than with a well-designed first look through a

web site. If a viewer is able to find information quickly and easily, so much the better for

you. Ineffectively designed pages, on the other hand, cause viewers to become bored or

frustrated, resulting in few revisits.

You should consider three major principles when developing a web site:

 Proximity and Balance

 Contrast and Focus

 Consistency

Proximity and Balance

Proximity refers to the degree of relationship between items. ): You are most likely

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

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 proximity (Rebaza,

2023)1.

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.

Contrast and Focus

Contrast is the level of visual difference of elements. 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. (Durocher, 2020)2

Additional Design Guidelines

Appropriate Background

The background should not distract the viewer from the content of 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.

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
2
Kaylene Durocher, “ABC’s of Web Site Consistency,” Web Site Magazine 7 (2020): 33-34.
 5

desired response from readers.

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

what message the organization wants to convey, and the action desired from web page

visitors. 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 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.

(Kinyon, 2021)3

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

contrast is not achieved; therefore, different parts of a page 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. Strive for a color choice that is pleasant,

but not overwhelming, with readable text shown in contrasting colors of white or black.

A large expanse of white as a background provides an excellent backdrop for the

graphics.

Effective Typography

Just as with printed media, text on a web site must be error-free, conforming to standard

spelling, grammar, and mechanics rules. The main difference between online text and

3
Cheyenne Kinyon, “Color Background and Themes: Making Wise Decisions”, Web Guidelines and Conventions
(2021) 166-167.
 6

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

text-intensive, online text is not. A web site that is heavily comprised of text is distracting

and overwhelming for viewers who want to skim through for a particular section or link.

Effective web site designers use much more concise language in online sites than would

equivalent authors of printed material.

Consider the following general guidelines for displaying text on a web page.

In addition to preparing concise text and placing it well, a designer should carefully

choose appropriate typography, including fonts, font sizes, and text attributes.

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

types. Because web browsers use fonts stored on individual computer systems, not all

viewers have the same fonts. Use a common font, as 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., TypoUpright), and typefaces that have minimal or no descenders (e.g.,

Hobo). The most commonly used typefaces are Arial, Calibri, and Times New Roman.

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

using larger size for headings and smaller size for other text. Whatever size chosen; it

should be large enough to be easily read. In addition, attributes such as bold and italic

draw attention to and 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 better describe content and add interest to an online

presence. As with any communication medium, only relevant images should be included.
 7

They are not intended as decoration, but should enhance the content.

Images are larger in size than text, so although they can certainly add interest, a designer

must consider the file size and how well it will load on a page. A visitor to the site with a

slower online connection or with a browser that is not up to date might become frustrated

waiting for an image to load, completely defeating the purpose of the site.

Pictures and images should be of appropriate file type, as well. GIF images are typically

used for logos and icons, whereas JPEG images are more appropriate for photographs.

Finally, refrain from using a large number of pictures on any one web page, as the more

images present, the longer it takes a page to load. A workaround for including access to

multiple images is the use of thumbnails, small images that can be clicked to see a

separate full-sized image.

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 connections and more high-end equipment.
 8

Bibliography
Durocher, K. (2020, January 1). ABC's. Website Site Magazine, 7, pp. 33-34.

Kinyon, C. ( 2021). Color Background and Themes: Making Wise Decisions. Web Guidelines

and Conventions, 166-167.

Rebaza, M. (2023). Effective Websites . Chicago : Windy City Publishing .

Content, 9 Web, 9
Site, 9
9