Designing Your First Website.

Trying to design the first website for your business or a client? Thought it would be a lot easier than this? Well, I guess you realize its not!

Designing a website is actually a very difficult process for someone who isn’t an experienced designer and has never designed a website. There isn’t really a specific way to design a website, but here are some basic tips that may make the process less painful.

Simple and Elegant

As a designer and developer I feel that simple and elegant is the best approach for any website. Anyone can make a real fancy website, but what good is a fancy website without simplicity and user satisfaction? People like things simple and convenient plus if the website gives off the professional feeling then that’s a bonus to the audience.

Designing your first website

Here are a few rules that I try to abide by:

– keeping a soft background (maybe a soft gradient?)
– eye accessible text (avoid background images under text)
– highlight important areas
– use an eye catching navigation (eye catching but still simple)
– make it user functional (everything works and is easy to get around)
– keep the colours coordinated.

Just a couple of tips to keep your design fresh and professional.

I’ve had my share of picky clients that want those very specific designs. It could look terrible to you, but if that’s the case try and make some suggestions above and if their not satisfied, go ahead and design the website they want.

As they say the “customer is always right”. It doesn’t make your portfolio look too good, but what can you do, their paying your bills.

An Appealing Navigation Bar

The navigation bar is probably the most important element of any website. Your navigation bar must be eye catchy and at the same time simple. It needs to make your website easy to get around and should look pretty darn good too. Again it is preferred to use a background that makes your buttons easy to read and maybe add dashes or borders to separate those buttons or you could use little icons beside the text to represent each page.

Lefty or Horizontal Navigation

Do you use a left navigation or a horizontal navigation? My personal preference is the horizontal navigation bar. I think there more recognized than the left and generally look better.

Side navigation’s are good for sub-categories only, the horizontal navigation is definitely classed as the primary navigation in web design. Here are 3 websites to help inspire your design, each of which are all simple, elegant, colour coordinated and have professional looking horizontal navigation bars.

Kelseys simple and elegant website design

As you can see colour coordinated website design, with a simple and easy to use horizontal navigation bar.

Acer's website design for inspiration

This is a brighter website with the light and dark green, but it works really well. The horizontal navigation actually disappears when you no longer hover over the bar, which gives it a good effect.

lg's simple and beautiful website design

I like this because it is so plain and simple, with not many colours at all, but you can still clearly see that it has been professionally made. It definetely has a professional look and feel.

Choosing Your Colour Scheme.

If your designing a website, I assume you already have a logo or have had one made. If not, then you really need to consider designing one before you create your website.

I think your website’s colour scheme should definitely match your logos. It doesn’t need to be identical, but it should have some sort of resemblance.

If you have a dark blue logo you don’t need to match the colour scheme by adding a dark blue background. All you need is to add some features that will highlight that dark blue colour.

Choosing a colour scheme should be relatively easy, try and give your body background a light colour so it makes your text easier to read or a dark background with a light font colour and please do NOT use a colorful photograph as your background.

The photo may have real sentimental value to you, but it is every readers nightmare. Below is a quick example of what you should NEVER do. PLEASE EXCUSE THIS MESS.

What not to do with your web design

As you can see even with the text bold and at a large size it still makes it somewhat difficult to read. A default size for the text is around 12-16px and the text in the image is about 20+, so at default size it would not be easy to read. The image itself is great, maybe for a computer background, but behind text its just not attractive at all.

There you have 3 websites for inspiration, what not to do and a few simple tips to help with your design.. I hope you enjoyed this article. Please leave feedback or leave any suggestions.

Author: Jake

Share This Post On