-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathacodd.html
More file actions
409 lines (382 loc) · 19.2 KB
/
acodd.html
File metadata and controls
409 lines (382 loc) · 19.2 KB
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
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<!DOCTYPE html>
<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">
<meta name="description" content="Portfolio piece to showcase the User Exerience and User Interface design of acodd.com. Describes the process through the information architecture, wireframes, color palette, typeface and visual design work done to create a more modern website in order to showcase Alex Codd's stencil work.">
<meta name="keywords" content="web design, web designer, seattle, washington, portfolio, designer, front end, front-end, desiner, web desiner, acodd.com, stencil, Banksy, Shepard Fairey, grafiti, graffiti, Picasso, Pollock, hip-hop, hip hop, pop art, pop-art, gallery, information architecture, info arch, ux, user experience, ui, user interface, color palette, color, palette, wireframes, wire, frames, visual design, visual, typeface, type, face, font, fonts, roboto, raleway, desktop, 960 grid, mobile, illustrator, photoshop, usable, usability, storyboarding, wordpress, resume">
<meta name="author" content="Chris Lockwood">
<title>User Experience and User Interface design of Alex Codd's artwork. </title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,700,500' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,900,700,800' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<link href="css/lightbox.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css">
<link rel="stylesheet" href="css/portfolioStyles.css" type="text/css">
<!-- Typekit Fonts -->
<script src="https://use.typekit.net/dxz7hon.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="index.html#page-top">Chris Lockwood</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="index.html#about">About</a>
</li>
<li>
<a class="page-scroll" href="index.html#skills">Skills</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="index.html#resume">Resume</a>
</li>
<li>
<a class="page-scroll" href="index.html#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="pbkProjectBanner">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-5 text-left">
<h3 class="project_title">ACodd.com - School Project</h3>
<p class="project_heading">Services</p>
<p class="project_content">Research, Problem Articulation, Storyboarding, Information Architecture, Wireframe Production, UI Development</p>
<p class="project_heading">The Project Objective</p>
<p class="project_content">The project objective was pretty straightforward. This site was to showcase work for a stencil artist. During the initial review of ACodd.com, the site was essentially a simple about page and slideshow gallery that linked to Etsy. During the interview with the client we whittled down the key features for the site. First and foremost the site was to appeal to a mobile first market. Based off of the demographic his work appealed to, this approach would better cater to their needs. In addition, he wanted galleries that that linked to an internal shopping cart to allow his customers to stay within the site and easily navigate to additional pieces if wanted. Finally, the client wanted his artwork to remain as the centerpiece. This meant using the artwork in any way I could, such as using the artwork as navigation or banner imagery.</p>
</div>
<div class="displayCol col-lg-8 col-md-7 text-left coddImageMain">
<img src="img/aCoddDisplay.png" alt="A Codd Display Image">
</div>
</div>
</div>
</section>
<section id="clientSurvey">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3 class="project_title">Defining the Project</h3>
</div>
</div>
<div class="row">
<div class="col-md-6 text-left">
<p class="project_heading">Research</p>
<p class="project_content">The project kickoff began in a similar fashion to the others, digging into the audience, any art galleries or showcases he may associate with as well as possible competitors. In an attempt to gain an understanding of the overall layout, I began to ask questions in relation to his style. The client incorporates influences from Picasso and Pollock with todays’ hip-hop and pop art, to create a hybrid of culture and art. Based off of this analysis, I felt as if the artwork should speak for itself throughout the site. I wanted the site to become a canvas of sort, for his artwork to speak to the user. With this in mind, I began sorting through pictures of his live galleries and different art galleries around the world to gain an understanding into how he likes to hang and display his work and how others display artwork. Was it straight edge and level or was it hung in a mismatch manner in order to place the artwork at different angles, so when users moved through the gallery they never looked at things the same way? These were just a couple of the questions I asked myself.</p>
</div>
<p class="project_heading col-md-6">Technical Specifications</p>
<div class="col-md-3">
<p class="project_content"><b>Features</b></p>
<ul class="project_list">
<li>Gallery</li>
<li>Shopping Cart</li>
</ul>
</div>
<div class="col-md-3">
<p class="project_content"><b>User Needs</b></p>
<ul class="project_list">
<li>Cross Browser Compatibility</li>
<li>Mobile to Desktop Responsive Design</li>
</ul>
</div>
<!--
<div class="col-md-3">
<p class="project_content"><b>Wanted Features</b></p>
<ul class="project_list">
<li>WordPress Integration</li>
</ul>
</div>
-->
</div>
</div>
</section>
<div class="bgcolor">
<section id="uxSitemap">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3 class="text-center">Creating the Information Architecture</h3>
<hr class="light">
<p class="project_content">With one product to display the layout of the site remained simple with only one set of subpages. I began creating the information architecture from a bottom up approach. After the first set of interviews I was able to access the online repository of images and begin categorizing them into logical sets. Once the subpages were finalized, I grouped them into the parent label, Gallery. In addition to the Gallery, users would need to be able to purchase these paintings, which was allowed through the Shop page. If users were to access the Shop page from the parent button they would be presented with each piece, however if the user were to access the Shop pages from within the Gallery, the Shop page would be filtered to show only a single piece or the category of pieces. Before any purchase is made users may want to know a bit about the artist which is why I chose to display the About page before shop. To finalize the architecture a contact page was created in order for customers to ask questions and leave comments.</p>
</div>
</div>
<div id="aCoddinfoArch" class="row">
<div class="col-lg-12">
<img src="img/coddSiteMap.png" alt="Information Architecture" class="center-block">
</div>
</div>
<div id="wires" class="row">
<div class="col-lg-12">
<h3 class="text-center">Wireframes</h3>
<hr class="light">
<p class="project_content">The wireframe process really allowed me to visualize creating an online “canvas” for his artwork. I utilized a low-fidelity wireframe process to focus on the white space around images. During the research phase I was able to look into how artwork is displayed. I utilized this research and began to place images in a sort of dysfunctional yet structured manner, keeping in mind that images should not be placed too far apart, yet remain close enough as to not irritate the user with extra scrolling. The design utilized a 960px 12-column grid but the use of the grid was limited based off of the irregular placement of images.</p>
</div>
<div class="col-sm-4">
<a href="img/coddHomeWire.jpg" data-lightbox="coddHomeWire.jpg" data-title="Home A.Codd Wireframe"><img src="img/coddHomeWire.jpg" alt="A.Codd Wireframe Home"></a>
</div>
<div class="col-sm-4">
<a href="img/coddGalleryWire.jpg" data-lightbox="coddGalleryWire.jpg" data-title="A.Codd Gallery Gateway"><img src="img/coddGalleryWire.jpg" alt="A.Codd Gallery Gateway"></a>
</div>
<div class="col-sm-4">
<a href="img/coddGalleryMainWire.jpg" data-lightbox="coddGalleryMainWire.jpg" data-title="A.Codd Gallery"><img src="img/coddGalleryMainWire.jpg" alt="A.Codd Gallery"></a>
</div>
</div>
</div>
</section>
<section id="colorAndFont">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3 class="text-center">Color Palette</h3>
<hr class="light">
<p class="project_content">When a user typically thinks of art, psychological feelings of sophistication, glamor and clarity come to mind. Due to this, a very simple color palette of white and black was used. I chose this color palette not only for the physiological aspect, but because a lack of color allows for the art to take center stage. This strategy can be seen in places such as the Seattle Art Museum, where upon plain white walls, beautiful pieces of art hang. </p>
</div>
</div>
<div class="row">
<div id="color" class="col-xs-12">
<!-- <a href="img/pbkColorPalette.svg" data-lightbox="pbkColorPalette.svg" data-title="Color Palette"><img src="img/pbkColorPalette.svg" alt="PBK Color Palette"></a>-->
<div id="paletteCoddBlack">
<p>#000000</p>
</div>
<div id="paletteCoddWhite">
<p>#ffffff</p>
</div>
</div>
</div>
<div class="row">
<div id="typeface" class="col-md-12">
<!-- <a href="img/pbkTypeface.svg" data-lightbox="pbkTypeface.svg" data-title="Typeface"><img src="img/pbkTypeface.svg" alt="PBK Color Palette"></a>-->
<h3 class="text-center">Typeface</h3>
<hr class="light">
<div class="row">
<p class="project_content container">During the typeface study, I paid less attention on the readability due to the lack of text content and more on the originality of the typeface. I wanted the typeface to not only be appealing to the eye, but also reflect the spirit of the art. I chose to keep the weight of the typeface light in order to not shout at the user, thus keeping the attention on the art.</p>
<div class="col-xs-3 title_underline typeface_label">
<p><span>Typeface</span></p>
</div>
<div class="col-xs-6 title_underline typeface_label">
<p><span>Champagne & Limousines</span></p>
</div>
<div class="col-xs-3 title_underline typeface_label">
<p><span>Font Size</span></p>
</div>
</div>
<div class="row">
<div class="col-xs-3 typeface_label">
<p>Large Banner Text</p>
</div>
<div class="col-xs-6 coddTypeface_content_90 border-left">
<p>Do it with passion or not at all.</p>
</div>
<div class="col-xs-3 coddTypeface_content_90">
<p>90px</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 typeface_label">
<p>Nav</p>
</div>
<div class="col-xs-6 coddTypeface_content_30 border-left">
<p>Do it with passion or not at all..</p>
</div>
<div class="col-xs-3 coddTypeface_content_30">
<p>30px</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 typeface_label">
<p>Body Content</p>
</div>
<div class="col-xs-6 coddTypeface_content_20 border-left">
<p>Do it with passion or not at all.</p>
</div>
<div class="col-xs-3 coddTypeface_content_20">
<p>20px</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="visualDesign">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>Visual Design</h3>
<hr class="light">
<p class="project_content">As I envisioned the final design, minimalism seemed to reign supreme. White space played a major role, as did shape. In an attempt to section the design I used quotes from artists that have influenced the client's work. With these two techniques I was able to clearly communicate my vision to the end user. The mix of minimalism and new age art really provided a consistent flow throughout each of the pages.</p>
</div>
<div class="col-sm-4">
<a href="img/coddHomeVisDes.jpg" data-lightbox="coddHomeVisDes.jpg" data-title="A.Codd Home"><img src="img/coddHomeVisDes.jpg" alt="A.Codd Home"></a>
</div>
<div class="col-sm-4">
<a href="img/coddGalleryVisDes.jpg" data-lightbox="coddGalleryVisDes.jpg" data-title="A.Codd Gallery"><img src="img/coddGalleryVisDes.jpg" alt="A.Codd Gallery"></a>
</div>
<div class="col-sm-4">
<a href="img/coddGalleryMainVisDes.jpg" data-lightbox="coddGalleryMainVisDes.jpg" data-title="A.Codd Gallery Main"><img src="img/coddGalleryMainVisDes.jpg" alt="A.Codd Gallery Main"></a>
</div>
</div>
</div>
</section>
</div>
<section class="no-padding" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-4 col-sm-6">
<a href="pbk.html" class="portfolio-box">
<img src="img/portfolio/pbkMock.jpg" class="img-responsive" alt="PSA-PBK Mock Up Image">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Web Design
</div>
<div class="project-name">
Puget Sound Association of Phi Beta Kappa
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="bimmerus.html" class="portfolio-box">
<img src="img/portfolio/bimmerUS.jpg" class="img-responsive" alt="BimmerUS Mock Up Image">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Web Design & Web Developement
</div>
<div class="project-name">
BimmerUS
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="acodd.html" class="portfolio-box">
<img src="img/portfolio/aCodd.jpg" class="img-responsive" alt="Acodd.com Mock Up Image">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Web Design
</div>
<div class="project-name">
A.Codd
</div>
</div>
</div>
</a>
</div>
<!--
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/portfolio/moreToCome.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
More to come...
</div>
</div>
</div>
</a>
</div>
-->
<!--
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/portfolio/moreToCome.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
More to come...
</div>
</div>
</div>
</a>
</div>
-->
</div>
</div>
</section>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p>Wanna get to know me? Go ahead and shoot me an email or connect with me on LinkedIn!</p>
</div>
<div class="col-lg-4 text-center col-lg-offset-4">
<a href="mailto:chrislockwood@chrislockwood.me"><i class="social fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i></a>
<a href="https://www.linkedin.com/in/chrislockwood11" target="_blank"><i class="social fa fa-linkedin fa-3x wow bounceIn"></i></a>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/lightbox.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/creative.js"></script>
<!-- Google Analytics -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-73911955-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>