website design


One of the most immediately noticeable aspects of website design is color. Coming up with a color scheme that is not only visually pleasing but also aptly represents the content and character of a website is, frankly, one of my favorite parts of designing a website. The smallest change in a shade can result in a completely different visual tone, changing a background color from abrasive to calming, or from blah to eye-catching.

Consider the two website snapshots below:

snapshot 2

snapshot 1

The first snapshot is my original color scheme for a new wedding and event planning company called Simply Smashing weddings & events. Perhaps because of the Britishism in their name, I visualized a traditional, classy theme based in golds and silvers. Perhaps also because I personally prefer neutral colors for backgrounds, I chose the champagne color as the focal color.

The clients were initially pleased with the website, but after a few days, they realized the color scheme wasn’t what they had envisioned for their website. “We want the purple and green to be the focal colors!”, they said. And, though slightly hesitant in the beginning, I agreed to give it a try. The new color scheme gave their website a completely different visual tone. The end result was a website with a very contemporary, modern flair, that more accurately represents the character of this new company than the first gold and silver color scheme.

Advertisements

1. All links must function like links. They must have hover effects, be a navigation tool, and look noticeably different than other text.

This sounds blatantly obvious, but there are so many websites online where a link doesn’t change when you hover over it. This is particularly true on websites that are designed first in Photoshop. Imagining a website as a static image may be useful for getting a basic design idea, but a website is not a static image. A website must be dynamic. Website users need to be able to interact with the website, and having links change when the user mouses over them is one of the most fundamental and basic ways of making a website interactive. This is also an issue with usability. When a link doesn’t change when the mouse hovers over it, it forces the user to think: “Is this really a link and not just colored or underlined text? Is my mouse actually over this link or am I off by a pixel or two?” And good website design requires no thinking on the part of the user.


2. It must be obvious on the page itself what page you’re currently viewing

It’s not always convenient for a user to look up at the address bar of their browser to find out what page they’re currently on. It’s very simple to add a header on each page with the page title. Another technique I use on all of my websites is for the menu link of the current page to display differently than the other menu links. This is another indication to the user that they are on this particular page and assists them in navigating the website.


3. Contact information must be easy to find

One of the first things many users look for on a website is contact information. Since websites are created worldwide, the very first question a user often asks is: where is this business located? When I visit a website of a company, this is what I want to know right away: is this business located near me? Does it have offices near me? In other words, is this business located close enough to me to be useful? If contact information isn’t easy to find on a website, a user won’t know if this business is one that’s actually useful or not. You can have the best business in the world, but if your business is located 500 miles away (and isn’t a company whose business involves transportation), the user is going to look elsewhere. And if your website doesn’t have contact information clearly displayed, the user is going to lose interest and move on to another website.


4. The website must be functional, if not always pretty, in all browsers currently used by Internet users

The sad reality is that there are still people who use Internet Explorer 7 (and 6). These people probably are unaware that there are better browsers out there, or, if they’re aware, they’re using an office computer and not allowed to update their browser for whatever reason. These users need to be able to use a website. This means that the menu bar, in particular, must be useable in these unfortunate earlier versions of Internet Explorer.


5. The website must be accessible for people who are vision-impaired

In other words, don’t make your website out of images. Use “alt” tags for all images. Make sure the design doesn’t break if a user increases the font size. For more information, please click here. And yes, this does matter. It’s not just people who are blind who need accessible websites, but also people with more common vision problems, such as farsightedness. Think of all the people you know who use reading glasses. These people will all benefit from either zooming in on a website or increasing text size. Don’t disclude them from your website audience.


6. All text must be easy to read

This is just common sense. A website is not just pretty colors and fancy visual effects. The foundation of most websites is their text content. Make sure the contrast between the text and its background is sufficient. Black text on white background is ideal, but if you must use another combination for design purposes, make sure the text is easy to read! The text size should also not be set too small. Line-spacing can be increased from 1 to 1.5 or 2 to make paragraphs easier to read. Margins between paragraphs act as a visual display of their narrative function.


7. Website sections must be obvious by design elements and not just by labels

The header section must look different from the content section. The menu must look different from the other sections. In other words, the function of each website section must be visually apparent. There are many simple ways to accomplish this: different colors, spacing, borders, text styles, etc.

In short, don’t make the user have to think about how to use your website!