Midterm Project


The midterm project is a presentation on what you will be doing for your final project. It will involve the following pieces

  1. Presentation: you will present your project to the class over Zoom. Click here to schedule a presentation time
  2. Project Brief: A post on our Class Site that give some details about the project and links to your presentation files and visualizations
  3. Site Visualizations
    1. Site map
    2. Wireframe
    3. Style Tile

Due Date

In order to give people time to prepare and for me to give some feedback on your ideas, the due date is:

Monday, April 12

We will do in-class presentations staring on Monday, April 12 and probably continue them on other days because we will combine the presentations with other material.

Submitting the Midterm

This page has more information on how to submit the midterm and schedule your presentation time. View Submitting the Midterm post.


You can use a presentation software that you’re comfortable with. This could include

  • PowerPoint / Keynote
  • Prezi
  • Miro
  • Another platform

When giving the presentation you will

  • Answer the same questions that are in the Project Brief
  • Show the site visualizations and explain them

Project Brief

This document helps answer fundamental questions.

  • Name: what is the name of your project?
  • Client Goals: what are the client’s goals in creating the site (you may be the client if it is for you)
  • Audience/Users: who will visit your site?
  • User Goals: why would someone visit your site? What do they want to accomplish/learn/read/see/hear that your site will help them do?
  • Look and Feel: in general terms describe the visual design and interaction design of the site.
  • Content: What content will be on the site?
    • Content Creation: Who will make the content on the site? Where will you get it? Do you have permission/agreement from content creators that are not you?
    • API and Data: will your site use APIs or data from another site (Google Maps, Weather API data, NYC OpenData)
  • Research: What are some similar sites? How will you site be similar to those? How will it be different?

Later I will give some examples.

Site Visualizations

You will create three visualizations for your site.

Examples on this Miro Site Visualizations Board

  1. Site map
  2. Wireframe (low or high fidelity, mockups also accepted)
  3. Style Tile

We go over these in more detail in class using the Miro board from above.

Midterm Grading Rubric

PRESENTATION – 30% of Overall

Presentation Graded Areas% of Overall Grade
(did you present all of the information:
– Project Brief: summarize the info in your project brief
– Site Visualizations: show and explain sitemap, wireframe and Style Tile
Clarity of Presentation15%

PROJECT BRIEF: 35% of overall

Presentation Graded Areas% of Overall Grade
Information included for all content areas
– Project Name
– Client Goals (your goals)
– Audience/Users
– User Goals
– Look and Feel
– Content
– Research
Clarity of Brief
This has to do with the quality of the information and the presentation. I will look for clear answers to the questions, titles for each section, references to your site visualizations and links to other web sites.


See examples immediately following the rubric

Presentation Graded Areas% of Overall Grade
Site Map
A site map that has a rectangle for each page of the site. If a section of the site has more than 3 similar pages or will allow for search/sort then you can use a overlapping rectangles to represent them as shown below with the blog Posts image

Each type of page in your site map should have a wireframe for it. You can produce a lo-fi wireframe. You do NOT need to have hi-fi or mockup.

Each page should have at least two versions (large and small/mobile) but preferably three (large/medium/small also written as desktop/tablet/mobile).
Style Tile
The style tile is based on the work by Samantha Warren: https://styletil.es
You can use her PSD Style Tile Template or create your own as long as you include:

The Style Tile needs to have the following:
– The Project Name
– Site Logo and/or Title (logo is not required)
– Color Palette (show colors and hex values)
– Typography: Name of fonts with examples for headings and body text
– Link example (colors, fonts and treatments like underline if used)
– Button example
– Adjectives: write 3-5 words that describe the feel of the design

Visualization Examples


Blog posts

Example of representing a group of pages with overlapping rectangles


Lo-fi wireframe

These generally block out content areas of the page without showing the actual individual content items (title, text, list, image etc.) in detail.

Hi-fi wireframe

These wireframes do show individual content items, but DO NOT show typography or color and other visual design elements.

Style Tiles

The purpose of these is to start to show the visual design elements are not in a wireframe without having to create a full-blown mockup of the site.