clickInvites - Redesign our site! - $225

[clickInvites]

(Admin code added by 2Square - V422942W)


Company name: clickInvites

Company profile: We sell invitations and announcements. What makes us different? The way we service our customers. This is definitely one area that we need to highlight on the landing and home pages.

Domain name: http://www.clickinvites.com

What is the scope of this project? We’ve been in business for 3 years and are in desperate need of a redesign. By the way, dbenton25 created our logo.

Who is the intended audience? Mostly women age 18-55, English-speaking (U.S., Canada, U.K.)

Mood or tone? Professional, fun, simple, dynamic

Color psychology? Colors are drawn from the photograph and incorporated into the logo.

Any dynamic elements? The logo and color may change depending upon the incoming domain/URL.

Who are your main competitors? http://mvsweddinginvitations.com, http://wedding.orders.com

What resources can you provide? Logo, pictures, documents, fonts, color schemes

Websites you like: The navigation on http://www.llbean.com is superb.

Deadline: Feb. 4, but it's not set in stone.

Layout
Screen width: 770 px. I like DHTML, but I’m still nervous about it, so tables are fine for layout.

Browser Support
PC: IE 5.5+, Opera 6.0+
Mac: IE 5.0+, Safari

Top Navigation:
In the mock-up, I list text navigation links. I prefer not to use graphics and rollovers, but you can convince me otherwise! I like what SitePoint does with CSS to highlight the hover state. We’ve got a lot of space to work with in the top, so feel free to use it as required.

Left Navigation:
Since we only sell invitations and announcements, the current left navigation is populated with themes and collections, as shown in the mock-up. We’ll be adding more accessories and collections very shortly, so the navigation will need to be dynamic. I can see that we may need to configure the navigation to contain categories and subcategories below. I would like to display an icon to the currently selected item though. And use CSS to display the current hover.

Future navigation?
========================
CARDS
Wedding Invitations
View by Collection
View by Theme
View by Designer
View All
Wedding Announcements
View All
Save the Date
View by Designer
View All
Bridal Shower
View by Designer
View All
Thank You
View by Designer
View All
Anniversary Cards
View by Designer
View All

ACCESSORIES
Napkins
View by Designer
View All
Envelope Seals & Stamps
View by Designer
View All
Direction/Map Cards
Reply Cards
Envelopes
Place Cards
Program Covers

SOUVENIRS AND GIFTS
This and that...
More...
========================

That said, we could simplify the navigation by not displaying the subcategories and by directing each main category (e.g. Wedding Invitations) its own page which would then contain the necessary links.


Pages needed:

1) Landing page:
Our keyword density needs to be significantly higher. I prefer that the navigation elements are text-based as in the sample (Wedding Invitations by Theme, etc.). By using a landing page I think we can accomplish the keyword density problems we are having.

The landing page may contain the same navigation used throughout the site, or just parts of it. But, it will contain more text to describe what we sell, who we are, and what makes us different.

The landing page should be a single page with a height of 420px.

2) Home page:
See the mock-up.

3) Category page:
Same top and left navigation as the home page, but we can get creative in the content area. The category page will describe the current selection (I.e. Wedding Invitations with links to all of the sub categories and themes).

4) Product thumbnails:
Same top and left navigation as the home page. Thumbnails can be displayed in a grid (3 x 4) or a list format.

I think the invitation industry is different in its web browsing/purchasing since customers will view a gazillion pages before making a decision. I'm thinking out loud now, but perhaps we need the ability to filter items even further by displaying the filters on the product thumbnails like what is used on cNet. (http://reviews.cnet.com/)

On the original clickInvites site, we displayed 8 items on the left of the page with the selected item's description to the right. In the new design, I would prefer to use the standard browse method--simply list the items that match the search, category, or theme, and then let the user click a thumbnail to view its details on a separate page.

Other thoughts:

• Your design does not need to match my mock-up. I'm merely trying to demonstrate all of the elements I would like on the home page.
• CSS is a must. The site must be capable of changing to a different color scheme.
• Dare I ask for something light weight? I think the standard is around 60K for the home page.
• 95% of our customers are female.

Good luck!

[geofharries]

I will be entering this contest. Look for an entry tomorrow or soon after. Oh, and my design will work on a Mac

geof

[Ian]

I'll have a stab at this one.

[clickInvites]

Thanks guys. I'm looking forward to your creativeness.

Geof, just so you know, the mac problems we suffer are not from the general browsing of products, but within the personalization. I'll have these items fixed immediately after we implement our new design.

[Anne]

[Anne]

I started on one and here it is.

[clickInvites]

Resources are here! Let me know if anything else is needed.


Dark mauve (top nav button off):
#776070

Light mauve (top nav button over/on, search area):
#DDCED3

Dark grey (left nav background)
#CCCCCC


Logo:
Attached or http://www.clickinvites.com/icons/site/logo.gif

Photo:
http://www.clickinvites.com/icons/site/hom...e_mainphoto.jpg

[Tim]

My entry is comming soon.. maybe tonight

[Tim]

Here is my entry

[Ian]

Here is my entry in HTML form,

updated * Click Invites

[Anne]

I made some small adjustments to the design.

[Palmer]

That is gorgeous Anne.

[Anne]

Thank you

[clickInvites]

Thanks for your submissions so far. I'll post my comments tonight.

[IDarwish]

Ill hopefully have my entry by tomorrow .

Thank You,
Carlos.

[geofharries]

Mine's almost done, just need to make a few small tweaks before I upload it.

Sorry about the wait!

geof

[clickInvites]

All,

Thanks again for your submissions. I know I wrote a lot in my original posting, but I wanted to make sure that my ideas were communicated well. The most important item to me is the left navigation.

Anne
Great use of colors! And, I like the dots to divide sections too. We will not need the Login fields at the bottom of the navigation, but a Log In | Register links will suffice. I would rather have the top navigation buttons shifted below the tag line but the baseline the same as the logo. Thanks for sticking the breadcrumbs in too (I forgot ). I like how you centered the main picture. I can see that we will need to change the feature content if we center.

Tim
Nice layout and great use of the left navigation! I like how you listed the top sellers and staff picks.

Ian
Nice top navigation background! Again, depending upon the page weight, I may opt to not have the background, but we'll see how heavy it is.


Other thoughts
Our Free Shipping item is ugly and it will be replaced with one or two additional main feature items. We will move the Free Shipping to one of the less important areas at the bottom.

If any of you are bored , feel free to mock up the product thumbnail page. Of course, the top & left navigation will remain the same, but please keep it simple. Along with the title/description, we may want to include a price per 100 (I.e. $50/100).



I know we are just looking at mock-ups, please keep these in mind when coding the HTML:

Left Navigation
Highlight the current navigation item with an small graphic identifier (the infamous '>'). The identifier may be displayed on a sub group (I.e. Daisies) but allow it to be displayed on a group (I.e. Wedding Accessories) as well.

Top Navigation
Again, I prefer to use text/css for these to save on graphics, but I'm open for ideas. What's 10K between friends anyway?

Breadcrumbs
I forgot these in my mock up, but they will be needed and we can always squeeze them in.



Thank you!

[geofharries]

Here is my entry into the contest. I took creative liberties with the colours, and added an earthy green to the mix; just to give it an extra bit of "oomph". I hope you find that addition appropriate despite your original instructions.

I would program the site in XHTML Strict or Transitional with CSS, so any of the rollovers and drop shadow graphics wouldn't be too heavy size-wise, as they'd be simple layers instead of complex tables. You'll find that a well-coded XHTML page is much better for search engines than a traditional table-based layout, as there's less "junk text" for their spiders to crawl through, and more relevant content in relation to page weight. You can read more about this methodology here >> http://www.alistapart.com/articles/seo/

Regardless, I look forward to your feedback. There's sure some great entries in this comp!

geof

[Ian]

Thats Beautiful geof . I will Update my entry later tonight.

[Anne]

Here is an update.

[Ian]

Click Invites second

I've made some changes like;

- added the icon to appear when hovered over the menu item.
- Minimized the Free Shipping Info.
- Changed the Copyright Info
- Changed the general structure of the main content.

On the Subject of Load times, I designed the site with load time in mind so the load time won't be a problem. Anyway take alook and tell me what I can improve etc. Thanks.

Also, I will work on the thumb page soon.

* Updated Link (had some downtime)

[clickInvites]

Everyone,

Great job! It's going to be a very tough decision. I'm not just saying that to make everyone feel good about themeselves! You have all done a superb job.

With that in mind...

The contest will close Sunday, February 8.

We will try to select a winner by February 14th.



Thank you.

[Ian]

ClickInvites, Sorry I had to change my hosting about 30 mins ago. I've sorted the hosting now so the link should work(that is if it didn't before).

Cheers, Ian

[clickInvites]

Geof,

I really like what you have done with your design, but I have a few questions for you before we make our final decision. The initial impression of the site is very nice.

1) I would prefer to have the sign in/register and search items at the top. The View Cart could be aligned right and breadcrumbs aligned left on the same line.

2) On the left nav, I prefer the the main categories in one color and the sub category in another, separated with the dots you used on the right border.

3) We will need several more areas to hold testimonials and other text. I may swap positions with all of the content items.

4) Our tag line looks good with the graphic but it can be trimmed to help with space.

Please let me know your thoughts.

[geofharries]

1) I will move the search and sign in/register links to the top as requested. I'll also move the View Cart link to the right, and then the breadcrumbs to the left.

2) I'll place the dots in the left navbar as proposed, and switch up the colours.

3) Let me know what you'd like to do with the content...it's all quite moveable.

4) With the tagline, do you mean you'd like to see it all in a smaller font? I can do that no problem...

geof

[Ian]

[Anne]

One from me as well

[clickInvites]

Anne, very nice (as usual). You don't need to do another preview but I just wanted you to know that I'm going to use a "traditional" approach with the thumbnails this time. I'll move product details to a page by themselves, so we have more room for thumbnails. I need to squeeze in the price per 100 ($XX/100) and "Add to Favorites" text link.


Ian, nice job on with the thumbnail header and squeezing in the descriptions and price.

[geofharries]

Mornin' (well it is here at least)

Below is my revised entry into the contest. I added and tweaked the elements you'd listed in your previous post; hopefully they're to your liking. My idea with the left navbar is to use the same sort of CSS rollover that Sitepoint uses in their header links, where the entire background around the text is highlighted as it's selected.

For the main navigation up top, I could do the same sort of thing, but the text would be graphical (as the font is Minion) and would use Javascript to switch.

geof

[clickInvites]

Thanks to everyone who entered this. You all have done a fantastic job. I know how much time it takes to to create these mock-ups and I appreciate your efforts.

The clickInvites team members will meet this Wednesday to discuss each of the entries and I should be able to announce a winner shortly after..


THANK YOU!