Create a desktop and mobile-based shopping website page with
interactions (Hint: Use adaptive views)
1.
Your Shopping page should have a hierarchical arrangement
as uploaded before ( I will provide that). Keep one icon for cart as well. You
can either download picture of a cart to use or make your own icon. Also, show
a message ‘0 items in cart’ on the home page.
2.
Clicking on individual tab shows you the list of
included menu as a modal window (scrollable) on the same page. Include ‘X’ to
close the modal window.
3.
Log in and show welcome ‘Your Name’ in top right
corner. Include ‘Login’ as a link; not as a button.
4.
Include a logout linkin front of the welcome
message. Make welcome message disappear and ‘Login’ link active when clicked on
‘Logout’.
5.
Only make the TVs and Microwave ovens in the ‘Appliances’
dropdown list active.
6.
By Clicking on TVs, you are taken on a different
page with a list of TVs (Show 5 TVs). By Clicking on Microwave, you are taken
on a different page with a list of Microwaves (Show 5 Microwaves). On these
pages, include buttons ‘add to cart’ for each TV and microwave in the list.
7.
Clicking on each item in the list, a modal
window appears which has an image carousel (4 pictures each) and scrollable properties
of the product. Image carousel has left and right arrow buttons
(semitransparent on image and functioning). The images are also scrollable to
left and right by swipe action. There is a separate button ‘Add to cart’ on
this modal window. Use the same 4 pictures for all the TVs and Microwaves.
Include ‘X’ to close the modal window.
8.
Every time you click on ‘Add to cart’, increment
the number by 1.
9.
Make sure that you design a color scheme for
your product and keep in consistent.
10.
Create a splash screen for your iPhone prototype
and app icon.
Assignment: Create
the desktop view.
1.
No modal window for the first tab navigation.
Show some more info on the TV and Microwave pages.
2.
Keep other interactions similar. Keep consistent
color scheme.
No comments:
Post a Comment