Week 9

Making Your Case

  • Having reflected on the research you did over break and what you learned from your domain-expert interview, try to condense your overall argument into a single (long) web page
  • Use one or more sheets of 8½×11" paper to try out different content & layout possibilities, experimenting both with the arguments you’re making and their presentational aspects (on an editorial and a design level)
  • Start your page with a project headline and one or more paragraphs of intro text.
    • As has been the case for the headlines in your poster designs, you should either be posing a non-trivial question or describing a result you’ll be exploring. Don’t just passively name the subject matter of the project.
  • Follow this with at least 4 subsections, each of which consists of:
    1. A headline posing a specific argument or question
    2. A pencil sketch of the graphic that will address/elaborate upon this
    3. Supplemental text that supports the point being made by the graphic or provides essential context for making sense of it
  • Close out the page with a Conclusions section in which you very briefly recap what’s been laid out in the prior sections but primarily outline the implications of what you’ve found. This is the portion of the page that most directly addresses the ‘so what’ factor and is your chance to have the ‘final word’ on the subject that your readers will take away with them. Use it wisely...


  • Read Kate Crawford’s Anatomy of an AI System essay and choose one of the articles in the Footnotes section to also read and discuss in your write-up. Use the tag R4 for your response blog post.
  • Design a ‘wireframe’ version of your project webpage
    • The wireframe must be built in HTML, so either use this HTML template or start from scratch to create a mock-up of your long-scroll website (based on what you created on paper in class)
    • The page should contain all the sections listed below (at a minumum!)
    • Make use of the information hierarchy naturally provided by HTML structure (h1, h2, h3)
    • Play with typography and layout as well as the style of the charts.
    • Add a pithy <title> to the HTML header
    • Commit your finished work to the repo as a subdirectory of your student folder called wireframe.
    • Extra credit: Use breakpoint-basedmedia queries’ in your CSS so the page displays equally well on desktop and mobile
Use this structure for your page:

  1. Project headline <h1>
    • Intro text
  2. First Argument/Question <h2>
    • Descriptive text
    • Graph
  3. Second Argument/Question <h2>
    • Descriptive text
    • Graph
  4. Third Argument/Question <h2>
    • Descriptive text
    • Graph
  5. Fourth Argument/Question <h2>
    • Descriptive text
    • Graph
  6. Conclusion <h3>
    • Descriptive text

Show Comments