What are the best practices for optimized website design and user experience? How can you design an attractive, user-friendly website that maximizes your ability to be found in the Search Engine Results Pages and drives conversions? Read our expert tips for optimized design and user experience, compelling aesthetic design, website architecture, usability and more.
When it comes to a solid design for your website, a grid can come in handy. Just as a house needs a sturdy foundation, a work of art or design requires the same. The website picture plane, or the monitor size and resolution, is your first consideration when building your foundation. Below are some statistics regarding user resolutions according to the W3Schools web statistics and trends from January 2009.
The average user has a resolution of 1024×768 or higher so it is a good idea to base your grid on this information. A good number to start with is 960 wide x 500 high. The reason your size should be slightly smaller than 1024×768 is that you need to take into consideration browser toolbars at the top of the page, the right scrollbar, and the horizontal fold of the page. This width will give you an even number to divide the space into columns of 12 (60px each) or 16 (40px each) with 20 pixel gutters and 10px side margins.
12 Column Grid
16 Column Grid
You can repeat a similar process horizontally if desired. You can now use this grid as a guide when placing objects and text on the page. This solid structure will help ensure a solid design.
For more information on grids visit 960 Grid System.
Color occurs everywhere in nature and impacts our lives daily. For example, when it is cold outside, the colors are white, blue and purple. When it is warm, the colors are yellow, orange and red. This psychology of color can come in handy when designing a website.
Each color in nature has a corresponding emotional impact. Here are some simple examples:
Blue: Serious, reliable, cool, cold, peaceful
Red: Hot, anger, love
Green: Nature, fresh, growth, calming
Yellow: Sunny, Cheerful, bright
Orange: Warm, exciting, energetic
Black: Mysterious, elegant, dark,
White: Clean, fresh, elegant, purity
Purple: Majestic, powerful, romantic
Using Color in Your Designs
If you have a website that is friendly, warm and inviting, you might consider colors that reflect those attributes, such as yellows, oranges or greens. On the other hand, if your website is promoting a serious and informative presence, you may want to lean more toward blues, whites, and greens. If you are branding a mysterious and foreboding site, then black would be the way to go. If your website is promoting a hospital or medical company you want to project a brand that is clean, reliable and sanitary, white and blue would be appropriate.
A good rule of thumb when choosing colors is to keep your selections to a maximum of three. If you stick to this rule then you are most likely going to have harmony in your design. In some cases you can break this rule but do so with caution.
One organization system that I have grown accustomed to on the Web is folders. This system, which can also be considered a navigation system, has been time-tested to prove its effectiveness in organizing of many types of information. By now, practically all computer users understand this organization model. When presented with a site for the first time that uses some variation of hierarchical folders, they would not have to think about how to use the system. We have recently seen a new navigation and organization system emerge out of the “Web 2.0” era: tagging. Is tagging a better model that the folder model? I think it depends on the situation. In some cases, they can be used to support each other.
To be honest, there were times that I found myself staying away from tagging, say, someone’s blog post or my own bookmarks because I didn’t feel like learning a new organization system or because I thought the content was already organized well and categorized in a place where I could remember how to get to it. Then I realized that there must be some reason to have a tagging system.
Here’s how I see it: organizing information using tags as opposed to filing in folders and subfolders is faster and takes less thought. This is an important feature in light of the fact that the amount of information is always increasing. So if you want a fast, efficient, though possibly not as precise organization system, using tagging. So we see that tagging isn’t merely a social media fad, but a social media tool.
Another benefit to tagging is that it can help you and others record what the popular or colloquial term for something is. This can help with your keyword research. This is a very simple and obvious example, but it helps to describe what I mean. If you write a blog post about Coca Cola, but a visitor comes along and adds “pop” to the list of tags, you can now source from the list of user-generated tags to support your keyword research. Some web applications (ecommerce and blogging) I’ve worked with even give the administrator the option to automatically include the tags as part of the meta keyword tag.
Even though tagging is a good social media tool, be aware that it’s also seen as a fad. Also, be leery about adding tagging or any fad “widget” to your site for the sole reason of wanting to match your competitor’s web site’s features or wanting to appear “with it.” Add these widgets after you have done some user experience research of your own and when you can give a good reason to add them to your site. Simplicity is key.