|
|
|
MAKING MY DESIGN LAB
Finding the style of the site
When I first began planning the website, I had imagined a very upbeat site, using the name Broken Image, where the use of a bright green color and complimented with a black one was to be the backbone of the design line. After the first 2 drafts it was very clear that this was not the way to go, and I changed to a more stylish design.
The basic grid was made and has been pretty consistent since the first draft until final design. As you can see, the point of this design is to have a very clear graphical grid, where all contents are placed within these areas. One thing that is important when making this global design guideline for your site, is to be open. You might end up on a sub page and find that the grid, which worked perfectly for the first two pages, doesn't work at all on the rest. Try to think your design through before settling on a grid or at least be open to changing it along the way, if you paint yourself into a corner. There is nothing worse than trying to understand a website, which fundamentally does not work.
 |
| The basic grid for the page |
| |
The layout
The page is divided into the top, visual header & main navigation, sub navigation / sub information and content area.
|
The grid was tested to see if it worked, before I started to apply a look and feel to it. I began using a white background but very soon found that by using a darker background, the page stood out more.
Don't mind the photo's used, they where only place holders...
You can here see how the design came along and finally ended up. Along the way, I dropped the idea of the dark left bar going all the way up to the logo, since I felt it gave greater peace to the page. I also slimmed down the whole left area, since it was a little to wide to really work on some of the sub pages, and I changed the color to a dark grayish brown. Another small change was removing the top white borderline and only having it on the left, right and bottom.
Good advice when designing?
Designing with fonts
I am very consistent in how I use fonts. The font used is Verdana / Trebuchet and by adding extra space between the lines it looks a little different from a "normal page". Next I use capital letters in headlines, which also adds to the style and feeling of the site.
|
|
Example
Here you can see how different the text looks like - from using standard line spacing and no capitals to what is online.
|
Using a grid
The grid, as I already talked about, is a way of controlling your visual presentation. When people say that something looks bad or messy, it's usually due to the lack of invisible lines. By adding a grid, and sticking to it, you will end up with a much better design.
|
|
Example
A shot visual presentation on what can go wrong when making a grid. It's a little exaggerated, like all good movies are, just to get the point across...
|
The photo language
Use of illustrations and photos has a special flavor to it. Just doing a little extra work in Photoshop by fixing the "levels" or sharpening some parts of a picture, can make a huge difference.
|
|
Example
The picture was cropped to make it fit and changed from color to black and white. The back was blurred and the front was sharpened. Levels where adjusted, light and darkness were added to create a better picture. A small tweaking of adding extra white spots in the eyes and removing dark shadows under the eyes took place, and finally a shadow was added to give an impression of depth.
|
|
|
|
