-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork-8.html
167 lines (163 loc) · 12.9 KB
/
work-8.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Visual design that celebrates the pleasure of seeing, looking, understanding" />
<meta name="author" content="José Neira, Carmina Correa, Felipe Cortez" />
<link rel="icon" type="image/png" href="favicon.png" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Spectral:ital@0;1&display=swap" rel="stylesheet" />
<link href="style.css?v=1.1.2" rel="stylesheet" />
<title>José Neira</title>
<link rel="canonical" href="https://joseneira.cl/" />
<meta name="theme-color" content="#fafafa" />
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="José Neira" />
<meta name="twitter:description" content="Visual design that celebrates the pleasure of seeing, looking, understanding" />
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="José Neira" />
<meta name="og:description" content="Visual design that celebrates the pleasure of seeing, looking, understanding" />
<meta name="og:url" content="https://joseneira.cl" />
<meta name="og:type" content="website" />
</head>
<body>
<div class="container d-flex w-100 flex-column">
<header class="pt-4 pb-5">
<h1 class="mt-3 float-md-start mb-0 align-items-center">
<a href="index.html">José Neira<span>Visual Design</span></a>
</h1>
<nav class="mt-2 nav float-md-end">
<a class="nav-link pasive" href="index.html">Selected work</a>
<a class="nav-link pasive" href="about.html">About</a>
<a class="nav-link pasive" href="contact.html">Contact</a>
</nav>
</header>
</div>
<div class="container">
<main class="pb-5">
<!--\/\/\/\/\/\/\/\/\/\/-->
<div class="row g-3 mb-5">
<div class="col-md-12 mb-4">
<img src="images/work-8-2.png" class="img-fluid my-5" />
</div>
<div class="col-md-6">
<h2>The Logotipe</h2>
<h2 class="d-none" lang="es">El logotipo </h2>
</div>
<div class="col-md-6">
<p>Fernando Almeda, born in Barcelona, is an oenologist and winemaker with 30 years of experience at Miguel Torres Vineyard in Chile. He started his own experimental winery in the Maule area in Chile a year ago. His wines take on his passion for dry farming and old bush vines, related to his family winemaking tradition in Spain.</p>
<p>The logotype makes reference to ligatures (the joining of two or more letters) that appear in antique lettering throughout Europe, many of which originated from the need to fit characters chiseled on stone slabs with limited space. Though his wine production is limited, and hand made, the brand avoids stereotypes such as hand drawn letters and other rustic effects.</p>
<p class="d-none" lang="es">Fernando Almeda, nacido en Barcelona, es enólogo con 30 años de experiencia produciendo vinos para Viña Miguel Torres en Chile. Hace un año inició una producción experimental en la zona del Maule, al sur de Santiago, inspirada en su pasión por las viñas de secano y parras ancestrales, vinculada a su tradición vinicultora española.</p>
<p class="d-none" lang="es">El logotipo se basa en antiguas ligaduras (la unión de letras) que se pueden encontrar a lo largo de Europa y que tienen su origen en la necesidad de hacer caber texto en un espacio limitado al tallar letras en piedra. Si bien la producción de vinos de Almeda es limitada y hecha a mano, la marca evita estereotipos tales como letras dibujadas a manualmente y otros efectos rústicos.</p>
</div>
<div class="col-md-6">
<img src="images/work-8-3.jpg" class="img-fluid shadow" />
</div>
<div class="col-md-6">
<img src="images/work-8-4.jpg" class="img-fluid shadow" />
</div>
<div class="col-md-6">
<img src="images/work-8-5.jpg" class="img-fluid shadow" />
</div>
<div class="col-md-6">
<div class="row g-3">
<div class="col-12">
<img src="images/work-8-6.jpg" class="img-fluid shadow" />
</div>
<div class="col-6">
<img src="images/work-8-7.jpg" class="img-fluid shadow" />
</div>
</div>
</div>
<div class="col-md-6"></div>
<div class="col-md-6 mt-5">
<h2>The labels</h2>
<h2 class="d-none" lang="es">Las etiquetas</h2>
<p>Anduriña (white wine) was made for a young audience in mind. The word anduriña means swallow in Galician, but on the label, the little bird is used discretely, just to spark curiosity. Instead of featuring the swallow on the label, an abstract pattern of bright vertical color stripes is used to catch the eye and evoke the freshness of the Albariño variety.</p>
<p>The Millavoro label is centered on the beauty of traditional letters and the details of ligatures (notice the contraction of the Spanish article ‘DE’) that create a sophisticated treatment of the typography, well suited for a high-end red wine made especially for aging.</p>
<p class="d-none" lang="es">Anduriña es un vino blanco, hecho para un público joven. La palabra anduriña significa golondrina en gallego, sin embargo, en la etiqueta, el pájaro aparece discretamente, solo para despertar curiosidad. En vez de basar su diseño en la golondrina, la etiqueta expone un patrón abstracto, vibrante, de bandas verticales de colores para atrapar la atención y evocar el frescor de la variedad Albariño.</p>
<p class="d-none" lang="es">La etiqueta para Millavoro se centra en la belleza de las letras tradicionales y detalles en ligaduras (nótese la fusión de las letras en DE) lo que crea un efecto tipográfico sofisticado, apropiado para un vino premium rojo de guarda.</p>
</div>
<div class="col-md-12">
<img src="images/work-8-9.png" class="img-fluid my-4" />
</div>
<div class="col-md-6"></div>
<div class="col-md-6">
<h2>The wines</h2>
<h2 class="d-none" lang="es">Los vinos</h2>
<p>Not just an interesting logotype is needed to create an identity for the winery, but also, to identify the individual wines produced. Therefore, under the Fernando Almeda logotype, there are two additional sub-brands: Anduriña, a white, fresh, young wine made from the Albariño variety, and Millavoro, a complex red wine for aging made from old bush vines of the Carignan variety, both originally from Spain.</p>
<p>The Anduriña logotype is based on the beautiful font Amster, designed by Chilean typographer Francisco Gálvez, while the Millavoro logotype mimics the traditional look of the Almeda logotype since it is the high-end product so far created.</p>
<p class="d-none" lang="es">No solo un logotipo interesante se necesita para crear la identidad de los vinos, sino también identificar cada uno de ellos por separado. Bajo la marca Fernando Almeda surgen dos sub-marcas: Anduriña, un vino blanco fresco y joven, hecho de la variedad Albariño, y Millavoro, un vino rojo de guarda complejo, hecho de parras ancestrales de secano de la variedad Carignan, que al igual que Albariño, es de origen español.</p>
<p class="d-none" lang="es">El logotipo Anduriña se basa en la hermosa tipografía Amster del tipógrafo chileno, Francisco Gálvez. Y el logotipo Millavoro replica al logotipo Almeda y su carácter tradicional, pues es el vino premium hasta ahora producido.</p>
</div>
<div class="col-md-12">
<img src="images/work-8-8.png" class="img-fluid my-4" />
</div>
<div class="col-md-12">
<img src="images/work-8-10.jpg" class="img-fluid shadow" />
<div class="row">
<div class="col-md-9 my-5">
<div class="w-50">
<h2>A Practical adaptation</h2>
<h2 class="d-none" lang="es">Una adaptación práctica </h2>
<p>The use of wooden crates for packing special orders prompted the need for a branding iron to burn directly onto crates. The fine serifs of the Almeda logotype could not be cut from ¼ inch iron, and so, a variation of the lettering was needed, one that could translate ligatures and other features into the simpler sans serif letters.</p>
<p class="d-none" lang="es">El uso de cajas de madera para la entrega de pedidos especiales llevó a la necesidad de usar un cuño de fierro para marcar las cajas. Sin embargo, los trazos delgados del logotipo Almeda no se pueden cortar en fierro de 5 mm y una variante del logotipo inicial que adaptase las ligaduras y otros detalles a letras más simples, fue necesaria. </p>
</div>
</div>
<div class="col-md-3">
<img src="images/work-8-11.png" class="img-fluid my-5" />
</div>
</div>
</div>
</div>
</main>
</div>
<footer class="fixed-bottom">
<div class="container">
<div class="row d-flex align-items-end">
<div class="col text-start">
<div class="btn-group btn-group-sm pb-3" role="group">
<button type="button" class="btn btn-outline-dark initialism py-1 px-2 active" id="english">EN</button>
<button type="button" class="btn btn-outline-dark initialism py-1 px-2" id="espanol">ES</button>
</div>
</div>
<div class="col text-end pb-3">
<a href="#" id="subir" class="btn btn-outline-dark initialism pt-0 pb-1 px-2 d-none">↑</a>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script>
$(function () {
$("#espanol").click(function () {
$("main h2:lang(en), main p:lang(en)").addClass("d-none");
$("main h2:lang(es), main p:lang(es)").removeClass("d-none");
$("#english").removeClass("active");
$("#espanol").addClass("active");
});
$("#english").click(function () {
$("main h2:lang(en), main p:lang(en)").removeClass("d-none");
$("main h2:lang(es), main p:lang(es)").addClass("d-none");
$("#espanol").removeClass("active");
$("#english").addClass("active");
});
var ventana = $(window).height();
var documento = $(document).height();
var altura = documento - ventana;
console.log(altura);
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (altura <= (scroll + 420)) {
$("a#subir").removeClass("d-none");
} else {
$("a#subir").addClass("d-none");
}
});
});
</script>
</body>
</html>