-
Notifications
You must be signed in to change notification settings - Fork 0
/
diva-museum.html
119 lines (119 loc) · 6.98 KB
/
diva-museum.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
<!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 - DIVA Museum</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>helped Antwerp to define its title as the 'city of diamonds'<span class="mobile-title-hide"> by bringing digital access to its history through a new diamond museum</span></h1>
</div>
</header>
<main>
<div class="project-content">
<div>
<img src="Images/Diva/1.00.png" alt="DIVA project image" class="project-image">
<div class="module-text">
<div>
<p class="module-detail">Client</p>
<p class="module-title">Diva Diamond Museum</p>
<p class="module-detail">Year</p>
<p class="module-title">2016</p>
<p class="module-detail">Location</p>
<p class="module-title">Antwerp<br>(BE)</p>
</div>
<div>
<p class="module-detail">Role</p>
<p class="module-title">Digital Identity,<br>UX / UI</p>
<p class="module-detail">Category</p>
<p class="module-title">Museum,<br>Collection</p>
</div>
<div>
<p class="module-description">
Enter the enchanting world of diamonds, silver and silversmithing. On the symbolic location which has been home to silversmiths, jewellers and diamond dealers since the sixteenth century, you experience the international diamond story of the past, today and tomorrow.
<br><br>
Antwerp and diamonds are inextricably linked, which is why DIVA is providing an unforgettable experience of the enthralling world of diamonds. Pioneering craftsmanship and creativity come into their own. DIVA sets great store by both high-tech expertise and innovative regional talent.
<br><br>
</p>
</div>
<div>
<p class="module-description">
Liasing with key stakeholders at the museum, I lead the art direction and interface design for their new digital platform. Other than the pre-existing logo and primary colour (red), this included creating a new branding identity and design system.
<br><br>
The original direction was created in 2017, we were invited to create a refresh in 2023 to ensure it maintained a modern expression, visiting Antwerp for a three-day workshop. A clean font (Avenir) was employed along with spacious, open grid systems to allow for an accessible, contemporary tone.
<br><br>
</p>
</div>
</div>
</div>
<div>
<img src="Images/Diva/1.01.png" alt="DIVA project image" class="project-image">
</div>
<div>
<img src="Images/Diva/1.02.png" alt="DIVA project image" class="project-image">
</div>
<div>
<img src="Images/Diva/1.03.png" alt="DIVA project image" class="project-image">
</div>
<div>
<img src="Images/Diva/1.04.png" alt="DIVA project image" class="project-image">
</div>
<div>
<img src="Images/Diva/1.05.png" alt="DIVA project image" class="project-image">
</div>
<div>
<img src="Images/Diva/1.07.png" alt="DIVA 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="western-carolina-university.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>