Developing Websites With A Theme
 by: Sitecritic.Net

I like to think of the theme of a website as something that makes the website easily identifiable. It can be a combination of colour patterns, navigation effects, layout...etc that leave a lasting impression on the user. All design elements in the site combine seamlessless to convey a strong message effectively to the user.

Every website needs a theme. When designing a website, it must be build based on a concept or an idea. A good way to start is to come up with a phrase that describe what you want to achieve with the site. It can only be one phrase as short as possible, no cheating. Why only one phrase? Because it forces you to be focused in your design which will eventually make your choice of colors, layout and graphics for your website easier.

For example, if the phrase for an automobile site is "Enduring Passion", then I will be focusing on the keywords "Enduring and Passion" and I will make sure the meaing of the 2 words are being implemented into my design.

Brainstorming

During the brainstorming process, you try to expand the ideas of the keywords to generate more ideas for your design. The way we think are often moulded by our environment and memories. It is important that you do not stop your flow of thoughts in this stage. Write down what ever that comes into your mind, not worrying whether they are relevant or not. For Example:

Enduring - "Lasting, 3d, Complex, High Tech, Comfort, Excitement, digital...etc"

Passion - "classy, red, pink, bright, clean, elegance, details, light colours, thin lines, curves...etc"

There are no hard and fast rules, just throw in what you can think of. We will try and use these ideas in the next step.

Implementation

Now that we understand the keywords better, we will try to implement these ideas into the design elements of the site. An example is as follows:

a) Looking and Feel: We want the user to feel that they have come to a classy website. So we do not want too many words but strong visuals.

b) Design and Layout: Probably alot of negative space to convey the idea of elegance. Bright, thin borders, nice shadows.

c) Colors: Tints of gray, with black and white to emphasize the idea of elegance. The text will mainly be dark gray on a white background with occasional bolded red, orange or blue to provide contrast.

d) Navigation: Quick navigation with minimal effects.

e) Graphics: Use images that have techie look. To show the idea of "enduring", we use the images of different sections of the automobile in every page, ie other than the logo and main menu, we want something similar in every page. Maybe use thin lines or 3d drawings to represent technology.

Again, there are no hard and fast rules in this stage. The idea is to let you have a clearer idea of the style you are going after.

Testing

In this stage, you try to create a visual representation of the final homepage in photoshop(or any other software). The end product is just a photoshop file to give you a general idea of how the final homepage might look like. If you like, create another subpage(an internal page that links to the homepage). Stare hard at the final images. Ask yourself whether the layout, colors, fonts, images and navigation reflects on the theme of the website. Once you are satisfied with it, you then need to convert the photoshop file to the actual web page which is another part of the story.

Conclusion

A website with a theme leaves a more lasting impression on the visitors. Many people design websites just to look nice(according to them) but has no theme. For example, many people like to use 3d effects in their navigation or images without asking themselves whether it is appropriate or not.

About The Author

Sitecritic.Net

www.sitecritic.net is formed by a group of web addicts, mainly volunteers from all over the world. Our goal is to create a community of web designers and developers who share the common interest in bringing out the best in creatiing effective web sites. More articles can be viewed at http://sitecritic.net/web_articles.php.

[email protected]