-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdesign.html
executable file
·312 lines (233 loc) · 12.9 KB
/
design.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
<!DOCTYPE html>
<html>
<head>
<title>Brian E. Davis ٩͡[๏̯͡๏]</title>
<meta charset="utf-8" />
<meta name="description" content="Portfolio and professional pages of Brian E. Davis, a Web developer, visual materials archivist, and a digitization sepecialist." />
<meta name="keywords" content="web, graphic, designer, html, xhtml, css" />
<meta name="robots" content="all, index, follow" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/style.css" media="all" />
<link rel="stylesheet" href="css/print.css" media="print" />
<link rel="stylesheet" href="nav/css/nav.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="../nav/css/ie.css">
<link rel="stylesheet" href="../nav/css/ie7.css">
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a#example1").fancybox();
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a[rel=group1]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
$("a[rel=group2]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
$("a[rel=group3]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
$("a[rel=group4]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
$("a[rel=group5]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
$("a[rel=group6]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
$("a[rel=group7]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
$("a[rel=group8]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
<style type="text/css">
<!--
.style8 {font-weight: bold; font-size: 9pt;}
body {
background-color: #999999;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>
<div id="page">
<header>
<div id="logo"></div>
<script>
var el = document.getElementsByTagName("body")[0];
el.className = "";
</script>
<noscript>
<!--[if IE]>
<link rel="stylesheet" href="nav/css/ie.css">
<![endif]-->
</noscript>
<nav id="topNav">
<ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="video.html" title="Video Production">Video</a></li>
<li><a href="webdev.html" title="Web / iOS Development">Web / iOS</a></li>
<li><a href="design.html" title="Design">Design</a></li>
</ul>
</nav>
<script src="nav/js/modernizr.js"></script>
</header>
<section id="main2">
<!-- row 1 -->
<section id="HPUL_d1" class="portfolio-project">
<h3>High Point University Libraries: Identity Marks</h3>
<img src="images/design/d7.jpg" width="420" height="280" alt="High Point University Libraries: iOS App" />
<ul>
<p>Part of my duties at HPU Libraries is to redesign the graphic look of the library's website. The first library logo is a stylized portico graphic and is representational of the entry way of the Smith Library. Although the graphic has been replaced by a new HPU Libraries logo, the portico graphic is still being used as a favicon on the library's website.<br>
<br>
<span class="style8">Spotlight Gallery:</span>
<a class="grouped_elements" rel="group1" href="images/design/7/1.jpg" title="2010 Design"><span class="style8">Image 1</span></a> <a class="grouped_elements" rel="group1" href="images/design/7/2.jpg" title="2009 Design"><span class="style8">Image 2</span></a></p>
<p>Software: Illustrator &Photoshop</p>
</ul>
<p class="note">High Point University Libraries (2009-2010)<br>
</p>
</section>
<section id="ASU_d1" class="portfolio-project">
<h3>ASU Polytechnic: Student Union Banners</h3>
<img src="images/design/d1.jpg" width="420" height="280" alt="HPU Libraries Website" />
<ul>
<p>In 2004, while completing my Master's in Graphic Information Technology, I was asked to design a series of banners for the new Student Union building on Arizona State University's Polytechnic campus. Thematically, the banners were designed around a series of representational words that described what goes on within the student union.<br>
<br>
<span class="style8">Spotlight Gallery:</span>
<a class="grouped_elements" rel="group2" href="images/design/1/1.jpg" title="Approved Banners"><span class="style8">Image 1</span></a> <a class="grouped_elements" rel="group2" href="images/design/1/2.jpg" title="Banners Installed"><span class="style8">Image 2</span></a></p>
<p>Software: Illustrator & Photoshop<br>
</p>
</ul>
<p class="note">Arizona State University Polytechnic (2004)<br>
</p>
</section>
<!-- row 2 -->
<section id="Nye" class="portfolio-project">
<h3>Edith Kruger Nye: Identity Marks</h3>
<img src="images/design/d2.jpg" width="420" height="280" alt="Arrival Video" />
<ul>
<p>In 2004, I was asked to design promotional materials for local artist Edith Krueger-Nye. Ms. Krueger-Nye worked primarily as a photographer and wanted her lens-based approach to her art reflected in the graphics. A native of Germany, Ms Krueger-Nye's name originally featured the German umlaut. To both celebrate her nationality and to add visual interest, I recommended the bringing back the umlaut for these materials. The materials included two individual identity marks, postcards, business cards, and an exhibition brochure.<br>
<br>
<span class="style8">Spotlight Gallery:</span>
<a class="grouped_elements" rel="group3" href="images/design/2/1.jpg" title="Design 1"><span class="style8">Image 1</span></a> <a class="grouped_elements" rel="group3" href="images/design/2/2.jpg" title="Design 2"><span class="style8">Image 2</span></a> <a class="grouped_elements" rel="group3" href="images/design/2/3.jpg" title="Business Card Design"><span class="style8">Image 3</span></a></p>
<p>Software: Illustrator, InDesign, & Photoshop</p>
</ul>
<p class="note">tvc15Media (2004)<br>
</p>
</section>
<section id="AW" class="portfolio-project">
<h3>Ashlee Weitlauf: Exhibition Poster</h3>
<img src="images/design/d5.jpg" width="420" height="280" alt="Duke Digital Collections Intro" />
<ul>
<p>This exhibition poster was designed for artist Ashlee Weitlauf in 2004. The series of prints depicted in the poster were assembled using Ashlee's original digital images (the actual portfolio of eight prints was produced using a combination of photo lithography and letterpress printing). I digitally recreated the prints to look as though they were hanging on a studio drying line.<br>
<br>
<span class="style8">Spotlight Gallery:</span>
<a class="grouped_elements" rel="group4" href="images/design/5/1.jpg" title="Exhibition Poster"><span class="style8">Image 1</span></a></p>
<p>Software: InDesign, Illustrator, & Photoshop</p>
</ul>
<p class="note">tvc15Media (2004)<br>
</p>
</section>
<!-- row 3 -->
<section id="tvc15Media" class="portfolio-project">
<h3>tvc15Media: Identity Mark</h3>
<img src="images/design/d6.jpg" width="420" height="280" alt="Chroma Key Demo" />
<ul>
<p>I began designing websites in 1999 under the name of tvc15design using this stylized television graphic as my identity mark. Some people have said that it reminds them of the Tivo logo, to which I point out came well after I designed this one. Since I'm no longer doing websites or designing outside of my library job, I've put this graphic into semi-retirement with its only use being on my iTunes channel.<br>
<br>
<span class="style8">Spotlight Gallery:</span>
<a class="grouped_elements" rel="group5" href="images/design/6/1.jpg" title="Final Design"><span class="style8">Image 1</span></a></p>
<p>Software: Illustrator</p>
</ul>
<p class="note">tvc15Media (1999)</p>
</section>
<section id="AAO" class="portfolio-project"><h3>Arizona Archives Online: Identity Mark</h3>
<img src="images/design/d4.jpg" width="420" height="280" alt="Library Tutorial" />
<ul>
<p>In 2006, I was asked to design an identity mark for <a href="http://www.azarchivesonline.org" target="_blank">Arizona Archives Online</a>, a consortium of archival institutions including Arizona State University, Northern Arizona University, and the University of Arizona. I designed a series of five graphics with the final design being Image 2 below. I preferred the graphic in Image 1, of which there could be variations based on color preference.<br>
<br>
<span class="style8">Spotlight Gallery:</span>
<a class="grouped_elements" rel="group6" href="images/design/4/1.jpg" title="Design 1"><span class="style8">Image 1</span></a> <a class="grouped_elements" rel="group6" href="images/design/4/2.jpg" title="Approved Design"><span class="style8">Image 2</span></a></p>
<p>Software: Illustrator & Photoshop</p>
</ul>
<p class="note">tvc15Media (2006)</p>
</section>
<!-- row 4 -->
</section>
<div class="clear"></div>
</div>
<footer>
<div class="c1"><small id="copyright"><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /></small></div><br><br>
</footer>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5986504-7']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>