Graphic Design Basics

Subjects:

There are plenty of books, courses, and other websites that cover this topic. So not to be redundant, we’ll consider this a high-level, cliff notes version, with an emphasis on the approach you should have when designing for the web. Links to other resources will be provided at the bottom of this page.

I consider web design a subset of overall graphic design. It’s a specialty. An example would be packaging design (love Apple’s packaging). The purpose of design is to communicate, to create emotion and engagement, to perform a function, to allow people to perform tasks. Good design, whether it be for print, or for the web, is effective in delivering on this purpose.

Design 101

For those of you without formal graphics design training, an overview.

Layout & Composition

Rule of Thirds: Photographers should be very familiar with this technique to refine composition.

The Rule of Thirds

You should consider placing key, important elements where the thirds intersection. This represents the most basic grid system. The topic of grid systems is an entire book itself. Look for a great resource from Mark Boulton below in the Resources section of this page.

Balance: There are two forms of balance:

Symmetrical Balance: When the weight of elements on either side of an axis is similar. Note: This does not exactly mean centered.Example:

An example of symmetrical balance.

Asymmetrical Balance: This type of balance involves elements of different size & weight, placed seemingly indiscriminately on the page, yet seemingly balanced across the page.Example:

An example of asymmetrical balance.

Emphasis: By presenting an element with emphasis, you make that element a focal point, that draws the eye of your site’s visitors. There are various ways to create emphasis:

Placement: When a site visitor view a web page, without any additional prompting, their eyes move to the center of the page. The further from this point, the less emphasis it has.

Continuance: Continuance is the next dominant element along a path our eyes take on a page.

Isolation: An item that stands out, and does not compete with any other elements.

Contrast: The difference between an element and it’s environment; the greater the difference, the stronger the emphasis.

Proportion: When an element is much larger or smaller than the host object.

Alignment: The arrangement of elements that create organic lines/borders.