-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathriverfox.html
More file actions
130 lines (101 loc) · 7.63 KB
/
Copy pathriverfox.html
File metadata and controls
130 lines (101 loc) · 7.63 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<title>Leah Smith</title>
<link rel="stylesheet" href="assets/css/index.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="page-border"></div>
<div class="site-wrapper">
<nav data-aos="fade-in" data-aos-duration="1500" data-aos-delay="200">
<h1 class="logo"><a href="index.html">Leah Smith</a></h1>
<ul class="navigation">
<li class="navigation__item active"><a href="index.html">Work</a></li>
<li class="navigation__item"><a href="about.html">About</a></li>
</ul>
</nav>
<section class="hero-image fixed-width" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="200">
<img class="hero-image__banner" src="assets/img/banner/riverfox/riverfox-cover.jpg" alt="Hero Banner" />
</section>
<section class="story fixed-width">
<div class="story-stats" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="200">
<ul class="icon-list">
<li class="icon-list__item">
<h3 class="icon-list__text">Category</h3>
<p class="icon-list__text">Brand</p>
</li>
<li class="icon-list__item">
<h3 class="icon-list__text">Client</h3>
<p class="icon-list__text">Riverfox</p>
</li>
<li class="icon-list__item">
<h3 class="icon-list__text">My Role</h3>
<p class="icon-list__text">Visual Designer</p>
</li>
</ul>
</div>
<div class="story-title" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="200">
<h2 class="story-title__title gradient-text">Riverfox</h2>
</div>
<div class="story-about" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="200">
<p class="story-about__body"><strong>Client: </strong>Riverfox is my own brand in which I carry out any work completed out of my full-time employment hours. It currently consists of work done for either my own personal gain, or at requests of friends/family. I aspire in future to possibly grow this brand and produce print work for a wider audience.</p>
</div>
</section>
<section class="story fixed-width">
<div class="project-image" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="200">
<img class="project-image__image--left" src="assets/img/banner/molliemap/moll.jpg" alt="Picture of dog" />
</div>
<div class="story-about project-about" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="200">
<p class="story-about__body">The name and branding of Riverfox comes from my dog and the time we spend together exploring. She’s a large part of my life and I wanted to include that in the branding without naming it after her completely. She’s a water dog and has the colourings of a fox, hence the name River Fox.</p>
<p class="story-about__body">That's her having a real good shake in the photo, all ginger and white, like the fox in the logo.</p>
</div>
</section>
<section class="hero-image fixed-width" data-aos="fade-in" data-aos-duration="1000">
<img class="hero-image__banner" src="assets/img/banner/riverfox/riverfox-zoom.jpg" alt="riverfox logo zoom" />
</section>
<section class="story fixed-width">
<div class="story-about" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="200">
<p class="story-about__body"><strong>Design Thinking: </strong>The design includes a fox in front of a river, the fox is looking in the direction of the river, representing the brand name, and the shape of the river flows right through into the shape of the fox’s nose. Mountains are included as a connotation to the exploring we do, and also where the source of many rivers are found. </p>
</div>
</section>
<section class="hero-image fixed-width" data-aos="fade-in" data-aos-duration="1000">
<img class="hero-image__banner" src="assets/img/banner/riverfox/text-logo.jpg" alt="Riverfox text logo" />
</section>
<section class="story fixed-width">
<div class="story-about" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="200">
<p class="story-about__body"><strong>Design Thinking: </strong>The brand name has also been stylised, so that it can stand alone as its own identity in spaces that are either too small, or not suitable for the size/colour of the full logo design. The fox is the main focal point of the full colour logo, and therefore it should also be the main focal point of the written brand. This is achieved by the ‘X’ in fox being placed behind the ‘O’ to create a top and tail, making it stand out. The fox has also had faux bold applied to the font to increase its impact.</p>
</div>
</section>
<section class="hero-image fixed-width" data-aos="fade-in" data-aos-duration="1000">
<img class="hero-image__banner" src="assets/img/banner/riverfox/colour-palette.jpg" alt="Riverfox Colour Palette" />
</section>
<section class="story fixed-width">
<div class="story-about" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="200">
<p class="story-about__body"><strong>Design Thinking: </strong>The colour palette is as expected to reinforce the suggestions of mountains, water and the colourings of a fox. Shadows have been used to add depth. Below are a few iterations, from the start before colour was added, where shapes were perfected, and also a few elements removed. I found the sun added too much distraction, and was too similar to the fox. The design has been kept clean by sticking to three contrasting colours.</p>
</div>
</section>
<section class="hero-image fixed-width" data-aos="fade-in" data-aos-duration="1000">
<img class="hero-image__banner" src="assets/img/banner/riverfox/iterations.jpg" alt="Riverfox logo iterations" />
</section>
<section class="hero-image fixed-width" data-aos="fade-in" data-aos-duration="1000">
<img class="hero-image__banner" src="assets/img/banner/riverfox/business-card.jpg" alt="Riverfox logo iterations" />
</section>
<footer>
<p class="footer__content">Copyright © 2019 Leah Smith.</p>
<a href="mailto:leahsmith1104@gmail.com" class="footer__links"><i class="far fa-envelope"></i></a>
<a href="https://www.linkedin.com/in/leahsmith1104/" target="_blank" class="footer__links"><i class="fab fa-linkedin"></i></a>
<a href="https://www.instagram.com/leahsmith1104/" target="_blank" class="footer__links"><i class="fab fa-instagram"></i></a>
</footer>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>