Project 3: layout drawings

Students are required to draw 15-20 sketches that visualize how their website layout will look. All drawings will be due Tuesday April 26 at the start of class. Graphite, pencil, or color pencil are acceptable for sketching your drawings.

Drawings should include:

1. menu
2. submenu
3. imagery (roughly marked up in boxes)
4. running text
5. sidebar (if used)
6. footer (if used)

Students should consider if their site will have multiple layouts, such as one for the home page, and others for interior pages. As a reminder, the general site/content structure will adhere to the following:

1. (5 pages) Text dominant pages: article entry, stories, conversations, about page, poetry, etc.
2. (3 pages) Image dominant pages: such as portfolio, promotion, photo contest, etc.
3. (5 pages) Text & Image balanced pages: home page, article features, people highlight, link reviews
4. (1 page) Form specific page
5. (1 page) 'Goody' page that must be approved by the instructor

Paper templates will be provided for drawings.

Project 3: personas collage

Due Thurs. Mar. 21, at the start of class: create a collage that represents your user's persona.

Persona (from Apple dictionary): the aspect of someone's character that is presented to or perceived by others: her public persona. In psychology, often contrasted with anima.

You can use magazine materials found in Rutledge 212 and 220 to cut and paste photos, typography, textures, websites, hobbies, etc. You may also make your collage digitally. You may do this all digitally, laying it out as a PDF. You may also create a Pinterest board. Your collage/board can include:

• physical traits, parts of the body, body forms that show us what your persona looks like
• any materials your user would possess, such as clothing, computers, phones, cars, houses
• images representing the kind of work your user would do
• images relating to the peripheral interests you user would have, be they hobbies, etc.

The collage will be presented starting at 12:30pm on Thursday's class, and can be built using all printed sources, all digital sources, or a combination of the two. Format should be 11-inches wide by 8.5 inches high, landscape. Submit files to Turnstile2.

Digital Files saved as PDFs for presentation on the overhead projector.
Also acceptable: Pinterest Board shared with the class on the overhead screen.

Project 3: written paper

Students will write and hand-in a 1-page paper with 1-page of sources, for a total of 2-pages. Due Tuesday, March 19th during class. Paper must be single-spaced, and include the following content.

Content: should all fit into 1 page.

1. Paragraph I: Detail the website's content. 
2. Paragraph II: Explain your intended audience.
3. Paragraph III: Explain why your audience would use the site; and state any examples in the "real world" that reinforce your argument.

Audience: Students must pinpoint the persona or personas (also known as audience) that would come to their website. Be sure to define the following about your demographic/persona in Paragraph II of your paper:

1. Age, gender, education, occupation 
2. Web experience (are they online once every hour, twice an hour, more than twice an hour), usage frequency (how long are they on during that time), usage location (home or work), usage platform (dial-up, broadband, mobile phone), favorite sites
3. Their goals, tasks, and motivation when using food-related websites as well as other non-food-related websites

Acceptable sources for use in page 1, documented in MLA works cited format on page 2 of your paper, shall include at least three (3) of any of the following:

• interviews with people who fit the persona base
• primary sources of information, such as the official Bill Cosby website, if you have a Bill Cosby theme; or the official website of a notable chef if you are doing a website about where chefs eat
• magazine, news, book information from the web or in print
• websites with trusted sources (no Wikipedia, About.com, or other crowd sources)

Due: handed into Turnstile2 Tuesday, Feb. 19th on or before 2:00pm as a DOC, DOCX, or RTF file. No PDFs for this stage please. Late work will not be accepted.

Project 3: Comics, Candy, or Animals

Select one of the following topics to plan, develop, and design a 15 page site: Comics, Candy, or Animals. Comics can printed, animated, or newspaper. Candy can be manufactured, homemade, you name it. Animals can be in the wild or at a zoo; the animals must be real and alive today, but could be endangered.

Process:

1. Recognize a need, and then fill it. You may find that you don’t need a site, but dig deeper to find a purpose and reason.
2. Identify a problem or problems. Deliver a web experience about something that doesn't exist, or about something that is already out there, but not fully realized.
3. Hunt and gather. You will need to collect text-based information, images, and perhaps video.
4. Analyze. What do you want to display on the web, and what ideas come from the content you have gathered?
5. Synthesize. How should the site be organized for people to experience? Make a plan.
6. Design. Mock up some frameworks you will use as wireframes and color layouts during this early prototyping phase.
7. Test. Get feedback. Run through scenarios that demonstrate its use, and prove its usefulness.
8. Finalize and Refine.
9. Evaluate. Do or did your assumptions, and those of others, improve the site?
10. Reevaluate. Be critical, once again, and as much as possible, before the final release. Make edits. Clean up the code. Polish the look and feel. Be detail oriented.
11. Launch.

Personas, Topology, and a Description of the site are also required for this Project, see Key Project Milestones below.

Split the material or interest you have into functioning parts. Determine the differences between these individual sections. Develop a concept that uses appropriate elements to describe the topic you have selected. Use this to develop your navigation and/or content sections of the website. This site should reflect a commitment to your endeavor to direct users to the site and demonstrate your ability as a designer/developer.

Text and images can be taken from other web sources, or any analogue material you find, or create imagery/graphics that are applicable to the subject. Cite the places where you find any referenced images by captioning the images, the same way that news sites do to credit the photographers.

15-page site structure:

• (5 pages) Text dominant pages: article entry, stories, conversations, about page, poetry, etc.
• (3 pages) Image dominant pages: such as portfolio, promotion, photo contest, etc.
• (5 pages) Text & Image balanced pages: home page, article features, people highlight, link reviews
• (1 page) Form specific page
• (1 page) 'Goody' page that must be approved by the instructor

Key Project Milestones (consult calendar for deadlines):

• research paper describing project's content and creative direction
• persona collage that visualizes the "ideal user" of your site
• topology of site architecture, outline of content
• rough wireframe design
• front end concept due, full color, PDF with imagery
• half of site done as 15 pages wired, with functioning links, layout translated, and "blocking" for imagery
• last visual review of all work
• final turn in

Worth 200 Points; Rubric:

• 15% research, site map, text content/research, and mood board
• 35% operational HTML5 site with 1 "Goody" component; passing "validation"; using an approved JavaScript or jQuery element; use of HTML5 elements (nav, header, aside, footer, article, section) as elements, neither IDs or Classes
• 20% navigation
• 30% design appropriateness, look and feel

To be handed in: uploaded 15 page web-site, to each student's design.birdnest.org server space, and also copied to the Turnstile2 class VCOM 262-002 server folder