1. UI/ UX Design Architecture
UI Architecture
[Carlos Stoffel Jr]
7/1/2015
This documentis to provide a UI Design Architecture of a web page layout. It provides different architecture layouts of different pages.
This documents serves as a draftas well as a guide for the Web Designer and FrontEnd Developer.

2. UI/ UX Design Architecture
Page 2
Table of Contents
[To update the table of contents, rightclick the message below and selectUpdate Field (F9 on PC, ⌥⌘U on Mac).]
No table of contents entries found.

3. UI/ UX Design Architecture
Page 3
1. Pages
1.1. Page Tree
Home
Category
About Us
Services
Products
Product Page
Contact Us

4. UI/ UX Design Architecture
Page 4
1.2. Home
1.2.1. User Interface

5. UI/ UX Design Architecture
Page 5
Menu Object

6. UI/ UX Design Architecture
Page 6
1.3. Category
1.3.1. User Interface

7. UI/ UX Design Architecture
Page 7
1.4. About Us
1.4.1. User Interface

8. UI/ UX Design Architecture
Page 8
1.5. Services
1.5.1. User Interface

9. UI/ UX Design Architecture
Page 9
1.6. Products
1.6.1. User Interface
1.6.2. Widget Table
Footnote Interactions

10. UI/ UX Design Architecture
Page 10
Footnote Interactions
1 OnClick:
Case 1:
Open Product Page in Current Window
2 OnClick:
Case 1:
Open Product Page in Current Window
3 OnClick:
Case 1:
Open Product Page in Current Window
4 OnClick:
Case 1:
Open Product Page in Current Window
5 OnClick:
Case 1:
Open Product Page in Current Window
6 OnClick:
Case 1:
Open Product Page in Current Window
7 OnClick:
Case 1:
Open Product Page in Current Window
8 OnClick:
Case 1:
Open Product Page in Current Window
9 OnClick:
Case 1:
Open Product Page in Current Window
10 OnClick:
Case 1:
Open Product Page in Current Window
11 OnClick:
Case 1:
Open Product Page in Current Window
12 OnClick:
Case 1:
Open Product Page in Current Window
13 OnClick:
Case 1:
Open Product Page in Current Window
14 OnClick:
Case 1:
Open Product Page in Current Window
15 OnClick:
Case 1:
Open Product Page in Current Window
16 OnClick:
Case 1:
Open Product Page in Current Window

11. UI/ UX Design Architecture
Page 11
1.7. Product Page
1.7.1. User Interface

12. UI/ UX Design Architecture
Page 12
1.8. Contact Us
1.8.1. User Interface

13. UI/ UX Design Architecture
Page 13
2. Masters
2.1. Master List
Main Nav
Footer

14. UI/ UX Design Architecture
Page 14
2.2. Main Nav
2.2.1. User Interface
Menu Object
2.2.2. Widget Table
Footnote Interactions
1 OnClick:
Case 1:
Open Category in Current Window
2 OnClick:
Case 1:
Open Category in Current Window
3 OnClick:
Case 1:
Open Category in Current Window
4 OnClick:
Case 1:
Open Home in Current Window
5 OnClick:
Case 1:
Open Category in Current Window
6 OnClick:
Case 1:
Open About Us in Current Window
7 OnClick:
Case 1:
Open Category in Current Window
8 OnClick:
Case 1:
Open Products in Current Window
9 OnClick:
Case 1:
Open Category in Current Window
10 OnClick:
Case 1:
Open Services in Current Window

15. UI/ UX Design Architecture
Page 15
Footnote Interactions
11 OnClick:
Case 1:
Open Category in Current Window
12 OnClick:
Case 1:
Open Contact Us in Current Window

16. UI/ UX Design Architecture
Page 16
2.3. Footer
2.3.1. User Interface