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 02/22 by 6PM — Upload your PDF on Google Drive


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 02/29 — 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 03/14 03/28


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:

  • ●   Create a website for an artist of your choosing. The website must consist of an artist bio, artist works, and other materials representing the artist. The point is to both inform and entertain.
    ●   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.
    ●   Create any other kind of collection site: 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
    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.
    Due 04/04 by 6:00 pm


    Part 2: Wireframes and Mockups
    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.
    Due 04/18 by 6:00 pm


    Part 3: Final Production
    Create your website using HTML and CSS. Remember correct file organization and semantic markup. Upload your final site to your Parsons B Hosting so that we can access it using your website.
    Due 05/16 by 7:00 pm



    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.

    Exercises

    Exercise 1: Mark up Carl Dair
    Markup Carl Dair”s 7 Principles of Typographic Contrast
    Download text here

    Exercise 2: Style Carl Dair
    Using your new knowledge of some simple CSS styling properties, style the Carl Dair content that you already marked up in a previous exercise. Keep in mind webfont implementation and font properties. Play with color and scale, and experiment to get familiar with this new language.

    Exercise 3: Responsive Carl Dair
    Part 1
    Using at least 2 media queries that detect different browser sizes, make your Carl Dair webpage change some of its styles when the browser window is shrunk.

  • ●   Make a duplicate copy of your Carl Dair HTML and CSS files by copying and pasting into a different folder.
    ●   Identify at least 2 screen widths at which you want your styles to change.
    ●   At the end of your existing CSS file, add media queries to make your style changes at those break points.
    ●   Test it out! Shrink and expand your browser.
  • Part 2
    Add a fluid image, or if you already have an image in your Carl Dair document, and using a containing element and the max-width CSS property, make it fluid.

    Exercise 4: CSS Letterforms
    Part 1
    Choose a letter from the alphabet, and create 5 different shapes of the letter using only HTML and CSS. Based on what we covered in the lecture, how would you create complex shapes using only CSS? Think about how geometric shapes and its variations can be applied to the letterform. Consider using color, shadow, and transparency, to explore the positive and negative space of the letterform.
    Part 2
    All shapes need to be in a single HTML document. Think about how the all variations should be displayed: should each letterform be shown one by one? Or should they be displayed in a sequence? Consider alignment, letter space, background color, and other graphic elements that can be incorporated to illustrate the relationship of the letterforms.
    Part 3
    Apply your new knowledge of advanced CSS3 properties to enhance and enliven the composition. Think about interactivity—given the content and structure of the letterforms, what can happen on hover? Use at least 1 CSS transition or 1 CSS animation when the user hovers over some component of the letterforms.

    Exercise 5: Sentence Generator & Age Calculator
    Sentence Generator
    ●   Store the following into variables: noun 1, noun 2, adjective 1.
    ●   Output your fortune to the screen like so: “X is (more) Y (er) than Z”.
    ●   Create 5 different versions of the sentence with different variables.

    Age Calculator
    ●   Store the current year in a variable.
    ●   Store a person’s birth year in a variable.
    ●   Calculate their 2 possible ages based on the stored values.
    ●   Output them to the screen like so: “He(She) is either NN or NN”, substituting the values.