• Websiteicons.com tutorials

  • Analysis of a professional layout

The best looking layouts are usually the simplest, but they are also the hardest to think up. If you look at our example layout you will probably be tempted to think : "I can do that too". And you're right. If you would want to imitate it, you'd probably get it all done within 20 minutes. But how does one make up their own professsional layout?

Dare to start all over again.

The major mistake most designers make is that they do not 'dare' to start all over again. Imagine you've been working on a layout for a while until it occurs to you: 'hmm, this isn't really looking all that good.'. Well, from that moment on you won't get it right anymore. Just start all over again. Even if you need several new attempts or restarts.

Talent Required.

A good designer always works from the concept that the entire site has to look homogenous, as one whole unit, in order to get that 'professional' look. You can achieve this by applying several different techniques. Below we will reveal the best kept 'secrets' of professional webdesign. We will guide you through a number of visual examples which will explain step-by-step what to pay attention to during the layout. One small warning however is appropriate here. Even with all these tips some people will never be able to deliver a quality design. It will always require some talent to be able to create a professional layout, and unfortunately, talent can't be taught..

1) Original design

Below is a basic design that we will use to point out several elements. This layout was created a while back for templatemonster.com, but was never submitted. It was intended for a full flash site.

Why does this layout look as good as it does ?

2) The alignment of a site

It is important that elements are aligned with each other. This will establish an overall clean layout and professional look. Find some point(s) of reference that can serve as a starting point for the alignment. See the points of reference, and the alignment that was used in our example layout below.

3) How to determine the distance between elements?

You can determine the distance by 'doubling' it. Find some already used spaces and apply those to other parts. That's how you create a balanced design.

4) Limit the usage of various fonts

Using several fonts in a layout is a temptation that most beginners can hardly resist. That is understandable. It is after all one of the easiest ways to set up a basic layout, change fonts and...it's done. In light of the concept we started from however, this is one of the major mistakes. What we want is a uniform look, it has to appear as one whole unit and there's no way you can achieve that by mixing several fonts.

In our example below you can see what fonts and sizes we have used. Pay attention to the consistent use of fonts. Everything that falls under 'heading' and 'menu' has font size 12px, whereas everything that is 'text' is 11px etc. This is a very important point : there has to be a good reason for each font and font size you want to use.

The most used font types online and in website layouts are:

Arial

Verdana

Helvetica

Tahoma

Of course, there are circumstances where you can deviate from this rule. If you're making a 'theme'-site for example (graphical layout in a specific theme like for example World Of Warcraft). In all other cases, however, it best to avoid theme-fonts and stick with the standard fonts mentioned above.

5) Determining colour

How do you determine the colour of a layout ? The rule is to assemble a colour palette. That is a collection of colours that go together well. You can make that palette first or do so progressively (step by step, while you go along). Personally I prefer the progressive colour palette. You start a layout and gradually adjust colours untill the result is satisfactory. That approach is also the most playful and creative in my opinion.

In the example below you see the different colours that we used, as well as the elements we used them for. Pay attention to the colours' HSB values. The S (saturation) and B (brightness) values are always the same. So we only change the H (Hue) value, which is the actual colour. This is because all colours which have the same S and B values fit together well.

Brown: (color comes from 'Menu')

Applied to:

background content box

darker version in the background of 'hosting company'

lighter version next to the buttons 'read more'

Green: (color comes from 'Menu')

Applied to:

background content box of page 'hosting plans'

Blue: (color comes from 'Menu')

Applied to:

logo

banner below

background content box page 'support'

Red: (color comes from 'Menu')

Applied to:

background content box page 'contacts'

6) How to create a unique design?

There are numerous websites and still webdesigners succeed in coming up with a site that is totally different from the previous one. How do they do that ? Personalize, personalize and ... personalize. A simple element like a menu bar is easy to make, but there's some thousand different ways to actually design one. How ? Again : personalize.

Compare it to the wheel. You can't invent it twice, but you can redesign it and reshape it. That also applies to websites and their layout. You take a menu bar and do it differently and you get a whole 'new' or 'unique' menu bar.

The images below show you how we personalized this layout. If you look at the core structure of the layout then it is not much more than just some boxes. But if you start to personalize it, then you'll get a 'new' or 'unique' layout.

Image 1:

Image 2:

Image 3:

Image 4:

Image 5:

7) Focal points

A focal point (or the central point) is what attracts attention within an advertisement, a picture or a layout concept. The focal point is also used as the discriminating factor. To make a layout different. It is the part of the layout that sets your layout apart from your competitor's.

A focal point however has to be used carefully. Restrict yourself to only one focal point to get the best effect.

In the layout below you see a clear focal point, the green leaf with the butterfly on it. That is the part of the layout that attracts attention and will probably 'stick' with most visitors (oh yeah that site with the butterfly on it)

Most of the layouts on templatemonster.com for example use a focal point, because this is what attracts the attention of the potential buyers, looking at the small thumbnail and getting interested.

A negative thing about the focal point is that if it is not used appropriately, it can have an adverse effect on your layout. Always pay attention and know what you're doing if you place a focal point on a layout.

ps : this layout can be seen live in a 'tableless design' on : www.body-and-minds.be

8) Learn from the best

How do I learn to apply all the above and how can I improve my designing skills ? Well, the best way to learn is to imitate sites that you like. Try to copy them as closely as possible. (Of course it is not our intention that you would sell those copies later on) By trying to duplicate a layout, you can learn first hand why that button was placed at the left side or why that particular menu got that colour etc. The more layouts you remake, the sooner you will be able to come up with your own design.. and that of course has to be the goal.

I hope this tutorial has been of use to you and wish you good luck and much success!

Bonus: Download templates: Download the templates used in this tutorial - royalty free-. You may also use these .psd templates for your customers. I have kept the price low because I believe this is a great resource to learn first hand how professional designs are build in photoshop. Larger view Larger view Larger view Buy: $15 (paypal) Buy: $15 (paypal) Buy: $15 (paypal) Buy all 3 templates: $40 (paypal)