Website Design Principles

You may have heard people say that content is more important than the design of a website. This piece of information, in fact, is not true at all. A good design is integral if you want people to come, and keep coming back to your website. Think of a restaurant that serves the tastiest food in the city, but fine food is the only good thing it offers. The service is crappy, the tables dirty, the chairs creaky, the lighting poor, and walls chipping paint; how many times would you go to that restaurant before leaving it for good? Not many, I’m sure. Websites work in the same way; you may have the highest quality content, but people may not be able to use that content in an effective manner because of problems in the design. Therefore, you should always focus on the design at least as much as you focus on the content. Here I have described a few principles to remember when designing a website:

The Design-How it Looks

This refers to the actual design of your website. Strive for a design that is beautiful and easy on the eye, as well as one that keeps the potential user in mind. For example, a website designed for kids will differ greatly with respect to design features than one designed for a law firm.

Precedence-What Comes First

Precedence means the order of all the elements in a web page. It also means what element of the webpage is displayed first when a website is loaded. Generally the header comes on the top of your webpage, with the navigation buttons just below it. There is a menu on the extreme left of the page, your content in the middle and banner ads on the right. A footer comes below everything. This is, of course, the general precedence, you may set the precedence any way you like as long as it highlights and complements your content.


It refers to the spacing between the individual elements of the web page as well as the empty ‘white space’ on a web page. A rule of the thumb: do not try to cram the page with too much information; the user may skip things if the page is too crowded. Keep the webpage clean and spacious so that the use is immediately directly towards your content.


All the elements in the web page should be properly and consistently aligned with each other. Tables can be used to help align the content, but it is advised to use CSS instead.


This refers to the font type, font colors, and their sizes. Do not use a too-small font, as it will reduce readability, nor use a too-large font that will look unprofessional. Also, make sure the background color contrasts with the font color. One thing to keep in mind, patterned backgrounds are a distraction where there is a large amount of text to read, so try to avoid those as well.

Consistency and Uniformity

The design and color scheme of the web pages should be consistent throughout the website, as should be the nature of your content.


Ask yourself these questions:

  • Is the information I am providing usable to the reader?
  • Do the buttons click?
  • Are the links correct?
  • Is it easy to navigate between pages?
  • Is it easy to read?

If your answers to these questions are ‘yes’, then congratulations, your website is functional!

Navigation-Moving Around

Navigation means the ability to move around the website. Provide working links and buttons for easy navigation throughout the website.


It means whether your design is clear and user friendly or not. It is basically about the relationships between the individual elements on your webpage. Group similar items together, be clear in your instructions if you have any, and try to make your website self explanatory.

Content Placing

Always put your most important content in a place near the top of the webpage that grabs the users attention first. Do not write in long paragraphs; instead break your content down into smaller chunks with subheadings. Place different kinds of media together such as text, images and videos etc. to give your website an appealing look.


14 thoughts on “Website Design Principles”

  1. I really love your website.. Great colors & theme.
    Did you create this web site yourself? Please reply back
    as I’m looking to create my own site and want to learn where you got this from or exactly what the theme is called. Many thanks!

  2. Hi, i think that i noticed you visited my website so
    i got here to go back the desire?.I am attempting
    to find issues to enhance my website!I suppose its good enough to
    make use of some of your ideas!!

  3. Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin

    1. Thank you for your advice. I haven’t studied about SEO in detail, and I had no idea there was a problem with my blog. Thank you for pointing out my error. I will definitely be more careful in the future.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s