Final submission due: Saturday Dec 17, 5pm (via email to instructor)

Your personal project will be submitted via digital files emailed to the instructor. Plan ahead and use Dropbox or YouSendIt to send large files. Files received after 5pm will be considered late, and will be docked 2 letter grades. They will be docked an additional letter grade for each subsequent day they are late.

The following details the main points I'll be considering when grading. I will be looking at your Personal Goals Description and Objectives, your Personal Process Snapshots, and your final submission packet when grading.

Concept: 10 points
How well does this project address what the individual wished to accomplish in this class (based on their Personal Goals Description and Objectives)? Does it evolve throughout the semester (while staying focused) or is it stunted and restrained? How far did the designer push themselves—conceptually—to achieve their goals?

Content: 10 points
How well designed is the layout of the design? Does it consider theories of interaction and address critiques provided in class? Are design decisions based on research, or relying solely on personal preference? Did the designer mock-up as much content as possible, despite limitations of space or technological skill? 

Presentation: 10 points
Does the presentation style and technique enhance the concept and make it believable to a minimally informed audience? Is it "as real as possible?" Does it reflect the amount of work done throughout the semester, with a fine attention to detail and process within the content? Is it free from spelling and grammatical errors?

More details and recommendations regarding how to present and arrange your final submission will be detailed in class on Weds, Dec. 7. 

Project 2 consists of two parts—an implementation component and an expansion piece—and is worth a total of 20% of your semester grade. These projects will be graded individually (10% each) using the following scale and criteria.

IMPLEMENTATION (10% of class grade):

Concept: 10 
Did the concept follow through on critique given in class and by the instructor for Project 1? Does it carefully consider practical considerations, layout concerns, and appropriate–yet creative–use of technology? Is it flexible according to content and context?

Content: 10
What is the quality of imagery and typography?Is as much content completed as possible—minimum of 5 pages with attention to details?If the designer was unable to get something to work right, did they manage to believably fake it? :) 

Presentation: 10
Were the details within the designer’s control managed or left unattended to? Was as much information customized and handled with a design-eye as possible? 

EXPANSION (10% of class grade):

Concept: 10
How well did the concept relate to and expand upon Project 1? Did it show strength of research and clear understanding of the audience and a specific goal? Was it focused and specific or vague and ill-defined? 

Content: 10
How well does the designed result consider: hierarchy, layout, typography, color, relationship to Project 1 (branding/identity), interactive flow between “screens” or interactive “spaces” of the design?  Is the content meaningful for the audience, and tailored to their needs?

Presentation: 10
Was there a fine attention to detail in the management of images, text, layout, etc? Was the presentation format of the expansion piece tightly controlled, arranged, and clearly explained, or did it leave a lot of unanswered questions?

While we covered the basics of creating vertical and horizontal navigation, these examples were far from pretty. In fact, they were still rather rudimentary in the sense that they required us to rely on simple HTML formatting (font, color, background color, etc) to create visual styles.

Although this may work for some of you, it is likely that your prototypes call for more advanced navigation styles. No fear – we can do this. And, it's pretty easy. You can make your navigation as an image in Illustrator or Photoshop, export it, and work with it as a background image. In that case, the sky's the limit in terms of the visual quality of your navigation.

(download)

Click here to download:

thank-you-nintendo-gFgzrzJsvxdmdjmkAvgv.zip (193 KB)

Image sprites are the preferred way of using images for your navigation. We'll cover this in class on Monday, but until then, check out:

How to create a CSS menu using image sprites
http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites

Image sprite navigation with CSS
http://stylemeltdown.com/image-sprite-navigation-with-css/ 

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/ 

Google's sprite image is a thing of beauty
http://www.seodenver.com/googles-sprite-image-is-a-thing-of-beauty/ 

According to Alex Hackbart, Nintendo was the first place image sprites were used, as they wanted to keep processing time to a minimum while still being able to render a variety of images. So, you can thank your childhood (or mine) for this awesome feature. Thanks, Nintendo.

We covered the very basic elements in class (and quite quickly), so it would be best if you further explored some of the things we talked about. The following are some helpful starting resources. Be sure to share your own if you find something valuable!

(download)

Click here to download:

so-you-want-to-know-more-about-floats-li-s-and-nav-tlljDlkhhDahHogGdzDn.zip (63 KB)

Listamatic: One list, many options
http://css.maxdesign.com.au/listamatic/index.htm

This page takes you through a number of styling effects applied to the same basic list structure. It shows the code, which is easily copied and pasted into Dreamweaver for your own hacking and editing.

The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything
http://mirificampress.com/permalink/the_amazing_li 

Why are LI and UL's so amazing? Well, let me tell you the many ways…

All About Floats
http://css-tricks.com/795-all-about-floats/

A more comprehensive explanation of this essential CSS selector.

(download)

Click here to download:

let-s-get-coding-njrpoGApyewJcrnukHAB.zip (297 KB)

The best way that I know to teach coding is to have you jump in headfirst. I'll cover the *basics* of HTML and CSS in this class, but it's up to you to keep working at making your prototypes a reality through the magic of code. It's challenging, frustrating, but oh … so rewarding.

The following links are helpful resources for your journey. I'll post some more advanced resources in the coming days, but these should be useful for the vast majority of you. If you find something else that's not listed, please by all means share via the comments or an email to me!

Basics

HTML, CSS, and Javascript from the ground up from Google Code University 
http://code.google.com/edu/submissions/html-css-javascript/#css

CSS Overview from w3schools.com|
http://www.w3schools.com/css/css_intro.asp

CSS Playground
http://css3.mikeplate.com/

Intermediate

CSS examples from Belgium-based designer (view the source to see the .css)
http://playground.deaxon.com/css/

HTML5 experiments
http://acrisdesign.com/2011/09/31-must-see-html5-experiments/

Code Academy
A free way (with a great UX) to understand the basics of Javascript syntax and structure
http://www.codecademy.com/#!/exercise/0

Advanced

Kerning.js
A javascript library that allows fine pixel-based control of your web-fonts
http://endtwist.github.com/kerning.js/

Each of you will have a chance to show your final Project 1 prototypes in class on Monday. Your presentation must:

1. Show the website in its existing form (either online or as a screenshot). Walk your audience through what currently exists, so that we have a benchmark for understanding the project.

2. Convey your understanding of the major (and minor) design problems of the site, as they relate to the audience/personas. (You may wish to show us the personas now or before we see the site)

3. Show us the redesigned site, walking us through how the design problems were solved (i.e., based on new navigation structure, improved organization, additional features, a change in language, new hierarchy, etc). A great way to do this is to refer to one of the goals of your persona, and walk us through the site according to how they would achieve that goal (e.g., live storyboarding).

4. Address questions, comments, and critique from your peer audience

GRADING CRITERIA

Concept: 10 points
How well did the process relate to the final result? Was the redesign focused on the needs of the audience or company that weren’t being met? Did it consider all sides of the story, or did it just take one viewpoint? Did the redesigned site make some conceptual leaps from the existing site, or was it restrained?

Content: 10 points
How thorough were the personas, site maps, wireframes, and prototypes? Was there a clear evidence of process or did the designer simply make aesthetic changes to the site, based on their own sensibilities and preferences? Were the aesthetic modifications an improvement? Do they show design skill and finesse?

Presentation: 10 points
Was there a fine attention to detail in the management of images, text, layout, etc? Was the final presentation well prepared? How well did the designer understand and relate the design problem and resulting solution to their audience? 

Click here to download:

GDes5341_WebReminders101.pdf (7.98 MB)

(download)

Click here to download:

GDes5341_WebReminders101.pdf (7.98 MB)

Steve Krug developed a quick and dirty "Trunk Test"* to help evaluate the effectiveness of hierarchy. Remember, website visitors aren't necessarily landing on your homepage first; rather, they may have stumbled upon a page deeper in the site in their search quest. For this reason, they should be able to figure out where they are in the site, and how they move to other places (without having to think…too much).

Besides navigation, your site's aesthetics should consider visuals, typography, grids, and whitespace – you know, all those design elements we talk about in other graphic studios (they apply here too). Visual noise should be kept to a minimum so that your visitors aren't overwhelmed and likely to click away quickly. Check yourself as you work on your prototypes to make sure you aren't breaking any of these cardinal rules!

*THE ANALOGY: Consider you've been blindfolded, locked in a truck, driven around, and now you are out of the trunk and have to figure out where you are. Can you do it?

Your prototypes will take your wireframes to the next level, adding aesthetics, content, and astute design sensibilities in order to bring them to full fruition. They should be designed to scale, in either Photoshop or Illustrator (whichever is most native to you).

The final submission:

• Interactive multi-page .pdf
• Showcasing 5 pages of your site
• Designed in full color with high quality images

These final prototypes will be presented to the class on Wednesday, October 19.

View the First Person video at BBC News 

Over the last two decades, Harold Hackett has sent out over 4,800 messages in a bottle from Prince Edward Island, Canada's smallest province along the Atlantic coastline.

Every message asks for the finder to send a response back to Hackett, and since 1996 he has received over 3,100 responses from all over the world.

In this First Person account, Hackett talks about the items people have sent him and the unexpected side effects from his hobby.