| Line 13: | Line 13: | ||
Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well. | Within this project a mobile web application for an existing reference store of a commercial shop software has to be created. The version for the desktop website already exists with all its corporate design guidelines. The mobile reference store will have a technical connection to the running software in order to maintain access to all the given data structures. The main focus of this projects lies in the visual design of the mobile app. The technical realisation is interesting as well. | ||
==First | ==First Mockup== | ||
<gallery heights="150px"> | <gallery heights="150px"> | ||
| Line 23: | Line 23: | ||
t.b.d. | t.b.d. | ||
==Specified Design== | |||
These are my final designs for the mobile shop: | |||
<gallery heights="150px"> | |||
File:01_home.jpg|Home (Portrait) | |||
File:02_home_landscape.jpg|Home (Landscape) | |||
File:03_category_list.jpg|Category List | |||
File:04_product_list.jpg|Product List (Portrait) | |||
File:05_product_gallery_landscape.jpg|Product Gallery (Landscape) | |||
File:06_filter_list.jpg|Filter Products | |||
File:07_sort_list.jpg|Sort Product List or Gallery | |||
File:08_product_detail.jpg|Product Detail | |||
File:09_product_detail_images.jpg|Product Detail: Images | |||
File:10_basket_overview.jpg|Shopping Cart: Overview | |||
File:11_basket_edit_item.jpg|Shopping Cart: Edit an Item | |||
File:12_basket_remove_item_layer.jpg|Shopping Cart: Remove an Item | |||
File:13_basket_adress_overview.jpg|Shopping Cart: Adress Overview | |||
File:14_basket_new_adress.jpg|Shopping Cart: Add a new Adress | |||
File:15_basket_new_adress_form_error.jpg|Shopping Cart: Add a new Adress (Error) | |||
File:16_select_payment_method.jpg|Shopping Cart: Select a Payment Method | |||
File:17_payment_method_overview.jpg|Shopping Cart: Modify a Payment Method | |||
File:18_checkout_review.jpg|Shopping Cart: Checkout Review | |||
</gallery> | |||
They base upon evaluated patterns of specific interactions. Furthermore they represent a visual overview of all visual design elemnts which are used to build up the mobile shop's user interface. | |||