dObyDA Web Design Blog

I launched Graham’s web site in February 2009.

Previously I have designed websites on a fixed width basis. This fixed width approach isn’t a problem, or incorrect as such. However, as the variety of screen resolutions in use is growing rather than shrinking I decided to go for a more fluid design for this particular project. A fluid design is a design that fills the visitor’s screen, regardless of their monitor resolution. I have achieved this to some degree on Graham’s website.

I’ve put more details about fixed vs. fluid designs on a separate post - Fixed vs. Fluid Design

For screenshots and brief details on this website please visit the relevant page in my online web design portfolio.

For a more detailed discussion on the various design aspects of this web design project please read below:

Design.

I was given a great deal of design freedom by the client on this website project. After getting the brief I started experimenting with different layouts and looks. I knew fairly early on that a “wood” theme, although perhaps not original, was appropriate for the content of this website.

However, I took care not to over do this theme as the risk of it ending up a bit “tacky” was a real concern. Subtle wood textures and sparingly used little details, like the screws, gave life to the theme, but kept it modern and classy.

The deep brown colour that dominates the website is consistent with the wood theme, and also helps to convey trustworthiness and reliability to the site visitor.

Layout & Structure.

I wanted to keep pages coherent and consistent as you browse through the site. I chose to go for a traditional layout involving a header above a three column content area, and a footer. This allows visitors to get to grips with how to navigate through the site immediately, and also helps to maximise use of screen space.

Projects were split into a series of categories to allow the website visitor to easily locate a project that interests them. Each category page gives the name, a photo and a brief description of each project. Visitors can then chose to follow a link to a gallery page to find out more details and see more images from that project. Structuring content in this way allows the visitor to decide how much detail they want to go into about a particular item, rather than it being decided for them.

Gallery pages were designed to give maximum space to photographs of the projects. By hovering the mouse cursor over a series of small thumbnail images, a larger version of that image is displayed. This large image is “framed” by two set-squares to provide a visual placeholder, and to tie in nicely with the theme of the site.

A brief description of each image is displayed next to the cursor when placed over an image. This provides an extra depth of detail for the visitor.

Extras.

The Quotation Form gives an extra option for the visitor to get in contact with Graham. Details obtained from the form are emailed directly to Graham, the site owner.

As a purely aesthetic element to the site a randomly selected image appears in the footer of each page each time it’s loaded. This not only showcases Graham’s work but makes each page appear fresh and new.

If you would like to visit G.S.C. Joinery please go to www.gscjoinery.co.uk.

Feel free to leave any comments regarding this site.

DA

Filed under: Website Launch by admin