Project 02 - Interpreting the News/Bringing your Voice

Overview

In the next 5 weeks we will create a four (4) + page website, based on an article of your choosing. The site should have a home page and at least 3 (or more) content pages.

TEXT: you can use as much or as little text from your actual article but the site must communicate the main point of the article as well as communicate your voice in some way.

IMAGE: Use only the images you author within the site (do not use images from the web or stock photography). When selecting from your images, you may choose to use LITERAL images that directly illustrate your article OR you may choose to use images that are a more expressive or supportive of the main idea (i.e. details of images, textures, image references, metaphor)

NAVIGATION: The site should have a global, non-linear navigation system (this means that the user can go to any page, from any page.)

PAGE STRUCTURE/LAYOUT: Try to create a certain level of pacing throughout the site. Pacing can occur with the visuals, playing with scale, color and negative space, as well as with the content, playing with the amount of text+image used from page to page. Remember to stay away from "template" based design, where every page is the same layout.

Step 01 - Choose
Due: Wednesday Nov 11th

Choose a news article from a credible news source (npr.com, PBS, CBS, FastCompany.com, Wired.com, The Atlantic.com, NYtimes.com, Reuters.com, The Detroit News, The Free Press, etc.)

• Choose a main article, one from the front page (not a sidebar story or human interest story). It is recommended you choose an article that relates to a cultural trend or issue.
• Please choose a story that you find interesting AND you strongly believe in OR strongly disagree with.
• Please choose an article that translates to imagery YOU can create/author. An article on recent space exploration may be a BAD choice due to the images that need to be shot.
• Be ready to give a very brief summary of your article.

---

Step 02 - Interpret / Brainstorm
Due: Monday Nov. 16th at the beginning of class.

INTERPERT: Using miro we will begin to think about how the content from your article can be used for a 5-7 page website. I do NOT want you to simply re-present the content of your article but rather I want you to INTERPRET the information and bring your "VOICE" to the content. You may use as much or as little of the actual text from your article in this site- I only ask your finished site must be a COMPLETE thought/idea. The final website should be a combination of fact (drawn from your article) and opinion (based on your personal take of the info).

In your miro board answer the following questions:

• What is the main point of the article?
• Describe the article in 5 essence keywords
• What is your stance on the content (agree or disagree)? Why do you feel this way?
• What groups of people do you associate with the article/trend? Descibe them.

BRAINSTORM: begin to create word and image connections to your article by creating a large, visual map. Start literal, move to references, and eventually move toward symbolism and metaphor.

• Place your five essence keywords
• Begin connecting new words + images + doddles to each keyword.
• What words immediately come to mind?
• List synonms, antonyms, feelings
• What images come to mind? gather at least 20+ images from online or elsewhere.
• Show both literal images and symbolic/metaphor

---

Step 03 - Create imagery
Due: Wednesday Nov 18th

Create/Shoot/Author a minimum of 15 images, illustrations, or graphics that relate to your idea. Explore a RANGE of image ideas from literal, to detail, to image references and metaphor. Make sure to show a range of imaging techniques beyond digital photos such as: collage, illustration, pure typography, or iconography.

---

Step 04a - Design
Due: Mon Nov 23rd

Create at least 2 DIFFERENT pairs of interior pages (4 total sample web pages) of your site in Photoshop or Illustrator. Be prepared to discuss the content/message of each page and how that message will develop through the site. Each design pair should be a UNIQUE visual direction, showcasing DIFFERENT approaches to your site.

• real text
• real image
• real navigation

keep in mind as you design:

• always consider your message when creating your visuals
• move beyond designs that have ONLY 3 separate parts: header, navigation, body copy
• move towards integrating the various content and graphic elements together
• create interesting negative space while always considering multiple monitor sizes

---

Step 05 - Beta site

The site will be collected in multiple parts:

• a Alpha website which must have two (2) fully finished, fully functional pages by Weds Dec 2nd
• a Beta website which must have four (4) total finished, fully functional pages by Mon Dec 7th

---

Step 06 - Post online
Due: Wednesday Dec 9th

Upload your site online and test that it works on a different computer/phone. Hand in the URL in class. Be prepared to present a brief overview of your site.

---

Assessment

This project will be graded on the following:

Process

• Participation in critiques
• Timeliness
• Ideation
• Documentation

Content

• Gathering content, including creating your own: images, sounds, and graphics
• Your unique voice and opinion is present

Design

• Good typography, hierarchy, use of space, composition, etc.
• Execution of your concept
• The site is overall usable, understandable
• The design considers both mobile and desktop screens and usability factors associated with them

Execution

• Site is uploaded and online
• All links work, images, etc.
• Code is clean, and has proper syntax
• ALT tags for all images

---

Do's:

• Tab your code so the nested hierarchy is clear
• Make sure there are no spaces or uppercase letters in your filenames
• Make sure your html file is filename.html and css is filename.css
• Remember that you will not remember everything about html/css taught to you in this class and that you won’t graduate from CCS as a web developer.
• Remember that Google is here to provide answers when you get stuck.

Don'ts:

• Expect yourself to become a professional front-end developer by the end of this semester, OR expect us to be able to teach you how to do that.

Technical Goals

• Basic understanding of HTML & CSS code
• Students to have a solid grasp on how to make a simple html/css website and upload it to the web
• Use of hosting + domain name and FTP systems