Designing Your Website

Content and format. Content consists of the text and graphics that are the core of your site—it’s the information you want to communicate. Formats consist of the colors, textures, font choices, presentation, and layout options that convey your content with clarity and style.

Web design is more like playing music than sculpting. Nothing is set in stone. You can rewrite text, take new photographs, and fine-tune formats without starting again from scratch.

The more exotic the website, the more inaccessible it will be. Another way of saying this is that in web design you try to approximate the best look for the most people. When you design for print media, in contrast, the resulting printed object will look almost exactly the same to anyone who can read it. For example, it’s an unfortunate fact that there are only a handful of fonts among the thousands available that are virtually guaranteed to exist on every viewer’s computer. Similarly, not everyone uses the same browser (such as Internet Explorer), running in the same version on the same operating system, and viewing web pages on the same type and quality of monitor.

We’re trying to strike a balance between several issues in page design for websites:

We want to offer a consistent page structure so that visitors have a clear orientation for getting around in the website.
We want to offer a variety of standard font, graphic, and color formats so that you can express a sense of individuality and uniqueness. You can also “push the envelope” in the sense that we can create custom effects for your pages if desired.
We should be economical in terms of the technical issues for these formats. For example, large graphics take a long time to arrive on the viewer’s computer screen—the longer the download time, the shorter the attention span.

Developing the Content

Your Text

Editing the text: spelling check, correct punctuation, replacement of standard typographic forms, such as the correct em dash—for the typical double-hyphen --

Your Images

Presentation of images, such as your products, work, workplace, or self.

Probably the most important issue in presenting images in web design is that graphics files take time to download to the viewer’s computer and appear on their display. For this reason, there are trade-offs among factors such as:

Image compression: heavily-compressed images load quickly, but at a loss of quality.
image size on-screen, educated guesses as to the connection speed (dial-up or broadband) used by people in the market you want to reach, and their tolerance for slow-loading graphics.

We’re thinking that a given product image should have a primary size on-screen of roughly 300x300 pixels, magnified views at about 500x500 pixels, and (if needed) iconic thumbnails that are roughly 100x100 pixels.

Image presentation includes the type and color of borders placed around images of your work, drop shadows, whether you want the background of an image to blend into the page, and special photographic effects applied to the image.

Formatting Choices

Here we’ll get into more detail on the kinds of design choices we can make.

Fonts

Traditionally (that is, in print design), a given font is designated as being a body font or a display font:

Display fonts, for headings and other short pieces of decorative text. These catch the eye and help the reader to quickly grasp the layout of a page or document.
Body fonts, for blocks of text such as the paragraphs in these notes. These are typically conservative, easy to read, and do not tire the eye when read in extended passages.
Dingbat and graphics fonts—special fonts that encode non-alphabetic symbols such as mathematical operators and dingbats. Dingbats are decorative icons used to format bulleted lists or to separate blocks of text, for example.

Font Support in Web Pages

Certain fonts are installed on virtually every user’s computer (Arial, Times, and Courier, for example), but others vary from machine to machine, depending on the programs installed and that user’s choices.

There is also a class of “embeddable” fonts whose creators permit temporary installation on a viewer’s computer, but only for pages belonging to a specified website.

Other fonts are specifically not permitted to be embedded in web pages, and the only way a visitor can see your pages in those fonts is if they’ve already installed those fonts on their machines. If you format text in one of these fonts, some viewers will see that font and others will see a substituted font, which may not be what you want.

Consequently, we currently support a list of standard and embedded fonts that have a high probability of looking as intended, as well as being economical in terms of storage space and download times. If you want, you can request these for a certain purpose, or go with the standard font choices we present for a given website package.

In any case, it’s important to realize that specifying fonts for the Web isn’t like doing the same for print. Because viewers are looking at your site with a variety of different operating systems, web browsers (such as Internet Explorer and Netscape) of a range of release versions, having different sets of installed fonts, the best you can do is specify your first, second, and third (fourth, fifth, and so on) choices, so that most viewers will see exactly what you intend most of the time.

Supported Fonts

Fonts available for formatting Web pages. Pages formatted with these fonts have a high probability of being viewed by everyone in the same way.

These fonts come with various operating systems (such as Windows) or are installed with certain web browsers, or are those we've made available as embedded fonts.

Also, remember that we can specify characteristics such as size, color, and weight (bold or italic, for example) independently of the font itself.

Click the link to the right to see a list of some currently-supported fonts. In this list, we include a sample of each font at a size of 12 points (a unit of measurement designers use, equal to 1/72 inch), unless indicated otherwise.

>> Web Font Samples

Graphic Elements

Following are some common types of graphic elements we can implement in a web design.

Background Textures

A background texture appears behind the text and graphics on a page, as in the pattern displayed behind this text. Textures create a graphic effect that appears behind the contents of a page—a little like printing text on a specialty paper.

>> Background Texture Samples

Graphic Text

Although font choices are very limited in web design, sometimes it's possible to get around this limitation by converting text that has a certain font treatment into a graphic image. This method works best in logos, website menus, or other decorative applications.

>> Graphic Text Samples