Some months ago, i got the opportunity to do a redesign of a web site for Plan & Bouw, a plan and real estate company in the area.

The scope

Some background on the project

I was approached by Veerle and Geert from Duoh!, with the question if was interested and had time to do a redesign for Plan & Bouw. I was happy with the opportunity and after a meeting and a price setting, we agreed to kick-off the project. I respect and admire the way Veerle and Geert do business and how they share their knowledge online. When i started out as a web designer, Veerle's blog had almost every subject covered that i was struggling with at that time. I'm happy i was able to work on the project with them. Today i have some time to share the design phase with a post.

A redesign of the existing web site in Photoshop and a recoding of the html and css was on the project to-do list.

Sketching phase

Searching for a mood, an atmosphere

In the sketching phase, i was looking for an "outside" mood. I started with some sketches for the top menu and started drawing icons for the main site's sections.

In the final site, these icons were animated with first a grey version that results in a colored version when hovering or when selected.

_{the initial sketches for the site's menu}

_{the vector results}

_{the button style icons for the menu}

Typography

Searching for the right typeface

Because the existing logo uses Futura as the logo font, we searched for a sans-serif font that has good legibility and display quality and was available as a web font. That font was "Proxima Nova". Available as a Typekit font and a desktop version.

_{We chose "Proxima Nova" for its excellent legibility and display quality results.}

Colors

Searching for the right colors

Because the existing logo had a bright yellow in it, I set this as a base color, it was a bit changed to more banana yellow. From this base color, another yellow, orange, 2 bleu's and grey's were derived.

_{The color palette was derived from the existing logo.}

After setting the global style, we searched for some stock images as suggested by the client to set the global mood for the real estate site. These pictures only appear on the homepage in a slideshow

The web design phase

Making the designs work for the web

With these elements defined, i started working on the web design in Photoshop, after tweaking and doing some changes, we were happy with these final templates:

_{Home page design}

_{Real estate offer}

_{Real estate detail page with tabs}

Animations

Form result page and a 404 page

The form result page and the 404 page contain both an css3 animation.

_{sketching the illustrations for the form result page and the 404 page not found}

_{custom illustration and animation for the form result page}

_{custom illustration and animation for the 404 page not found page}

View example here: Form result animation

View example here: 404 Not found page animation

The coding phase

Making the designs work for the web and for mobile

The web site was designed for desktop but was later also made available for iPad and iPhone use with media queries (not online yet).

Before starting on the design for iPad and iPhone use, we agreed on adjusting some elements that worked in the desktop version but not on a touch screen device:

• The slideshow on the homepage was taken out for iPhone but not for iPad
• The menu was placed on top of the iPhone and scaled
• The tabs were replaced with custom made icons
• Link hover effects/animations were taken out and replace with touch screen functionality
• The Google Maps view on the real estate page was replace with a link that opens the Google Map App on the iPhone
• The form result animation was left out and replaced with a static image
• The 404 page animation was left out and replaced with a static image
• Adjustments on padding and margins and other elements …

The responsive web site is in development, you can see it here

_{Adaptive design for iPhone use}

_{Adaptive design for iPhone use}

_{Adaptive design for iPhone use}

The end result

Partners

I enjoyed working on this project, i learned a bit more about making adaptive web design and paying much more attention to detail. The complete implementation of the code in the back-end system was done by Fortissimmo.

Visit the site: Plan & Bouw