top of page

Wireframe of 2.1.1 Compare Wines Screen

  • Whitehole Kong
  • Mar 22, 2017
  • 1 min read

Identify the proposed content, structure, functional behaviours of 2.1.1 Compare Wines Screen.

WIREFRAME AND ANNOTATIONS OF COMPARE WINES SCREEN

Wireframe of 1.0 Home Page

  1. Compare Wines The title of this screen.

  2. Item Image The image of item.

  3. Item Name The name of wine.

  4. Pauillac The Region/Appellation of item. Display lighter font colour if the value of compare items are the same.

  5. Full-body Red Wine The style of item. Display lighter font colour if the value of compare items are the same.

  6. Bordeaux Blend The varieties of item. Display lighter font colour if the value of compare items are the same.

  7. blackberry, earth, tobacco The basic flavour of item. Display lighter font colour if the value of compare items are the same.

  8. Food Pairing: Beef and Venison The basic food pairing of item. Display lighter font colour if the value of compare items are the same.

  9. HK$ 1,900 The price of item.

  10. 750ml The volume of item.

  11. Down arrow button This button presents there will have menu after drag the item.

  12. CLOSE button Close the 2.1.1 Compare screen and back to 2.1 Search Result screen.

  13. COMPARE OTHER WINES navigation Clear the Compare Wines List and close 2.1.1 Compare screen.

WIREFRAME AND ANNOTATIONS OFMENU OF LIST ITEM

Wireframe of Search Full-body Red Result Screen

  1. REMOVE Remove specific wine from compare list.

  1. ADD TO CART Add specific wine to cart.

Comments

bottom of page