-
Notifications
You must be signed in to change notification settings - Fork 0
/
website-redesign.html
181 lines (178 loc) · 9.52 KB
/
website-redesign.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1">
<title>Oregon Wildlife Website Redesign | Benjamin Woodruff</title>
<!-- Save for later: <meta description="Visual-only website prototyping and redesign of WSUV Student Benjamin Woodruff"> -->
<link rel="icon" href="img/profile-icon.png" />
<link type="text/css" rel="stylesheet" href="styles.css" />
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:700|Proza+Libre" rel="stylesheet">
<style>
/* These are necessary to override the white font-color when hovering */
nav li a:link, nav li a:visited {
color: white;
}
nav li a:hover, nav li a:focus {
color: gray;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper" style="background-image: url(img/acacia-tree-safari-background.jpg)">
<header>
<div id="header-nav-wrapper">
<a href="#footer-nav">
<div id="menu-button" class="floatright">
<img src="img/menu-button.png" alt="menu button">
</div>
<!-- end menu-button -->
</a>
<nav class="clear floatright">
<ul>
<li><a href="index.html">User Experience</a></li>
<li><a href="front-end-web.html">Front End Web</a></li>
<li><a href="digital-content.html">Digital Content</a></li>
<li><a href="mailto:ben.woodruff(at)wsu.edu">Contact</a></li>
<li><a href="biography.html">About</a></li>
</ul>
</nav>
<!-- end header-nav-wrapper -->
</div>
<div id="intro" style="background-color: rgba(250,250,250,0.75)">
<h1><a href="#content-wrapper">Oregon Wildlife Safari</a></h1>
<p class="introText">Hello, I'm Benjamin Woodruff, thanks for taking a closer look at my work. Below you will find the content and details about this project. Please feel free to visit my About page or send me an email via the Contact nav button. Have a great day! </p>
<!-- end intro -->
</div>
<div id="down-arrow">
<a href="#content">
<img src="img/down-arrow-white.png" alt="a white, downward facing arrow for navigational purposes">
</a>
<!-- end down-arrow -->
</div>
<!-- end header -->
</header>
<!-- end header-wrapper -->
</div>
<div id="content-wrapper">
<div id="content">
<div class="project-wrapper" style="background-color: #E3E2E5;">
<article class="project">
<h2><a href="https://invis.io/6W9GXSKBP#/207076012_Oregon_Safari_Desktop_Home_Page">Website Redesign</a></h2>
<p>The Oregon Wildlife Safari's website needed a bit of a refresh. I started out doing some wire-framing of their content with <a href="https://www.draw.io/" target="_blank">draw.io</a> in order to understand the current layout of existing elements. Then, using <a href="https://www.adobe.com/products/illustrator.html" target="_blank">Adobe Illustrator</a> and <a href="https://www.invisionapp.com/" target="_blank">the Invision web app</a>, I made an interactive prototype with an updated look and feel without removing any of the old elements. Now, the client may choose to allow me to take next steps in updating their site through hard-coding the changes or pass my work on to another developer to finish the job.</p>
<h3>Banner Ad</h3>
<div
class="featured-image"
style="min-height: 100%"
itemscope
itemtype="https://schema.org/ImageObject">
<img
src="img/website-prototype-banner-ad.png"
alt="a thumbnail image depicting a banner ad for the oregon wildlife website redesign project"
itemprop="encodesCreativeWork">
<div class="caption" itemprop="caption">
<h4>Some details about the above image (for <a href="Schema.org" target="_blank">microdata</a> purposes):</h4>
<ul>
<li itemprop="productionCompany"><strong>• Producer:</strong> Benjamin Woodruff.</li>
<li itemprop="contentSize"><strong>• Content Size:</strong> 157 KB.</li>
<li itemprop="encodingFormat"><strong>• Format:</strong> PNG.</li>
</ul>
<!-- end caption -->
</div>
<!-- end banner ad image -->
</div>
<p itemprop="text">The first iteration of expected outcomes for this project was to create a new logo, slogan, and banner ad. Rather than the cheetah running (potentially chasing down its lunch), I selected another well-known and well-loved animal from the site to place in the logo, which was the giraffe. I felt their focus on children would actually be best communicated by branding the site and the logo to young adult parents, and so I thought the white giraffe silhouette would go well with the more tribal looking typeface (family friendly, but still exciting enough for the parents to stay engaged). For the banner ad, I used the main carousel image from the redesigned home page prototype and coupled it with the logo to form a nice, web-friendly sized banner image (1000 x 124 pixels), which could be placed strategically across the web in order to drive traffic to their new site.</p>
<h3>Interactive Prototype</h3>
<div
class="featured-image"
itemscope
itemtype="https://schema.org/ImageObject">
<img
src="img/website-prototype-redesign.png"
alt="a thumbnail image depicting a website mockup for the oregon wildlife website redesign project"
itemprop="encodesCreativeWork"
itemscope
itemtype="https://schema.org/ImageObject">
<div class="caption" itemprop="caption">
<h4>Some details about the above image:</h4>
<ul>
<li itemprop="productionCompany"><strong>• Producer:</strong> Benjamin Woodruff.</li>
<li itemprop="contentSize"><strong>• Content Size:</strong> 1.5 MB.</li>
<li itemprop="encodingFormat"><strong>• Format:</strong> PNG.</li>
</ul>
<!-- end caption -->
</div>
<!-- end screenshot image -->
</div>
<p itemprop="text">The bulk of the work on this project was done in the Invision web app, which really helped to expedite the process of doing <a href="https://invis.io/6W9GXSKBP#/207076012_Oregon_Safari_Desktop_Home_Page" target="_blank">an interactive mockup</a>. I would've liked to try out <a href="https://www.adobe.com/products/experience-design.html" target="_blank">Adobe ExperienceDesign</a> (XD, which was in Beta and for Macs only at the time) for this project, but being without a Mac left me looking for other options, which was great because I was led to Invision instead. I appreciate the ability to make links (hotspots) into templates that I can apply quickly to many pages within the design. I also like being able to link the web app to my Dropbox account for quick and easy upload of assets.</p>
<h3>Branded Print Objects</h3>
<div
class="featured-image"
itemscope
itemtype="https://schema.org/ImageObject">
<img
src="img/print-compilation.png"
alt="a thumbnail image depicting a print materials compilation for the oregon wildlife website redesign project"
itemprop="encodesCreativeWork"
itemscope
itemtype="https://schema.org/ImageObject">
<div class="caption" itemprop="caption">
<h4>Some details about the above image:</h4>
<ul>
<li itemprop="productionCompany"><strong>• Producer:</strong> Benjamin Woodruff.</li>
<li itemprop="contentSize"><strong>• Content Size:</strong> 33 KB.</li>
<li itemprop="encodingFormat"><strong>• Format:</strong> PNG.</li>
</ul>
<!-- end caption -->
</div>
<!-- end screenshot image -->
</div>
<p itemprop="text">Another secondary aspect of this project was to do some print or stationary objects that would typically accompany a website redesign. These items include company branded letterhead, business envelopes, and business cards.</p>
<!-- Remove comment and add an iframe (screencast of the prototype in action) when project is completed... -->
<!-- end Oregon Wildlife project -->
</article>
<!-- end project-wrapper -->
</div>
<!-- end content -->
</div>
<!-- end content-wrapper -->
</div>
<div id="footer-wrapper">
<footer>
<div id="footer-nav">
<div class="dist">
<div id="footerTitle">
<a href="#wrapper">
<div id="footerMenuButton" class="floatright mobileOnly">
<img src="img/menu-button.png" alt="menu button">
</div>
</a>
<h2>Menu</h2>
</div>
<ul>
<li><a href="index.html">User Experience</a></li>
<li><a href="front-end-web.html">Front End Web</a></li>
<li><a href="digital-content.html">Digital Content</a></li>
<li><a href="mailto:ben.woodruff(at)wsu.edu">Contact</a></li>
<li><a href="biography.html">About</a></li>
</ul>
</div>
<div class="dist">
<h2>Thanks for Stopping by!</h2>
<ul>
<li>Hi, I'm Benjamin Woodruff and I'm glad you visited my portfolio website today. Please feel free to check out my About page or send me an email via the Contact link above if you would like to talk. Have a great day!</li>
<li class="noMobile"><a href="#wrapper">Click Here to Return to Top</a></li>
</ul>
</div>
<!-- end footer-nav -->
</div>
</footer>
<!-- end footer-wrapper -->
</div>
<!-- end wrapper -->
</div>
<!-- end body -->
</body>
<!-- end html -->
</html>