Visual Design Resources

Basic design principles
Web sites
Books

Basic design principles
Space is the most effective element you can use to provide support for your audience in their cognitive processing of visual displays. Spatial relationships are perceived precognitively - that is, without conscious effort. They do not have to be decoded and interpreted, as do color cues, typographical cues, and so on.

    Alignment and proximity are two of the most fundamental and useful spatial techniques available to visual designers.

 

ALIGNMENT
Human beings perceive items that are aligned vertically and/or horizontally to be more organized than those that are not, and people process, learn and remember organized information better than unorganized information.

back to the top

 

alignment illustration 1

 

Poor alignment creates too many perceptual "edges" in a display.

 

alignment illustration 1

 

Better alignment results in fewer features to be processed.

 

PROXIMITY

Elements that are close together in a visual display will be assumed to be related. Elements that are far apart will not be seen as related to each other. When elements are not clearly differentiated by proximity, your audience has to group them consciously by focusing on them, taking in their meaning, and deciding which ones go together.

back to the top

 

proximity illustration 1

 

Equal division of space results in poor proximity - what goes with what?

 

proximity illustration 1

 

Use more or less space between elements to indicate which ones go together by virtue of their relative proximity.

 

CONTRAST

Contrast exists in many forms, the primary being:

  • size
  • color
  • shape

Use contrast to make elements more or less dominant in the display, influencing the order in which they are processed and their perceived importance or urgency.

back to the top

 

contrast illustration 1

 

Insufficient contrast leads designers to apply more and more treatments to make important information stand out.

 

contrast illustration 1

 

Use contrast that is sufficiently strong to allow the use of a few simple, easily-perceptible treatments.

 

Web Sites

As you might expect, the web is a rich source of design advice for creating web pages and sites -- in fact, it's easy to be overwhelmed by the proliferating pages devoted to web design! Many of these pages simply rehash the material you can find everywhere, so choose a couple sites that are especially helpful for you and don't worry too much about the rest -- unless you get a really good lead from someone!

back to the top

Web Design Guidelines that Make Sense for You
This short article points out that differences between the fundamental purposes of web sites should lead designers to pay more or less attention to a given "design guideline," even though such guidelines are usually presented as being applicable to every situation.

Web Page Design for Designers
A sensible page that focuses on design issues instead of technical ones. Not devoted to the most showy design techniques, but to refinements that can make a big difference in the usability and acceptability of a web site.

Usable Web: Guide to Web Usability Resources
Keith Instone keeps his collection of links up to date, and although he provides a lot of resources he never just throws a link on the list without being sure it's useful!

Journal of Information Science
A web-based publication maintained by Ignition Design and covering a range of issues that may interest designers, although most of them are not strictly "design guidelines."

 

Books
This selection of resource books is chosen to be:
  • addressed to audiences who have not necessarily spent years studying design
  • generally applicable, even when they are written from within a particular context
  • practical and/or written plainly

    Together, they cover a range of issues that must be addressed anytime a visual design is created:

  • layout of images and text
  • visual phenonmena underlying standard design principles
  • the process of visual design, especially the inherent need for compromise
  • information design, required for effective visual design
  • usability testing to discover the utility and acceptability of designs

    amazon.com logo
    The linked book titles lead to individual pages in the amazon.com website. IIRG! does not participate in their partnership program, so these links are not promotional -- just a convenience so that you can check the descriptions and prices of the books on the list.

back to the top

book cover
This book presents the least you need to know about visual design without making you feel like a dummy!
The Non-Designer's Design Book : Design and Typographic Principles for the Visual Novice by Robin Williams, Carole Quandt

back to the top

book cover
A useful compilation of principles derived from experimental research in fields related to the development of instructional and informational materials.
Instructional Message Design: Principles from the Behavioral and Cognitive Sciences by Malcolm L. Fleming, W. Howard Levie
book cover
The title sounds difficult, but the book leads you through the visual design process in a practical and sensible way.
Designing Visual Language : Strategies for Professional Communicators, by Charles Kostelnick, David D. Roberts, Sam Dragga
book cover
One of the best explanations you can find for the concept of information structure - read it even if you're not designing for the Web.
Information Architecture for the World Wide Web by Louis Rosenfeld, Peter Morville

book cover
This is the how-to book -- if you plan to test a product for usability, you need this book.
Handbook of Usability Testing by Jeff Rubin

| IIRG! | | Articles | Research | Links | References |

last update 28 April 1999
questions and suggestions to eboling@indiana.edu
Instructional Systems Technology, Indiana University, Bloomington, Indiana
assembled for the faculty of the St. Meinrad School of Theology, St. Meinrad, Indiana