Do You Follow These
Easy Website Design Principles?

Based on some websites out there, a lot of webmasters could use an easy website design guide. I say “easy” because a good website design is easy to achieve if you follow some of these web design principles…

Easy website design covers two topics, “look & feel” (visual appearance of the website) and navigation (how you move around the website).

Look & Feel

Talented graphic artists can produce website designs that are mind­blowing! While those designs are beautiful, they usually come with a high price tag!

Luckily you don’t need a mind-blowing design. You need a website that is pleasant to look at, and that is functional. Your website content will be more important anyway!

Generally, a website has four parts:

1. Header: The header appears at the top of the page. It contains your website name and one or more images that support the topic of your website.
2. Navigation: The navigation bar, or navbar, is what your visitors use to move around your website. It is a collection of clickable links (graphics or text) that lead to your other web pages.
3. Content: Here you present your information to your visitors. It consists of text with some supporting images.
4. Footer: The footer appears at the bottom of the page. It contains your copyright notice and, if you have them, links to your privacy policy or terms-of-use page.

For easy website design, these four parts can be arranged in three different ways, the main difference being the location of the navbar:

Navbar on the left: The navbar appears vertically and on the left-hand side of the page.

The advantage is that you can have a huge amount links on the navbar because they are stacked vertically. The disadvantage is that it takes away some width from the content area.

Navbar on the right: The navbar appears vertically and on the right-hand side of the page.

The advantage is also that you can have a huge amount links on the navbar. Another advantage is that search engine spiders get to your content text before they get to the navbar. The disadvantage is also that it takes away some width from the content area.

Navbar at the top: The navbar appears horizontally and immediately below the page header.

The advantage of this layout is that you have a wider content area to work with. The disadvantage is that you are limited on the amount of side-by-side links on the navbar.

The most common design is probably with the navbar on the left, although nowadays many websites use the navbar on top.

Page Dimensions

A discussion on page dimensions requires a separate article. However, in keeping with easy website design, if you are planning a website with fixed-width pages, these dimensions should work well:

• Page width: 750 pixels (px)
• Header height: 100 – 120 px
• Navbar width: ±130 px (for “navbar on the left” or “navbar on the right” layouts)

Bad Website Design

We’ve spoken about easy website design, but what about bad website design? Here are things to avoid:

• Inconsistent page designs: Make sure that every page on the website looks the same, with only the content changing. Create a template to use as the starting point of all pages.
• Busy backgrounds: Don’t use images with patterns or heavy textures as your page background. It might look pretty when there is no text on it, but is very distracting when you try to read text on it.
• Text/Background colors: Have you ever tried reading yellow text on a white background? Pick text and background colors that contrast well. Black text on a white background works well.

When you are done designing the look & feel of your web page template, sit back and just look at the web page as whole. Does it feel pleasant on the eye and make you feel good? If so, you’re set!

Navigation

Navigation is about how you structure your website information and how your visitors will move around your website.

Website Page Structure

Continuing with easy website design, divide your website topic into several sub-topics, and each of the sub-topics into a several sub-sub-topics. That will give you three levels of pages, like this:

If you were building a website on African Animals (level 1), you might have level 2 pages on Elephants, Lions, etc. On level 3 you might have pages on Elephant breeding habits, Lion breeding habits, etc.

I recommend a 3-level page structure because search engines spiders usually only indexThe process of determining the web page topic that leads to the page being added to the search engine database. web pages up to three levels down a website’s page structure.

Webpage Structure & Your Navbar

Which pages do you place on your navbar?

In the 3-level structure, there is only one page on level 1, your home page. This is where most visitors arrive. Put this page on your navbar.

As seen above, level 2 contains multiple pages. Add all level 2 pages to your navbar.

Level 3 also contains multiple pages. Don’t put level 3 pages on your navbar. Instead, put links in the content of each level 2 page that go to its level 3 pages.

Stick to your logical page structure, i.e. don’t link from your level 2 page on Elephants to your level 3 page on Lion breeding habits. You can break this rule if it adds value to your visitors, but try not to.

Search engines detect, and like, good navigation. It tells them that your your visitors will have a good experience at your website. So it is well worth your time thinking through your page structure and implementing proper website navigation.

You should now have plenty of easy website design ideas to make a great website!