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