Lesson 11 - More Design
Ideas to Trigger Your Creative Mind: Mostly borrowed from Robin Williams & Crystal Waters *
Contrast
Avoid a flat, gray page. Here's a page with a very dull layout, however unique the actual content.
Use backgrounds sparingly. If you really like backgrounds, pick one that contrasts with text and images and is easy to read. If you have a busy background that you really want to use, set your text in tables with plain backgrounds, like this one.
Use contrasting text, varying the size, color, and weight (boldness). In the business cards below (in Proximity), the first card has two lines bolded in the center. The top line is one font size larger. The contrast isn't enough to really notice.
Pick up a color from your color scheme and use a darker hue in the headlines. The Mayo Clinic uses light and darker shades of turquoise to hold the page together.
Proximity
There is an implied relationship between items that are close together, so make sure that you put related items together and unrelated items spaced apart.
- A headline should be close to the text that it announces.
- If a headline is two lines long, those two lines should be close to each other.
- Captions should be close to the pictures they describe.
Look at these two notices:
|
You see this in flyers all the time, the headline too far away from the article that it heads. How's This Headline?
Notice the space between the headline and this paragraph. If this were on a regular page, you might not be able to tell that this paragraph goes with the headline.
|
|
The first paragraph in the left column should be separated from the headline below.
How's This Headline? Now the headline obviously goes with this paragraph, and your readers don't have to guess. Keep those headlines (and picture captions) tight and close to their related items.
|
Proximity means more than headlines and picture captions. It also means grouping 'like' things together. Look at the two business cards below and see which one is more appealing:
|
211 Main St Tampa Florida 11222 I fix computers too |
|
 |
I Fix Tools
Anthony Allyson |
| Call me at 205 555 2222 Free estimates Lawnmowers, Chainsaws, Washers & Dryers too |
|
 |
|
|
|
|
Anthony Allyson211 Main St Tampa Florida 11222 (205) 555 2222 |
| I Fix Tools |
|
|
Free Estimates Lawnmowers, Chainsaws, Washers, dryers and computers too |
|
In the first design, the items grouped together don't really go together. In the second design, all contact information is in one place, details about the work being offered is all grouped in a second place. This may seem too obvious to even mention, but once you start taking note, you'll be amazed at how many flyers or cards or websites are designed without following this logic.
Repetition
Create repetitive elements that will let a reader know instantly that this page is part of the complete site.
Look at these pages:
| Pages with Repetition |
|
Not so much Repetition |
|
|
|
Even if your website is only one page long, repeating certain elements will unify the various pieces. This can be as simple as a color scheme, bullets that pick up colors from a background, or a color that is repeated in headlines and subheadings.
Alignment
Items on the page are lined up with each other. Possibilities are left side, right side, or somewhere in between. There are unlimited choices, which is why it's so hard to stick with something.
Choose only one alignment and use it on the entire page.
This doesn't mean that everything needs to be aligned along the same edge. It just means that everything should have the same alignment, either all left, all right, or all centered.
Most beginners want to center everything. Centered alignment can be effective, but mostly they lose any strong focal point. The edges have no definition. Look at these two lists of buttons. Null or # link have been used so that these menu items will appear as links when you roll the mouse over the text. But, they are not actually linked to any other pages.
Which alignment looks best to you? The center-aligned list will probably look best on a page that has center alignment for the rest of it. The left-aligned list is best on a left- or right-aligned page.
Look at the following page:
Everything is centered above. Now look at the difference in this page:
Notice a much stronger alignment here, plus the page is designed to use the dimensions of a monitor, rather than a printed flyer.
Web Design Principles
You have the big 4 principles to keep in mind when you're designing your website (besides color blindness issues, horizontal orientation, readers that scan instead of read, analogous and complementary color schemes):
- Contrast - both in colors and in font size. Writing should be clearly visible against the background. Heading sizes should be obviously larger than the regular text.
- Proximity - Keep like items together. All contact information (address, website URL, email contact, telephone number) should be in one place, ideally in the same place on each page of the website.
- Repetition - Elements on a page, such as color schemes, icons, link buttons, separating bars can all help repeat a theme. Separate pages should look like they're related to each other, like they come from the same website.
- Alignment - Remember that the standard monitor screen has a horizontal orientation - wider than it is high. So, design to take advantage of that. Pick a basic alignment strategy and stick with it throughout the page and throughout the website.
Books used:
- Williams, Robin and John Tollett. The Non-Designer's Web Book. Berkeley, California: Peachpit Press, 1998.
- Waters, Crystal. Web Concept & Design. Indianapolis, In: New Riders Publishing, 1996.
This is the end of Lesson 11. Please go to the next lesson.
|
