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.
Color Harmony
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.
Some good color website references are:
http://kuler.adobe.com/
http://www.colorjack.com/sphere/
http://www.w3schools.com/Html/html_colors.asp
When it comes to SEO, it is most important for users to find what they are looking for quickly and accurately. That’s pretty much a no-brainer if you’ve been using the internet for a while. But who really thinks about labeling their images for SEO? With all major browsers having a capability to search for images, it is now very important to name your images in a way that will be easy to index and find via any search.
If I was searching for a Dog Jumping, it wouldn’t be wise to name an image something like: img_4484427.jpg. On the other hand, if the file name was Dog_Jumping.jpg, then I would be much more likely to find it through a search.
Alt tags are another way to add extra oomph to your images. Adding some simple code such as: alt=”Dog Jumping”, might be enough to differentiate you from your competition. It’s all about making relevant content and images more accessible to end users.
975 South Federal Highway, 2nd Floor
Boca Raton, FL 33432
800.787.0497
ph: 561.620.9682
fx: 561.620.9684
info@morevisibility.com
