Design
21 Aug2010
I wanted something different for my self, something fresh, and
idea was brewing in my head. I realized that what will make my
website different from others will be is its colors and style.
So before i started drawing concepts on paper i had to decide
what kind of webpage i was going for. A blog or a content driven
webpage. After a small brainstorming session there was no doubt in
my mind that a content driven webpage was the correct one to
use.
- A blog is mainly categorized by a singe frequently updated feed
of entries posted to a single page in reverse-chronological
order.
- A content driven webpage can be described as a collection of
theme categorized entries, and thats what i was going for.
This will reflect on the navigation and on the main layout of
the webpage.
Here is the first sketch of the webpage layout
There are lots of neat designs out here for a content driven
site. Like roskilde.dk and www.trafikstyrelsen.dk, sites that i had
worked on in the past working for Webtop and Cabana A/S. They are
both content driven and they had some structural quality's that i
wanted to reflect in my site design. But i did't want the
cooperative look and feel that they had, i wanted to create my own
graphical footprint. Something that will differ from the rest of
WWW out there. So i decided to base the design on a subject that is
most dear to me.. and that is Doodling.
I love drawing small fast sketches,..cute ,..and not so cute
monsters,.. industrial design,.. characters ,. you name it. It's
allays fun.
I had a clear picture of what kind of navigational items i
wanted, so i started drawing a monster for each one of them,.. Her
is a scan of my monsters. If you are wondering why they are in blue
inc, that's because when i doodle i don't use pens instead of
pencils (c:
The next step was to choose a main pallet for the website. My
main goal was to separate top-navigation and content and footer
areas with color, to get a clear separation of content. So i
chose a neutral grayish color for top navigation background, and
more potent colors for footer and content areas.
I wanted to give the content area the most potent color, to
emphasize its import ans compared to other areas.
Now where i had defined all the base components i had to draw
and color the rest.
So after I've scanned my monster sketches in to my computer,
I've drawn out a vector for each one of them. It was a very time
consuming task each monster consists of dusins of vector masks, but
at the end i was pretty satisfied with my design.
So her is the final layout.
Each of the areas are separated by a wavy pattern which makes
the transition from one area to another softer and more pleasing to
the eye. Each monster in the top-navigation menu is designed in
such manner so it will give the reader a hint of its' menu's
content. I wanted to have a soft layout with a good contrast, so i
am using round corners every-ware it's possible.
Now where the main design is done it is time to write the
Front-end template for this webpage. It will only consist of HTML,
Javscript and CSS.