Wine Retailer Apps Design

FROM APPS MAP TO VISUAL

Define the structure of apps with apps map. Layout and identify behaviour of screens with wireframes. Finally, we will have visual designs.

APPS SITE MAP

THE STRUCTURE OF APPS

The apps map is used to describe the hierarchies and connections of screen of apps.

WIREFRAME OF 1.0 HOME SCREEN

WIREFRAME AND ANNOTATIONS

Identify the proposed content, structure, functional behaviours of 1.0 Home Screen.

WIREFRAME OF 2.0 SEARCH SCREEN

WIREFRAME AND ANNOTATIONS

Identify the proposed content, structure, functional behaviours of 2.0 Search Screen

WIREFRAME OF 2.1 SEARCH RESULT SCREEN

WIREFRAME AND ANNOTATIONS

Identify the proposed content, structure, functional behaviours of 2.1 Search Result Screen.

WIREFRAME OF 2.1.1 COMPARE WINES SCREEN

WIREFRAME AND ANNOTATIONS

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

WIREFRAME OF 3.0 RECOGNIZE LABEL SCREEN

WIREFRAME AND ANNOTATIONS

Identify the proposed content, structure, functional behaviours of 3.0 Recognize Label Screen.

VISUAL DESIGN OF 1.0 HOME SCREEN

VISUAL DESIGN

Actual appearance of 1.0 Home Page.

VISUAL DESIGN OF 2.0 SEARCH SCREEN

VISUAL DESIGN

The actual appearance of 2.0 Search Screen.

VISUAL DESIGN OF 2.1 SEARCH RESULT SCREEN

VISUAL DESIGN

The actual appearance of 2.1 Search Result Screen

VISUAL DESIGN OF 2.1.1 COMPARE WINES SCREEN

VISUAL DESIGN

The actual appearance of 2.1.1 Compare Wines Screen

VISUAL DESIGN OF 2.2 LISTING SCREEN

VISUAL DESIGN

The actual appearance of 2.2 Listing Screen

VISUAL DESIGN OF 3.0 RECOGNIZE LABEL SCREEN

VISUAL DESIGN

The actual appearance of 3.0 Recognize Label Screen

SCREEN SCENARIO

VISUAL DESIGN

Grouping a sequence of screens to tell meaningful stories.

WINE RETAILER PROJECT

ALL ABOUT REQUIREMENTS

CHEERS is a wine retailer which want to set up a web site to sell and promote wines. The business stakeholder of CHEERS also requires the same functions on apps.

WEBSITE DESIGN

FROM SITE MAP TO VISUAL

Define the structure of web site with site map. Layout and identify behaviour of page with wireframe. Finally, we will have visual design.