Project 2: Components

Project 2 must have at least one (1) JavaScript component that students either create on their own or adapt/edit from a deployment kit. The JavaScript can be stand-alone JavaScript or AJAX (Spry) or jQuery.

Acceptable JavaScript items include, but are not limited to the following:

1. Mouseover Event: menu, either top menu with drop-downs or a side-menu with flyouts
2. Alerts: customizations, auto-completes, or other assurances for the Project 2 form
3. Validation: use JavaScript to validate that a form is being completed properly
4. Gallery: of images that are either interactive (with clickable items) or self-playing (like a movie)

Project 2 must also have at least one (1) of the twelve pages include a form for content submission. The form does not need to operate and call an action, in other words, the submit button doesn't have to send the names/values to a recipient. However, the form must be there, written in HTML and CSS. Chapter 7 covers forms in depth, and is required reading for Project 2; pages 341-347 cover the nuances of styling those forms with CSS.

Acceptable forms include, but are not limited to the following:

1. Contact: an online email form to send a message
2. Contest: enter your personal information for a contest
3. Newsletter: enter your personal information to sign-up for email news
4. Subscription: enter your mailing address to receive a weekly, bi-weekly, monthly, bi-monthly, or quarterly mailing

Feb. 21 Mid-Term Materials

The mid-term is worth 20% of your overall grade for the semester, and will count as 200 points. It will include textbook content: Introduction, 1, 2, 4, 5, 10, 11, 12, 13 (elements from Chapters 3, 6, 7, and 15 will not be on the mid-term). The items covered on past quizzes may show up on the mid-term.

1. Screen resolutions and proportions
2. Names of at least four web browsers
3. Browser prefs: fonts, colors, styles and how ems and font-family play into display
4. Five font types, pages 269-270: serif, sans-serif, monospace, cursive, fantasy
5. Font declarations in CSS, and "fallback" fonts
6. Identifying Doctype declarations: XHTML, HTML 4, HTML 5 
7. Elements in the head tag and what they do
8. Attributes: name and value
9. Display: Block vs. Inline
10. HTML elements
11. HTML tags
12. Opening and closing tags
13. Regular vs. Self-closing Tags
14. Title, alt, head, body, div
15. Headings, paragraphs, markup for bold, emphasis, italics, unordered lists, ordered lists, line breaks, external style sheet
16. Inline elements to style text, such as span, strong, other text tags
17. Absolute versus Relative links to URLs, images, and CSS
18. Images: know pages 107-120
19. How white space collapses in the backend of HTML
20. What a CSS is made up of: selector, declaration, property, and value, pages 231-232
21. Basic CSS markups, opening, closing, properties, and where each goes
22. How the cascade works, from top to bottom, and what gets priority, page 239
23. CSS selectors: Classes (.classname), IDs (#idname), childs, descendants, pages 237-238
24. Benefits of using IDs versus benefits of using Classes
25. The art of naming IDs and Classes
26. CSS connectivity: linked, embedded, inline; and the differences
27. Comments in HTML and comments in CSS
28. Specifying colors, hex versus RGB, 
29. New color attributes: RGBA - Red Green Blue Alpha 0 to 1
30. Absolute positioning on a grid
31. Margins versus padding; the box model, Chapter 13
32. Background images as tile, repeat-x, repeat-y, single image, placement, no-repeats, fixed
33. Link styles, including background images for links, and ALHV (a:active, a:link, a:hover, a:visited)
34. Define URL, GUI, WYSIWYG, CSS, ISP
35. JPEGs, GIFs, PNGs: the differences and advantages 
36. transparency with GIFs and PNGs
37. animation with GIFs
38. sizing the image, and what bad sizing looks
39. optimizing images with compression
40. How to link to images you place in an HTML page 
41. Types of cable connections for transferring data, and the fastest of the bunch, good overview at NY Times on consumer connections  
42. Directory structure 

Project 2: Frontend Layout

Frontend Design: Due Tues., Feb. 19

Design three (3) different frontends (aka the layout, the look and feel) of your website in either one of the following:

• Photoshop (save as Photoshop PDF for presenting)
• Illustrator (save as Illustrator Default PDF for presenting)
• InDesign (save as Print Quality PDF for presenting)
• HTML/CSS

The frontend design should:

1. use the wireframe model you composed;
2. use the fonts you plan on including;
3. be a full color composition;
4. have the written content you plan on using;
5. imagery to showcase the photographic styling;
6. any rollover menus prototyped to show/hide;
7. transitions such as easing are not required.

Designs will be evaluated based on:

• grid use and alignment of content;
• appropriateness for audience and content;
• unity of design layout, including typographic layout;
• craftsmanship of design elements, imagery, and overall "build."

Students should have as many frontend layouts to match their wireframes. In other words, if you have two wireframes (also known as grid structures), then you will need to show two frontends for each of your 3 sets, totaling 6 front end designs in all.

Late work will not be accepted.

Project 2: Wireframe

Due: Monday Feb. 14, end of class

Create a wireframe that acts as an information architecture, establishing where content will go: menu items, article features, sidebars, etc. The wireframe may be composed using Adobe Illustrator, and will be handed in at the end of class, Feb. 14. Illustrator documents should be saved as PDFs. Address the following:

• Where will the main menu appear?
• What about submenus?
• Should the submenus be dropdowns? Flyouts?
• Be sure all menus are navigable.
• Do you need a sidebar, and if so, what content goes there?
• Are there models for your website, existing frameworks that you can reference?
• If you reference models, be sure they're appropriate.

Submission format:

• max. width of 960 pixels
• do not worry about relative versus absolute positioning
• use a grid
• show main wireframe of index, and any other sub-pages or sub-designs if they are different from the main/home page
• consider that wireframes will need to be composed in CSS and HTML so use restraint when designing your layout
• imagery is not needed for the wireframe
• you may use the fonts you plan on using, and be mindful that you must use some "referenced" fonts, such as Google Web Fonts or FontSquirrel, so at the minimum, use fonts in your Headings h1 through h6 for your wireframe to show us the look and feel
• Illustrator file as PDF
• compose your wireframes large enough for us to view on the digital display

Project 2: Audience Interview

Audience Interview Due Thurs. Feb. 14: Students must pinpoint the persona or personas (also known as audience) that would come to this website to read and learn about food. Are they web-savvy? Do they know a lot about food? Will they need to access this site in their kitchen? On the television near their kitchen? Or will they print and read items as they need to? In-class demos and instruction will help students define the personas. See the mood board for more information on image board, persona definition, and other research.

Write a 400-500 word interview you conduct with two people in your intended audience. Each interview must be 400-500 words, totaling 800-100 words for both people. Your interview subjects must not be family members. They must not be "direct friends," in other words they cannot be people you are already closely associated with. They can be friends of friends or friends of family. Questions can include:

• Where do you go to learn about food?
• Where do you shop for food?
• Where do you get recipes?
• What websites do you frequent, and what do you like about them?
• What are the sites you do not like, and why? (Get screen shots from 2 of these sites; these two are different from the three websites to be captured from the like category.)

The answers you collect should help you establish the audiences' knowledge, activities and interests, along with their influencers and backstory. Be sure to define the following about your demographic/persona:

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

Submitted to Turnstile2 Thurs. Feb. 14 as DOC, DOCX, RTF, or PDF on or before 12:30pm.

Project 2: Mood Board

Due Thurs. Feb. 14: Students must create an image board to visualize the likes and dislikes of your audience who has been identified as your persona, your user base. The mood board is intended to aid your design and creative direction in the next phase. You may find images of your users and place them on this mood board. Also, gather stylistic, photographic, and illustrative imagery that your audience would find appealing, and that you may include on your site. Textures, icons, fonts, popular culture material, or any other visual references are fair game too. Use Illustrator to build a 34-inch wide by 22-inch high format, upon which you place all of these elements. The final board will be submitted as a PDF to Turnstile2 (see submission at end of this post).

Examples of mood boards can be found at sampleboard.com/ and moodshare.co/. But you must use Illustrator to build yours. Students must have at least 20 images, including, but not limited to:

• 3-5 patterns or textures
• color swatches
• people, places, or things
• total of 3 website screen captures = competition, similar-content sites, and similar-aesthetic sites

You may gather digital or printed imagery, but in the end, you must submit a digital file for all of us to review. Any photographs you source must have a reference, be it a link, artist name, photographer name, or magazine/book/newspaper title. Images without sources will not count toward your project grade.

Due 12:30pm, start of class, Feb. 14 Submission format:

• submitted to Turnstile2
• 34-inch wide by 22-inch high
• full color or black and white imagery
• typography, such as the fonts you think your audience would prefer, should be set in 72-144 points for us to see on the display
• PDF placed in VCOM 262-002 - Tselentis directory
• we will review student work at our next class meeting

Project 2: paper due Feb 12

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

Theme: Explain how your assigned theme (such as Cosby's Kitchen) will connect to your assigned Word Document text (the downloaded Word file with all of the recipes, food reviews, etc.). Consider current and past issues, how the text content fits, and/or how the text content needs to change. Connect your theme to your user base. This should fit into page 1.

Audience: Students must pinpoint the persona or personas (also known as audience) that would come to this website to read and learn about food. Are they web-savvy? Do they know a lot about food? Will they need to access this site in their kitchen? On the television near their kitchen? Or will they print and read items as they need to? In-class demos and instruction will help students define the personas. See Phase A for image board, persona definition, and other research. Consider answering these questions in your paper:

• Where does the user go to learn about food?
• Where does the user shop for food?
• Where does the user get recipes?
• What websites does the user frequent, and what do they like about them?
• What are the sites the user does not like, and why? 

The answers you collect should help you establish the audiences' knowledge, activities and interests, along with their influencers and backstory. Be sure to define the following about your demographic/persona in page 2 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 pages 1 and 2, documented in MLA works cited format on page 3 of your paper, shall include at least three (3) 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. 12th at 12:30pm as a DOC, DOCX, or RTF file. No PDFs for this stage please. Late work will not be accepted.

Project 2: Food

Prompt: A well-known cook, food critic, and all around food expert has come to you in need of a website. However, they have a wealth of content but don't know where to start. Students must use text from this speculative client (see Word text link below) to aid their research, information architecture, creative direction, and final production and deployment of the site. In addition to the assigned text, students must acquire images (photos, graphics, illustrations), create those images and/or acquire/create additional text content that is applicable and approved by the instructor.

Content Focus: Receiving a massive amount of content, that has little to no focus, is a common design problem. Designers will often act as editors, who strategize what should get used, what's important, and what needs to be left out. Read and analyze the text content from the following Word text content. Note: You must use the text matter given to you, but you may add information if it fits your approved site concept, and if the instructor has approved it. The above text content should be thoroughly read to help you understand the material and the client. Sort, group, organize, and filter content into a cohesive and understandable framework. And you should also review the text for any errors that may be present. You may add to, edit, amend, or substitute content from that Word Document, but do not get too bogged down in that process, especially since so many components exist for this project.

LATCH: Parse through the many and varied pieces of content in your assigned Word document and consider how LATCH can help you. Richard Saul Wurman, the self-titled information architect, proposed LATCH in his book "Information Anxiety 2" as an organizational tool (also called hatrack) that can help make a system of many appear fewer. Use post-its, index cards, or any other moveable/sliding vehicle to aid in this exercise. Can you find similarities and/or differences to help you arrive at an overal site structure and/or theme?

• Location 
• Alphabet 
• Time 
• Category 
• Hierarchy

1st Deadline—Theme and General Direction: On or before Feb. 7th, at 2:30pm, students must craft exactly 20 ideas for themes, concepts, topics, or other ways that you can deliver the assigned food content from the Word Document above. Your site can be for food lovers, cooks, and/or anything food related. Should be food for humans. Should be "real" and in the now. Not food for plants, animals, pets, etc. You must use the assigned Word Document text.

All 20 of your ideas should be different; do not come with one idea about football grilling food, another about summer grilling food, another about winter grilling food. Make sure each of your 20 is unique, and not similar to another one in your list. This should not be in the same topic/theme as what you did for Project 1. Think about what kind of recipes you would include on the site, and if they are included in the assigned food Word Document. If you want to add additional text to that Word Document, you can later, but you do not need to have those recipes for this deadline.

Your ideas should be typed up and prepared to hand in: PDF, RTF, TXT, DOC, or DOCX will be acceptable. Hand in your 20 written ideas to Turnstile2 and be sure to have your name in the document and also part of the document's title. You do not need an explanation of each idea, but should have a topical sentence that explains who your food site would be for, what food it would include, and the kinds of recipes. Make your list easy for somebody to understand just by having them read it.

When thinking about what 20 topics you will deliver, think broadly. There are a number of media outlets for food such as magazines, books, TV shows, news papers and radio, so many in fact that it seems natural to consider the web as a way to distribute more information about food. This is a cultural phenomenon not only for Americans but also for people around the world. Much of the world economy is centered on food, food production, and food distribution. Political problems concern food such as the wheat and dairy commissions as well as the poultry board and the beef council. Some social advocates look to make slow food versus fast food freaks and every one in between. The Atlantic magazine offers a wide range of articles about food, health, and food production/processing.

Subsequent Milestones and Deadlines Will Include

1. website topology, such as LATCH: different systems, web, tree, linear, cluster; organize your content by audience, market need, or a combination
2. audience definition, using a persona, crafted as a written document: consider the content you've been given; and also consider external factors such as economics, social constructs (families, friends, or a combination), trends, cultural issues, health (allergies, well being, old age, young age)
3. mood board, to define creative direction
4. wireframe of website structure, with menu hierarchy
5. frontend design, layout in color, Illustrator or Photoshop; professional, well structured, visually appropriate to the organization
6. final HTML and CSS website with Javascript component

Project 2 Components:

• audience definition and their goals (written and visual research)
• defined scenarios to aid in the design that reaches said audience
• topology of the site (your site map and wireframe)
• appropriate look & feel (aesthetics, color, imagery, fonts)
• well-structured, appropriate, and approved layout based on accepted fluid (a.k.a. liquid or floating) 960-pixel wide framework, designed with "table-less" CSS using DIVS to markup overall structure
• CSS layout using absolute, floats and relative, or a combination of the aforementioned positioning; no tables for structure
• CSS should be a linked file called in the <head> and you can have 1 CSS for fonts and 1 CSS for layout, and a 3rd CSS for just tables; even a site that has 3-4 different layouts can still have everything in 1 CSS layout
• use of HTML 5, including use of header, nav, section, article, and footer elements (the overall structure must be designed as "table-less")
• 12-page web site
• functional links that get users to each of those 12 pages
• unified link styling
• one form element
• one Javascript element, may be the menu (see below)
• menus may be one of the following (a) Javascript or (b) straight CSS/HTML such as ul and li elements; if menu is CSS/HTML, a Javascript element must be used elsewhere in the site
• Font referencing using Google Web Fonts for your h1, h2, h3, h4, h5, h6 fonts; use common, web safe sans serif and/or serif for your article and running text
• typography sizing matrix done entirely in ems or % percentages (no absolute measures with points, pixels, inches)
• typographic readability (how easy it is to read large bodies of text)
• typographic legibility (whether we can tell what letters are, and what words are formed)
• typographic unity and variety
• high quality images placed within your page, and sized proportionally with proper aspect ratio
• proper spelling, grammar, diction
• other layout schemes must get instructor approval
• clean file structure/architecture
• final site posted to the Design.Birdnest server that functions across major browsers including Chrome, Firefox, Internet Explorer, Safari; phone and/or tablet browsers are not required

Important Project Issues: personas, content understanding/editing, navigation, adjacencies, linked information, image creation/acquisition

Project 2 Rubric:

• 14% written research, persona/audience interview
• 36% verified HTML/CSS
• 20% navigation
• 30% design appropriateness, includes mood board and layouts