Welcome back to our series of general guidelines to creating a successful website. This is our second installment and we are going to build on some of the concepts that we previously discussed in the first installment.
This article is going to focus on the design of your website:
Website Design: Function Before Form!
As I’m sure you remember from the first article the single most important thing to remember is quality content. However, if your content is all out of order, difficult to access, or randomly scattered across your site, then your message is going to get lost. We are going to examine several things that need to be taken into account when designing your site.
- Top to Bottom, Left to Right – That should look pretty familiar to you; it’s how most we read. The since this is how we were taught to read, our eyes naturally scan the page in the same manor. This is very useful to remember when considering the message your trying to convey; your website should have the most current and important information at the top of the page. Ask the question, “What is my visitor coming to my site for?” The answer to that questions should find its way as close to the top and left as possible. The next time you surf the web notice how in most instances a company’s logo is at the top, left of the page at all times. It is so that is the first thing that catches your eye, and reinforces their identity.
(A HUGE note here is that many countries and language don’t use this rule, so it is critical that you know how a particular language reads before applying this rule. However, the concepts still apply, they just need to augmented for the appropriate direction of the language).
- Color Theory – There is no real need here to go into deep color theory, but there are a few important things to consider when selecting the colors for your site.
- What your color says: Certain colors represent certain things, and it is important to consider what a particular color represents before selecting it. For instance, if your website is about comforting people afflicted with an ailment you would want to go with maybe brown which tends to represent stability or purple which give a settling sensation, and stay away from grays which restlessness or emptiness.
- The tone of your color: Unlike the tone mentioned in the previous point this tone is referring to the contrast between two colors. The best way to describe this is to simply show it.
- This is an example of blue that doesn’t show enough contrast to make it readable on the background.
- This is an example of blue that does! (If you can’t read the text above, highlight it with your cursor.)
As you can see, the same color (blue), but tonally different so that the text is readable.
- Light vs Dark – This rule is also very important because your eye tend to be drawn to the item on the page that has the greatest contrast. So, if you page is entirely white, a users eye is going to be drawn to a black box placed at the bottom, right of the page (and vice-versa). The reason this is so important to note is because it can really enhance a message by placing the most important content in a separate box with contrasting colors, but it can also hurt because that same box can draw the users attention away from other important content.
- Usability – There are many things to consider when you approach the usability of site. The first an most important thing to do is formulate a plan. We are going to get into this a bit more in a later article, but for now we are going to explore a few best practices to adhere to. Did you just try to click on the “best practices” above? That is because over the years users have been trained to think that if text is underlined that it must be a link. So don’t underline text that isn’t a link for emphasis; that is an example of a best practice, and helping the overall usability of the website. Don’t worry much more to come on this topic.
I hope that you find these tips helpful, and that you learned something in this lesson. Thank you for reading, and I hope that you comeback for upcoming articles.