Sometimes Design Turns into Perfection - With the Help of Others

Posted on Wednesday, March 26th, 2008

Ok, I’m gonna brag a bit here. Just completed a new site for a architectural home designer in British Columbia, Canada. The final result fits my client and his business perfectly. It has an architectural look about it and the color scheme matches the semi-arid mountainous terrain in the region his homes are constructed. I think it’s perfect, but I’m a tad biased, of course.

Now it’s not 100% original as nothing in design ever really is. We all take inspiration from others and blend ideas to build our own creations. So here is the process that came to develop this great design.

It Began with a Logo

First we started with designing a new logo by holding a logo contest. The final logo was clean, simple, and turns out to be very versatile. Trevor, the design team leader over at Geekpoint.net was the designer. This logo then helped to determine some of the color schemes for the site.

Layout and Color Schemes

The client had presented some print brochures and posters from a window manufacturer which helped to set a direction. I had some initial ideas of basic layout and placement of elements but needed something else to help tie it all together.

When I’m stumped on design ideas I browse the CSS web design gallery sites like these; csswebsite.com, cssbeauty.com, cssheaven.com and others. These sites showcase the best in current web design trends with a focus on standards complaint HTML (hyper text markup language) and CSS (cascading style sheets) coding.

After browsing through dozens and dozens of sites I came across these; andrewbradshaw.com and cabedge.com. So to give credit where credit is due here is what we liked about these designs and the elements we incorporated into the OHD website.

Header and Navigation

On Andrew Bradshaw’s site I liked the header and navigation menu, particularly how he had separated the menu with that divider. I used a similar separation to move the Contact tab above the right sidebar. This helps to highlight the contact link since having visitors contact the architectural designer is the primary goal of this website. I then hunted down the perfect background image at istockphoto.com to incorporate an organic natural look of wood.

I also used his technique of separating colors in the logo text to highlight the word design. I then did a mirror image of that technique on the other side with the phone number.

Color Schemes and Presentation

The Cabedge website had pretty much the layout I had originally envisioned with the narrow sidebar, the big showcase box and three columns below to highlight the main services of my client. The Andrew Bradshaw site actually uses a similar layout too. More importantly here with Cabedge was their color scheme for the main content area. They were using similar background colors to the Marvin Windows brochures I had. As soon as I saw their site I thought, “that’s it”.

I re-created their background gradient image in Photoshop using similar colors while changing up the rate of fades a bit. I used thick (not as thick) borders around images and went slightly darker there too. Font colors are similar for the content while we used the gold of the new OHD logo as the colors for headings and subheadings.

Visual Effects with Java Script

Drop Down Menus

Drop down menus for site navigation are a great usability tool but add complications in designing a site to work across multiple web browsers. Various browsers have their quirks on how they interpret CSS code. Internet Exploder (explorer) in particular has issues with handling pure HTML/CSS drop menus. So to solve that we like to use the suckerfish method. Some java code helps out IE while other browsers can function fine without it and maintains a search engine friendly navigation structure.

Slideshow Presentation

The slideshow in the big box on the home page is not flash animation. I don’t work with flash. Instead it’s actually search friendly HTML with some java script to create the effects. We used SmoothGallery 2.0 and modified the script and stylesheets a bit to place the text portion off to the side and allow it to fade in instead of slide up and down.

Portfolio Gallery

Lightbox Gallery
The individual galleries for the home design portfolio pages use the LightBox 2 script to overlay the images in a window without having to create a pop-up browser window. The way it greys out the rest of the page while viewing images allows the individual images to maintain priority when viewing them. And you can scroll through the whole set of images without having to close the window and open another. LightBox is a great script for presenting images.

Powered By WordPress

We used WordPress as a Content Management System which allows the site owner to easily edit their content and particularly so they can post information via a blog. Here the designer wanted to be able to write about developments in environmentally friendly home design and construction.

So there we have it. With the help of a logo designer, inspiration from a couple accomplished web designers, a few stock photography images, some cool java scripts created by others, and the open source WordPress software we’ve pulled it all together to create a really amazing website.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.