Developing Websites With A Theme
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.