-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
595 lines (426 loc) · 30 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
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
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
<!DOCTYPE html>
<html>
<head>
<title>ID2</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// Add smooth scrolling to all links
$("a").on('click', function (event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
</head>
<body>
<header>
<h1>Interactive Design 2</h1>
<h2 class="project-tagline intro">Welcome to ART 264. Check this page throughout the semester for the latest course content. </h2>
<a href="#schedule" class="btn">Schedule</a>
<a href="#pages" class="btn">Student Pages</a>
<a href="#resources" class="btn">Resources</a>
</header>
<div class="main-content">
<div class="top-spacer" id="schedule"></div>
<p></p>
<h2>SCHEDULE</h2>
<hr/>
<h3>Week 1</h3>
<strong>Tuesday</strong>
<ul>
<li>Introduction - We will go over the syllabus, schedule, and class resources</li>
<li>ASSIGNED: <a href="exercises/exercise_1.html">Exercise 1 (Photoshop Review)</a> - DUE 8/29</li>
</ul>
<strong>Thursday</strong>
<ul>
<li>DEMO: <a href="#">Exercise 2 (HTML Review)</a> - DUE 8/29</li>
<li>Page Setup - We will set up our class pages together as a class</li>
<li>FTP Accounts assigned -FTP Review</li>
<li>Project 1: Research & Analysis assigned: - DUE 8/31
<blockquote>
<p>Our first project of the semester will be to design an interface for a mobile weather application. We will begin with some research. First, explore the native weather app on your mobile phone and at least one other free mobile weather application. Conduct a SWOT analysis and competitive analysis (see below) for the native weather app—use images as needed to illustrate your points. Create a PDF of your SWOT analysis document. Name it swot-analysis.pdf and post it to your class web space as in this example.</p>
<h4>SWOT Analysis</h4>
<p><strong>Strengths.</strong> Characteristics of the business or project that give it an advantage over others. What are the internal strengths of the native app?</p>
<p><strong>Weaknesses.</strong> Characteristics that place the business or project at a disadvantage relative to others. What are the internal weaknesses of the native app?</p>
<p><strong>Opportunities.</strong> Elements that the business or project could exploit to its advantage. What are the external opportunities for the native app?</p>
<p><strong>Threats.</strong> Elements in the environment that could cause trouble for the business or project. What are the external threats for the native app?</p>
<h4>Competitive Analysis</h4>
<p>Who is the competition? What is the name of the additional app that you researched? What is the app doing well? What is the app not doing well?</p>
<h4>Examples</h4>
<a href="http://vbitbws.tcc.edu/~arts9/projects/project_1/assets/images/swot-analysis.pdf">Rachel Liebman</a> | Fall ’16
<br />
<a href="http://vbitbws.tcc.edu/~artq9/projects/project_1/swot-analysis.pdf">Christen Shober</a> | Spring ’16
<br />
<a href="http://vbitbws.tcc.edu/~arto6/projects/project_1/swot-analysis.pdf">Michelle Lombard</a> | Fall ’15
<br />
<a href="http://vbitbws.tcc.edu/~hboone/abel/projects/project_1/research.pdf">Evin Abel</a> | Fall ’14
<a href="http://vbitbws.tcc.edu/~hboone/cottrell/projects/project_1/research.pdf">
<br />
</a><a href="http://vbitbws.tcc.edu/~hboone/wolfe/projects/project_1/swot-analysis.pdf">Adam Wolfe</a> | Spring ’14</p>
</blockquote>
</li>
</ul>
<p>TCC PREVIOUS YEARS</p>
<a href="http://vbitbws.tcc.edu/~artq9/projects/project_1/climate-kitchen-presentation.pdf">Christen Schober</a>
<br/>
<a href="http://vbitbws.tcc.edu/~arts9/projects/project_1/assets/images/final.pdf">Rachel Liebman</a>
<br/>
<a href="http://vbitbws.tcc.edu/~hboone/abel/projects/project_1/appfinal.pdf"> Evan Abel</a>
<br/>
<a href="http://vbitbws.tcc.edu/~hboone/wolfe/projects/project_1/final-comps.pdf"> Adam Wolf</a>
<br/>
<p>DRIBBLE</p>
<a href="https://dribbble.com/shots/3715119-App-landing-page/attachments/832986">https://dribbble.com/shots/3715119-App-landing-page/attachments/832986</a>
<a href="https://www.behance.net/gallery/43789225/Smart-Home">https://www.behance.net/gallery/43789225/Smart-Home</a>
<br/>
<a href="https://www.behance.net/gallery/16880923/Weather-Time-App-Release">https://www.behance.net/gallery/16880923/Weather-Time-App-Release</a>
<br/>
<a href="https://dribbble.com/shots/2093519-Atmos-The-perfect-weather-companion-for-your-iPhone-Watch/attachments/377355">https://dribbble.com/shots/2093519-Atmos-The-perfect-weather-companion-for-your-iPhone-Watch/attachments/377355</a>
<br/>
<a href="https://dribbble.com/shots/2095802-Oneless-Website/attachments/382358">https://dribbble.com/shots/2095802-Oneless-Website/attachments/382358</a>
<br/>
<br/>
<p><strong>To Read</strong>
<br/> Read this over the weekend - we will discuss this in class Tuesday</p>
<a href="https://medium.com/hh-design/crash-course-ui-design-25d13ff60962">Crash Course: UI Design</a>
<h3>Week 2</h3>
<strong>Tuesday</strong>
<ul>
<li>Review FTP</li>
<li>DEMO: Exercise 3: Image Optimization - DUE 8/31</li>
<li>FTP Exercise 1</li>
<li>DISCUSS: Reading "Crashcourse to UI Design"</li>
</ul>
<strong>Thursday</strong>
<ul>
<li>CRITIQUE: Project 1: Research and Analysis</li>
<li>Project 1: Proposal assigned: - DUE 9/7
<blockquote>
<p>The next step in our weather app project is to determine what sort of weather app you will create and make a proposal document. Write a paragraph (or more) describing your app’s personality, functionality, and your target audience. Answer the following questions about your proposed weather application:</p>
<h4>Goals</h4>
<p>What are the goals for your app?<br/>
What is the user experience goal for the app?<br/>
What is the desired benefit for a user?
</p>
<h4>User Profile</h4>
<p>Who is the target audience?<br/>
List of characteristics of the user.<br/>
Describe the environment of the average user.<br/>
Ask someone that you know in the target market to comment upon your proposal—document their response
</p>
<h4>Site Map</h4>
<p>Diagram the app screens that you will need to make. Concentrate on mapping the interaction. Prepare a PDF and link it into your class home page as in this example.</p>
<h4>Examples</h4>
<a href="http://vbitbws.tcc.edu/~arts9/projects/project_1/assets/images/proposal.pdf">Rachel Liebman</a> | Fall ’16
<br />
<a href="http://vbitbws.tcc.edu/~arto6/projects/project_1/proposal.pdf">Michelle Lombard</a> | Fall ’15
</ul>
</blockquote>
</li>
<li>DEMO: Exercise 4: CSS Review</li>
<li>
<p><strong>To Read</strong>
<br/> Read this over the weekend - we will discuss this in class Tuesday</p>
<a href="https://alistapart.com/article/personality-in-design">Personality in Design</a>
</li>
</ul>
<h3>Week 3</h3>
<strong>Tuesday</strong>
<ul>
<li>Reading Discussion: Personality in Design</li>
<li>Ex. 4 - CSS Review Demo continued - DUE 9/7</li>
</ul>
<strong>Thursday</strong>
<ul>
<li>CRITIQUE - Project 1: Proposal</li>
<li><a href="exercises/exercise_5.html">Exercise 5 Readability</a> - DUE 9/14</li>
<li>Project 1: Plan and Sketches Assigned - DUE 9/14
<blockquote>
<p>Choose a unique name your app and create a <a href="https://www.webdesignerdepot.com/2008/12/why-mood-boards-matter/">mood board</a> for your app that identifies the visual qualities that you would like for it to convey. Design a logo for your app and create the icon that will represent it on a mobile device and in app stores. <a href="https://www.smashingmagazine.com/2017/01/designing-better-app-icons/">This article</a> will help you identify what makes a successful icon. <a href="https://cityos.io/tutorial/1677/Auto-Generate-App-Icons-in-Photoshop">This article</a> will help with icon generation.
For the purposes of this project, we will design only four screens and at least one watch screen, which is to say that some of your apps will require hundreds of screens in reality—but this project will concern only the development of these screens. Looking at the map of the interaction that you created in your proposal document, write a paragraph (or so) explaining the four screens and watch screens that you plan to develop into an interface design and state why you chose those four screens.
Use the templates at <a href="http://sneakpeekit.com">this link</a> to sketch the four app screens, and <a href="http://bit.ly/1ELih8W">this link</a> for the watch screens. Scetch each screen by hand. Scan your files for inclusion in your final PDF and be prepared to discuss your sketches in class.
<p>These resources may help you in your designs:</p>
<ul>
<li><a href="https://www.google.com/design/spec-wear/android-wear/designing-for-watches.html">Android Wear Design Guidelines</a></li>
<li><a href="https://developer.apple.com/watchos/human-interface-guidelines/visual-design/">Apple Watch Human Interface Guidelines</a></li>
<li><a href="https://blog.prototypr.io/googles-material-design-vs-apple-s-flat-design-which-is-better-16a94aed6e2">Google's Material Design vs. Apple's Flat Design</a></li>
<li><a href="https://material.io/guidelines/style/icons.html#">Icons: A Material Style Guideline</a></li>
<li><a href="https://designshack.net/articles/graphics/10-tips-for-designing-icons-that-dont-suck/">10 Tips for Designing Icons That Don't Suck/a></li>
</ul> </ul>
<h4>Examples</h4>
<a href="http://vbitbws.tcc.edu/~arts9/projects/project_1/assets/images/plan-sketches.pdf">Rachel Liebman</a> | Fall ’16</a>
<br />
<a href="http://vbitbws.tcc.edu/~artq9/projects/project_1/app-plan.pdf">Christin Shober</a> | Spring ’16</a>
<br />
<a href="http://vbitbws.tcc.edu/~hboone/abel/projects/project_1/planandsketches.pdf">Evin Abel</a> | Fall ’14
<br/>
<a href="http://vbitbws.tcc.edu/~artm11/projects/project_1/plan-sketches.pdf">Patrick Tremble</a> | Spring ’15</p>
</blockquote>
</li>
</ul>
<h3>Week 4</h3>
<strong>Tuesday</strong>
<ul>
<li>This will be a work period. I will be out of town, but the lab will be open. I encourage you to make use of this time to work on your projects. Contact me if you have any questions.</li>
</ul>
<strong>Thursday</strong>
<ul>
<li>CRITIQUE - Project 1: Plan and Sketches</li>
<li>DUE - Exercise 5</li>
<li>Project 1: Photoshop Comps assigned: - DUE 9/21
<blockquote>
<p>Develop your five screens in Photoshop (four app screens and one watch screen). Remember to document the interaction—show steps (screens) as needed in order for the interaction to make sense to someone viewing your PDF. You can add screens as needed, but five is the minimum. The dimensions for your app screens should be 750px x 1334px, and you watch screen should be 312px x 390px (The extra pixels are for the retina display).
</p><p>Use the native UI elements when it makes sense—remember, users are already conditioned to know how the native UI elements function. You may use the following templates for UI components: <a href="https://developer.apple.com/design/resources/">iOS</a> (<a href="https://www.everyinteraction.com/resources/ios-10-gui-psd-iphone-7-psd-sketch/">HERE</a><em> for iOS 10</em> ) / <a href="https://dribbble.com/shots/1930013-Free-Android-UI-kit">Android</a>, or find your own.
</p>
<p>Upload your work as one PDF so that it is available from your class home page.
</p>
<h4>Examples</h4>
<a href="http://vbitbws.tcc.edu/~arts9/projects/project_1/assets/images/ps-mockups.pdf">Rachel Liebman</a> | Fall ’16</a>
<br />
<a href="http://vbitbws.tcc.edu/~arts1/projects/project_1/gw-comp.pdf">Jared Beck</a> | Fall ’16</a>
<br />
<a href="http://vbitbws.tcc.edu/~artm11/projects/project_1/comp.pdf">Patrick Tremble</a> | Spring ’15</p>
</blockquote>
</li>
</ul>
<h3>Week 5</h3>
<strong>Tuesday</strong>
<ul>
<li>Review Reading - <a href="https://viljamis.com/2016/typography-for-user-interfaces/">Typography for User Interfaces</a></li>
<li>We will go over your work on project 1 individually. Make sure you bring your work to class.</li>
</ul>
<strong>Thursday</strong>
<ul>
<li>DUE - PSD Comps</li>
<li>Project 1: Final Presentation - DUE 9/28
<blockquote>
<p>In this final part of the first project, you will assemble your PSDs in a landing page mock-up for your app. This page should illustrate the important features of your app, and persuade the user to download the app. This presentation should include the use of PSD mock-ups, descriptive text, testimonials, and a call to action. Here is a great <a href="https://webdesign.tutsplus.com/tutorials/design-an-app-landing-page-in-photoshop--cms-23716">tutorial</a> to get you started in Photoshop.</p>
<p><strong> EXAMPLES</strong><br/>
<a href="https://dribbble.com/shots/3715119-App-landing-page/attachments/832986">https://dribbble.com/shots/3715119-App-landing-page/attachments/832986</a>
<a href="https://www.behance.net/gallery/43789225/Smart-Home">https://www.behance.net/gallery/43789225/Smart-Home</a>
<br/>
<a href="https://www.behance.net/gallery/16880923/Weather-Time-App-Release">https://www.behance.net/gallery/16880923/Weather-Time-App-Release</a>
<br/>
<a href="https://dribbble.com/shots/2093519-Atmos-The-perfect-weather-companion-for-your-iPhone-Watch/attachments/377355">https://dribbble.com/shots/2093519-Atmos-The-perfect-weather-companion-for-your-iPhone-Watch/attachments/377355</a>
<br/>
<a href="https://dribbble.com/shots/2095802-Oneless-Website/attachments/382358">https://dribbble.com/shots/2095802-Oneless-Website/attachments/382358</a>
<br/>
</p>
</blockquote>
</li>
<li>Project 2: CLASS HOMEPAGE: Mood Boards - DUE 9/28
<blockquote>
<p>Our second project will be a design for your class homepage. In this project you will demonstate your kowledge of HTML and CSS. We will start by creating two <strong>DISTINCT</strong> moodboards showing potential directions for the look and feel of your personal site.
<ul> EXAMPLES
<li><a href="http://vbitbws.tcc.edu/~arts1/projects/project_2/moodboards-site.pdf">Jared Beck</a></li>
<li><a href="http://vbitbws.tcc.edu/~arts5/projects/project_2/site_moodboard.pdf">Marion German</a></li>
<li><a href="http://vbitbws.tcc.edu/~arts9/projects/project_2/assets/images/moodboards.pdf">Rachel Liebman</a></li>
</ul>
</blockquote>
</li>
<li><p><strong>TO READ</strong>-<br/>
Read this over the weekend - we will discuss this in class Tuesday<br/>
<a href="https://alistapart.com/article/frameworks">Frameworks</a></p>
<h3>Week 6</h3>
<strong>Tuesday</strong>
<ul>
<li>Review Reading - Frameworks</li>
<li>DEMO - Exercise 6 : Responsive Design</li>
</ul>
<strong>Thursday</strong>
<ul>
<li>DUE - Project 1: Final Presentation</li>
<li>DUE - Project 2: Mood Boards</li>
<li>ASSIGNED - Project 2: Sketches
<blockquote>
Design and layout desktop and mobile pages in sketches (use the sketch templates <a href="http://sneakpeekit.com">HERE</a>) <strong>All of the sketches must be scanned into a single pdf and uploaded before class on OCT 5 to receive credit.</strong> Your website may be a single scrolling page, or multiple pages but must include: Projects (with subsections for each stage), exercises, reference links, and an "about me" section.
<ul> EXAMPLES
<li><a href="http://vbitbws.tcc.edu/~arts9/projects/project_2/assets/images/sketches.pdf">Rachel Liebman</a></li>
<li><a href="http://vbitbws.tcc.edu/~arts5/projects/project_2/sketches.pdf">Marion German</a></li>
</ul>
</blockquote>
</li>
<li>DEMO - Exercise 6: Part 2</li>
</ul>
<li><p><strong>TO READ</strong>-<br/>
Read this over the weekend - we will discuss this in class Tuesday<br/>
<a href="http://www.uxbooth.com/articles/the-rules-for-modern-navigation/">The Rules for Modern Navigation</a></p>
<h3>Week 7</h3>
<strong>Tuesday</strong>
<ul>
<li>Review Reading - Rules for Modern Navigation</li>
<li>DEMO - Exercise 7 : Navigatioin</li>
</ul>
<strong>Thursday</strong>
<ul>
<li>DUE - Project 2: Sketches</li>
<li>ASSIGNED - Project 2: Final Coded Site - Due: 10/17</li>
<li><p><strong>TO READ</strong>-<br/>
Read this over the weekend - we will discuss this in class Tuesday<br/>
<a href="https://www.smashingmagazine.com/2015/08/designing-web-interfaces-for-kids/">Designing Web Interfaces for Kids</a></p>
</ul>
</li>
<h3>Week 8</h3>
<strong>Tuesday</strong>
<ul>
<li>Review Reading - Designing Web Interfaces for Kids</li>
</ul>
<strong>Thursday</strong>
<ul>
<li>ASSIGNED - Project 3: Part 1</li>
</ul
</li>
<h3>Week 9</h3>
<strong>Tuesday</strong>
<ul>
<li>We will work on our project for the first half of class and then do our final presentations.</li>
<li>Introduction of Project 3</li>
<li>ASSIGNED - Progect 3: Part 1 - DUE 10/19
<blockquote>
<strong>Purpose</strong><br/>
To become more familiar with PSD to HTML production techniques. To use photoshop as a tool for prototyping an interface. To demonstrate intermediate knowledge of HTML and CSS. To demonstrate acquired knowledge from class exercises and projects, synthesized in a singular project. To apply intermediate design theories and principles of interactive design. To utilize design and production techniques using current technologies to produce an interactive design project.
<br/>
<strong>Your Task</strong><br/>
In this project you will design and develop a highly visual one page website about space. It will serve as an educational site for children ages 8–11. The organization and visual design of the site are up to you. We will discuss various options for this as the project progresses.
<br/>
<strong>Process</strong><br/>
Initial research and information gathering. Exploration and conceptual development in the form of two mood boards. Conceptual refinement in the form of one style tile. Development of site architecture (site map) and navigational scheme. Design and layout of site in Photoshop. Development of site in HTML and CSS. Use the following example for how to set up links on your class home page to this work.
<br/>
<strong>Examples</strong><br/>
<a href="http://vbitbws.tcc.edu/~arts9/projects/project_3/index.html"Rachel Liebman</a></a></a> | <a href="http://vbitbws.tcc.edu/~arts9/projects/project_3/assets/images/moodboards.pdf">Mood Boards</a> | <a href="http://vbitbws.tcc.edu/~arts9/projects/project_3/assets/images/styletile.pdf">Style Tile and Nav</a> | <a href="http://vbitbws.tcc.edu/~arts9/projects/project_3/assets/images/mockup.pdf">Comps</a> | Fall ’16<br/>
<a href="http://vbitbws.tcc.edu/~arts10/projects/project_3/index.html">Christopher Lugtu</a></a></a> | <a href="http://vbitbws.tcc.edu/~arts10/projects/project_3/mood_board.pdf">Mood Boards</a> | <a href="http://vbitbws.tcc.edu/~arts10/projects/project_3/styletile.pdf">Style Tile and Nav</a> | <a href="http://vbitbws.tcc.edu/~arts10/projects/project_3/mockup.html">Comps</a> | Fall ’16<br/>
<a href="http://vbitbws.tcc.edu/~artq9/projects/project_3/index.html">Christen Shober</a> | <a href="http://vbitbws.tcc.edu/~artq9/projects/project_3/mood-board-1.pdf">Mood Board 1 & 2</a> | <a href="http://vbitbws.tcc.edu/~artq9/projects/project_3/style-tile-navigation.pdf">Style Tile and Nav</a> | <a href="http://vbitbws.tcc.edu/~artq9/projects/project_3/photoshop-comp.pdf">Comps</a> | Spring ’16<br/>
<a href="http://vbitbws.tcc.edu/~arto6/projects/project_3/spacemoon/index.html">Michelle Lombard</a> | <a href="http://vbitbws.tcc.edu/~arto6/projects/project_3/moodboard-1.pdf">Mood Board 1 & 2</a> | <a href="http://vbitbws.tcc.edu/~arto6/projects/project_3/style-tile.pdf">Style Tile and Nav</a> | <a href="http://vbitbws.tcc.edu/~artq9/projects/project_3/photoshop-comp.pdf">Comps</a> | Fall ’15 <br/>
<br/>
<strong>Timeline</strong><br/>
Mood Boards Due: r 10/19<br/>
Style Tile and Navigation Scheme Due: t 10/24<br/>
Photoshop Comps Due: r 11/2<br/>
Final Critique of Coded Site: t 11/09<br/>
</blockquote>
</li>
</ul>
<strong>Thursday</strong>
<ul>
<li>DUE - Progect 3: Part 1</li>
<li>ASSIGNED - Progect 3: Part 2 - DUE 10/24</li>
<li>Review Week 9 reading
<blockquote>
For part 2 of this project we will make a style tile based off one of your mood boards. The style tile should incorporate the colors and fonts you will use on your webpage, along with possible patterns and the navigation structure (how your user will navigate to different sections of the page.)
For further reading on style tiles, check out this article <a href="http://www.creativebloq.com/web-design/style-tiles-4132333">The web designer's guide to style tiles</a>.<br/><br/>
Your style tiles are due on <strong>TUESDAY, OCTOBER 24</strong> AT THE BEGINNING OF CLASS.
</blockquote>
</li>
</ul>
<h3>Week 10</h3>
<strong>Tuesday</strong>
<ul>
<li>CRITIQUE - Project 3 - Style Tiles</li>
<li>ASSIGNED - Project 3 - PSD Comps- Create a comp of your site exactly how you want it to look online. You can download and use the grid system <a href="https://1440px.com">here</a> to get started. This is due at the beginning of class Thursday, November 2.<li>
</ul>
<strong>Thursday</strong><ul>
<li>DEMO - Exercise 8- PSD to HTML</li>
</ul>
<h3>FINAL PROJECT</h3>
<strong>Purpose</strong>
<p>For the final project in this class you will redesign a local restaurant's website. You will need to do initial research into the business, determine the target audience, and justify your design decisions accordingly. </p>
<p>The final site should be responsive. It will need to include: an "about" section, a gallery, hours of operation, contact and location information, a menu, and social links or integration.</p>
<p>The final site can be a single page or mulitiple pages. Feel free to use your own images or those on the existing site.</p>
<strong>Approved Sites</strong><ul>You can choose from one of these sites to redesign. Go to the sign up sheet <a href="https://docs.google.com/document/d/1Y7fbTckU6PwH_PuJGXLZXCo0dLBMO5B07b7JmIrYty0/edit?usp=sharing">HERE</a>, and put your name beside the site you would like to redesign. If you have another in mind, make sure to get it approved before beginning work on it.
<ul><li><a href="http://www.stilleats.com/">The Still</a></li>
<li><a href="http://www.lobscouser.com/">Lobscouser</a></li>
<li><a href="http://www.oldetownecoffee.com/">The Coffee Shoppe</a></li>
<li><a href="http://www.beyondmenu.com/36833/norfolk/rajput-indian-cuisine-norfolk-23517.aspx">Rajput</a></li>
<li><a href="http://omarscarriagehouse.com/">Omar's Carriage House</a></li>
<li><a href="http://freemasonabbey.com/">Freemason Abbey</a></li>
<li><a href="http://www.steinys.com/phone/index.html">Steineys</a></li>
<li><a href="http://www.watermans.com/">Waterman's</a></li>
</ul>
<strong>DUE DATES</strong>
<ul>
<li>Initial Research and 2 Moodboards - November 21</li>
<li>Style Tile and navigation Scheme - November 28</li>
<li>PSD Mockup - November 30</li>
<li>Final Critique- December 12</li>
<div class="hr-spacer"></div>
</ul
<h2 id="pages">STUDENT PAGES</h2>
<hr/>
<div class="row">
<div class="links">
<a href="http://vbitbws.tcc.edu/~artw0/">Yone Abayomi-Paul</a>
<br/>
<a href="http://vbitbws.tcc.edu/~artw1/">Marquis Brundage</a>
<br/>
<a href="http://vbitbws.tcc.edu/~artw2/">Alan Burtchell</a>
<br/>
<a href="http://vbitbws.tcc.edu/~artw3/">Richard Cooke</a>
</div>
<div class="links">
<a href="http://vbitbws.tcc.edu/~artw4">Rikki Price</a>
<br/>
<a href="http://vbitbws.tcc.edu/~artw5">Grace Richardson</a>
<br/>
<a href="http://vbitbws.tcc.edu/~artw6">Jonathan Winfield</a>
<br/><a href="http://vbitbws.tcc.edu/~artw9">Diane Graham</a>
<br/>
</div>
<div class="hr-spacer"></div>
<h2 id="resources">RESOURCES</h2>
<hr/>
<p>These are a few links that will come in handy throughout this semester.</p>
<div class="links">
<ul>
<li><a href="264-syllabus.pdf" target="_blank"><strong>SYLLABUS</strong></a></li>
<li><a href="https://join.slack.com/t/264interactive/shared_invite/MjI5ODEwNTQyMjYwLTE1MDMzNjYxMjItMjc2MjU5M2JmZg"><strong>SLACK</strong></a></li>
<li><a href="https://github.com/ivy-g/id2">See this page on GitHUb</a></li>
<li><a href="http://webstyleguide.com/wsg3/">Web Style Guide 3rd Edition</a></li>
<li><a href="http://htmldog.com/guides/">HTML Dog Tutorials</a></li>
<li><a href="http://www.w3schools.com/tags/default.asp">W3C HTML Reference</a></li>
<li><a href="http://validator.w3.org/">W3C HTML Validator</a></li>
<li><a href="http://validator.w3.org/checklink">W3C Link Checker</a></li>
</ul>
</div>
<div class="links">
<ul>
<li><a href="http://jigsaw.w3.org/css-validator/">W3C CSS Validator</a></li>
<li><a href="http://alistapart.com/">A List Apart</a></li>
<li><a href="http://thinkvitamin.com/">Tree House</a></li>
<li><a href="http://tympanus.net/codrops/">Codrops</a></li>
<li><a href="http://css-tricks.com/">CSS-Tricks</a></li>
<li><a href="http://www.smashingmagazine.com/">Smashing Magazine</a></li>
<li><a href="http://webdesign.tutsplus.com/">Webdesign Tuts+</a></li>
<li><a href="http://quirktools.com/smaps/">Smaps</a></li>
</ul>
</div>
<div class="hr-spacer"></div>
</div>
</div>
</body>
<div class="footer">
<a style="color: white;" href="https://github.com/ivy-g/id2"><i class="fa fa-github" style="font-size:38px;"></i></a>
<a style="color: white;" href="mailto:igarrenton@tcc.edu"><i class="fa fa-envelope" style="font-size:38px;"></i></a>
<a style="color: white;" href="https://join.slack.com/t/264interactive/shared_invite/MjI5ODEwNTQyMjYwLTE1MDMzNjYxMjItMjc2MjU5M2JmZg"><i class="fa fa-slack" style="font-size:38px;"></i></a>
</div>
</html>