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.
Create a website using basic HTML and CSS
Establish visual hierarchy
You have 3 options:
● 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
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.
ExercisesExercise 1: Mark up Carl Dair
Download text here
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.
● 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.
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.
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.
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.
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.
● 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.
● 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.