horizontal position & vertical position 1st menuhorizontal position & vertical position 1st...

1
1.0 2.0 3.0 3.1 3.2 3.3 3.4 3.5 3.6 4.0 5.0 6.0 7.0 8.0-A 9.0-A 10-A 8.0-B 9.0-B 10-B WIRE FRAMES APP FOR THE BAG BRAND «SKIN» HORIZONTAL POSITION & VERTICAL POSITION 1ST MENU 1.0 HOME PAGE: 1. Company logo. It also brings back to the home page from another page 2. Caroussel that changes the background images 3. Company and products presentation 4. Drop down menu from «what» to the «products» section 5. «Search blank» in all the pages to look for specific information 6. The «profile» and «cart» are always visible since they links leading to purchases 2.0 WHO: 1. Who makes the bags 2. (3) images allusives topic of who makes the bags, with some text 3. Quote from one of the artisans. 3.0 WHAT: 1. Explanation of the process of making the products 2. (2) images allusives topic of making the products with some text 3. (2) products images with some text (the images also link to the «styles» page to browse more products 4. Drop down menu with link to «products» 4.0 WHY: 1. Mission of the company (to help artisans in countries in development) 2. Video showing the artisans work 3. Picture and history about one artisan (future development: link to other histories) 5.0 WHERE: 1. Ways to contact the company 2. Closest location in Google map after entering the postal code, city or country in the form below (put the enter bottom) 3. Form where you can type an email and send it to the company (put the enter bottom) 4. Form where you can type a message and chat with a representative (put the enter bottom) 5. Form where you press the phone number and call directly from your phone (put the enter bottom) 6.0 PROFILE: 1. User profile personalized with a picture of the user 2. «Wish list» where you can select items to «check out» linking to «cart» to complete the transaction 3. «Projects» gallery to preview the customized projects (the images also link back to the «customize» page to continue working on) 7.0 CART: 1. Page to complete the «check out» transaction from the «profile» page 2. Information about the product(s): picture, how many and price 3. Information about the purchase: subtotal, shipping, tax, duty, total and «check out» bottom 4. Different methods of payment: PayPal. Master cart, Visa and American express. FOOTER (IN THE 1ST MENU) 8.0-A NEWS LETTER: 1. Page to sign up for information by entering the email address. 9.0-A POLICY: 1. In a short form explanation of the main policies such as returns and exchanges 10-A SITE MAP: 1. Site map of the content of the website SOCIAL MEDIA 2. Social media links such as: Tweter, Facebook, Instagram and Pinterest, are always avai- lable to share the information from any page. 2ND MENU 3.1 STYLES: 1. Page showing the images of the styles: «classic» and «trendy», with arrows of the side to browse them 2. There is a «scissor» to «customize» product 3. There is a «star» to add product to «wish list» 3.2 CUSTOMIZE: 1. Section to customize you own bag 2. Picture of the bag 3. (4) pictures on the sides with Information about the options: material, color, etc... 4. «Check mark» to save the project in the profile «project's» gallery 5. When the custumization is done, there is the «start» option to add to the «wish list» and later «check out» if wished 3.3 COLLECTION: 1. Brand campaign 2. Video 3. Preview of fashion blog content (external link to the blog) 3.4 WHERE: 1. Same contact page as previous, the only difference is that the main menu is different (pro- duct menu). 3.5 PROFILE: 1. Same "profile" page as previous, the only difference is that the main menu is different (pro- duct menu). 3.6 CART: 1. Same "cart" page as previous, the only difference is that the main menu is different (product menu). FOOTER (IN THE 2ND MENU) 8.0-B NEWS LETTER 1. Same "news letter" page as previous, the only difference is that the main menu is different (product menu). 9.0-B POLICY: 1. Same "policy" page as previous, the only difference is that the main menu is different (pro- duct menu). 10-B SITE MAP: 1. Same "site map" page as previous, the only difference is that the main menu is different (product menu). 2 3 3 2 4 4 1 5 6 6 6 6 5 2 2 4 4 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 2 4 2 2 2 3 3 2 1 2 2 3 2 2 3 3 4 2 3 2 1 3 4 5 3 3 1 1 1 1 1 1 1 1 2 3 4 5 2 1 1 2 3 1 1 3 2 2 1 1 1 3 3 3 3 3 3 3 1 2 2 3 3 1 1 1 1 1 1 1 1 5 4 2 5 4 2 1 1 1 1

Upload: others

Post on 11-Sep-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

1.0

2.0 3.0

3.1 3.2 3.3 3.4 3.5 3.6

4.0 5.0 6.0 7.0

8.0-A 9.0-A 10-A

8.0-B 9.0-B 10-B

WIRE FRAMES APP FOR THE BAG BRAND «SKIN»HORIZONTAL POSITION & VERTICAL POSITION

1ST MENU1.0 HOME PAGE:

1. Company logo. It also brings back to the home page from another page2. Caroussel that changes the background images3. Company and products presentation4. Drop down menu from «what» to the «products» section5. «Search blank» in all the pages to look for specific information6. The «profile» and «cart» are always visible since they links leading to purchases

2.0 WHO:

1. Who makes the bags2. (3) images allusives topic of who makes the bags, with some text3. Quote from one of the artisans.

3.0 WHAT:

1. Explanation of the process of making the products2. (2) images allusives topic of making the products with some text 3. (2) products images with some text (the images also link to the «styles» page to browse more products4. Drop down menu with link to «products»

4.0 WHY:

1. Mission of the company (to help artisans in countries in development)2. Video showing the artisans work3. Picture and history about one artisan (future development: link to other histories)

5.0 WHERE:

1. Ways to contact the company2. Closest location in Google map after entering the postal code, city or country in the form below (put the enter bottom) 3. Form where you can type an email and send it to the company (put the enter bottom)4. Form where you can type a message and chat with a representative (put the enter bottom)5. Form where you press the phone number and call directly from your phone (put the enter bottom)

6.0 PROFILE:

1. User profile personalized with a picture of the user2. «Wish list» where you can select items to «check out» linking to «cart» to complete the transaction3. «Projects» gallery to preview the customized projects (the images also link back to the «customize» page to continue working on)

7.0 CART:

1. Page to complete the «check out» transaction from the «profile» page2. Information about the product(s): picture, how many and price3. Information about the purchase: subtotal, shipping, tax, duty, total and «check out» bottom4. Different methods of payment: PayPal. Master cart, Visa and American express.

FOOTER (IN THE 1ST MENU) 8.0-A NEWS LETTER:

1. Page to sign up for information by entering the email address.

9.0-A POLICY:

1. In a short form explanation of the main policies such as returns and exchanges

10-A SITE MAP:

1. Site map of the content of the website

SOCIAL MEDIA

2. Social media links such as: Tweter, Facebook, Instagram and Pinterest, are always avai-lable to share the information from any page.

2ND MENU3.1 STYLES:

1. Page showing the images of the styles: «classic» and «trendy», with arrows of the side to browse them2. There is a «scissor» to «customize» product3. There is a «star» to add product to «wish list»

3.2 CUSTOMIZE:

1. Section to customize you own bag2. Picture of the bag3. (4) pictures on the sides with Information about the options: material, color, etc...4. «Check mark» to save the project in the profile «project's» gallery5. When the custumization is done, there is the «start» option to add to the «wish list» and later «check out» if wished

3.3 COLLECTION:

1. Brand campaign2. Video 3. Preview of fashion blog content (external link to the blog)

3.4 WHERE:

1. Same contact page as previous, the only difference is that the main menu is different (pro-duct menu).

3.5 PROFILE:

1. Same "profile" page as previous, the only difference is that the main menu is different (pro-duct menu).

3.6 CART:

1. Same "cart" page as previous, the only difference is that the main menu is different (product menu).

FOOTER (IN THE 2ND MENU) 8.0-B NEWS LETTER

1. Same "news letter" page as previous, the only difference is that the main menu is different (product menu).

9.0-B POLICY:

1. Same "policy" page as previous, the only difference is that the main menu is different (pro-duct menu).

10-B SITE MAP:

1. Same "site map" page as previous, the only difference is that the main menu is different (product menu).

2

3

3

2

4 4

1566

6 6 5

2

2

4

4

1

11

1

1

1

1

1

1

1

1

1

1

11

1

1

1

2

4

2

2

23

3

2

12

2

3

2

2

3

3

4

2

3

21

3

4

5

3 3

1

1

1

1

1

1

1

12 3 4 5

2

1

1

23

1

1

3

2

2

1

1

1

3

3

3

3

33

3

1 2

2

3

3

1

1

1

1

1

1

1

1

54

2

54

2

1

1

1

1