• Home
  • Sustainable Design
• A Sustainable Web?
  • A Foreign Concept
  • Glossary of Terms
• Design Concept
  • The Importance of Visual Design
  • Design Impact
  • Potential Harm of Good Design
  • Getting Started Designing
• Material Treatment
  • You Are How You Treat
  • Naming Files and Folders
  • Naming for Indexing and Clarity
  • Naming for Versioning
  • Mistreating Your Images: 7 Deadly Sins
• Document Structure (XHTML)
  • The Concept of a Markup Language
  • A Brief History of HTML
  • Basic XHTML Rules
  • XHTML DOCTYPE Declarations
  • XHTML Tag Types: Block and Inline
  • The Basic XHTML Tag Set: Block-level Tags
  • The Basic XHTML Tag Set: List Tags
  • The Basic XHTML Tag Set: In-line Tags
• Advanced Document Structure
  • Working with Classes and IDs
  • Classes in Action
  • IDs in Action
• Document Presentation (CSS)
  • Introduction to Cascading Style Sheets
  • Some CSS Vocabulary
  • CSS Selectors
  • CSS Properties: Text and Font
  • CSS Properties: Margin, Padding, and Border
• CSS for Design and Layout
  • Background Images
  • Image Replacement Techniques
• Introduction to PHP
  • What is PHP?
  • Repeating Content Across Pages

Design Impact

There is an observable tendency among new and inexperienced designers to choose, often arbitrarily and arhetorically, a painting, photo or other visual object, and try to build a page around it.

The problem with this approach is that it limits the scope of ideas these designers might entertain. So let's look at some ways to avoid the "But that's my favorite painting!" syndrome by considering the idea of design impact.

The Page IS the Image

When we encounter a solid design, we tend to see its whole composition first, and then process its individual design elements (design elements being things like typography/fonts, photographs, illustrations, colors, sprites, borders, etc.) Individual elements should alwasy be in the service of a design, working in concert to deliver the strongest page impact.

Some Basic Design Vocabulary

This is a pretty basic list, but the concepts can help us talk about design:

• Economy: Achieving the greatest visual impact with as little "stuff" as possible; nothing appears visually that doesn't serve some purpose.
• Unity: individual design elements functioning as a whole composition.
• Harmony: shared characteristics between design elements that aid in a coherent design (e.g., a gritty photograph is presented with a gritty font).
• Variety: Differences or modifications in design elements that build visual interest, and keep harmony from becoming monotony.
• Emphasis: A visual element or relationship between visual elements that serves as a focal point to a composition.
• Balance: Evident a pleasing relationship between visual elements' emphasis.

Some Aims of Good Web Design:

With the idea in mind that it's the whole composition site visitors encounter first, there are some important aims to be considered:

1. The composition should move visitors through the page. Particularly on pages with large amounts of textual information, visitors can be frustrated quickly. So be sure and offer them:
   • Visual Cues (headings, bullet points, recurring images or other graphic devices that appear in a predictable manner)
   • Strong lines (margins, actual lines like borders, perhaps images with strong visual pull)
   • User-centered, activity-driven guidance (consistent placement and demarcations of menus and navigation; careful text in navigation, e.g., "Project Home Page" instead of "Main")
2. The composition should suggest a sense of style, artful choice, possibly ambiance. This is achieved in part by:
   • Care and craftsmanship. It's not hard for even a novice viewer to spot weaknesses in composition: for example, images that suffer from too much compression, bad cropping, or other shoddy treatment. The same is true for positioning of text, images, etc: a pixel is a pretty big unit, when it comes down to it, and we can spot misaligned elements pretty easily. Poor craftsmanship, intentional or not, still suggests a lack of care before a lack of skill.
   • Artful, deliberate choices. We set up a certain unity and harmony to a site, reinforce it over a number of pages/page elements, which prepares users when we do something new or unusual, to give the page variety.
   • Implying relationships to engage users in meaning-making. When users can make connections, they will have a more satisfactory experience. We want to create a desire for users to remain on a page or site for as long as possible. We do this through a sense of artistry or "wow factor" that makes the design both noticeable and memorable, but not intrusive at the expense of rhetorical or communication goals.

Updated on Fri. May. 26 2006 at 10:32AM