-
Notifications
You must be signed in to change notification settings - Fork 0
/
nylon.html
152 lines (130 loc) · 5.53 KB
/
nylon.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
<!doctype html>
<!--
¸.·´¯`·.´¯`·.¸¸.·´¯`·.¸><(((º>
See something *fishy*?
Drop us a line or just say hi: hello@yupgup.com
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>StepZen - YupGup</title>
<meta name="description" content="Design and development for StepZen">
<meta name="author" content="YupGup, LLC">
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="yupgup.css">
</head>
<body class="caseStudyPage">
<a
href="/"
class="topHat"><span>Surf over to <strong>YupGup.com</strong></span></a>
<main class="siteMain">
<header class="block caseStudyHeader transition--after">
<div class="container">
<h1>Nylon Technology</h1>
<p class="lead">A fresh new look for a long-lived agency.</p>
<time class="caseStudy-date">2023</time>
</div>
</header>
<div class="block">
<div class="container">
<p>The main challenge of this project was speaking to several audiences at once and not drowning out their client work with a loud visual design.</p>
</diV>
</div>
<section class="workDisplay">
<div class="container">
<img src="img/work/nylon-hero.png" alt="Homepage preview for Nylon Technology" />
</div>
</section>
<section class="workDisplay">
<div class="container">
<img src="img/work/nylon-colors.png" alt="Color palette preview for Nylon Technology with greens and blues" />
</div>
</section>
<section class="workDisplay">
<div class="container">
<img src="img/work/nylon-icons.png" alt="Preview of custom lined icons for Nylon" />
</div>
</section>
<div class="block">
<div class="container">
<p>
The kind folks at <a href="https://www.nylontechnology.com">Nylon Technology</a>, a group of experienced software developers, came to us needing a new portfolio. Their previous site felt dated and didn’t properly speak to their services and value. The team also had decades worth of impressive work that no one knew about due to the absence of case studies and visuals.
</p>
<p>
We worked with the team to define their purpose, vision, values, and voice. From there their target audience and brand personality became more clear, leading the way for an impactful visual identity and meaningful, clear copy. They needed a site that had a technical yet approachable feel without relying on trends or flashy graphics. Their clients are large financial and banking firms looking for a trustworthy, experienced development partner.
</p>
<p>Our discovery process gave way to a new, modern marketing site to better meet their sales and outreach goals. The site was custom built using Bootstrap.</p>
</div>
</div>
<section class="workDisplay">
<div class="container">
<img src="img/work/nylon-share.png" alt="Social graphic preview with text logo and custom lined icons" />
</section>
<section class="workDisplay workDisplay--list">
<div class="container">
<div class="img">
<img src="img/work/nylon-project1.png" alt="Abstract outlined cubes with white lines and gradients" />
</div>
<div class="img">
<img src="img/work/nylon-project2.png" alt="Abstract outlined cubes with white lines and gradients" />
</div>
<div class="img">
<img src="img/work/nylon-project3.png" alt="Abstract outlined cubes with white lines and gradients" />
</div>
</div>
</section>
<section class="block">
<div class="container">
<h2>Requirements</h2>
<ul class="gridList">
<li>Illustrations</li>
<li>Technical feel</li>
<li>Iconography</li>
<li>Brand identity</li>
<li>Development</li>
<li>Copywriting</li>
</ul>
</div>
</section>
<nav class="container projectNav">
<a
href="djangocon23.html"
class="projectNavLink">
<span class="projectNavLink-label">Previous Project</span>
<span class="projectNavLink-projectName">DjangoCon 2023</span>
</a>
<a
href="moonhighway.html"
class="projectNavLink">
<span class="projectNavLink-label">Next Project</span>
<span class="projectNavLink-projectName">Moon Highway</span>
</a>
</nav>
</main>
<footer class="siteFooter block transition--before contact" id="contact">
<div class="container">
<h2 class="block-heading">
You Ready?<br />Let’s Make a Splash.
</h2>
<nav class="contactNav">
<a
href="mailto:hello@yupgup.com"
class="btn">Email Us</a>
</nav>
<nav class="socialNav">
<a class="twitter" href="https://mastodon.yupgup.com/@guppy" target="_blank"><svg class="socialIcon"><title>Mastodon</title><use xlink:href="img/icons.svg#mastodon-icon"></use></svg></a>
<a class="twitter" href="https://dribbble.com/jonitrythall" target="_blank"><svg class="socialIcon"><title>Dribbble</title><use xlink:href="img/icons.svg#dribbble-icon"></use></svg></a>
<a class="vimeo" href="https://vimeo.com/user84489777" target="_blank"><svg class="socialIcon"><title>Vimeo</title><use xlink:href="img/icons.svg#vimeo-icon"></use></svg></a>
<a class="vimeo" href="https://medium.com/@helloyupgup" target="_blank"><svg class="socialIcon"><title>Medium</title><use xlink:href="img/icons.svg#medium-icon"></use></svg></a>
</nav>
<p>
<small>
© 2023 <strong>YupGup LLC.</strong> We think you’re pretty awesome.
</small>
</p>
</div>
</footer>
</body>
</html>