mStore - Design Patterns

In the application we have the following design patterns, categorized by each wireframe:

Wireframe HomePage

Main Navigation

• It is a fixed horizontal menu at fixed position in the top of the application, counting 4 items
• The current selected item is highlighted

Action Bar

• Is Placed in top right of the screen
• Contains icons for Internationalization, Shopping Chart and Search
  

Screen Interaction

• Touch screen interaction pattern

Wireframe Category Browsing

Double Tab Navigation

• The users can navigate a hierarchical structure into application
• Each second level menu is sublevel of one item from Main Menu
• Each item selected from menus are highlighted

Continuous Scrolling

• It is used when number of items are too large to be shown in one screen

Wireframe Shopping Chart

Shopping Chart

• Is useful when users can put their products in before they actually purchase them
• Icon to shopping chart is placed in every page of the application
• Contains total number of items, total price, name of the items, items' rating, price and remove button

Wireframe View Product

Video Content Play Icon

• Two icons places in the bottom of the page, for watching video content

Content Hiding

• The description of the item is not showed integrally because of the availability of space
• All content can be seen by clicking More button