Great Website Content: Balancing Form and Function

One of the first things you notice about a website is the color palette. The colors of your site can determine the 'mood' of your site. This is one of the most dominating elements of a website's first impression. The first step in designing a good website is choosing complimentary colors (i.e., colors that get along). We've all seen color swatches at the hardware store offering a small collections of colors that 'go well together.' This is important for setting the mood or theme of a room. Your website is no different. 

The following websites are GREAT resources for finding colors that blend well together:

1. www.colorcombos.com
2. www.colorblender.com
3. www.colorschemer.com
4. www.colourlovers.com

Color is used to evoke emotion. Consider the following examples. Which site is soothing and gives you a sense of warmth and which is loud and gives you a headache?

Well balanced color is essential to consistency and flow in a website. This was the reason we created "strict colors" within Marketpath CMS. With strict colors enabled, website content managers need not worry about matching colors on their own. We add your website's unique palette of colors to the editor so keeping your content consistent is a snap!

How important are good directions? Have you ever received directions so bad that they got no where but all the wrong places? From a usability standpoint, a good website will always answer three basic questions:

1. Where am I?
2. Where have I been?
3. Where can I go?

Studies have proven that the navigational structure of a website is one of the most critical elements for establishing credibility with visitors. Credibility is what stands between your site and a new customer. If you succeed at delivering a visitor directly to the information he or she is looking for in the shortest amount of steps, your credibility goes up. Conversly, if your site requires a lot of guess work and back button usage, your credibilty will suffer. 

Maybe it’s my design background or the fact that I grew up in the back of a print shop but this is a sensitive subject for me. I was taught typographic conservatism by my grandfather who once told me that in print, you never use more than two typefaces. And if you use two, make sure they are in the same font family; e.g., sans-serif with sans-serif, serif with serif, etc. In most cases, this is no different for the web. There is a fine line between typographic variety and font clutter.

In a recent update of Marketpath CMS, we implemented stylistic limitations for two reasons: 1) maintain design consistency and uniformity; 2) simplify formatting for our users. Like form and function, there is a balance between giving too many options and simplifying the process.

Rant Sidebar: Every night before bed, I pray to the Gods of typography that the typeface 'Comic Sans' is wiped from the face of the planet.

How many times do you visit a website and get exactly what you went there to get? If you’re experiencing what I’m experiencing, your seldom do. I tell my customers and prospects to repeatedly ask themselves who their website serves and what they’re looking for. If you’re having trouble thinking of what content to put online, that’s where you start.

It seems the most commonly missed and hardest to find information is adequate contact information. The key to a happy customer is making sure they, at the very least, “think” you care.

Whitespace is the empty or “negative” space between elements on a page. Those elements can be anything from paragraphs and bullet lists to images and advertisements. Utilization of whitespace in webpage layout is underrated and all too commonly underused. Whitespace can benefit visitors by preventing the feeling of being “overwhelmed” or being annoyed by too much "going on." Whitespace can also be used to create emphasis; focusing visitors on the most important information.

Look at the difference between the following website screenshots:

Figure 1

Figure 2 

Do you “feel” the difference between the two designs? What is the general feeling you get from figure 1 compared to figure 2? Figure 1 has an open and airy design creating a sense of sophistication and calm while Figure 2 exudes frustration and stress. Which would you rather your audience feel?

When managing the content on your website, don’t be afraid to add some space between elements. It may be subtle but can really improve the visual effectiveness of your content.