Projects

Project 1: Style an Interview

You will select a transcript from an interview from an online source. The interview can be between a celebrity, a politician, a news reporter, etc. The text should include no more than 3 people and only be a few pages in length (for your own sake). Using your selected text, republish the interview onto a single webpage such that it targets a different audience than the original interview. Establish distinct typographic styling for each alternating voice – consider font, size, color and scale. Integrate at least 4 images into the body of the interview that are relevant to the content discussed in the interview.

Part 1: Goals and Audience

Find an interview online that interests you. Identify the target audience and goals of the original interview. Where was the interview published? Who visits that site? Is it an entertainment blog, news site, conceptual art publication? What may be the typical age of the readers? Taking this all into account, how did the original design of the interview align or differ from the expectations of the target audience? How did type choices, colors, fonts, placement of images communicate to the target audience? How is the content arranged hierarchically? Which elements have importance over others—how and why was this done?

Create a PDF document that summarises and compiles all of the above information.

[Due 9/30 by 6PM — Email your PDF]

Part 2: New Goals, Wireframes, Mockup Sketch

Decide on a different target audience for the interview. What may be the needs and aesthetic considerations of your new target audience? Where is this new audience reading? On the go at work? Relaxed time at home?

Based on these goals, plan your new webpage that will contain the interview. Create a wireframe of your site as well as a preliminary sketch using your methods of choice: paper and pencil, illustrator, paper cutouts, etc. You must have a way to digitally document both items. The preferred method would be PDF.

For the design of your website, take on the dual role of online magazine editor + web typographer. Consider typographic voice, color, placement of images, and overall style of the webpage. When is an appropriate time to place a pull-quote or blockquote? How do images and pullquotes contribute to pacing for the reader?

[Due 10/7 — We’ll discuss your wireframes and sketches in small groups in class. Make sure they are in a format that you can show on your computer screen]

Part 3: Production

Correctly and semantically markup the content of the interview. Which tags should you use to designate who is speaking and what is body text? Which header tags are necessary (<h1>…<h6>)? How can <blockquote> be used? Are there points in the interview where external references can be linked to using <a> tags?

Use CSS to style and communicate the interview for your new audience.

[Final Critique: 10/21]

 

Objectives

  • Create a Website using Basic HTML and CSS
  • Establish Visual Hierarchy

 

Project 2: Collection

Your final project will be to use a website to show off a collection. A lot of the web is made to aggregate information, data, images, etc., organize all of it, and show it to the world in a well-designed, easy-to-navigate manner.

You have 3 options:

  1. Create a website for a music artist of your choosing. The website must consist of an artist bio, discography track listings within the discography, and other materials representing the artist. The point is to both inform and entertain.
  2. Create a portfolio website of your own work. The website must have a section for your work (minimum 6 projects), your own bio (an “About” page), and your contact information. In addition, each project has its own dedicated description page with multiple images of the project and a project description with appropriate credits.
  3. Create any other kind of collection site: work of another artist, favorite neighborhoods in NYC, books, objects, images, drawings, texts, quotes, sounds, videos, anything that interests you. The structure and organization of the content is up to you but users should be able to understand the primary objective of showing the collection, an overview of all materials in the collection, and individual pages with details about each item in the collection.

Part 1: Research, Proposal, Goals, Audience, Site-map [DUE: 11/18 by 6:00 pm]

Choose from one of the options above and research the subject. Find 2–3 other websites who handle similar information in interesting ways. Gather all information and content you will use in your own site, and aggregate all of this information into a proposal document. The document should state the purpose and goals of the website, a summary of inspirational websites and an analysis of why they work well, as well as an analysis of your target audience.

Finally, produce a sitemap of all of your information that will be on your site. How will you organize and structure the content in order to accomplish your goals?

Please submit your proposal document and site map as PDFs.

Part 2: Wireframes and Mockups [DUE: 11/24 by 6pm]

Create a wireframe of both your homepage and a project detail page. From these wireframes create a visual mockup of your homepage and a visual template mockup of the project detail page. These must both be submitted as PDFs. Remember our principles of visual hierarchy and the use of a grid.

Part 3: Final Production [DUE: 12/15]
Create your website using HTML and CSS. Remember correct file organization and semantic markup. Upload your final site to your github folder so that we can access it using our class github website.

 

Objectives

  • Create a website from scratch using advanced HTML and CSS.
  • Organize and display a collection of materials using the web as a medium.
  • Effectively communicate the unique features of your chosen collection. Design responds to content.