-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (107 loc) · 4.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPEhtml>
<html>
<head>
<title>AR Dynamic Design</title>
<script src="Libraries/particles.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/home-styles.css">
<link rel="stylesheet" type="text/css" href="Styles/share-styles.css">
<link rel="stylesheet" type="text/css" href="Styles/particlestyles.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Unna" rel="stylesheet">
</head>
<body>
<!-- Menu: anchored top -->
<div id="menu">
<a href="index.html">
<img src="Resources/logo.png" alt="Logo Gif" class="logo-img">
</a>
<div class="menu-items">
<a href="#div-reference">
<p class="menu-item-txt">Reference</p>
</a>
<a href="#div-products">
<p class="menu-item-txt">Resources</p>
</a>
<a href="#particles-js">
<p class="menu-item-txt">About</p>
</a>
</div>
</div>
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- Logo Gif -->
<img src="Resources/logo.gif" alt="Logo Gif" class="logo-gif">
<!-- Intro Texts -->
<div class="div-text">
<p class="center title">AR DYNAMIC DESIGN</p>
<p class="center body">
Dynamic is a design system that offers a perspective on User Interface Design for mobile phone Augmented Reality applications.
</p>
<p class="center body">
This web-based manual, currently a work-in-progress, provides a complex UI taxonomy system and a series of design guidelines. Based on this manual, a UI toolkit made for Unity is scheduled to be released in May 2019.
</p>
</div>
<!-- Explore Button -->
<a href="explore.html">
<button type="button" class="btn-explore">COMPONENT TAXONOMY</button>
</a>
<!-- Intro Video -->
<video width="80%" height="auto" controls class="video">
<source src="Resources/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Products -->
<div id="div-products">
<div class="div-text">
<p class= "center title light">Resources</p>
<p class= "center body light">There are four resources that provide insights on different but closely related aspects of User Interface and User Experience design for mobile phone augmented reality. </p>
</div>
<div class="row">
<div class="column">
<p class="column-header-txt">Design Guidelines</p>
<p class="column-body-txt">
What does it mean to design for augmented reality? This article quickly explains five high-level design guidelines that can be useful to your next mobile phone AR project.
</p>
<p class="column-body-txt"> Will be available in December 2019.</p>
</div>
<div class="column">
<a href="explore.html">
<p class="column-header-txt">Component Taxonomy</p>
<p class="column-body-txt">
This product proposes a taxonomy system for AR component types and attributes to assist designers and developers next time we wonder "How should I Google this?"
</p>
<p class="column-body-txt"> Version 0.0.1 is available to view.</p>
</a>
</div>
<div class="column">
<p class="column-header-txt">Interactions</p>
<p class="column-body-txt">
How can the component types defined in the Component Taxonomy interact with one another and how can users interact with them?
</p>
<p class="column-body-txt"> Will be available in February 2019.</p>
</div>
<div class="column">
<p class="column-header-txt">Layout</p>
<p class="column-body-txt">
This Unity plug-in provides different layouts for several types of mobile phone AR applications.
</p>
<p class="column-body-txt">
Will be available in May 2019.
</p>
</div>
</div>
</div>
<div id="div-reference">
<div class="div-text">
<p class= "center title">Reference</p>
<p class= "center body">I can only complete this project standing on shoulders of giants. Having had opportunities to interview with quite a few AR developers, designers and experts, I'm in the process of putting together a podcast that features some of these valuable perspectives.</p>
<p class= "center body">Have any feedback or want to be featured in my podcast? Shoot an email to [email protected].</p>
<p class="center opinion">OPINIONS ARE MY OWN.</p>
</div>
</div>
<div class="copyright">
<p class="copyright-txt">Copyright © 2018 Duyen Luu Hai</p>
</div>
<script src="Scripts/ParticlesScript.js"></script>
</body>
</html>