Design principles

Websites are a relatively new media, yet design has been a topic of discussion for at least as long as we have been writing things down. Tastes differ; fashions come and go. Through the back and forth, the principles of design became understood and some design conventions became time-tested.

Golden rectangleA golden rectangle, a classic Greek proportion, influences design yet today.What we now call the rule of thirds has its origins in the golden ratio noted by the Pythagoreans in 500 BC, 0.618 is about equal to 1/1.618. The ratio was noted again in India in 200 BC in what we now call the Fibonacci number sequence, where each number is the sum of the two preceding numbers. Perhaps the ratio became more than math trivia, became a design convention, because we find it in nature in many sprouts, flowers and leaves. A golden rectangle has proportions of 1 on one side and 0.618 on the other side. In web design, the ratio can inform the following:

Contrast creates visual interest

Variation creates visual interest. The appropriate amount of contrast creates an appealing layout without distractions. Content type determines the appropriate contrast amount. We prefer to read about super heroes in comic books and to read novels in hardcover volumes. Nonfiction, like textbooks with illustrations, fall somewhere in the middle. Because contrast is all too easy to create, subtlety and restraint are characteristics of good design, dazzling flamboyance and useless clutter are not. Contrast can be between the following page elements:

Color design resources

Valid ways to select colors vary from sampling colors approximate to the desired scheme from a photograph to working out the math with precision. The color scheme on the Hardcover website relied on math and the Paletton Live Colorizer.

Paletton Live Colorizer

The Hardcover website uses analogous colors, the main color used for the logo, the complementary of the main color used for text links, as shown above. A similar website is Adobe Color.

Font conventions

Unlike print designers, web designers have little control of fonts. Even as the situation has improved in what the server can present, many client devices prefer to ignore the requested fonts. The only sure way to have a font look as intended on all devices is to put the font in an image, which is appropriate for logos and image text. Most of the time, less control is adequate. Design conventions for fonts are long-established.

Serif fontSerifs are the feet at the tips of traditional fonts. Collectively the outside serif edges reinforce a visual line at the top and bottom of each row of text. The visual line makes it easier for the eye to skim along the row of text. Because serif fonts are easier to read than other fonts, by convention serif fonts are used for bodies of text. However, until recently serifs have been difficult to produce on computer screens, which has led some people to believe serif fonts are out of fashion. Yet as displays have improved, serif fonts are finding their way to websites.

Sans serif fontSans serif fonts, literally without serif, are common in headings and navigation in order to provide contrast with the serif body text. Initially in computers, sans serif fonts were used for everything because they were easier for screens to display, a decision not based on design principles.

Fixed width fontFixed-width fonts were developed for mechanical typewriters. The design was a mechanical necessity, again, not a design choice. Although mechanical typewriters are obsolete, fixed-width fonts are still with us for lining up rows of numbers and other information made more clear when vertically aligned.

Images and illustrations

Images and illustrations make contrast and visual interest by breaking up the text. Unfortunately, that is their only function on many websites. When used appropriately, images add information and create a tone. A picture really can be worth a thousand words.

Photographs are easy to add to a website. More work than photos, drawings and illustrations increase the production value of a website. Clip art has the opposite effect and is to be avoided.

Infographics, or information presented graphically, is the paradigm of functional images. With communication as the goal, diagrams, charts, maps and timelines can be the most useful images.

As a matter of capturing interest, images and illustrations should be unique to the website. The best source might be to take the photo or sketch the artwork yourself. Alternatively, hire someone to produce unique images. Only as a last resort, digital stock websites sell images, which will not be unique.