As seen on my blog...
Website design 2.0, in my opinion, requires out-of-the-box thinking, creativity and quality. If you really want your website to stand out above the rest, you’ll need a fine design to match quality content. Most designs fail at the simple things: color choice, layout structure, etc. You may pick a few bright colors that you think match, but in fact they do not and everybody else notices it. I’ll give a few pointers here on designing 2.0 layouts.
Colors
Layouts should have colors that can be divided into three categories: the main colors, accent colors, and sub colors.
The main colors should be a calm, neutral color. These colors will be used most often so they should be easy on the eyes and matching with the other types of colors (the accent colors and the sub colors). Sometimes designers pick their main colors first and decide their accent and sub colors based on it. Main colors can be used for background color for the content areas of the layout, the actual background for the entire layout, header background, etc. As you can see, main colors are mostly used for backgrounds.
Accent colors can be of a stronger, bolder type color. They don’t necessarily have to be brighter, they just have to be stronger and able to stand out from the rest of the layout colors. Accent colors must be used sparingly, or else they would be sub-colors (see below). You can use accent colors for the layout’s header text, borders in the layout, headings within the content, etc. Accent colors are repeated throughout the layout in small portions. You don’t have to have only one accent color, you can have multiple accent colors but its generally safer to keep it to a minimum.
Sub-colors are pretty much a step above main colors, just not used as often. Sub-colors can be a toned down version of the accent color. For example, the accent color may be a bright blood red, while the sub-color can be perhaps a toned down, dark maroon. You can use sub-colors for the background colors of the navigation portion of the site, sub-content boxes, etc. Sub-colors are used more often than accent colors, but not quite as much as main colors.
Layout structure
The structure of your layout is very important and should not be messy. It is important that you align everything so that if a person were to draw a line connecting two portions of your layout, they would be evenly aligned, on the same level. If you have too many boxes floating around in random places, you won’t get the look of a clean, nicely structured layout.
Layout structure is another element of design that requires out of the box thinking. The traditional structure of a layout is the header on top, navigation on the left side going down, and content on the middle-right side going down, footer centered in the bottom. I usually try to steer away from the traditional layout structure, I aim for a more unique way of putting together my layout. You’ll have to think of new ways to position things, while still keeping it user friendly and readable. For example, instead of a traditional navigation list on the left side, maybe you can change it a bit and put it in a more interesting spot. You’ll want to make your website visitor think “That’s a clever way of putting things!”.
Fonts
A choice of font and font color is usually not regarded as that important, but if you think about it fonts compose a large portion of your layouts. They display all of your content and messages. Most people pick the “usual” fonts- verdana, arial, new times roman (NTR.. yuck.. IMO), etc. See if you can experiment with other types of fonts that are supported on the web. Its also okay to use different types of font for the header, sub-headings, and all the rest. Just try to keep them uniform: the sub-headings have all the same type of font, the main content has the same type of font, etc. Unless you are trying to emphasize different elements, its a good idea to keep uniform font.
Font color should generally be of a neutral shade, but of course still readable. Most obvious, make sure that the font color matches with the rest of the layout! Tip: Using two colors for your website header text is a simple way of establishing a modern look. Example: companyDesign (Company could be grey, Design would be a blue)
Font size is also important. You want it to be big enough so that anyone can read it (keep in mind the older folks) but yet not too big so that it looks tacky. Especially in the header, too big of a font size doesn’t look very good.
—
I’ve only scratched the surface of web design 2.0, there are a lot of other methods you can use. But really, when it all comes down to it, it really requires you to think out of the box and grasp that unique design while maintaining a professional look. Everyone else shouldn’t have to do things for you, you will have to be the one to put it all together.
You may not agree with some parts of this article so your feedback is welcome.
11-16-2007 11:57 AM
#1