-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsubcode.html
More file actions
146 lines (114 loc) · 7.98 KB
/
Copy pathsubcode.html
File metadata and controls
146 lines (114 loc) · 7.98 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!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/subcode/subcode-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">Subcode</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">Subcode</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>Subcode are a software engineering consultancy providing IT contractors specialising in web application development and service oriented architecture. They were a new start up so had no previous branding therefore needed a logo for their website, and also business cards/letter headings.</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/subcode/idea-gen.jpg" alt="Subcode idea generation" />
</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>These are some of the initial thinkings sent to the client after discussing their requirements with them. The company name has connotations of the software development industry that they are in therefore this was conveyed in many of the ideas with the use of brackets.</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/subcode/idea-gen2.jpg" alt="Subcode idea generation" />
</section>
<section class="hero-image fixed-width" data-aos="fade-in" data-aos-duration="1000">
<img class="hero-image__banner" src="assets/img/banner/subcode/fonts.jpg" alt="Subcode idea generation fonts" />
</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>Feedback was received on idea generation, the idea that suited their needs most was the simplest idea; bold and simple that stood out and also works at small sizes. The next step was choosing the correct font. Here are some of the variations created.</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/subcode/fonts2.jpg" alt="Subcode idea generation fonts" />
</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>It was decided to stick with a condensed sans serif font, as it acted best as a cut out, it was bolder and it complimented the shape of the circle.</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/subcode/colour-green.jpg" alt="Subcode logo greens" />
</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 logo was trailed with a colour palette made from the colours in which the company suggested they’d liked to be associated with. I mocked up each logo on a light and dark background and as a transparent cut out or with a solid coloured text.</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/subcode/colour-teal.jpg" alt="Subcode logo teals" />
</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>Final Design: </strong>The final logo chosen was the darker teal, with the text forming a transparent cut out so that the background colour comes through. Below are some examples of it in use.</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/subcode/colour-palette.jpg" alt="Subcode colour palette" />
</section>
<section class="hero-image fixed-width" data-aos="fade-in" data-aos-duration="1000">
<img class="hero-image__banner" src="assets/img/banner/subcode/subcode-zoom.jpg" alt="Subcode logo zoom" />
</section>
<section class="hero-image fixed-width" data-aos="fade-in" data-aos-duration="1000">
<img class="hero-image__banner" src="assets/img/banner/subcode/business-card.jpg" alt="Subcode business card" />
</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>