KEYGroup

PROJECT: Web Site Redesign & Integration
Project #: 05016

WEB SITE REDESIGN

We have revised the site per your most recent notes.

We have changed the navigation to parallel the original. A secondary navigation feature will appear on inside pages within a category for the sublevels of each section. You'll see these in the second level comps we send next week.

To accommodate the Blog, we need to know how you intend to use it. Is if a Client Blog, and Industry Blog or a Media Blog? This will determine where it is placed in the site structure and navigation

Finally, we have created a scaling model as well. That is the second link below. It actually came out pretty well in terms of scalability. Far better than an original test we did with more limited design parameters.

ent portion below. We didn't really like the way it worked in our tests. But we can show you if you'd like.

Go take a look now at the non scaling home page...

See the scaling version...

After this is approved we will work on a look for the sub pages, which will mirror most of the elements on the main page.

____________________________________________________________

Past Notes...

We have completed buildout of the working model of your home page. As such, all of the rollovers and dynamic elements now work. The only thing that won't work are the links, which are already set up to the new architecture.

A couple things...

Do you have some better shots of Joanne speaking than those on the web site? We thought it would be nice to make the images related to her speaking change through several of her in action.

We changed the green color to red on the bottom color bar and the link to Joanne's speaker bureau section.

Everything else should look almost exactly like the static model. This site built out very clean.

It is set to center on the page, with a light gray on each side in the browser window. We could conceivably change the site to scale to the width of the page but the key logo would fall apart in the design as that is where the spacing would have to go in the header to make that part of the page scale with the content portion below. We didn't really like the way it worked in our tests. But we can show you if you'd like.

Go take a look now...

After this is approved we will work on a look for the sub pages, which will mirror most of the elements on the main page.

____________________________________________________________

We have completed two comps for your site.

Before we get into the creative, a few bear in minds...

  1. These are static comps. As such, some features such a animations, rollovers and other elements are represented but do not work. That comes with the build out of a working prototype.
  2. The majority of the elements are the same for both comps. Rather than focusing on content and specifics, we want you to concentrate more on the architecture, arrangement of the navigation, branding support, use of color and general layout. Some of the elements will change more as we move into the working pages.
  3. We opted to stick pretty close to your most recent marketing pieces in general design, so that you create a synergetic brand between all your marketing tools. We didn't want to create a web presence that had no connection to the other marketing strategies you're using.
  4. Both designs are built with the ability to easily update content in-house without a lot of "designed" features that need our involvement. We really recommend that sites be changed up regularly and both formats provide flexible layouts for doing so.
  5. Both versions can scale to fill different monitor sizes. Camp 1 is a little more tricky as the logo will need to be set in a specific space on the page and the yellow and white on the far right will resize. Comp 2 doesn't present as many issues.

Well enough of the ground rules...

COMP 1

This version is most closely branded to your print pieces. It uses the logo in a same, large scale along the top with just a portion of the key showing. Because web pages are horizontal and not vertical like print, we had to do some creative alterations to the logo's orientation. We think it worked well. The navigation goes down the left with a slight arc of blue, again supporting the print campaign, but the arc straightens instead of curves back for ease of updating the site's content. The main content is to the right. We used the Copperplate and Garamond fonts for headlines. The body copy is Arial, the sans serif option that is installed on all computers so the site will appear consistently for all visitors.

For the navigation, you can see how a rollover button would look on the "Growing Your VEO" link. Also, we can make the KEYGroup type and slogan fly in to the page, giving it a little flow. This can be done by using DHTML code rather than Flash, which not only has a heavy load requirement but also needs a plugin.

On the right is an emphasis block that provides information about Joanne and her speaker's bureau. A pulled quote is used from one of the testimonials. This can be changed regularly or updates on Joanne's next engagement can be placed in there when it warrants. A contrasting arrow creates the desire to click on it, similar to going on to the next page in a book. At the bottom is a subscription mechanism for an e-zine.

At the bottom of all pages is an address block so visitors can easily contact you without having to go to the Contact Us page. Finally, we will add a link to privacy statement in the blue section at the very bottom of the navigation.

COMP 2

This one is a little more corporate. Again, we opted to pick up the spirit of the print pieces, but the layout is more modular. The logo appears across the top, with the name next to the key logo. The navigation stretched underneath the logo, with an emphasis nav point covering the About KeyGroup and Contact Us above a block of pin stripe gray on the right side. For comparison purposes, you'll see a similar treatment of Joanne's speaker's bureau in the gray rule space. However, this section can have any number of things in it. For the underlying pages, this section can be used for tips, hints, testimonials, etc. Very flexible.

On the left is a second color block - in this instance a tinted back version of the yellow. This has supporting links and sales materials, including the e-zine and the Grown Your VEO store. We used a modified version of the key art as a rule line.

A feature that's not on the other version is a "Featured This Month" block - in this example we have one of the books. Again, you can see that we've used the Garamond and Copperplate type fonts throughout the design to tie everything together. And elements from this can be translated to the other design and vice versa.

In this version, Success Stories shows how a rollover is highlighted. Again, we can also fly in the logo elements to put some movement on the page.

Take a look. Pick one or the other, a combination or none of the above. Sometimes it takes more than one incarnation to get just the right look. These will begin this process.

Comp 1

Comp 2

____________________________________________

| ARTICLES | TUTORIALS | CLIENT CENTER HOME |

_______________________________________________________________












CommuniCreations(®) is a federally registered service mark of CommuniCreations, Inc. All protections afforded by federal trademark law apply to its use. All content on this site is protected by U.S. Copyright laws. So don't steal any of it.

COPYRIGHT ©2004, COMMUNICREATIONS, Inc. ALL RIGHTS RESERVED.