March 2009

Design elements – color and whitespace

Color.

One of the biggest roadblocks many of us have when designing is deciding on a color scheme. Whether it’s a logo, a brochure, or a website, the best layout design in the world will look awful if the colors clash with each other. (Have you seen some of the older websites out there? Have your eyeballs recovered?) Our reaction to color is almost instantaneous and has a profound impact on the choices we make.

Things to Consider When Choosing a Color Theme

1. Personality. Let the colors speak for your personality and image — whether it’s professional, fun, natural, whatever. Choose colors that align with your own style and taste. It’s why we ask our clients questions about they want to convey with their website. One of our clients Consoling Grace, is a church bereavement ministry. The color theme is soft, muted pastels of turquoise, rose and pearl gray to convey a gentle, supportive, soothing feel to the site. Bright reds and yellows would have been inconsistent with the purpose of the site. (Check out this article on Squidoo for a quick look at general responses to colors based on research, historical significance of color and word association studies.)

Remember that the color theme used in your website should also be used in your flyers, logo, business cards, whatever gets seen by others.(Obviously, not every color needs to be used in every piece.) Color is part of your identity!

toomanycolors1

2.  Too many colors. How many is too many can be hard to answer, but in general one can say that the risk of using too many colors is greater than the risk of using too few.  You will need a primary color (the main color of the page), which sets the tone for the design as a whole.  Pick a secondary color that “backs up” the primary color. It is usually a color that is pretty close to the primary color.  Select a highlight color which emphasizes certain parts of the design. It is usually a contrasting color and should be used sparingly. Depending on your image, more colors can be used, but remember that too many colors will make the page feel busy, cause eyestrain and make it difficult for the user to find the information he or she wants.

3. Contrast. Make sure there is a noticeable difference between your background, main text and link colors. Make sure the colors you choose are not too monochromatic or too similar to your text and links. For the most readability choose complimentary colors or stick with the classic black on white.

toobright14.  Avoid Seizures. Super bright and colorful makes a theme very hard to look at.  While bright colors can be used as accents, if your site looks like a mashup of Pokemon, Jolly Ranchers, and an explosion in a paint factory, it will overwhelm the content of your site.

5.  Complimentary colors.  Complimentary colors are those which essentially make one another stand out — in other words they just look great together. They make people FEEL good when looking at them. It may seem crazy, but it’s a psychological response in humans. It’s also why the color wheel is used by many logo designers, marketers, and advertisers.  My art teacher used to say that if you mixed any two paint colors together and if the resulting color looked like any shade of ordinary mud, you’ve probably chosen complimentary colors.  Red and green are complimentary colors, but keep in mind that a darker shade of green and a lighter shade of red don’t compliment one another nearly as well as a darker shade of green and a darker shade of red do.  Remember too that darker colors are easier to see than lighter ones. If you choose a text color other than black, make certain it’s the darker shade of whatever complimentary color you’re using.

Color tools.

Thankfully, there are a lot of tools available on the web to help sort out color nightmares.

One of my favorites is EasyRGB.com , which lets you put in a hexidecimal color code and it brings up a list of complimentary colors.  This is great if you already have a primary color in mind.

Another great site is ColorBlender , a free online color matching tool.  Simply play with the sliders below the colorblend images and it will show you colors that work well together.

Whitespace.

“Above the fold” isn’t just a newspaper term. On the internet, it refers to the part of a web page that appears in a visitor’s browser without scrolling. It’s the most valuable part of the page – but don’t stuff too much inside too small a space or your design will look cramped (look at the example under #2 above)

“Whitespace,” or “negative space” is the space between elements in a composition.  Whitespace is space that’s deliberately left blank to better structure the page and emphasize different areas of content.  It is NOT empty or wasted space, nor is it necessarily white.  It is an integral part of a design.

A page with too little whitespace makes visitors feel uncomfortable because the page seems cluttered and hard to read. They quickly get overwhelmed and move on to another site.  Pages with too much whitespace, on the other hand, seem empty, as if there’s not enough content to fill the page. Visitors may wonder: “why bother with this?” and go somewhere else.

“Passive whitespace” adds breathing room to a design.  A common example would be the spacing between paragraphs of text, or between a header and the rest of design.

When whitespace is used to lead a reader from one element to another, it’s called “active whitespace.” It visually separates the navigation, content, header, and footer.

whitespaceTake a look at these two pictures.   The content is the same, the photography is the same, the colors are the same, but they convey a very different image.  The one on the left uses little whitespace and  looks efficient, a bit outdated, and (let’s face it) cheap.  The one on the right uses a lot of whitespace and looks luxurious.  Which facial mask would you rather use?

Whitespace affects the look and feel of a design.  Use it!

Do You Own Your Website?

The first step in starting a website includes getting a domain name. There are a lot of articles about what you should use as a domain name, but we are not going to cover that here. What we are going to do is tell you how to check who owns the domain name.

When a domain name registration is paid for, that domain name is being registered, not permanently bought outright. The domain name may be used only as long as the registration fees and renewal fees are paid. Usually these are renewed once a year although the option is there for registration of the domain name in increments up to 10 years at a time.

Many times, when the domain name is registered, it is registered by a friend, a relative, a web designer, or a web design company, depending on how it was going to be paid for. It is estimated that fewer than 50% of the actual business owners are the ones who set up the registration.

Most web designers and companies will do the domain name and web hosting registration as part of their “web design package” or as a convenience service for their client. When they do this, they will register the domain name and include the cost in their charges to their customer.

Some web designers register the domain name in their name as a matter of practice. Why, you ask? Basically, to make sure the customer pays the web design charges they owe the designer. It is usually a matter of standard business practice and is almost always included in contracts or the company’s Terms & Conditions.

It is also standard business practice to have the domain name registration transferred over to the customer once the customer pays in full for the initial job. Even if the designer is going to continue doing maintenance for the same client, it still should be transferred over because the customer should own the website, the website content, and the domain name once the job is done. However, the transfer is not always being done. We won’t address reasons why, as they vary.

When the domain name is not transferred, the problems start. For all purposes, the website and domain name is owned by the person who is the registrant of record. That means if a registrant has not transferred over the domain name, the registrant can in fact argue ownership of the domain name as well as the website.

How to avoid this problem? Make sure transfer of ownership is spelled out in the contract you sign with a web designer. Contracts should always be used when setting up web design projects, if nothing else, to avoid these type of issues. But that is a future blog.

To check to see who owns a website, go to WhoIs.com, enter in the domain name and look at the information carefully.

When the domain name is registered, and you look up the record of registration, the following is what you more than likely will see:

Registrant. The person or company listed here is the owner of the domain name.

Administrative Contact. The person designated to receive email, mail, phone calls, etc. from the registrar relating to the administration of the domain name. May be the same as the registrant or the company the registrant works for.

Billing Contact. The person who will receive email, mail, phone calls, etc. from the registrar about renewing the domain name by paying the renewal registration fee. May be the same as the registrant or it could be the company that the registrant works for.

Technical Contact. The person who is designated to receive contact from the registrar about technical matters dealing with the domain name.

Record Expiration Date. The date the domain name will terminate unless the renewal fee has been paid. This will usually be at 12:01am on that date.

Record Creation Date. This is the original date the domain name was registered either to the current registrant or his or her predecessor.

When looking at the registration record, sometimes most of this information will not be there. Carefully look near the bottom of what is listed and there will probably be a comment that “for further information” you need to go to another web address. Go to that web address and you should find the information you need.

Obviously being the owner is important – if someone else places himself as the owner, (such as your web designer), he can always decide to charge you for the use of the name later, and there is little you can do unless you have a written contract.

When the project is completed, most web designers will do the transfer automatically, but may simply forget. Just tactfully remind them if you need to and they will usually do it without any problems. It only takes about 24 hours for the transfer to take effect.

One last comment: Make sure you keep a record of your domain name and web hosting information, including the passwords to log onto the account. You  don’t want to miss renewing your domain name and web hosting thereby losing all of that time, money and effort.