Michael Angeles

User Experience Designer

422

--

Example Project: Zen Web App

Below are the exported PNG images of the Zen App example created during this course. The first set of screens shows the web app and the second set shows the Smartphone examples.

Download Example Project

Web App Wireframes

Smartphone Wireframes

Web App Wireframes

1. Landing / Home Page

Action: Select "Menu" button

68127729

2. Menu

Action: Select "Takkos"

f63de6a9

3. Menu: Takkos Selected

Action: Select "Chuck Norris Chicken"

65ef1a55

4. Takkos Menu Item

Action: Select "Modify"

0eb88a2a

5. Modify Menu Item

Action: Select "Done" button

c649897b

6. Item Added to Cart

Action: Select "Send to Kitchen"

d37c8f0d

7. Cart

Action: Select "Charge my Card" button

46af5eec

8. Payment View

Action: Select "Pay" button

0c11be21

9. Payment Confirmation

e1115821

Smartphone Wireframes

1. Landing/Home Page

Action: Select Menu icon (3 Bars, aka "Hamburger" icon)

bfa01e8c

2. Menu

Action: Select "Takkos" menu item

75a28259

3. Menu: Takkos

Action: Select "Chuck Norris Chicken" menu item

774b0939

4. Takkos Menu Item

Action: Select "Modify"

315e95b1

5. Modify Order

Action: Select "Done"

87df0886

6. Item Added to Cart

Action: Select "Send to Kitchen"

8f89cf91

7. Cart

Action: Select "Charge my Card" button

7d5532a5

8. Payment View

Action: Select "Pay" button

4c6a4bd5

9. Payment Confirmation

fc708708

Comments

Please sign in or sign up to comment.