In an April, 2012 survey, the Pew Research Center found that 82 percent of Americans over 18 have Internet access at home, and in the category of 18 to 29 year olds, the statistics rose to a whopping 97 percent. With so many people online these days, having a website is more important than ever. Fortunately, it's not too difficult to learn how to build a website. If you're ready to create your own site, it's important to know - and follow - basic web design rules that make a site easier to navigate and visually pleasing.
Important Web Design Rules
In the world of web design, there are rules that must be followed in order to maximize visual appeal and stay off lists like WebPagesThatSuck.com. These rules can include anything from color schemes and images to design style points.
The graphics you use on your web site tell a story. You'll want unique or stock images that tie into your website theme. Think of these images as a window display for your website. A web site that has bare walls looks unfinished to site visitors. At the same time, a site with too many images can be slow loading and frustrating for users who are still on dial up. Some rules to follow for images include:
- Use .JPG images or .GIF images since most computers can display these.
- Scale the resolution to website graphics settings for faster loading. You can do this with just about any image editor or through online photo editing sites like LunaPic or PicMonkey.
- Use images sparingly, to avoid clutter while maintaining visual appeal.
- Avoid loading down pages with images that use flash or animation, as they impact site speed negatively and can be distracting.
- Use the rule of thirds to create a visually appealing look. The rule is composed of an imaginary grid that sits on top of any image and divides it equally into three blocks across and three down. The viewer's eye is drawn to the top left first and less drawn to the middle three blocks. This rule can help you put the most important information where it is most likely to be seen.
- Don't clutter up the page with images that aren't important to your website, such as a photo of your best friend's new dog. Keep the images focused on the website topic.
- Don't use background images unless you layer them in a CSS table and have them only around the border where there is no text. Full-screen background images can be distracting.
The colors you use on your site are very important to the feel and style of your site. If you are using images to frame your page, then your colors should complement those images rather than clashing with them. Rules to live by when choosing colors for your site include:
- Use a color wheel to help select colors. This type of tool will tell you what colors look good together and what colors just will not work.
- Avoid colors that are too bold or busy. For example, florescent yellow is never a good idea, nor are patterns that distract from site content.
- For maximum impact, use dark text on a light colored background, such as black on white.
- Don't use white text on black, except very occasionally, because it is hard to read and can strain the eyes.
- Don't use color combinations that will make the text hard to read, such as red text on black background or white text on yellow background.
- Avoid using red/green and blue/green combinations due to problems these color combinations may pose for colorblind site visitors.
While elaborate fonts may look nice, they are not good choices for website design. Opt instead for a font that will be easy to read.
- Stick with common fonts like Arial, Times New Roman or Calibri.
- Don't use script-style fonts, which may be hard for readers to view.
- Avoid unusual fonts. Not every computer will recognize non-standard fonts, something that could prevent visitors from even seeing the text as you'd like it to read.
- Don't use a tiny font size. As a general rule, avoid using fonts smaller than 9 point Tahoma, though larger sizes may be better for some sites and audiences.
Even a beautifully designed site can turn off viewers if the site is hard to navigate. Many web designers live by the three-click rule, which states that users should be able to find any information they want in no more than three clicks. In reality, this can be hard to attain. However, it is a good idea to strive for three clicks as the ideal. This will ensure your site is easier to navigate and use. Follow a few simple rules to make it easier for people to get around your site.
- As a rule of thumb, limit the main navigation links to five or six. Too many links can be confusing. You can always create sub-links under each of the main links, such as a main link titled "services" and secondary links titled "portfolio creation" and "custom graphic design".
- Put the navigation links on every page of your site. If a visitor clicks through to an article, she should be able to easily find her way back to the page she started from.
- Include a "Home" link in your navigation structure.
- Place the most important features near the top of each page so that users don't have to navigate to find what they are most likely to be looking for.
- Don't disable the browser's "back" button. This is very frustrating to site visitors.
- Repeat navigation links at the bottom of each page as well as the top or top sidebar. This way, if a site visitor scrolls to the end of an article or longer page, she can still easily navigate back to the home page or to another main area of the site.
- Ask friends and family to test your site's navigation to find out if they feel the site's structure is easy to navigate.
Nearly every person who has spent any time online has come across a site that is extremely slow to load. This is frustrating and the site visitor usually leaves and moves on to a site that loads more quickly. According to the web marketing experts at ClickZ, even a one-second delay in loading speed can result in a seven percent lower conversion rate. Don't let this happen with your site visitors. In a Keynote Systems' 2012 Mobile User Survey, tablet users told Keynote they expected a site to load in four seconds or less or they would move on to another site. To achieve faster loading times:
- Be cautious about adding videos or other multimedia features that might bog down loading times.
- Don't add background music that the visitor can't easily turn off.
- Avoid using music at all, unless it is truly necessary, as it will slow page loading times.
- Avoid using flash or java that might require the user to download software to fully access your page.
- Compress images and use CSS to speed up loading times on subsequent pages the visitor clicks on.
Keep It Simple
In the end, the rule of the day is moderation. Keep the site simple so it's fast to load, regardless of the visitor's connection. Also keep monitor size in mind, and use HTML programs with a preview option, so that you can preview your site in different browsers and at different sizes. This is an invaluable tool that can help you design your site for everyone to enjoy. The best website designs are those that are simple, yet able to adapt and grow as your website grows.