Link: http://goodboating.astonishme.co.uk
The Problem: Owners of two boating companies in the mid-western United States wanted to enhance their existing, static commercial websites. They wanted to offer more relevant content, achieve higher page rankings, build customer loyalty and increase sales.
The Solution: Hire AstonishMe! to convert the static commercial sites into dynamic blogs and integrate them into a regional boating portal site (with boater blogs, professionally written articles and a community forum). The portal site will offer a wealth of information for the region, including relevant content and an active community of boating enthusiasts. Page rank, search engine optimization, potential customers, sales and customer satisfaction will all benefit.
The Challenge: Integration, custom coding, black/gold site design constraints, co-branding, public blogging, forum and multi-million dollar boat inventory database ... this project has it all. The first step was to design and build a mock up of what the b2evolution-driven, integrated portal site would look like.
Follow up:
Read More on "Good Boating" ...
Flowing Text & Popping Imagery in a "Liquid" Design
When taking on such a large, multi-faceted and ground-breaking project, it's important to remain focused on the larger picture and have a good line of communication with the client. Telephone, email and instant messaging were all utilized during initial discussions, where we conceptualized the final product and prioritized goals. Once we had a good understanding of what the client wanted, our first step was to show them what an integrated, b2evolution-powered, portal site might look like. They gave us free license for design, only stipulating the site colors (black and gold) and sending us a link to On the River, saying, "We want something like this".
Initially, we were concerned that black and gold colors would limit our ability to convey the concept of "water", for obvious reasons. However, we were up to the task and think we've succeeded, on several different levels. We wanted to improve upon their expected "target", presenting a page that is sexy, clean, intuitive and sleek.
Some time ago, we had spotted an open source web template called "Greenery", designed by Pat Heard. So many of web pages employ a horizontal banner image, it was refreshing to see this vertical one. We thought it an excellent design element for the Good Boating site, but we much prefer "liquid designs", where the site "flows" to fill the screen. We believe that the liquidity maximizes page real estate, even though it creates more design challenges.
We couldn't help ourselves and had a bit of fun with the boating image, which was selected because for it's gold tonal qualities, vertical format and relevancy to our client (the boat in the photo is manufactured by Carver, one of the 3 major brands of new boats they sell). By hand editing the image, we were able to provide a three dimensional quality, making it really "pop" out of the page. This further adds to the intrigue of the front page. In addition, we employed some creative CSS techniques, making the page text "flow" around the protruding hull, as the page is resized. This adds an illusion of "flowing water". The sky was added as a separate element and digitally manipulated, so that it expands as the browser window expands.
All-in-all, we were very pleased with the simple elegance and stunning appeal of this basic, liquid page design.
Elegant, Intuitive Navigation
Our clients iterated, on a number of occasions, that it was important that the site be easy to navigate. One of the problems we noticed with the target site was that the navigational list was long and became difficult to read. In addition, it is anticipated that Good Boating will have many more links than those presented, only compounding the issue.
The solution, was so present the important navigational links on the front page and then categorize the departmental links, using javascript to present them via a shorter, expandable /collapsible list. For most visitors, this will present an intuitive, cleanly designed, navigational interface. The code is cross browser compatible (MSIE, Opera & FireFox tested) and degrades to a simple list, if a visitor has javascripting disabled. This is in keeping with our company belief that javascripting, since it runs a chance of "not working", should used responsibly.
Javascript should enhance a visitors experience, never degrade it.
Recent comments