Final Exam Apr 26

Friday Apr. 26 from 11:30 a.m. to 1:30 p.m. Students should study their mid-term and quizzes; the final exam will have content similar to your mid-term and quizzes. The final exam will be worth 200 points, 20% of your final grade.

Project 3: Final

Students shall submit their sites in progress on the following due dates to our class Turnstile2 folder:

• first crit of full site Tues. Apr. 16th between 12:30-12:45pm
• full site due (also last regularly scheduled class) Thurs. Apr. 18th between 12:30-12:45pm

The final submission of Project 3 is on Apr. 26th at 11:30am on our final exam day.  This revision date is only granted to people who submitted their site completely and on time on Apr. 18th. Any/all comments/suggestions you received on Apr. 18th should be made. At the start of class:

• submit your site to Turnstile2
• and also upload it to your personal design.birdnest.org directory, as such: design.birdnest.org/studentname/13s-262-pro3/

Upcoming Quiz Content

Thurs. Apr. 11 - worth 10 points

• text chapters 8 and 15
• practice above at Codecademy: Web Fundamentals lessons 4, 5, 6

Tues. Apr. 16  - worth 10 points

• text chapters 16-17
• JavaScript and jQuery 
• practice above at Codecademy: Web Fundamentals lessons 4, 5, 6; Javascript lessons 1, 2, 3; jQuery lesson 1

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

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

Quiz 1: HTML basics

Quiz in class Thurs. Jan. 24th covering textbook's Introduction and Chapters 1, 2, 4, and 5.

Will also include CSS selectors, properties, and values from in-class demos:

• inline and embedded styles
• font-family, color, background color, text-decoration
• font sizing with pixels versus ems
• divs for beginners, basics of sizing and styling
• span elements
• GIF, PNG, and JPEG file types and pros/cons

Worth 10 points.

Project 1: demographic

Like all visual communication, interactive media is intended for an audience. Online media needs can be narrowly focused on specific users, much like television content, or it can be broadly directed at a range of people, of varying ages, incomes, educations, social classes, locations, and cultures, among other characterizations. Our goal for Project 1 is to understand not only the visual acuity and level of visual understanding of the user, but also the level of technical familiarity. Public accessibility to the web has broadened the range of the web savvy and diminished the web Luddite. It is conceivable that web users are not only 17-20 year old computer "geeks" but could also include people 50-60 years old who wish to use on-line banking or find a shopping center using Google Maps. Others enjoy the opportunity for social communication offered by the likes of Twitter or Facebook. With this in mind, design a 5-page web site using the visual language of a demographic other than your own.

DEMOGRAPHIC: A demographic can include a broad group of people born during a given time period (a generation), who's lives have been shaped by the economy, world events, political climate, and culture that surrounds them. Demographic profiles can also be fashioned based on: zip code (or other geographic definition), income, living conditions, religion, education, employment, nationality, or ethnicity. Demographic profiles can be found through census research, or other city/county/governmental documentation that "takes a snapshot" of a community, county, neighborhood, or borough. Marketing experts also take advantage of demographics in order to shape the message they want to send to their audience, whether for persuasion, communication, education, or a combination thereof.

Examples of demographic generations include:

• baby boomers
• Generation X
• Generation Y (a.k.a. Millennials)

Demographic groups could include:

• role-playing gamers who live in their parents' basement, graduated high school, are attending a community college, and like to collect comic books
• Caucasian street basketballers of Irish ethnicity in Red Hook New York, who play solely outside on black-top courts in parks, and want to play for the AND1 streetball tour one day
• First Graders who go to a magnet school and live in an apartment with no television, but do own a Nintendo DS and two pairs of Nike LeBron X high top sneakers
• Born-Again Christians who live in Iowa and have a high school degree
• Pennsylvania Quakers
• New York Quakers

YOUR DEMOGRAPHIC TOPIC: Students are encouraged to either choose a generational demographic from above (such as Gen. X), discover another generational demographic, or to locate, identify, create a demographic group on their own. Choose a demographic that is not directly connected to you. If you are an athlete who runs track, you cannot research Track Athletes as your topic. Research is your first order of duty once the topic has been defined. You will need to identify the demographic, learn about it, gather text and imagery to shape that demographic into a website, and shape the website into a navigable experience. Don't assume that you understand your chosen demographic because you know someone who is a part of it.

YOUR DEMOGRAPHIC PAPER: Write a 2-page paper that covers your topic and submit it in electronic form to the Turnstile2 server VCOM-262-002 Tselentis as a DOC or RTF file. The paper needs to be informative, and cover who, what, where, how, why, and when all from the demographic point of view. Submit: (at least) 1 fully typed single-spaced page as your paper with an additional 1 page of your sources. Sources shall not be "crowd-sourced" or non-journalistic-media (forbidden: wikipedia, ask-yahoo, about.com, ask jeeves); minimum 1 book (from Winthrop's library, this must be a printed and paper book), minimum 1 magazine or newspaper from an approved news source (this can be printed news or news website). Interviews you conduct, whether through email, face-to-face meetings, phone, or Skype are also valid sources of research. A good process for writing your paper would be:

• learning about the topic from your sources, whether read or listened to
• organizing your thoughts with a rough outline or note cards
• crafting one complete draft of your paper
• running spelling and grammar check
• setting the paper aside, perhaps for a couple of hours or a day
• returning to it and re-reading it, making corrections as needed
• having another reader look at it, perhaps from the Writing Center
• making further edits to it in preparation for submission
• note the multiple writing, reading, and editing stages above
• that many re-reads and re-writes is completely normal

Keep in mind that you want to write a paper that will be used as text content for your website, and you will then create a site to describe a member (or members) of that demographic. Include those things that qualify them as a member. I will also request a flow chart categorizing the demographic and how those categories connect to make up the typical person within the demographic. Other research components are included below.

Website Requirements:

• 5 pages total
• functional links that get users to each of those 5 pages
• quality images, sourced from acceptable places, or created by the student using photography, illustration, collage, or a combination thereof
• unified link styling
• 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
• proper spelling, grammar, diction
• 960-pixel wide layout scheme
• fixed website, with pages in "top left origin" of browser
• other layout schemes must get instructor approval
• clean file-folder structure where you house images, html, and css

---

Optional Elements Which Students May Explore:

• timelines, in-page "anchor links" to navigate content
• students will need to explore methods for making above items function on their site
• if said items are done incorrectly, they will downgrade the project

Finally, the site with active links and final design development will be submitted for review. At this stage only an off-line page is required, in other words, it will not need to be published to an http URL, and it will just be placed into the Turnstile2 class folder. File structure/architecture will be a consideration of the grade.

To hand in:

1. organizational outline due Jan. 10th
2. written description of your demographic (2 fully typed pages,) due Jan. 15th in electronic form; paper needs to be informative, and cover who, what, where, how, why, and when all from the demographic point of view; submit to the Turnstile2 server VCOM-262-002 Tselentis as DOC or RTF file; (at least) 1 fully typed single-spaced page as your paper with an additional 1 page of your sources; sources = no "crowd-sourced" or non-journalistic-media (forbidden: wikipedia, ask-yahoo, about.com, ask jeeves), minimum 1 book (from Winthrop's library, this must be a printed and paper book), minimum 1 magazine or newspaper from an approved news source (this can be printed news or news website); 
3. basic site map (organizational chart) due Jan. 15th end of class 
4. basic website look and feel, composed in either Adobe Photoshop, Fireworks, or Illustrator; which will be the basis for your HTML and CSS site design
5. sourced or created imagery, textures, illustrations, or other visuals to be included in the website
6. five page web site with required images due Feb. 5th, HTML and CSS uploaded to Turnstile2 server's VCOM-262 folder, see class calendar for complete deadline listing including use testing milestones

Worth 150 points, assessment breakdown:

• 20% definition of demographic and organizational chart (this is the preliminary research of pitching your topic, a 5-point topic proposal, and your paper)
• 30% correct HTML/CSS (technological, "backend" components)
• 14% navigation (the menu, the menu's function, and the menu's look and feel)
• 36% design appropriateness (includes preliminary image sourcing, mood board, Layout "Look and Feel" prototypes as well as final design/layout execution as HTML)

Project 1: intro

Research in class to devise demographic

• Brainstorming
• Identifying
• Researching
• Justifying
• Specifying
• Green Lighting

Intro to Web Images

• 72dpi
• RGB, Adaptive, 16-bit, 8-bit
• Sizes, Proportions
• Display dependency
• File Formats: GIF, JPEG, PNG

GIF: Graphics Interchange Format

• eight bits of color
• up to 256 colors
• for simple graphics
• renderings with as little as one or two colors
• few colors = lower image quality, smaller file
• many colors = high level of image quality, larger file
• can have transparency or clippings
• when animated, also called Animated GIFs

JPEG: Joint Photographic Experts Group

• developed principally for photographs
• up to twenty-four bits of color to render millions of colors
• no transparency
• no animation
• can use "lossy compression" to reduce file size
• high compression = lower image quality but smaller file
• low compression = high level of image quality but larger file

PNG: Portable Network Graphics

• millions of colors like a JPEG
• added bonus of transparency like a GIF
• does not deliver animation
• can compress a PNG file to make it smaller
• reduce/adjust the color spectrum

Welcome

Day 1 Introduction: syllabus, calendar, digital tools, textbook, other resources