-
Notifications
You must be signed in to change notification settings - Fork 0
/
modular.html
122 lines (122 loc) · 7.38 KB
/
modular.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
<!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 - Modular</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>emphasises tactility in design systems by utilising the fingertip as a foundational scale<span class="mobile-title-hide"> for elements, components and modules</span></h1>
</div>
</header>
<main>
<div class="project-content">
<div>
<img src="Images/Modular/01.png" alt="WCU project image" class="project-image">
<div class="module-text">
<div>
<p class="module-detail">Client</p>
<p class="module-title">Modular™</p>
<p class="module-detail">Year</p>
<p class="module-title">2023 (WIP)</p>
<p class="module-detail">Location</p>
<p class="module-title">London<br>(UK)</p>
</div>
<div>
<p class="module-detail">Role</p>
<p class="module-title">Digital identity, <br>Product design, <br>UX / UI</p>
<p class="module-detail">Category</p>
<p class="module-title">Design System, <br>Product</p>
</div>
<div>
<p class="module-description">
Modular is a digital design system inspired and conceptually guided by principles of 'Le Modulor’, which is an anthropometric scale of proportions devised by the Swiss-born French architect Le Corbusier (1887–1965). Modular helps to transform design templates into Elements, Components and Modules, ready for production.
<br><br>
The Modular system focuses its spacial, scale, grid and sizing ratios on the average human fingertip. An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 - 20 mm). 1.6 cm converted into pixels is approx 60px, being the ideal circumference for touchscreens.
<br><br>
</p>
</div>
<div>
<p class="module-description">
Using 60px as the base rule, this size is divisible and multipliable to allow for spacial, scale, grid and sizing properties. Since touchscreen devices are also pressed with the thumb, which is slightly larger in width than the index finger at 2.5cm or 72px, the base rule works as a ratio of 3:2 = 72 : 48 (equal to 60 : 40).
<br><br>
The 'Golden Ratio' is also utilised in the system, 1 : 1.618 - as a ratio is also approx 3:2. The Modular system assists digital production teams in developing consistent, coherent and scalable digital products. This experimental research project is currently in progress, and will become an open-access resource for anyone to use and customise.
<br><br>
</p>
</div>
</div>
</div>
<div>
<img src="Images/Modular/02.png" alt="Modular project image" class="project-image">
</div>
<div>
<img src="Images/Modular/03.png" alt="Modular project image" class="project-image">
</div>
<div>
<img src="Images/Modular/04.png" alt="Modular project image" class="project-image">
</div>
<div>
<img src="Images/Modular/05.png" alt="Modular project image" class="project-image">
</div>
<div>
<img src="Images/Modular/06.png" alt="Modular project image" class="project-image">
</div>
<div>
<img src="Images/Modular/07.png" alt="Modular project image" class="project-image">
</div>
<div>
<img src="Images/Modular/08.gif" alt="Modular 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="ps-basic.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>