Good Boating

29th Mar 2006 stk


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.



When we completed some intermediate blog integration work on Ohio Boating, the client had this to say:

I am excited as hell to see the completed site but I'm so in love with our intermediate site that I might fight to keep it when it's time to roll it in. The blues blend beautifully and the shadow affect is classy and adds to the mood. Yup, we might duke it out on that one... :>)

Because we had already roughed out the basic design of the new, integrated Black/Gold "Good Boating" portal site, we were pretty certain that Ann would really like the new look. I was so certain, that I made this (rather cocky) claim:

It means a lot to us, as the designers/programmers, to hear that we're going to have to duke it out with you over the design! We're so certain that you'll love the new layout that we're prepared to bet you $1,000 -you won't even consider fighting to keep the interim one. ;)

Unfortunately, she didn't commit to the bet, otherwise we'd be a tad wealthier. ;)

03/29/06 @ 23:52
Comment from: ann
Yes, it is a good thing I didn't commit!!

I can't begin to say how you folks continue to uhm, well - astonish me! I have been circulating the link of the mock up page around to the staff and to selected viewers and it is unanimous praise all the way around. 'Exciting', 'unique', 'gorgeous' are some of the words feeding back. We are really going to have one of the most unique sites of it's kind in our industry and I can't thank you enough for investing the imagination that is making this one outstanding endeavor.

03/30/06 @ 15:12
Comment from: william juan
Felicitaciones por esta página.
Impresionante los efectos de sus imágenes.
Favor con que plugin trabajo usted?
Si me puede indicar el lugar de descarga?
03/17/07 @ 00:24
Comment from: stk
William Juan,

Gracias por el elogio.

¿Asumo que usted está utilizando b2evolution?

Ahora, estamos trabajando para un plug-in que haga con este efecto de la foto (PZ3) muy fácil. Sin embargo, el efecto de la imagen se puede utilizar en todas las páginas de XHTML. Es una solución de pure-CSS y usted puede AHORA descargar el código y comenzar a usarlo, si usted desea.

Usted puede encontrar más información aquí.

Espero que esto ayude.

03/18/07 @ 21:56
that boating site is quite impresive. is quite a good job
01/31/09 @ 11:47

Comments are closed for this post.


User tools


Visitor tools

  • AstonishMe membership is free to everybody, become a member today and get the most out of your visits.
  • If you are already a member then please login.