Online Store Website Design - $250

[Ge0]

I started up, gonan see what I can do tomorrow to it

http://www.ge0man.com/mockup2.jpg

[jlinds72]

Here is a revised version from ifeelgood. We're still working on trying to fix the problem preventing him from posting in this forum.

Requested Revisions

~Jenn

[browncat]

Would you like to see any revisions of my last entry?
I am working on a different color combination. I will add icons if you are interested.

[Brat]

Sorry, got caught up this morning...

Browncat, to be truthful, will and ifeelgood have the leading designs. What you've presented, though technically follows most of the requirements, it is not up there with these two designers.

Ge0, you're on the right track, just that will and ifeelgood have a more "polished" presentation at this point. Once you are more complete, I can then give your design a more fair assessment.

Now... to review ifeelgood's latest version:

• Page still has not been resized for 800 x 600 screen. This is a MUST.
• In the top portion of the design, the curved image right next to the dotted vertical line is distracting for some reason. My eyes just kept focusing on the curve.
• The arrows used in the category listing are hard to see against the background. These need to stand out more.
• Make the words "retail value" a different color. Too easy to miss as they are now being the exact same color as the description text.
• Need a little more space between the bottom navigation and the copyright statement.
• Little more white space below "new products".
• Could you make the "search" button a little larger? Older eyes may need it.
• Like the stylized text logo you have. Forgot to mention it before. Could you change the letters from "fd" to "fmp"? That'd be great.
• Again, the tabs are nice, but icons grab the eyes. Any way you can fit small icons next to the words on the tabs? You'd be amazed at how much that helps the average user (it gives the shopper a neat "reference point" and delivers needed information with a simple image).

Once you've made the above changes, I'll have another look. Again, it is an overall great design.

[Brat]

Just a head's up...

As per the boss' instructions, a small group (four or five) representing a cross-sample of potential shoppers will be in today to take a look at the more complete designs (will and ifeelgood). The fresh perspective will give us better insight as to what the average shopper will like or needs for a shop to be effective. This will not take a very long time, and I want to get these comments to you ASAP to give you plenty of time before the final deadline so your designs are as thorough as they can possibly be.

In other words, please do not wait until the 11th hour to start on this if at all possible.

Remember, too, that to be in full consideration during our final decision process, all three (3) pages of the design are due at midnight PST today. Just having the main cover page done is not acceptable, and it would not be fair to the designers who have fully completed their submittals. Thanks!

[ifeelgood]

Finally i can post! lol

thanks jlinds72 for your help!

ok here is my final revision:

http://asylum.coolfreepages.com/brat/layout_4_p1.php
http://asylum.coolfreepages.com/brat/layout_4_p2.php
http://asylum.coolfreepages.com/brat/layout_4_p3.php

btw, all of these pages are already for 800X600..
they are only left aligned...

[browncat]

Here is my latest one using one of your preferred color combinations. I guess it isn't worth doing the other pages.
online shop version 4
I still can't see Ifeelgood's postings. I just get a big blank white screen with the little red X in the upper left corner.

[Brat]

I like the changes you made, ifeelgood. Very nice. Not many comments this time!

• There is still a problem with the page width when I view it. I have to scroll right about 20 pixels in order to see the screen. This needs to be fixed so that the entire page loads in one view with no scrolling. I think decreasing the width about 20 pixels (maybe even slightly fewer) is all it'll take to fix it. If it's just that the size of the screen shot is oversized, then okay.
• Check the alignment of the dark gray category heading bars on all three pages. They are now a bit off.
• With respect to the gray area at the top of the pages, I see the faded text in there. However, this will not be easy to implement in Zen Cart, as the text in that area will be dynamically generated by the program from its associated database. In other words, anything stylistic in that area MUST be a "fixed" graphic. The graphic be stylized text, etc., but it CANNOT be something that has to change for every page.
• Yet another Zen Cart thing-to-know: The way you have the subcategories is hard to implement in the cart. I like it, but again this is a programming limitation. So, unfortunately, the subcategory listing should not go in the header.
• For some reason, the location of the header text (i.e. "Privacy Policy") looks odd where it is - kind of like it's just "there". Given that the subcategory listing will need to be removed (for reasons described above) you now have room to play with that space.
• Is there any way to put in a nice stylized cart icon link somewhere? Just that the cart icon is THE icon most shoppers look for.

And I think that about does it. Thanks again.

[Brat]

Will, I have some comments as well from the review commttee regarding your design. I've tried to streamline them and make them as cohesive as possible. Bear in mind that this is all in one post (where as ifeelgood has had two separate postings with comments. So, really, it's not that much.

If something doesn't make sense, please let me know:

• The comment was made by one reviewer that the stylized purse icon looks like an anvil. The concept is liked, but that particular icon just doesn't fit, especially given the elegance of the overall design.
  
• The elegance of the "Shopping" clashes with the "post-modern" look of the circular icons. One male reviewer said that he was put off by the text - probably because that style of font is more "feminine." The best solution is probably to use some "block-style" font that has nice curves to it. See the fonts used by ifeelgood as an example. Very elegant yet block style.
  
• The copyright notice should be at the very bottom of the page; switch positions with the bottom navigation.
  
• The dark border around the page is "a bit depressing". Make it a golden color that goes with the theme. Something "brighter."
  
• For some reason, the review team 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" icon; 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. However, if this makes the design too crowded, don't worry about it. Also, center the icons with respect to the middle column.
  
• One comment that threw me was that the page seemed too "crowded" somehow. When digging for more information, it became clear that the left column puts them off. It's too "closed", especially the category section. Seems the solid color there without break just makes the page "claustrophobic" for them. They also did not like the dashed lines as separators. On a hunch, I redirected them to this site, as really the layout and such are close enough to your design so that the elements fall in similar places. They universlly loved the design of the left navigation on this site (men and women liked it). So, my suggestion is to use this as a template of sorts, and redo the left navigation design in a similar fashion. Pay special attention to the shape used for the category headers. Since the left top portion of the design is itself square, the category headers should be shaped similar to what's on that page.
  
• Regarding the titles used in main body - the reviewers didn't like the lines around them. Instead, make the font size a little larger, and use a strong color (like the red) to make them stand out.
  
• The "tell a friend" button - most of them missed it. It is just kinda sitting there. It needs to stand out more. It needs a bit more of a design element to it that also makes it easier to find.
  
• The Add To Cart button is too large and has a "clunky" look. Needs to be more streamlined. Again, please refer to this site for an idea as to how the buttons should look. They don't have to be EXACTLY like that, but you should get the general idea.

And I think there you have it! Again, thank you!

EDIT: Removed one item from the list above, as it was included by mistake.

[Brat]

At this point, unless something truly amazing appears within the next few hours, it will be a showdown between will and ifeelgood.

You have approximately 4 hrs and 45 min before the deadline.

[Brat]

Okay, I will probably be out for the next few hours. Hopefully, I will be back before the deadline.

Good luck to all.

[browncat]

My three final pages are here.
final shopping templates

The side menus could easily be bulleted when text links are made in HTML, but it would be difficult to reproduce the effect accurately in Photoshop.

[Ge0]

http://www.ge0man.com/mockup2.jpg

the lastest renditions.

[Brat]

Nice change to the side navigation, Will. LOVE the new bag icon!

I only have the following comments:

• I liked the design for the top portion the way you had it last time. The only thing I wanted changed was the "Shopping" font. Everything else I wanted to remain intact (i.e., all white beneath the icons with the golden colored border lines).
• Speaking of "Shopping," I don't like that font. It's cartoonish. I did like the original font (so did all the women). How about a cursive font that is less feminine, like, say, Monotype Corsiva? It still has the nice lines of a script / calligraphy font that would be acceptable to men. If that doesn't work for the design, then, well, I guess the men are going to just have to accept the first cursive font you used. They'll get over it.
• Remove about half of the white space in the left margin next to the categories colum. It's just a bit too much.
• Float the navigation icon closer to the bottom of the page header to close up some of that empty space.
• I don't like the shopping bags at the bottom of page three. Plain white space is just fine.

And that should do it!

[Brat]

Contest Extension Notice:

I was unavailable for a few hours this evening. Due to the lateness of the hour, I am honestly too exhausted to really give the designers my full and proper attention. Therefore, to be fair to the contestants, the contest is extended until 11:00 AM PST. There will absolutely be no further extensions beyond this point!

With that note, I am retiring as it is quite late on my coast. I should be online at or a bit Saturday morning around 9:30 AM PST.

Hopefully, this will be beneficial to all involved. Please excuse any inconvenience this has caused.

[ifeelgood]

ok hereare the changes:

http://asylum.coolfreepages.com/brat/layout_4_p1.php
http://asylum.coolfreepages.com/brat/layout_4_p2.php
http://asylum.coolfreepages.com/brat/layout_4_p3.php

Yep, I put 20 pixels extra on the screenshot...
and i change the watermark text to "fmp" for all the pages

[Brat]

Hi there, ifeelgood.

I thought I'd posted this, but I don't see it...

Anyway, could you please upload your submittal in real size? That way, the review team will see the site as it would actually appear online, rather than a "blown up" version. Thanks.

[ifeelgood]

its actually just a whitespace at the right.. but anyway i trimmed it already.. check the above links...

[Brat]

Originally Posted by ifeelgood

ok hereare the changes:

http://asylum.coolfreepages.com/brat/layout_4_p1.php
http://asylum.coolfreepages.com/brat/layout_4_p2.php
http://asylum.coolfreepages.com/brat/layout_4_p3.php

Yep, I put 20 pixels extra on the screenshot...
and i change the watermark text to "fmp" for all the pages

I still have to scroll to the right to see the entire page. The width is still wider than the screen.

Will's design fits perfectly into the screen when I view it. I think that for 800 x 600, the actual site page width shouldn't exceed 775 (or some such).

[ifeelgood]

oops sorry i forgot to update the html.. ok try this..


http://asylum.coolfreepages.com/brat/layout5_p1.php
http://asylum.coolfreepages.com/brat/layout5_p2.php
http://asylum.coolfreepages.com/brat/layout5_p3.php