Online Store Website Design - $250

[jlinds72]

Contest Holder ID: Brat
Type_Of_Contest: Website Design
Title: Online Store Design
Deadline: Sept. 17, 2004 (MIDNIGHT PST)
Prize: $250

Company_Details: Part of our business is selling quality products at outlet prices. We are now branching out onto the Internet, and wish to open up an online / retail shop. The company name WILL NOT be used in the layout. The site will be using a shopping cart backend (in this case Zen Cart). We will primarily need three (3) page templates designed - a Main Page template, a Product Description Page template, and a Policy Page template (i.e., for Privacy Policy, Shipping Instructions, etc.). Our audience will be adult, age range 18 through early 40s, with the rough median age most probably being late 20s / early 30s.

Examples: There are really few online shopping sites we like. Among these are: http://www.gap.com http://store.apple.com In terms of general design appeal, I like the following: http://www.4design.tv/m_h/ http://www.instastudios.com http://www.hostinsta.com/ These are merely very rough ideas. We're open with respect to design. This site does not have a logo. However, a nice graphic in the site header that goes with the site theme (i.e. online merchandise) would be great!

Colors: No real color preferences. However for this site, we'd prefer that blue is not used, or is used minimally (just so many sites using that color primarily!). As we are selling watches and other articles for wear, we'd like that the colors NOT be overpowering. Also, we will have both male and female shoppers, so the color pallete should be fairly "gender neutral" (or at the very least not be gender exclusive).

Style: We are looking for: 1) "Clean" design - one that is not overly cluttered or busy. 2) Ease of navigation for the average computer user is very important. 3) Subtlety - the design should complement, not compete with, the goods being presented. "Class" and "taste" are key here. 4) Fast-loading - the site cannot be "graphics heavy". Also, as a plus, we'd like to see a wee bit of "fun" in the design without being juvenile or kiddish. Again, I leave this to the designer's discretion. Just as an additional note: our online store does not really have a name, and our company name will not be used for this. So, the designer is free to come up with whatever catchy name (s)he wants. If we like it, we'll run with it!

Comments: I’m very open to ideas, suggestions, and recommendations by the designers. I’m far from being an expert in this area.

[Neupix]

Hi,

This sounds interesting but I am wondering if you could supply us with the following information:

1) Does your company currently have a name and/or logo that we can incorporate?
2) Do you have photos of these watches being modelled that we can use?
3) Do you currently have the script for the store, and if so, what is the script you are using?

This will help all of us further develop our ideas

[Brat]

Hello, penguinpedia.

I'll try to answer your questions as clearly as possible.

1) Does your company currently have a name and/or logo that we can incorporate?

No. As posted above, there is no logo associated with this site. HOWEVER, you are indeed free to put in an artistic graphic of some sort. The site will be hosted at the domain fmpimports.com if that helps at all.

2) Do you have photos of these watches being modelled that we can use?

Not yet. As a matter of fact, those catalog shots won't be done for another couple of weeks. Really, for this design, I'd like to avoid having "real" pictures if I'm making sense. For one thing, the site will be selling more than watches, so it's not strictly dedicated to that product. Also, watch designs and styles can change very rapidly, so we don't want to be locked into a real pic of a watch that is outdated.

3) Do you currently have the script for the store, and if so, what is the script you are using?

Yes. We are using Zen Cart, which is an official fork off of OSCommerce. Among the many improvements, Zen Cart has a templating system that a human can actually handle (with some minor PHP understanding - VERY minor). The files involved in a Zen Cart template are totally separated from the actual cart code, which makes it VERY flexible.

An "out of the box" running demo of this cart is located at this address. On our development server, I have a copy installed here. As you can see, I've been playing with it. As you can see, even with my admittedly pathetically limited design capability, I was able to radically change the look of the cart simply by editing the template files.

Bottom line is, even with the requirements I've outlined in the project description, you are actually pretty free to play with this design.

I hope this clarifies things. If I've omitted anything helpful, please feel free to ask.

[Neupix]

Brat: I want to apologize! For some reason my eyes skipped over the company details section of the original post. I completely missed the details about the site name and the zen cart. Again, sorry about that.

Thanks for answering the question concerning the photos.

[Davidson]

Hi Brat,
I am very interested in participating in your project and will start to work on it right away, I have reviewed the sites you posted and feel that you are looking for the sort of "glass" feel to things, giving off reflections. If I am incorrect please state otherwise, this is the way I understand it from the sites, they all seem to have a glossy, glass, feel to them. I will get to work on the project and have something posted in the next few days.

[Brat]

It's okay penguinpedia. My eyes have been known to skip a few times too.

Davidson, as for your observations... I hadn't really thought about that "glass" connection. Thank you for making me aware of that.

The "glass" look I do like PROVIDED that it doesn't overpower the site. Also, I am not unopen to a more muted approach. For example, the Gap's site is far from being high gloss, yet I still like it because of its understated aesthetic. Here are some other examples of non-gloss sites that have an appeal:

nmwear.com
billbarnes.com
target.com

The one thing the above sites (and I think in fact all examples I've listed) have in common is that they are very "clean". Most have color schemes that, while appealing, do not overly saturate the pages.

I guess that what I'm saying is - glass or muted, glossy or not, so long as the site meets the basic requirements listed in the project description, I'm open. So, feel free to experiment. I'll not limit you on that front.

[RussellClow]

ok, well I thought id give this one a quick go, with a template ive had lying around, which I made myself. all the images and stuff, of coarse, can be changed easily... The header is not finished, and colour can be changed like usual.

Design 1

[Brat]

Thank you, RussellClow, for your draft. Here are my comments:

What I liked: Your design is ineeded very clean with some pretty decent navigation.

What I did not like: The color pallette is very dark, almost dreary, and it's too "techie." It needs to be a bit brighter. Also, dark colors typically appeal more to men than women. I understand that this is very rough, so I know it's going to change anyway. Just thought I'd give you some pointers in the right direction if possible.

Keep it up!

[Brat]

General Comment: This is really aimed at everyone who participates, and it's more a clarification. Zen Cart allows you to turn off the entire right body column if you wish (i.e., the column containing the side boxes). Since the owner is not yet undecided as to whether or not to use the right body column, please keep this in mind when making your design. Your design should work regardless of whether the right column is on.

Sorry I forgot to include this info in the intial description. I KNEW there was something I'd forgotten to explain.

Also remember, the project is for three pages. Just thought I'd throw that in for good measure.

[browncat]

I have a couple of questions:

1. What kind of files will you be looking for from the winner? I have designed sites but not templates. It seems like contests emphasize slicing photoshop files, but I am not sure and I prefer to avoid slicing.

2. If I enter, I will probably use a site I have already designed as a starting point. Could you tell me what you like and don't like about this design? Shopping for Presidents

[Brat]

Hello, browncat.

I've answered your questions below.

1) From the winner, I'd like the following:

• Orignal editable source files
• Sliced version; I'd like the HTML to go with the file (especially if you're a designer comfortable with HTML)
• CSS file (if there is one completed); this is NOT a deal breaker

2) Please review the links I provided as samples and reread the project description. The main background color should be white. The sample design link you've provided does not follow this at all. But, I know this was just something you already had lying around, so no big deal. By now, you probably already have something great in mind anyway.

Again, thank you all for your efforts, and I truly look forward to what this talented group will present.

[rtbenson]

I have created a concept. Please tell me if I am heading in the right direction:

http://www.yeahitis.com/brat/shop.jpg

Thanks,
Brendan Benson

[Brat]

Thank you Brendan for your submittal.

In looking at the banner, I have the following comments:

1. It's too "busy"
2. Try to avoid using "real" people and such. I'd like something a wee more "artistic." By that, I mean more graphic design, no photography. The main reason I want to avoid pictures of people is that I don't want to make any one or any group feel excluded.
3. Red and yellow upon each other is a bit too strong for my tastes. Both of these are powerful colors and, though they can be used, should be used more for accent and more sparingly.
4. The site will not sell anything related to computers, technology, etc., so no computer parts or what not.

The best recommendation I can give is to review the sites that I listed as rough examples of the type of style I'm going for. Clean and uncluttered is the key.

Here are more such examples:

Example 1
Example 2

And truthfully... I like the design of THIS site as well.

While these are not exactly what I need, they nonetheless embody the design principles I want. Clean, easy to navigate, aesthetically pleasing... that's what I'm looking for.

Again, thank you.

[rtbenson]

Hello Brat,

Thanks for the honest review of my work. I appreciate it.

I will have a different mockup for you to view in the coming days, which will fit into your requirements better.

Thanks again,
Brendan Benson

[Brat]

I look foward to seeing it.

[Brat]

Thank you, Will, for your entry.

Hits

1. Nice use of white space - very clean design
2. Easy navigation - this is crucial for shoppers
3. Implementation consideration - you remembered that you are designing for a shopping cart program, and were thoughtful in terms of trying to make a design that was fairly easy to implement; this shows that you are indeed thinking, and that is a very good sign.

That said...

Misses

1. Too "Out of the Box" - the problem with most shopping cart programs (Zen Cart, OSCommerce, etc.), is exactly what this design shows. They are OBVIOUSLY shopping cart programs. Their default layouts just scream "look, I'm a shopping cart!" Though we know that is what they are (and so does the shopper), nonetheless the design can/should reflect some originality.
   
   For your review, I've included links to sites using Zen Cart for their ecommerce that look NOTHING like the original designs. These examples are provided to illustrate the design flexibility you can have.
   
   Example 1 - Grocery Store
   Example 2 - Pet Supply Shop
   Example 3 - Costume Shop
   Example 4 - Paint Ball Supplies
   Examle 4 - Body Jewelry Shop
   
   Unlike with OSCommerce, Zen Cart has done a pretty darned good job of separating code from design. To implement a Zen Cart design, you basically just need to know HTML and some very minor PHP (only because the template files contain calls to cart function). You only need to know enough about PHP to keep the parentheses together and watch the semi-colons.
2. Color Combination - I cannot quite put my finger on it, but this combination really won't work for this particular shop. Blue, yellow, orange... just doesn't do it for me.
3. Lack of Imagination - Though I do appreciate the effort in keeping the design simple to implement, boxes can be done by anyone. Again, the main problem with most shopping carts is that the design consists of boxes. Show me something different.
4. Too Technical - Overall, the design seems more appropriate for a computer shop than for a store selling apparel and such.

Again, thank you for your initial contribution. I hope the comments I've provided in this post give you and other participating designers helpful information.

[Brat]

Happy that I could help.

I hope everyone now enjoys the same freedom with their submitted designs.

[browncat]

Here is a design I have been working on. If you like it I will work on the other two pages. This is a reduced size version. Actual size is 775 px wide x 650.
fine shop template
The design represents people shopping at a nice store.

[Brat]

Browncat, that is actually much closer to what I had in mind.

My comments:

• Very clean indeed. Just a wee bit plain still, but the look is more aesthetically pleasing. Try to play with the color selection a bit more. The combination is not bad, but I'd like to see something more inviting. The links I provided in prior posts should give you an idea of possible choices.
  
• As for the people you used in the design... I don't like that particular graphic, but the idea is great! "Something" else in that space may work (maybe a wee bit smaller than the size presented in your draft)
  
• Play with the header logo/graphic you have there now. Again, the right idea, just something with a bit more "umph" to it.

Overall, try to "punch it up" a wee bit. I feel that you are still being a bit more conservative than necessary.

Again, thank you for your submittal.

[RussellClow]

Ok Ive had another go at this one, with a template I had lying around from a previous client...tried to keep the theme of the watches, as you said this is what you sell

Second Go

*PLEASE NOTE* This is a modified template from a template site which was Legally purchased by me for a client, and was UNUSED by that client.