COMM 260, Principles of Internet Web-Based Design
Instructor: Ross Collins
Lecture Synopsis Ten: Basic design principles
Some design concepts differ using the medium of the web. Other concepts are similar to those we learn in paper-based publications. Basic similarities include design concepts key to all good graphic presentation of material. I like to use "mnemonic devices" to remember important concepts, such as "King Philip Cried Oh For Goodness Sakes" (remember that one from grade school? Kingdom, Phylum, Class...etc). In our case the acronym is CRUD PROB. That is, save yourself from a PROBlem with CRUDdy designs. If you think this is a stupid phrase, good. Then you'll remember it: Contrast, Repetition, Unity, Dominant Element, PROportion, Balance.
Contrast.
We add interest to blah web site design by bringing in contrasting elements. These might include headings or sub-headings of different sizes or fonts, color contrast, size of graphics, rules (lines), etc. Contrast is not clash; like trying to match clothing of slightly different colors, you don't want slightly different type fonts. Make them dramatically different.
Repetition.
Most design principles can be found in nature. The repeating patterns of leaves, stones in the lake, clouds or grass give us a sense of dynamic interest in the real world, and in the design world. A logo may be repeated, or bulleted text, font, colors, etc. You can contrast heading and body text fonts, and still gain repetition by limiting the fonts. Repetition over multiple web pages bring consistency to a web site design.
Unity.
Unity is an attempt to make all the elements "hang together," that is, appear to be connected so that your web site is easily identifiable and consistent. All other graphic arts concepts interact to reach unity, but two in particular stand out: proximity and alignment.
Proximity reflects visual perception based on Gestalt research. We tend to see elements close together as being related. In web design, we try to assess the relationships between elements, and group them.
Alignment is a feeling of connection based on invisible lines between elements. For instance, flush left text sets up an invisible line on the left, giving us a feeling of unity to the text that centered text blocks lack. Centered elements generally are dull, useful mostly in formal documents. Elements should line up with each other on edges, instead of being placed arbitrarily around a site.
Dominant element.
Part of contrast, the most important thing on the page should dominate to help orient the user to the site. This helps guide the user through the page as a designer intends, based on the Z-pattern--we tend to scan in a Z pattern. Place important elements along the Z.
Proportion.
Elements intersect with each other to form a dynamic whole. We try to place them on a page using a grid pattern--a series of non-printing lines organizing our space. Using HTML tables we can divide space into rectangles, try to informally balance visual weight around the page on the rectangles, which helps to achieve
Balance.
Classic architectural styles offer good examples of formal balance--perfect symmetry. Most web sites avoid this formal look, but try to achieve informal balance through placing elements that complement each other on a page.
Exercise
Examine this PDF file, two examples of a simple resume. Comparing the two versions, identify at least a half dozen differences. Consider how these basic principles are poorly considered in the first version:
Explain in writing how the second design improves on each of these weaknesses.