A lot of people can recognize good design when they see it on the web. But most people don’t really know what makes that design good.
How do you define “good design?” Is it subjective, like your favorite flavor of ice cream? Although there is some subjectivity within good design, there are artistic principles that good design is built from. Here are a few that form the foundation of good design.
1. Proximity
Because items that are in close proximity to one another become one visual unit, items that are related to one another should be grouped together. Laying out related items on a website page this way helps the eye associate the information and enables the viewer to mentally categorize the information easily. The flip side of this principle is that items that are not related should not be placed in close proximity to one another.
The purpose of the principle of proximity is to organize information in a way that enables viewers to quickly and easily comprehend. When information is organized, people are more likely to read it and respond. People are also more likely to remember information that is organized.
How can you determine if items form a visual unit? Squint your eyes and look at the page on a website. Now count the number of times your eye stops as it views the page. On a page that is using the principle of proximity well, your eye will stop three to five times. In other words, there will be three to five groups of information for the eye to comprehend separately.
2. Alignment
You’ve seen website page layouts where the text and graphics are placed wherever there happens to be space. The effect is messy, with no impact. Nothing should be placed on a page arbitrarily. There should be a visual connection between each item on the page. When items are aligned, it creates a cohesiveness that the eye appreciates.
The purpose of alignment is to unify the website page. Imagine a well-organized kitchen. All the pots and pans are stored in the organizer, the fruit is nicely displayed in a basket on the counter, the spices are all on the rack – everything is in its place. A page layout needs the same thing.
Look at a website page that you feel is good design. Now focus on the main visual element. Where does your eye go from there? Do you see how other elements are aligned with that one main element both vertically and horizontally?
3. Repetition
Good design repeats some aspect of the website design throughout the site. It’s this repetition that makes all the pages in a site look like they belong together. Color scheme, graphic elements, typefaces – all of these elements should be repeated – used consistently – throughout.
The purpose of repetition is to create consistency and to add visual interest. Repetition creates a professional, polished look that the eye is drawn to. When a website design uses repetition and is consistent, it is more likely to be viewed and read.
Here are some ways you can create repetition beyond simple consistency in typefaces and colors: Use some element in your logo as a major graphic element in the design. If you are using a ruled line, make the line more interesting visually by perhaps making it with tiny dots or dashes, then repeating the line element throughout the design. Create patterns that are repeated throughout the design. Take a small element and place it somewhere on each page for a whimsical look. Just be careful not to overdo the repetition, or viewers will be annoyed rather than pleased.
4. Contrast
The principle of contrast states that if two items are not the same, then they should be different – very different. Contrast creates an organizational hierarchy of the information and graphics on a webpage. When using contrast, you can’t be a wimp! The contrast must be strong to be effective.
The purpose of contrast is two-fold: to create interest on the page, and to organize information. A page that is interesting to look at is more likely to be read. And contrasting elements will help a reader understand the way the information is organized.
Contrast can be created in many ways. You can contrast large type with small type, a serif font with a sans-serif font, bold with light, smooth texture with rough texture, a small graphic with a large one, a dark color with a light one.
A design that integrates these principles will automatically gain a professionalism and polish that it would otherwise lack. Next time you stumble across a website design that makes you say “wow”, check for these principles – you’ll find them quietly working to make that design a good one!
