-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (138 loc) · 6.59 KB
/
index.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1" />
<title>Benjamin Woodruff's UX Projects | Web Designer</title>
<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=Open+Sans:300,400,700" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="script.js"></script><!-- for the menu functionality -->
</head>
<body>
<header>
<div id="title-row">
<h1>
<a href="index.html">Benjamin Woodruff</a>
</h1>
<button id="menu">
☰<!-- hamburger icon -->
<span class="visually-hidden">Navigation Menu</span>
</button>
</div>
<nav id="nav" class="visually-hidden">
<div id="skills-nav-row">
<a id="ux" href="index.html" style="background-color: var(--dark-gray); color: white">User Experience</a>
<a id="web" href="web-design.html">Web Design</a>
<a id="con" href="digital-content.html">Digital Content</a>
</div>
<div id="pages-nav-row">
<a id="contact" href="mailto:[email protected]">Contact</a>
<a id="about" href="https://dtc-wsuv.org/bwoodruff16/resume/">About</a>
</div>
</nav>
<p>
A passionate Web Designer skilled in User Experience tasks like researching, planning, and testing for Websites, Apps, and VR, AR, and 3D Games.
</p>
</header><!-- end header -->
<section id="content">
<article id="unfolding" class="project">
<h2>
<a href="unfolding.html">Unfolding AR Game and Website</br>UX and Usability Testing</a>
</h2>
<div class="featured-image">
<a href="unfolding.html">
<img src="img/unfolding-ar-game.png" alt="a thumbnail image depicting the user experience work I did for The Historic Trust's augmented reality game design project">
</a>
</div>
<p>
An Augmented Reality game created from scratch by the Senior Seminar class of the Creative Media and Digital Culture Program here at WSUV for <a href="https://thehistorictrust.org/" target="_blank">The Historic Trust 🗗</a>. The game features a historic focus that highlights the amazing growth and development of Vancouver, WA.
</p>
</article><!-- end project -->
<!-- save until dedicated All the Delicate Duplicates page can be created
<article id="game-testing" class="project">
<h2>
<a href="game-testing.html">All the Delicate Duplicates Game Testing</a>
</h2>
<div class="featured-image">
<a href="game-testing.html">
<img src="img/game-testing-ux.png" alt="a thumbnail image depicting the new field of work arising out of the combination of traditional game testing and user experience evaluation">
</a>
</div>
<p>
An award winning, immersive, third-person perspective, non-linear, time-traveling, mystery game created by Mez Breeze and Andy Campbell.
</p>
</article><!- end project -->
<article id="interactive-hi-fi-redesign" class="project">
<h2>
<a href="interactive-hi-fi-redesign.html">Oregon Wildlife Refuge </br>High-fidelity Website Redesign</a>
</h2>
<div class="featured-image">
<a href="interactive-hi-fi-redesign.html">
<img src="img/ai-plus-in.png" alt="a thumbnail image depicting a giraffe standing next to giant letters spelling oregon wildlife safari, drive to adventure">
</a>
</div>
<p>
An interactive prototype created for <a href="https://wildlifesafari.net/" target="_blank">Oregon Wildlife Safari 🗗</a> with assets made in Illustrator and imported to InVision, which includes full menu, slider, and link/button functionality.
</p>
</article><!-- end project -->
<!-- save till a dedicated tate project page can be created
<article id="tate-app" class="project">
<h2>
<a href="tate-app.html">Tate App Design</a>
</h2>
<div class="featured-image">
<a href="tate-app.html">
<img src="img/tate-cumulative-project-01.png" alt="a thumbnail image depicting the cumulative total of my work in the tate gallery project">
</a>
</div>
<p>
A high-fidelity concept design and animated prototype for a hypothetical Tate US iPhone app.
</p>
</article><!- end project -->
<article id="lings-cars" class="project">
<h2>
<a href="lings-lo-fi-redesign.html">Ling's Cars Website </br>UX Evaluation and Redesign</a>
</h2>
<div class="featured-image" style="min-height: 100%">
<a href="lings-lo-fi-redesign.html">
<img src="img/lings-wireframe-desktop-page1.png" alt="an image showing a low fidelity wire-frame of Ling's desktop website">
</a>
</div>
<p>
A low-fidelity mock up including Information Architecture for redesigning the <a href="https://www.lingscars.com/" target="_blank">Ling's Cars 🗗</a> business website from the ground up.
</p>
</article><!-- end project -->
<article id="perpetual-nomads" class="project">
<h2>
<a href="perpetual-nomads.html">Perpetual Nomads VR Game </br>UX Evaluation</a>
</h2>
<div class="featured-image">
<a href="perpetual-nomads.html">
<img src="img/perpetual-nomads.jpg" alt="an image depicting the starting scene of the perpetual nomads game, which is a scene in the dessert with a broken down car">
</a>
</div>
<p>
A Virtual Reality Experience that is the latest installment of the interactive fiction series <a href="https://inanimatealice.com/" target="_blank">Inanimate Alice 🗗</a>, which is geared towards a female teen audience and seeks to increase awareness of and desire for STEM-related careers.
</p>
</article>
</section><!-- end content -->
<footer>
<h2>Thanks for Stopping by!</h2>
<div id="footer-row">
<a id="copyright" href="https://dtc-wsuv.org/bwoodruff16/resume/">
© <script type="text/javascript">document.write(new Date().getFullYear());</script> by Benjamin Woodruff
</a>
<a id="return-to-top" href="#">Return to Top</a>
<!-- save this till theres time to find a twitter one and add styles
<div id="social">
<a href="" target="_blank"><i class="fa"></i></a><!- linkedin ->
<a href="" target="_blank"><i class="fa"></i></a><!- vimeo ->
<a href="" target="_blank"><i class="fa"></i></a><!- twitter ->
</div> -->
<a id="resume" href="https://drive.google.com/file/d/13LzKTYmMtf4GRQLwIFynXDWhD2UOBmQQ/view?usp=sharing">PDF Resumé</a>
</div>
</footer><!-- end footer -->
</body><!-- end body -->
</html><!-- end html -->