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.</li> CSS is a must. The site must be capable of changing to a different color scheme.</li> Dare I ask for something light weight? I think the standard is around 60K for the home page.</li> 95% of our customers are female.</li>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. :sick: I'll have these items fixed immediately after we implement our new design.

[Anne]

<!--QuoteBegin-clickInvites+Jan 25 2004, 12:43 AM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (clickInvites @ Jan 25 2004, 12:43 AM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin-->What resources can you provide? Logo, pictures, documents, fonts, color schemes[/b][/quote]
I would like to enter this one.

Could you attatch the logo, some pictures and the color scheme so I can start making the template :D

- 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 (http://www.clickinvites.com/icons/site/homepage_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 (http://www.epicservers.com/~ianjames/clients/click/)

:D

[Anne]

I made some small adjustments to the design.

[Palmer]

That is gorgeous Anne. :tup:

[Anne]

Thank you :D

[clickInvites]

Thanks for your submissions so far. :D 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 :unsure: ). 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 :D , 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

<img src='http://www.kwota.com/designoutpost/clickinvites.jpg' border='0' alt='user posted image' />

[Ian]

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

[Anne]

Here is an update.

[Ian]

Click Invites second (http://www.epicservers.com/~ianjames/clients/click/)

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. :D

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]

<!--QuoteBegin-clickInvites+Feb 4 2004, 01:52 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (clickInvites @ Feb 4 2004, 01:52 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin-->
If any of you are bored&nbsp; :D , feel free to mock up the product thumbnail page.&nbsp; Of course, the top & left navigation will remain the same, but please keep it simple.&nbsp; Along with the title/description, we may want to include a price per 100 (I.e. $50/100).
[/b][/quote]
Here is a thumbnail page, look forward to your comments. :D

Click Invites Thumbnail page (http://www.epicservers.com/~ianjames/clients/click/thumbpage.htm)

[Anne]

One from me as well :D

[clickInvites]

Anne, very nice :D (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

<img src='http://www.kwota.com/designoutpost/clickinvites_v2.jpg' border='0' alt='user posted image' />

[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!


:tup:

[ant1832]

Just wanted to say the templates in this thread are outstanding...good job guys and gals. :tup:

[clickInvites]

Thank you!
for all of the wonderful entries. This is the part we hate--we certainly wish that we could choose more than one winner...

We have selected
Geof Harries
to provide his creative design services for clickInvites.


Best wishes to everyone involved in this contest. You are professionals.


Joseph Pollone

[geofharries]

Woohoo!!!! Thanks for the great news.

geof

[IDarwish]

Congrats Geof ! :tup:

[Nemeliza]

Geof you put it down!

I did think about entering myself, but u put me off :P

[geofharries]

Thanks for the compliments :blush:

geof

[clickInvites]

Geof,

Attached is the reworked home page. Please also view the next thread as this is where I detail the changes.

Have fun and let me know if you have any thoughts or if there are any problems or questions!

If you need my Photoshop CS file, let me know.

Thanks,
Joseph Pollone

[clickInvites]

Home page changes defined...

[clickInvites]

Thumbnails

[clickInvites]

Thumnail descriptions

[geofharries]

Joseph,

Thanks for such a detailed response....I'm sure that's the most info (graphically) a contest holder has ever shared :)

A PSD would be great. I run PS 7 on OS X so I believe a CS file will open fine, as long as you use that "maximize compatibility" function available in the new version.

Unfortunately, I don't have the font Shelley Allegro...I was using Minion for the text. If you'd like me to use what you've requested, then I'll need to obtain a Mac OS X compatible font from you.

geof

[clickInvites]

Yeah, I think I let my ARS (Anal Retentive Syndrome) show a bit here.... :D

I've split the PSD into two files and threw up the Shelley font. If you have problems with that font, don't worry about it too much. You can just send me your PSD and I can change it.

Here's the link:

http://www.datascribe.com/previews.nsf/EB0...27?OpenDocument (http://www.datascribe.com/previews.nsf/EB0CB44B1B64937886256A1C000564A2/41F0C25BA786BE1D86256E3C0046BA27?OpenDocument)


By the way, PS CS is worth the upgrade price. One of the items I use for prototyping is the layer comp. Layer comps lets you toggle layers and quickly flip back and forth between your visibility settings. Thus in the the case of clickInvites, I could pretend I was clicking on a navigation element and flip between the thumbnail and home page quickly. Very nice...

Thanks!
Joseph Pollone

[geofharries]

Joseph,

Thanks for the files and info. I am going to start laying out the design this evening; had to finish some other work first which is now done.

geof

[clickInvites]

Hi Geof!

Just wanted to know how things were going. Also, whenever you finish the home page, you can feel free to pass that along since it will take me some time program the new navigation into the mix.

Thanks!

[geofharries]

Joseph,

My life has been nuts recently, but I have been working on your templates when I have a free moment. Currently the homepage is about 50% done; still working on getting the left hand navbar to display properly (or, exactly how I want it to :) )

My plan is to work on the design tomorrow because it's a day off up here in the Yukon.

geof

[clickInvites]

Thanks for the update. Don't make yourself nuts--it's not a good place to be. :o

[geofharries]

Just to show you that I am actually working on this template :)

http://www.kwota.com/designoutpost/clickinvites/

The homepage is nearly complete and works perfectly in IE 5 Mac + Safari, but IE Windows list of CSS bugs & mismanagement is tearing it apart. I need to patch these, but at least this will give you an idea of how the site will look.

geof

[clickInvites]

Cool! :tup:

I'd rather have you do it perfectly than expeditiously!

Thanks!

[geofharries]

Another update...

As I am building out the product catalogue page I've come to realize that tables are going to be neccesary in this design. Most of the site will be XHTML (90%?) but because there is tabular data and other elements on the page that requre such structure in order to display properly in a variety of current browsers, I am going to have to use tables as well.

All the style control will still be in the CSS file, but this will be a valid W3C hybrid design. let me know if that's okay with you and I'll proceed.

Tables still have their purposes :)

geof

[clickInvites]

Yes, absolutely! :tup: I firmly agree that tables are ok to use when we work with tabular data! Am I correct to assume that the content area will contain the table for the product thumbnails? If that is the case, then your design would be 100% XHTML compliant in my book.

[clickInvites]

I previewed the home page (http://www.kwota.com/designoutpost/clickinvites). Geof, you're doing an outstanding job. Thanks!

One comment: For the login | register, please make this a text item. I will swap this with the user's first name after they are successfully logged in.

Thanks

[geofharries]

Hi,

The content area will contain tables where neccesary. Everything else body-related will be XHTML and CSS. Note that the proper use and display of tables is 100% XHTML compliant according to the W3C: http://www.w3.org/TR/2002/WD-xhtml2-200212...mod-tables.html (http://www.w3.org/TR/2002/WD-xhtml2-20021218/mod-tables.html). I'll ensure the design validates completely.

I will change the login | register to text as per your request.

geof

[geofharries]

Almost done. The site looks great in everything but IE Windows, where there is still a few bugs here and there (such as the left navbar, the wandering footer, misplaced ol/ul elements, and shopping cart). I'll fix those tonight and upload the final version and we can go from there. Click on the Shop button to see an inside page.

http://kwota.com/designoutpost/clickinvites/

This is the most complicated XHTML/CSS design I've ever done; it's been a real headache for sure, but has really pushed my skills. The hardest part has been getting the left hand links to work properly in IE Windows; the browser absolutely butchers the code.

geof

[geofharries]

Joseph,

Nearly done. Sorry for the crazy long delay in getting these templates to you. I will upload the final version this weekend.

geof

[clickInvites]

No worries Geof. I'm busy cleaning up some of the programming behind it so I have lots to do. If it helps with the Win IE problems, feel free to make a separate stylesheet and I will load them accordingly.

[clickInvites]

Hi Geof,

I am finished with my back-end tweaks. How are things going on your end?

Thanks!

[geofharries]

Ohhhh, they're pluggin' along :angry:

You can see the site in progress here:

http://kwota.com/designoutpost/clickinvites/

I am having some troubles (still) with IE 6 Windows. Everything in the design is ready to go except for the left hand navigation, some list elements in the body area and the footer...which are of course very important parts to the layout. I can fix the footer and body elements quite easily, so I have been focusing on working around IE's lacklustre CSS support for complicated lists in the navbar.

I know I can find a solution; right now it's pretty darned frustrating though. I am so dedicated to having this turn out right because if it does (and it will) the system uses minimal code to maximum effect.

I am so extremely sorry for the delay. I've worked many hours on this problem now, and am close to a solution; not quite there yet though. I think I've taken some months off my life :)

geof

[geofharries]

Well I spoke too soon :woot:

The left hand navbar is now working in IE 6 Windows:

http://kwota.com/designoutpost/clickinvites/

Now I can concentrate on the other stuff...yeah!

geof

[clickInvites]

Nice job! Keep pluggin' away!

What was your resolution with IE6?

[geofharries]

I was working at 1024 x 768 on Windows 2000, IE 6. The site was designed for 800 x 600 though.

geof

[geofharries]

Mornin',

The new and improved ;) clickInvites website templates are now mostly complete:

http://www.kwota.com/designoutpost/clickinvites/

The site works great in:

Windows 2000 & XP, IE 6
Windows 2000 Firefox
Windows XP Netscape 7
Mac OS X Firefox
Mac OS X 9 IE 5.2.3
Mac OS X Mozilla, Camino

I haven't tried it out in:

Windows XP, Opera 7 (but will when I get to work)

I am still having some minor problems with:

Mac OS X, Safari (because this browser does not currently support the min-height attribute which is how the footer is positioned on the pages; I am working on a fix)

geof

[clickInvites]

Hi Geof,

Looks great! Here are my test results:


All browsers:
- Login | Register | Cart should be text items
- I'm not sure if I said this earlier but the text headers (Featured Invitations, Why choose clickInvites, etc.) should be text items.

PC IE 6.0.379:
- Left nav text links are underlined--should be text decoration none

PC Firefox 0.8
- Bottom footer is misplaced

Mac OS X Safari (as you know)
- Bottom footer is misplaced

Mac OS X IE 5.2
- Bottom footer does not appear

I'll test with a few more variations but let me know as soon as you get rid of these bugs.

Thanks!

[geofharries]

Joseph,

I'll change the text headers from graphics to HTML text; in the original design that you approved though, these were graphics so that's why they were cut up that way. I personally think graphics look better, but you're the boss! ;)

For the login, cart, register links, it is fairly difficult to have all of these line up against the cart graphic, but I'll try a few tricks. You'll notice that amazon.com even uses images. Is this really important? Let me know.

I just checked Win XP SP1, IE 6.0.288 and the rollovers on the left hand navbar don't show up with the underlined links. It's odd that they would show up in a newer version. I'll look into this.

I'll knock the footer margin down on Win Firefox 0.8; it works fine on Mac OS X. So much for cross-platform ease of development :)

In regards to Safari, I am still trying to find a fix to this. Sorry for the delay; I am sure the next version of Safari will cure the min-height bug.

And finally, in OS X IE 5.2 the footer does not appear because in the stylesheet I have a CSS hack in place so it won't display in this browser. It's really the only browser that won't display the footer even close to correctly (Safari's can be worked out). If this browser represents a very small amount of your visitor traffic, may I suggest that we keep it this way and just not have the footer show up at all? Everything else works out just fine except for this part. Let me know your thoughts on this...the browser is no longer in production so it's kind of a toss-up I feel. As above, your call though.

geof

[clickInvites]

Geof, thanks for your detailed reply!

You're right--don't worry about converting the graphic headers. They look perfect just the way they are! ;)

And, quite honestly the only reason why I wanted a text Login | Register was to display that the user is logged in, but I can easily fix that with another graphic. So, don't worry about this one either.

I appreciate your efforts on the footer, but let's just dump it all together! :o I'll roll the info into links on the nav.

In summary, ignore my last e-mail and let's just dump the footer and call it a day!!

:drink:

[geofharries]

Joseph,

If in the future you want to convert the graphic headers (the text for each small section such as Why Choose clickInvites?...) they can be easily swapped out for HTML. Just remove the graphic (.gif) and wrap the text in an H3 tag. That style already has a pre-defined bottom margin which you can see in the Our Top Sellers, Our Staff Picks, etc. The text below it can remain as is in a list.

The Login | Register link is actually HTML text already. The only part that is an image is the shopping cart...but maybe I am misunderstanding? :blink:

I'll dump the footer (actually I'll just comment it out in case you want to use it later) and send the zip your way. I'll PM a link to download the archive in the next few minutes.

Thanks for your patience, and I really apologize for this taking so long to complete. As you can tell from my earlier posts, it's been a huge learning adventure (mainly in getting that side navbar to work in lots of browsers) and I'm a better XHTML/CSS programmer because of it. I look forward to seeing the site in action!

geof

[clickInvites]

Geof,

Okay... gotcha about the Login | Register as text--that's all I wanted. Sorry for the confusion.

Thank you for a job well done and for taking the time to squash the navigation. It would have taken me weeks to figure that out! I'm just really glad you learnt something and that it wasn't just a lost investment in your time. ;) Believe me, I know what my time is worth!

I'll start the installation this week and I hope to have everything done by the middle of May. I'll let you know when it's complete so you can preview your work. After the change, feel free link to clickInvites for your portfolio.

Well done!

:notworthy:

[geofharries]

Joseph,

Thanks for the kind words. I look forward to seeing the design live and in use!

Moderators: I guess this means we can close the contest finally :)

geof