mgalbus had een nieuw webpagina ontwerp nodig en lanceerde daarom een wedstrijd op 99designs.
Een winnaar werd gekozen uit29 ontwerpen ingezonden door6 freelance designers.
Looking for a redesign of two main pages of existing e-commerce website. I need a bold, crisp, non-cluttered home page, product detail page, and one small item for a category page.
GreekForMe.com
OVERALL FEEL and LOOK:
Our existing site is GreekForMe.com. This site sells merchandise to college kidsthat are in fraternity and sorority organizations. Based upon feedback received to date, the homepage is too overwhelming with choices. We want to simplify the design greatly.
Looking for a Web 2.0 design. Clean and crisp. I like the rounded corners with bold call toactions. But I am open to otherconsiderations of ‘Web 2.0’. The maincustomers for this site are college kids and their parents. It should be slightly more feminine in itsdesign than masculine since the majority of the shoppers are female. Do not go over board so that the maleshoppers are sent away (no pinks please).
GENERAL REQUIREMENTS:Use white or off-white color for background. It is your choice for the colors of the site.
Assume a 1024 x 768 Screen Size. I like how this site: http://www.xango.com/makes everything fit on the 1024 x 768 screen size. In addition, the tape sort of leads you tothe bottom part of the page. There issome blank space on the fold to separate the content above and below. Trying to target a home page load time of 7seconds or less (I realize that a lot of this depends upon other file calls,etc. But the point that I am trying to emphasize is that I need a clean designthat loads quickly. We are trying to getthem to click on one of the menu items (Sorority, Fraternity, Divine Nine,etc.)
---------- Home Page Header Content ----------------
LOGO & NAME:
The preference is to keep the existing logo and the Curlz MTfont.
But I am open to other logo ideas.
Logo of Head is in this zip file: http://lib.store.yahoo.net/lib/gree…m-head.zip
An EXAMPLE of the font for the GreekForMe text is in thiszip file:http://lib.store.yahoo.net/lib/greekforme/gfm-title-example.zip
Place this Tag Line below Logo/Name: 'Shop for Your Sororityand Fraternity Merchandise'
VIEW SHOPPING CART:
Text: View Cart
Shopping cart should be placed on the right-hand side at thetop of the page.
Show: Cart Image -Cart Text - Items - Dollars
Here is an example of how the elements should fittogether: http://ww21.1800flowers.com/
PHONE NUMBER:
Need to integrate the phone number: 877-245-9960 into the top header with 'CallUs'
SEARCH:
Search box should be placed above horizontal navbar
Make the search box 27 characters wide.
Don't use a heading to label the search area; instead use a"Search" button to the right of the box
The search button is a button, which means it should bedesigned like one. In particular, the search button should look different thanthe input field. Make sure you give thebutton a “button look” (i.e. another color, a different shape, a search icon,etc.) Do not make the search button'more powerful' than the Add to Cart button. On the product detail pages, the Add to Cart should be the mostprominent call to action.
HORIZONTAL NAVBAR
No Need for a HOME tab on the home page. On Interior page, a HOME tab should beutilized. If you like, you can useWELCOME as the selected tab for the HOME page tab. Then on the interior pages, the WELCOME tabwould change to HOME.
Tabs should visually connect with the content of a web page.Meaning the color of the selected tab should match the color of thewebpage. The active tab needs to be adifferent color or contrasting shade, and it has to physically connect with thespace below it. For example try the tabsat: http://www.trackmypeople.com/
The shading of the tab should create the visual illusionthat the active tab is in front of the other tabs. Need to show a mega drop down box like:http://www.whitehouse.gov/. (for review purposes - you can make this a separateimage so that it does not distort the view of your home page - for example justshow one tab and then the mega drop down) your choice of format - but I reallylike the whitehouse.gov example. Nicespacing and contrast on the mega drop down.
NAV BAR TITLES FOR HOME PAGE:
WELCOME (as stated above, this is not required but you caninclude it if it makes your design flow)
Shop Your SORORITY (show a small down arrow to indicate itis a mega drop down versus a click)
Shop Your FRATERNITY (show a small down arrow to indicate itis a mega drop down versus a click)
Shop DIVINE NINE (show a small down arrow to indicate it isa mega drop down versus a click)
Shop Custom GREEK GEAR
Learn More ABOUT US
Feel Free to CONTACT US
See this example: http://www.evaneckard.com/
The part in caps is the main text (like 'Portfolio' in theevaneckard.com example) and the lower case text is the additional text (like'work samples' in the above example). Feel free to utilize any text case and font that fits with your design -the capitalization was for clarification purposes only.
---------- Home Page Body Content ----------------
As previously mentioned this content should all be above thefold on a 1024 x 768 Screen Size.
Here is where you can show some of your design talents. Iwould like a big image on the left and maybe some text on the right. Remember the main goal is for the customersto click on the Shop For... (your sorority, your fraternity, etc.) in thenavbar So try not overwhelm the customerwith too many other things for the customer to think about. This image can be a picture of college co-eds(with some Greek Letters on their apparel) and the text to the left be FindYour Sorority Merchandise, etc...
Below the fold you can include additional images for specialdeals. You can choose any of the imageson any of the pages of http://www.greekforme.com for examples. Another idea could be three to fourcategories such as Greek Clothing; Greek Glassware; Greek Gear; and GreekLicense Plates. Also, include somegeneric text below the fold.
---------- Home Page Footer Content ----------------
Four Columns with a Title and then 5 Links per Column fromLeft to Right
Here is an example: http://www.xango.com/
Title: Quick Links
Find Your Sorority
Find Your Fraternity
Shop Divine Nine
Custom Greek Merchandise
GreekForMe's Blog
Title: ShoppingCategories
Clothing & Apparel
Hoodies & Sweatshirts
Jewelry
License Plates
Glassware
Title: Store Info
Sign Up for Deals
Privacy & Security
Payment Methods
Shipping Information
Returns Policy
Title: Resources
Sorority Sitemap
Fraternity Sitemap
Greek Sitemap
Find Fundraising Ideas
View Useful Articles
COPYRIGHT:
Center the following across the page below the four columns:
Copyright 2003 - 2009 GreekForMe.com
Leave some vertical space from the bottom of the fourcolumns above and the text.
=========== PRODUCT / CATEGORY PAGE ============
Same as Home Page described above - except for thefollowing:
+ Include HOME button in the horizontal navigation bar.
+ Include Trust Symbols - Better Business Bureau &McAfee (several image types to choose from). It is your choice of location but prefer to be above the fold and in theheader.
+ Include Live Support button. If you change the look please include asecond OFFLINE version with the design. You can make it smaller if that helps. It is your choice of the location.
+ Include a special offers section. It needs to be above the fold - either in aright column or below the product description. Show either 3 or 4 items for best sellers (only the title and one itemneeds to be above the fold - the other couple items can fall below the fold ifneeded.)
------ BODY CONTENT & PRODUCT AREA -------
BREADCRUMBS:
Breadcrumbs should be as close to the very top of the pageas possible, out of the way. below the primary navigation menu.
The font should be small in size.
They should begin with “You are here:” in bold.
Each link that follows should be underlined in the standardblue text link color and followed by a “ > ”.
At the very end, the current page title should come unlinkedand bold.
PRODUCT DETAIL AREA:
The layout of the body part of the Product Detail page needsto be relatively the same as shown in this example: http://www.greekforme.com/999-hoody-01.html
Specifically:
Name of Product - across the top
Image on Left
Price on Right
Product Choice drops on Right
Then the following Information below
ADD TO CART BUTTON:
Text: Add to Cart
Image: Small ShoppingCart graphic to left of text
The Add to Cart button should be the most noticeable imageon the item page. I like the Amazonlook/feel but I am open to other ideas.
ADDITIONAL PRODUCT INFO:
Color Table Link
Sizing Table Link
Shipping Estimator Link
SOCIAL BOOKMARKS:
Give your customer the ability to add your website orproduct detail pages to websites such as Delicious, StumpleUpon, Digg, Twitter,Facebook, Tell a Friend.
DESCRIPTION OF PRODUCT:
As shown - your choice of font and color
QUANTITY PRICING TABLES:
All elements, including pricing tables, should be consistentwith the overall design of your website.
Use background colors to visually separate differentoptions.
CATEGORY SECTION SEPARATOR
The category page is basically the same for the Categorypage (see http://www.greekforme.com/alpha-kap…lpha.html) as detailed for theProduct Page - except I need a section divider (see the name and two lines withthe following text: Alpha Kappa AlphaFlip Flops )
Basically, I need something that fits with the rest of thesite design and an indicator like a down arrow that by clicking the sectionseparator, the section will expand. Currently the site shows with all sections being completelyexpanded. The new website will have anaccordion like product display. I needyou to create the separator so that when all sections are in the closed stateit looks ok. You can either create athird page for the category page or just show me the section separator graphicin a separate image.
---------- Product Page Footer Content ----------------
Title: Quick Links
Home
Find Your Sorority
Find Your Fraternity
Shop Divine Nine
Custom Greek Merchandise
Title: ShoppingCategories
Clothing & Apparel
Hoodies & Sweatshirts
Jewelry
License Plates
Glassware
Title: Store Info
Contact Us
Privacy & Security
Payment Methods
Shipping Information
Returns Policy
Title: Resources
Sign Up for Deals
Sorority Sitemap
Fraternity Sitemap
Greek Sitemap
Find Fundraising Ideas
COPYRIGHT:
Center the following across the page below the four columns:
Copyright 2003 - 2009 GreekForMe.com - Greek Merchandise (showas a link)
Leave some vertical space from the bottom of the fourcolumns above and the text.
A copied design.
Loud colors - no bright pinks or bright greens. Try to remember that it should have a slight feminine feel but should not be too overt to scare away male customers.
Something that can not be coded with css. Remember I am going to need to code this thing :)