-
Notifications
You must be signed in to change notification settings - Fork 0
/
asia-art-archive.html
129 lines (129 loc) · 7.36 KB
/
asia-art-archive.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
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Alistair Cooper's digital design portfolio archive, listing current, past and upcoming commercial projects">
<meta name="keywords" content="digital design,portfolio,alistair cooper,ali,cooper,design,digital,art direction,ux,ui,designer,digital designer,branding,identity,museum,collection,archive,e-commerce,user-experience,user-interface,graphic design,typography,typeface,type design">
<meta name="author" content="Alistair Cooper">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/project.css">
<title>Cooper - Asia Art Archive</title>
<link rel="shortcut icon" type="image/jpg" href="Icons/favicon1.png"/>
</head>
<body>
<div id="cursor"></div>
<nav>
<a href="index.html"><h1 class="cooper" id="cooper1">Cooper™</h1></a>
<div class="menu-wrap">
<input type="checkbox" class="toggle" onclick="myFunction()">
<div class="hamburger"><div><svg class="plus" id="plus1" width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 19.9722V36.4722H19.5V19.9722H36V16.9722H19.5V0.472168H16.5V16.9722H0V19.9722H16.5Z" fill="#879196"/>
</svg></div></div>
<div class="menu">
<div>
<div>
<ul>
<li><a class="menu-item" href="index.html">Index</a></li>
<li><a class="menu-item" href="archive.html">Archive</a></li>
<li><a class="menu-item" href="profile.html">Profile</a></li>
<li><a class="menu-item" href="mailto:helloacooper@gmail.com">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<header>
<div class="container">
<h1><span class="title-spacer"></span>directed the identity for a portal that aims to bring expression & ideas to life<span class="mobile-title-hide"> through an archive of contemporary asian artforms</span></h1>
</div>
</header>
<main>
<div class="project-content">
<div>
<img src="Images/AAA/1.00.png" alt="AAA project image" class="project-image">
<div class="module-text">
<div>
<p class="module-detail">Client</p>
<p class="module-title">Asia Art Archive</p>
<p class="module-detail">Year</p>
<p class="module-title">2016</p>
<p class="module-detail">Location</p>
<p class="module-title">Hong Kong<br>(China)</p>
</div>
<div>
<p class="module-detail">Role</p>
<p class="module-title">Direction,<br>UX / UI</p>
<p class="module-detail">Category</p>
<p class="module-title">Archive,<br>Library</p>
</div>
<p class="module-description">
Art is knowledge. Asia Art Archive is a catalyst for new ideas that enrich our understanding of the world through the collection, creation, and sharing of knowledge around recent art in Asia.
<br><br>
With one of the most valuable growing collections of material on the recent history of art from Asia, freely available from their website and onsite library, AAA builds tools and communities to collectively expand knowledge through research, residency, and educational programmes.
<br><br>
</p>
<div>
<p class="module-description">
Initially employed to lead the design of their digital identity to be consistent with their new print-focused branding, I also produced the prototype for the interface and have been working with them to enhance it ever since.
<br><br>
During initial stages, I travelled to Hong Kong with my managing director to support a series of workshops over the course of three days, to present the design for the digital art direction. Workshops consisted of critiquing the propsed direction and iteration to uncover a coherent, consistent, cross-platform identity, along with tech specification for our team of developers.
<br><br>
</p>
</div>
</div>
</div>
<div>
<img src="Images/AAA/1.01.png" alt="AAA project image" class="project-image">
</div>
<div>
<img src="Images/AAA/1.02.png" alt="AAA project image" class="project-image">
</div>
<div>
<img src="Images/AAA/03-Photo.png" alt="AAA project image" class="project-image">
</div>
<div>
<img src="Images/AAA/1.03.png" alt="AAA project image" class="project-image">
</div>
<div>
<img src="Images/AAA/1.04.png" alt="AAA project image" class="project-image">
</div>
<div>
<img src="Images/AAA/1.05.png" alt="AAA project image" class="project-image">
</div>
<div>
<img src="Images/AAA/1.06.png" alt="AAA project image" class="project-image">
</div>
<div>
<img src="Images/AAA/1.07.png" alt="AAA project image" class="project-image">
</div>
<div>
<img src="Images/AAA/1.08.png" alt="AAA project image" class="project-image">
</div>
<div>
<img src="Images/AAA/1.09.png" alt="AAA project image" class="project-image">
</div>
</div>
</main>
<footer>
<div class="footer-links">
<a href="index.html"><h1 class="footer-text">Index,</h1></a>
<a href="archive.html"><h1 class="footer-text">Archive,</h1></a>
<a href="profile.html"><h1 class="footer-text">Profile,</h1></a>
<a href="mailto:helloacooper@gmail.com"><h1 class="footer-text">Contact</h1></a>
<a class="next-project-link" href="modular.html"><h1 class="next-project-text">Next project</h1>
<svg width="43" height="36" viewBox="0 0 43 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.753905 16.0868L36.6244 16.0868L22.6851 2.14746L24.8064 0.0261373L42.3671 17.5868L24.8064 35.1475L22.6851 33.0261L36.6244 19.0868L0.753906 19.0868L0.753905 16.0868Z" fill="#222222"/>
</svg>
</a>
</div>
</footer>
</body>
<script src="js/script.js"></script>
</html>