I wanted to create a new design brief for current designers as well as people considering joining this design contest. I’m afraid I have not been clear enough in the project design brief about what my expectations are for this design so I want to describe EXACLTY what I am looking for in a winning design.
To be clear: I want you to use the mockups as a direct template for your designs. More specifically I would like you to use the exact layout that we have provided in the mockup for the header and footer. When I say exactly, I mean I would like you to literally copy the exact layout of the header and footer. Please refer to the mockup called “Homepage 1160px (Markup & Instructions)” for the exact dimensions used in creating the homepage mockup and use these as a template for creating your design. For quick reference here are the important dimensions that I used to create the mockup header:
- centered logo 240px wide
- thin blue bar running beneath the logo that is around 34px wide and runs full page width
- a search box approximately 705x26px imbedded in the blue bar and centered below logo
- navigation links that are sandwiched between 2 separator lines; the top line should be around 597px and the bottom line 568px. The distance between the top and bottom separator lines should be around 32px
- benefit section below the blue bar consisting of 3 benefits with vertical separator line between them and separator line below. The distance between the blue bar and bottom separator line should be around 43px
As far as content sections make sure to divide them with thin separator lines. Please also include these sections in the following order:
- Main Banner Image: This should be 1160px wide and around 400px tall
- Best Sellers: There should be 5 products in this row.
- Featured Products: There should be 5 products in this row.
- Shop by Category: There should be 6 total categories, 3 per row. The images can be either rectangular or circular. If the images are rectangular please align the text to the left as seen in the mockups. If you decide to use circular images then you can center the headlines and text. Make sure to include a headline, descriptive text and a “Shop Now” text button with an arrow as seen in the homepage mockup.
- About Vitavana: The video should be around 505x325px. Text should be to the left of the video. The “About Vitavana” headline can either be aligned left above the descriptive text or centered, similar to the other section headlines.
- What People Are Saying About Vitavana: Headline should be centered and there should either be 4 testimonials (2 on top of each other) or 3 in a row.
- Take a Selfie With Your Vitavana Products and email firstname.lastname@example.org for Your Chance to Win!: The headline should be centered just like the other section headers. There should be 6 images each approximately 180x180px.
All other requirements have been added as markup to an additional mockup I have added to the design brief called “Homepage 1160px (Markup & Instructions)”. Please make sure to carefully review this mockup before creating your design. The specific reasons why I need you to design this as close to the mockups as possible is that I am going to be coding this into an existing Shopify theme. There are limitations to what I can do as far as design goes to be able to easily integrate this design into the template; therefore it is imperative that your design closely resembles the mockups I have provided!
Designing in bootstrap? It is fine to use 1170px width or something close. The 1160px width is what I used to design the mockups and in the absence of a specific need to use another size please maintain a 1160px width for this web design project.
I hope I have made it clear for everybody what I am looking for - just copy the mockups exactly as you see them! Opportunities exist to differentiate your design by font selections, stock imagery, icons etc. so long as the layout is exactly or very close to mockups.