-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweb.html
342 lines (299 loc) · 15.7 KB
/
web.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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
---
layout: layout.liquid
title: Web design work
description: My experience with UI and how I can help you!
eleventyNavigation:
key: Web
---
<style>
.--cp svg {
display: inline-block;
vertical-align: top;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
width: 21px;
}
.--cp svg circle {
opacity: 0;
-webkit-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.--cp a:hover circle,
.--cp a:active circle,
.--cp a:focus circle {
opacity: 1;
}
.--cp a:hover svg,
.--cp a:active svg,
.--cp a:focus svg {
-webkit-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.site-attribution p a:hover,
.site-attribution p a:active,
.site-attribution p a:focus {
color: #fff;
}
.--cp a:hover path,
.--cp a:active path,
.--cp a:focus path {
fill: #F04E38;
}
.--cp svg path {
fill: rgba(255, 255, 255, 0.6);
-webkit-transition: fill 0.25s;
-o-transition: fill 0.25s;
transition: fill 0.25s;
}
.screen-reader-text, .sr-only {
clip: rect(1px,1px,1px,1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
</style>
<section class="hero">
<h1>Web</h1>
<p>Here's a bundle of sites I worked on that are still live. I helped these orgs express their brand and message on the medium of the web.</p>
</section>
<section>
<h2>Red Hat projects</h2>
<p>I worked closely with content strategists and collaborated with a larger UX team on these projects.</p>
<p><em>Timeline: about 2 quarters. Design tool: figma. CMS: drupal</em></p>
</section>
<section class="--bg_rh theme--dark stretch">
<picture class="full">
<source srcset="/img/ui/rh-hp-1.webp" type="image/webp" >
<source srcset="/img/ui/rh-hp-1.jpg" type="image/jpg" >
<img src="/img/ui/rh-hp-1.jpg" width="800" height="713" alt="screenshot of a portion of the Red Hat homepage that shows 3 cards about their platform products." />
</picture>
<p>UX lead for redesign of the product band on the Red Hat homepage. </p>
<p>
<a target="blank" href="https://www.redhat.com">redhat.com</a>
</p>
</section>
<section class="--bg_rh_2 theme--dark stretch">
<picture class="no-shadow">
<source srcset="/img/ui/rh-product-nav.webp" type="image/webp" >
<source srcset="/img/ui/rh-product-nav.png" type="image/png" >
<img src="/img/ui/rh-product-nav.png" width="800" height="713" alt="screenshots of before and after of a dropdown menu" />
</picture>
<p>UX lead for redesign of the product nav dropdown. <em>This was a reaction to low engagement to the 50 products that used to be featured here. Thew new version directs folks to the "All products page" instead. It's touted as a success in simplifying.</em></p>
<p>
<a target="blank" href="https://www.redhat.com">redhat.com</a>
</p>
</section>
<section class="--bg_rh theme--dark stretch">
<picture class="full">
<source srcset="/img/ui/rh-resources.webp" type="image/webp" >
<source srcset="/img/ui/rh-resources.jpg" type="image/jpg" >
<img src="/img/ui/rh-resources.jpg" width="800" height="713" alt="screenshot from an example resource page, featuring a download PDF link, table of contents on the left, and highlight card on the right." />
</picture>
<p>UX lead for redesign of the Red Hat's resource page templates. <em>New features: table of contents, breadcrumbs, clickable footnote, ability for content to break out of main container, 4 sidebar card options, consistency to hundreds of collateral material, and SEO value to previously PDF-only content.</em></p>
<p>
<a target="blank" href="https://www.redhat.com/en/resources/">See an example</a>
</p>
</div>
</section>
<section>
<h2>Sites for small, local orgs</h2>
<p>Designed and built directly with clients as a side-gig.</p>
<p><em>Timeline: 2 months. Design tool: Pen pot, figma, adobe xd. CMS: wordpress, squarespace</em></p>
</section>
<section class="--bg_dc stretch">
<picture class="full">
<!-- <source srcset="/img/ui/ucu-site.webp" type="image/webp" > -->
<source srcset="/img/ui/ucu-site.jpg" type="image/jpg" >
<img src="/img/ui/ucu-site.jpg" width="800" height="713" alt="screenshot of the homepage with an image of a lively crowd of a harvest festival on the churchs front and side lawns. The main text reads - Join us Sunday mornings at 10, We’re in the Underhill Flats, off Rt. 15. 7 Park St, Underhill, VT 05489." />
</picture>
<p>New logo and site for United Church of Underhill.</p>
<p>
<a target="blank" href="https://www.unitedchurchofunderhill.com/">Live site</a>
</p>
</section>
<section class="--bg_harvest-crossing stretch">
<picture class="full">
<source srcset="/img/ui/harvest-site.webp" type="image/webp" >
<source srcset="/img/ui/harvest-site.jpg" type="image/jpg" >
<img src="/img/ui/harvest-site.jpg" width="800" height="713" alt="screenshot of the homepage with an image of a happy family on a porch. the main text reads - A vision for new homeownership & space in Underhill " />
</picture>
<p>Brand and site for affordable homes and community space in Underhill, VT</p>
<p>
<a target="blank" href="https://www.harvestcrossing.org">Live site</a>
</p>
</section>
<section class="--bg_ginger-woodworks stretch">
<picture class="full">
<source srcset="/img/ui/ginger-site.webp" type="image/webp" >
<source srcset="/img/ui/ginger-site.jpg" type="image/jpg" >
<img src="/img/ui/ginger-site.jpg" width="800" height="713" alt="logo" />
</picture>
<p>Brand and site for woodworking business in Upstate NY offering custom furniture, crafts and classes. Site features: ecommerce.</p>
<p>
<a target="blank" href="https://www.gingerwood.works/">Live site</a>
</p>
</section>
<section class="--bg_capital --cp stretch">
<picture class="full">
<source srcset="/img/ui/capital-site.webp" type="image/webp" >
<source srcset="/img/ui/capital-site.jpg" type="image/jpg" >
<img src="/img/ui/capital-site.jpg" width="800" height="713" alt="site" />
</picture>
<p>Dispensary in Western Mass. Together with
<a href="https://cannaplanners.com/" target="_blank"><span class="sr-only">CannaPlanners</span><svg class="cp-footer-logo" xmlns="http://www.w3.org/2000/svg" width="31" height="32" viewBox="0 0 31 32">
<g fill="none" fill-rule="evenodd" transform="translate(0 .309)">
<circle class="cp-footer-logo-background" cx="16" cy="16" r="10" fill="#FFF"></circle>
<path class="cp-footer-logo-flower" fill="#F04E38" d="M16.076 31h-1.128a2.622 2.622 0 01-1.601-1.064l-1.421-2.018a2.65 2.65 0 00-2.637-1.082l-2.428.438a2.649 2.649 0 01-3.08-3.06l.423-2.43a2.648 2.648 0 00-1.099-2.63l-2.027-1.407A2.62 2.62 0 010 16.136v-1.129a2.622 2.622 0 011.064-1.601l2.018-1.42A2.648 2.648 0 004.164 9.35L3.726 6.92a2.648 2.648 0 013.058-3.08l2.433.423a2.646 2.646 0 002.628-1.099l1.408-2.028A2.63 2.63 0 0115.391 0h.076a2.629 2.629 0 012.127 1.123l1.42 2.02a2.65 2.65 0 002.636 1.08l2.429-.437a2.648 2.648 0 013.08 3.059l-.424 2.432a2.65 2.65 0 001.1 2.629l2.028 1.407a2.647 2.647 0 01.013 4.34l-2.018 1.421a2.65 2.65 0 00-1.082 2.636l.438 2.43a2.647 2.647 0 01-3.059 3.078l-2.432-.422a2.65 2.65 0 00-2.629 1.099l-1.408 2.027A2.62 2.62 0 0116.076 31zm2.528-14.232l5.395-1.376-5.437-1.202 2.05-3.975-3.903 2.181-1.377-5.395-1.202 5.437-4.075-2.167 2.281 4.02-5.396 1.377 5.438 1.202-2.075 3.963 3.928-2.169 1.377 5.395 1.202-5.437 3.99 2.12-2.196-3.974z"></path>
</g>
</svg></a>
</p>
<p>
<a target="blank" href="https://capital-cannabis.co/">Live site</a>
</p>
</section>
<section class="--bg_ccs theme--dark stretch">
<picture class="full">
<source srcset="/img/ui/ccs-site.webp" type="image/webp" >
<source srcset="/img/ui/ccs-site.jpg" type="image/jpg" >
<img src="/img/ui/ccs-site.jpg" width="800" height="713" alt="logo" />
</picture>
<p>Launched 10 years ago and still going strong. What started as the side-project of a cabinetmaker turned into a full-time gig when the site produced steady work. Site features: highly iterated form intake process.</p>
<p>
<a target="blank" href="https://creativecarvedsigns.com">Live site</a>
</p>
</section>
<section>
<h2>Sites for contractors</h2>
<p>I was the first designer for an agency dedicated to medium-sized contracting businesses. Each site had a similar organization, yet allowed for a surprising amount of customization. This was our edge. I was able to get my more bespoke ideas accepted by developers by sharing a prepared plan for building it early on.</p>
<p><em>Timeline: 2 weeks. Design tool: adobe XD. CMS: ModX</em></p>
</section>
<section class="--bg_charter stretch">
<picture class="full">
<source srcset="/img/ui/charter-site.webp" type="image/webp" >
<source srcset="/img/ui/charter-site.jpg" type="image/jpg" >
<img src="/img/ui/charter-site.jpg" width="800" height="713" alt="" />
</picture>
<p>Charter invested in branding and it shows. Commitment to the direction of the brand is what makes this site successful. Our story was anchored in a nautical theme, and we used supporting metaphors and imagery.</p>
<p>
<a target="blank" href="https://www.callcharter.com/">Live site</a>
</p>
</section>
<section class="--bg_dehart stretch">
<picture class="full">
<!-- <source srcset="/img/ui/dehart-site.webp" type="image/webp" > -->
<source srcset="/img/ui/dehart-site.jpg" type="image/jpg" >
<img src="/img/ui/dehart-site.jpg" width="800" height="713" alt="" />
</picture>
<p>The challenge: design a site with a heart logo without feeling "soft." The solution was to lean into the red color through a dark-mode lens. Going light with red gets you pink. The resulting palette was a variety of greys with a red highlight. The darkness and angles bring a sturdiness to the site.</p>
<p>
<a target="blank" href="https://www.dehartinc.com/">Live site</a>
</p>
</section>
<section class="--bg_mesaba stretch">
<picture class="full">
<!-- <source srcset="/img/ui/mesaba-site.webp" type="image/webp" > -->
<source srcset="/img/ui/mesaba-site.jpg" type="image/jpg" >
<img src="/img/ui/mesaba-site.jpg" width="800" height="713" alt="" />
</picture>
<p>The Iron Range mountains were an important to the client. I introduced a new typographic element as well as local imagery to speak to that. I expanded the capabilities of their once text-only brand.</p>
<p>
<a target="blank" href="https://www.mesabaheating.com">Live site</a>
</p>
</section>
<section class="--bg_neyer theme--dark stretch">
<picture class="no-shadow">
<!-- <source srcset="/img/ui/neyer-site.webp" type="image/webp" > -->
<source srcset="/img/ui/neyer-site.jpg" type="image/jpg" >
<img src="/img/ui/neyer-site.jpg" width="800" height="600" alt="" />
</picture>
<p>Professional photographs wildly elevate the site’s impact. The color repetition, angle, and video in the hero are the icing on the cake.</p>
<p>
<a target="blank" href="https://www.neyerplumbing.com/">Live site</a>
</p>
</section>
<section class="--bg_natals theme--dark stretch">
<picture class="full">
<source srcset="/img/ui/natals-site.webp" type="image/webp" >
<source srcset="/img/ui/natals-site.jpg" type="image/jpg" >
<img src="/img/ui/natals-site.jpg" width="800" height="713" alt="" />
</picture>
<p>One constraint at the agency was solely using google fonts. Here, I sneak in a graphic of script font that aligns with their logo. Additional items I contributed to the brand were the shield icon, sparkle-stars, sunburst, and stripes.</p>
<p>
<a target="blank" href="https://www.natalsairconditioning.com">Live site</a>
</p>
</section>
<section class="--bg_saddleback theme--dark stretch">
<picture class="full">
<source srcset="/img/ui/saddleback-site.webp" type="image/webp" >
<source srcset="/img/ui/saddleback-site.jpg" type="image/jpg" >
<img src="/img/ui/saddleback-site.jpg" width="800" height="713" alt="" />
</picture>
<p>We don’t see many serif fonts in this industry, so this was a bit of a novelty. View the site to see animations like the truck, text, and flag sliding in.</p>
<p>
<a target="blank" href="https://www.saddlebackplumbing.com/">Live site</a>
</p>
</section>
<section class="--bg_dc stretch">
<picture class="full">
<source srcset="/img/ui/dc-site.webp" type="image/webp" >
<source srcset="/img/ui/dc-site.jpg" type="image/jpg" >
<img src="/img/ui/dc-site.jpg" width="800" height="713" alt="" />
</picture>
<p>This was an instance of designing a style guide and website from only photos of trucks. So I matched the colors, redrew the graphics, and added new supporting elements. Marketing strategy including copy-writing was a part of the job too. Questions would come up such as deciding what actually sets this company apart. Strategy is sometimes storytelling.</p>
<p>
<a target="blank" href="https://www.cheeksac.com/">Live site</a>
</p>
</section>
<section class="--bg_thayer theme--dark stretch">
<picture class="no-shadow">
<!-- <source srcset="/img//ui/thayer-site.webp" type="image/webp" > -->
<source srcset="/img//ui/thayer-collage.png" type="image/png" >
<img src="/img/ui/thayer-collage.png" width="800" height="600" alt="" />
</picture>
<p>Great branding is not just a logo, but a toolbox of aligned design elements. This client came to us with a heavy toolbox. We employed these themes: wavy-line separators, sunbursts, subtle textures, a mascot in color and monotone, and a cursive font.</p>
<p>
<a target="blank" href="https://www.thayerac.com">Live site</a>
</p>
</section>
<section class="--bg_altoff stretch">
<picture class="full">
<source srcset="/img/ui/altoff-site.webp" type="image/webp" >
<source srcset="/img/ui/altoff-site.jpg" type="image/jpg" >
<img src="/img/ui/altoff-site.jpg" width="800" height="713" alt="" />
</picture>
<p>This commercial client was treated differently than our more common residential owners. We limited content on the homepage, focused more on imagery, and focused the strategy more on case-studies.</p>
<p>
<a target="blank" href="https://www.althoffindcommercial.com/">Live site</a>
</p>
</section>
<section class="--bg_crown stretch">
<picture class="full">
<!-- <source srcset="/img/ui/crown-site.webp" type="image/webp" > -->
<source srcset="/img/ui/crown-collage.png" type="image/png" >
<img src="/img/ui/crown-collage.png" width="800" height="600" alt="" />
</picture>
<p>I added depth to this italicized Helvetica logo through stock photos, background patterns, a welcoming palette, and bright button colors.</p>
<p>
<a target="blank" href="https://www.crowngroupohio.com/">Live site</a>
</p>
</section>
<section class="cta ">
<p>Good on ya for making it all the way down here. Send me a note if you'd like a site, or check out the <a href="/one-week-logo">branding</a> and <a href="/research">research</a> examples.</p>
</section>