Wireframe of 1.0 Home Page
- Whitehole Kong
- Feb 16, 2017
- 3 min read
Identify the proposed content, structure, functional behaviours of 1.0 Home Page
WIREFRAME OF OVER ALL HOME PAGE
ANNOTATIONS
Logo Image Logo shall function as a link to 1.0 Home Page of the website from any location within the website.
Blog Navigation Shall link to 3.0 Blog Index page
My Account Navigation Shall link to 4.0 Log in/Sign up page
WINES Navigation Shall pop WINES Categories Panel when mouse over after 0.5s. When WINES Categories Panel is showing, turn other area darker. This is used to find wines by categories. Hide the event panel after mouse move out.
SPIRITS Navigation Shall pop SPIRITS Categories Panel when mouse over after 0.5s. When SPIRITS Categories Panel is showing, turn other area darker. This is used to find spirits by categories. Hide the event panel after mouse move out.
OTHERS Navigation Shall pop OTHERS Categories Panel when mouse over after 0.5s. When OTHERS Categories Panel is showing, turn other area darker. This is used to find other items out of wines and spirits. Hide the event panel after mouse move out.
FOOD PAIRING Navigation Shall pop FOOD PAIRING Panel when mouse over after 0.5s. When FOOD PAIRING Panel is showing, turn other area darker. It help user find wine that pair with specific food. Hide the event panel after mouse move out.
EVENTS Navigation Shall pop EVENTS Panel when mouse over after 0.5s. When EVENTS Panel is showing, turn other area darker. It help user find wine for specific event. Hide the event panel after mouse move out.
SEARCH ICON Shall pop search text field when click on the icon. When search text field is showing, turn other area darker. Hide the search text field after mouse move out.
Cart Navigation Shall link to 5.0 Cart page.
Billboard Up to 5 images rotate on the billboard. The images shall represent one promotion of each.
FEATURED ITEMS Shall list items that on sale or need to promote. There next and preview buttons no the right and left hand side of list respectively.
Item Shall include a image, title and price. Show on sale notification if needed.
BLOG Shall show latest 3 blogs from company blog.
Blog Shall include title, date, image and first 200 characters of content.
Company information Shall include company logo, phone number, address and copyright content.
SITE MAP Shall list the navigation of website.
SUBSCRIBE Shall provide text field and button to collect user’s email for subscripting our news.
Social media share link Shall include Facebook, Twitter, Google+, Pinterest, Instagram and Email for user to share our website.
WIREFRAME OF WINES CATEGORIES PANEL AND BY STYLE
ANNOTATIONS
WINES Navigation Mouse over the WINES navigation to show the WINES Categories Panel. When WINES Categories Panel is showing, turn other area darker.
BY STYLE tab navigation The first tab of WINES Categories Panel. It shall categorise wines into different style.
OLD WORLD tab navigation This tab shall list the countries in old world of wine.
NEW WORLD tab navigation This tab shall list the countries in new world of wine.
BY PRICE tab navigation This tab shall categorise wines into different range of price. And also provide slider to adjust price range.
BY GRAPES tab navigation This tab shall categorise wines into different grape varieties.
Wine Styles tab It shall categorise wine style into Sparking, Light-body White, Full-body White, Aromatic White, Rosé, Light-body Red, Medium-body Red, Full-body Red and Dessert. All style represented by a icon and name. It should show the result on 2.0 Search Result page after click on the style.
WIREFRAME OF SEARCH
ANNOTATIONS
Search Icon It let user know this is being search mode.
Search text field It should search the text typed in after user press <enter>. Place holder text should “Search CHEERS”.
Cancel button It should cancel the search mode after click on it.
WIREFRAME OF SPIRITS CATEGORIES PANEL
WIREFRAME OF FOOD PAIRING CATEGORIES PANEL - MEAT PAIRING
Comentarios