Online Store Website Design - $250

[Brat]

RussellClow, just a few comments:

1. Watches are ONE of the items being sold. I also mentioned sunglasses, etc. The shop is NOT strictly a watch shop.
2. The main color should be white.
3. With all due respect (and I really do mean that), this is a template that is easily attainable all over the web from any number of template shops. I really would like to see some original design work, else I would have simply gone to Template Monster (or any of its affiliates) and purchased one. In fact, the reason I want a designer is because I want to avoid something that looks like what everyone else is buying for $60 (give or take).

Again, please revisit the sundry links I provided as a rough idea.

[RussellClow]

Thats perfectly fine, just thought Id chuck it in, and give you the option. I totally understand your reasons mate...Might work on something personally if I get the time...College work holding me down atm.

[browncat]

Here is a new version. I made the colors brighter, changed the font, made the top center box and graphic smaller, and added a little clock. I made the people smaller but kept them because I can't think of anything better.
online shopping template version 2

[JakSmit]

I made this for my business but my bussiness partner doesn't like it.
If I made the boxes either side extend all the way down and made it
your name etc. would you want it for a cut price?:
http://205.209.141.200/~wwwjack/shop/index.php

[Brat]

Hello again all!

Instead of the usual comments, I thought I'd show you something.

A designer had started doing work on another project I had going, but dropped out. I really liked his design style, and it was so very close to what I wanted.

Here are the links:
Design Sample 1
Design Sample 2

Design Sample 2 has the type of layout I like. Design Sample 1 is the actual shopping cart template first draft. He didn't get a chance to incorporate the page layout from the first design before he had to stop.

This is what I mean by "clean" design. In addition, he did a large part of this using HTML/CSS, and minimal graphics to add a dash of design. Notice how you have icon buttons with text underneath. The reason this is so important to me is because we will be using an online translation service to translate the shopping site into another language, so that is why I need as much of this to be text as possible. These particular samples were not "finished" so you can play a bit with actual graphics. The point is, note how uncluttered the pages are, that the few graphics used are functional and aesthetically pleasing, that the primary page color is white, etc.

Please review these samples. Sometimes, a picture is truly worth a thousand words, and since my words seem to be a bit vague (), I thought I'd share some design styles that I truly do like. I guess you could say I am a minimalist when it comes to web layouts, especially for ecommerce.

Again, thank you, and please do not hesitate to ask any questions.

[browncat]

Here is what I was working on at first, before you emphasized you didn't want anything that looked boxy. These are text links in HTML with the beginnings of a CSS sheet. I don't use icons for links because I think they just clutter up the design. I could take the green off the top and use the small clock and black font like I did with my version 2 design.
minimal html design
I switched back to designing a sliced photoshop style because I thought you wanted something original and sliced. Normally, I only use Dreamweaver for designing except for headers and images.

[Brat]

*smiles broadly*

Yes, Will, I see you've got the right idea!!!

THAT is very close to EXACTLY what I'm talking about! Clean layout with a very appealing design. Comments below:

• Color Scheme - The scheme you've chosen indeed is not gender biased. Still, it is a bit bland. I particularly do not like the shade of brown used in the logo and the left column. Feel free to play with other color schemes. Also, don't be afraid to use a "rich" accent color - just to add a dash of spice to the overall look.
• Sidebar Links - I like the general style of the header graphic that you use for the category names. However, the actual links themselves are a little bland. Any way to punch up the look a wee bit? I kinda like the look of the left column URL=http://4design.tv/designoutpost/do.jpg]here[/URL]. Feel free to experiment. If you really want to go simple yet elegant, here is another nice example of sidebar navigation.
• Logo Icon - Love the idea, but would like to see another graphic there if possible. Can be a "stylized" product (i.e., watch, sunglasses, etc.)
• Link Icons - Love those icons! But, not too sold on the ones for login and checkout. Maybe try another pic within those circles that better fits the link description. Also, again, I'd like to see you play with color.
• Search Bar Area - All that blank space next to the search area and above the icons just seems odd. Could you add a dash of "something" there? It can be stylized text, or whatever else you think would attratively add a bit of design element to that space.
• Bottom Naviation - Shoppers are notoriously lazy, and don't want to have to scroll all the way back to the top to find the key links. Just mimic pure text versions of the iconic lins (i.e., home, checkout, etc.) at the bottom of the screen. For an example, see the bottom of this page.

Just to give you an example of color, I've provided some links below.

Example 1 - This example has a color scheme VERY CLOSE to the ones you've chosen, but with a dash of other color to give it more bite. Also, note the icons used in this example to get ideas for the pictures used within the iconic circles.

Example 2 - Yet another nice color combination.

Example 3 - Very little color actually used (primary backgrond is white) but note the accent colors. Adds a nice bit of splash to the page without overpowering the layout or content. Just thought I'd add one example that's a little different from the others.

Example 4 - You'll notice this color scheme is really a "play" on the scheme used in Example 2.

Generally, examples 1,2 and 4 are roughly in the same color family in your draft design, but with more complimentary colors added that provide a certain richness while keeping the design very clean. Again, feel free to use these to get ideas from in terms of colors, layout, elements, etc., whatever will augment your design. Personally, I really like the colors used in Example 4. Example 2 is my runner up. But really, all of the examples I provided have color ideas that can work in the design based upon how you implement.

Overall, excellent job Will. You are at this point top contender. To all others, please refer to his concept to give you a good solid idea as to the type of design style that I'm looking for.

[Brat]

What can I say Will? Both designs are great. I especially like the color scheme in the first example. Could you redo Site 2 using the color schemes from Site 1? JUST the color scheme, not the design elements. Then, I'll look at them both again.

At this point, I think you can safely go ahead and put together page 2 (the product information/display page) and 3 (text page template). I don't think you need to do anymore work on the main site pages (other than the colors for Site 2).

Look forward to seeing it!

[Brat]

WHOOPS!

Will, I just noticed there is no Cart icon for the shopping cart. Could you please add one? Thanks!

[Ge0]

couple of mins.. I will be posting.

[Brat]

Will, I love the cart icon. That completes the top navigation.

After now seeing this latest version, though I like them both, I have to give the nod to Site 1 layout (the very first one from the previous set). Add the cart icon to THAT design and I'd say that first page of your design is complete.

Now, to the FUN part...

There are two other pages. The Product Display page and the Information pages. Below, I'm providing more information on these pages. For everyone reading, here is a very short crash course on Zen Cart.

Product Display, as the name suggests, is where a shopper gets to see detailed information on the product they selected. In Zen Cart, you have three scenarios when you click on a product link:

1. Show Product Subcategories - Sometimes, a product category has a subcategory. If so, Zen Cart will display information similar to this example.
2. Show Product Information - If a product does not have any subcategories, Zen Cart will then display the product itself along with a description. The resultant page will look like this.
3. Show category listing - simply means that the product you chose has several items listed (in tabular form). Once you click on one of THOSE items, you will be taken to a page that looks like #2 above. If you want to see an example of this listing, please click here.

This is just to give you a functional overview of the cart. In fact, feel free to play with it at our lab site if that helps you - it's not truly live, so you won't hurt anything. Also, don't worry about the product category listing. I can do this as a simple table, so no biggie there. With respect to Product Display, I need the page design you submit primarily deal with Item 2 above.. Really, it's not as bad as it sounds. If you actually click on the links I've provided above, this should make more sense. The page template you make for Item 2 will become the basis for what I implement in Item 1. Since, really, Item 1 is nothing more than a couple of display tables anyway, when you get right down to it.

Information Page is simply a page with headers and a bunch of text (maybe a picture thrown in to break up the monotony of a bunch of verbiage). This template will be used for the obligatory (primarily) text pages that ecommerce sites have, such as Privacy Policy, About Us, etc. Click here to see a sample of such a page in the cart (yeah, it's blank right now, but you'll get the idea).

And there you have a very rudimentary walkthrough of Zen Cart (which, pretty much, most shopping carts act very similar). Hopefully, this will help you to get a handle on the various elements involved in designing these last two pages.

I know this is a lot of text, and I may very well have skipped something, so please feel free to ask questions ASAP, as the contest is over tomorrow (September 17) at midnight PST.

[Brat]

Thanks Will for the fast turnaround!

Again, if the information I've provided to you all regarding pages 2 and 3 are unclear in any way, please do not hesitate to ask.

[Brat]

Here's something I may have mentioned earlier, so please excuse me if I'm repeating myself.

Regarding Text - The site will most probably use an online dynamic translator to convert from English to another language (Spanish). Because of this, I'll need you to use real text as much as possible in your design where text is appropriate (i.e., page links). Therefore, the fonts you use must be ones that are commonly web-supported one - truetype fonts for the web, such as Arial, Georgia, etc. Your style sheets (css) should account for this.

Please keep this in mind when you are making your designs. Again, please excuse any inconvenience this oversight may cause.

[Brat]

Nice Page 3, Will. Essentially, that captures all the usual elements. So, for all the designers who are participating, you really should not have to go through a bunch of changes for the Page 3 template.

Page 3, as I expected, should be far easier than Page 2. THAT page will give you cause for pause without doubt. You will have to think that one out, as, second to the main site page, this is one of the most critical pages for an ecommerce site.

[Brat]

Will, I made a slight oopsie with respect to the main page...

The "email" there should really be "contact us". Also, the icon inside of the associated button should be communication-related but not an actual email icon (that may confuse the less sophisticated shoppers). My apologies for not catching this earlier.

[Imagenesis]

Hi, just posting to tell you I have somethign in the works..Should finish it quite soon...Thanks!

[jlinds72]

Hi Brat -

One of our Design Team members, username "ifeelgood" is having trouble posting to this forum, so he sent me the links to the design that he created for you. He can at least read the forum, so any feedback would be seen by him.

Sample 1
Sample 2

Hopefully we'll figure out the problem with posting soon

~Jenn

[browncat]

Here is a new design:
online shop template version 3

[Brat]

On second thought... the envelope/email icon is okay, Will. Strike that last comment.

Okay... about to review the latest design... will be back with comments in a bit...

[Brat]

Excellent entry from ifeelgood. Nice use of white space and color. Overall very pleasant, original, eye-catching design.

My comments are below:

• Adjust the page width for 800 x 600 browser viewing (the most commonly used screen size).
  
• The main site graphics (i.e., headers, etc.) should not have real world people or objects in them (this is to prevent a dated feeling later on, and to prevent the potential alienation of any people or group). Instead, I'd like to see a treatment using something iconic or highly stylized.
  
• Move the bottom navigation to the center. Though I like how you've aligned it personally, the average shopper may easily overlook it in that position.
  
• Regarding the tabs, they are nice, but a little plain. Any way you can add small icons to them? Since the photograph in the header is going, you can expand the tabs a little if you need to accommodate the icons. Also, the faded gray color is a wee bit light to use for the highlighted/selected tab - it fades much too easily into the white background. Could you make the color a wee bit darker?
  
• For some reason, I easily overlook the search bar in this design where it is currently positioned. Please move it (and the associated advanced search text) to the categories column (at the top) and let's see how this looks. Also, another possibility - you could make a "search" tab; this would take the user to the advanced search (which is on a separate page anyway). The quick search would still remain, but now positioned in the categories column.
  
• I don't like the mixed size font used in the category headings. Intially it makes a nice impact (and is kinda cool), but over time starts to look "gimicky." Besides, it's a beautiful font all on its own. Just make fonts within the same item the same size.
  
• Add to Cart typically is not shown on the main product page (especially in the product category view). This button appears on the Product Display page (samples of the various pages are provided in my earlier post).
  
• I like the text you have at the page top, but typically the welcome and such is done in the main column of the front page. Could you drop in, say, a catch phrase or slogan instead? Because this is part of the running header of the cart, an actual welcome may become a bit tiresome to look at on every page, whereas a slogan, catch phrase, or the like is short, sweet and not overpowering.
  
• As mentioned above, the "Welcome" is part of the front page element only. Keep that in mind when working on the "running heading" (repeated top page graphics).
  
• Once again, looking at the tabs, I just realized that a contact us tab for customers needs to be added.

Again, nice entry, and I look forward to seeing your next version.