Project Hub, Pattern Library, and Review Session

April 18, 2019
May 06, 2019

We're almost done! Now that you've developed template prototypes and a pattern library, it's time to do a final review with your "client" and the class. There won't be any slides or reports to turn in - you'll only be showing your project timeline, prototypes and pattern library.

The review sessions will take place in class on finals week.

Project Hub Review

Here's what you'll review with the class/client during your review session. Each review should take about 20 minutes.

  1. Bring up your Project Hub. This will be the main "presentation".
  2. Briefly review the history of the project, starting from the research assignment. Be sure to touch on the main goals you identified for the website. Discuss each part briefly.
  3. Show the three templates and discuss each of them. Demonstrate how the design changes at different breakpoints. Discuss any decisions you had to make.
  4. Show your main patterns/components together in a pattern library (see below), and briefly discuss each of those components.
  5. Discuss any next steps. What would you have done with more time? What still remains to be decided?
  6. Ask for feedback and questions from the class/"client". I may ask some questions during your review, just like a client might do.

View a Project Hub Example

You can see an example of a project timeline/hub for the RWD website.

Pattern Library Review

You've been developing your sites' templates using a variety of components that make up the website as a whole. Lets take a step back and document the primary elements and styles used in your website.

Why create a pattern library? We need to communicate our design choices to anyone else who may be managing or editing the site once we're gone. A pattern library serves as a great reference for your client or other developers who want to look up fonts, color values, or code examples.

What To Do

The components that make up your site can be repeated across many different templates for consistency. A component might be as simple as a heading, or as complex as a header or primary navigation.

  1. Identify 5 common patterns that make up your website. These could be generic patterns, like headers, headings, paragraphs, lists, or patterns that are specific to your website, like product description, shopping cart, etc.
  2. Create a new directory in your repository and call it "patterns". Create a new index.html in the patterns folder. You can use the HTML code below to fill in the default HTML header code.
  3. You could create a separate styles.css. However, since you already have a working stylesheet in your templates folder, you can instead change the link tag to reference the existing stylesheet (in the templates folder). Hint: it will probably be: link href="../templates/style.css" rel="stylesheet" type="text/css" media="screen"
  4. Add a heading titled Pattern Library.
  5. Copy the code for your 5 patterns onto your pattern library, each separated with a heading.
  6. Under typography, document the fonts used on your website.
  7. Under colors, document the colors used on your website. You might display these in the actual colors.

View an Example

You can view the pattern library for the RWD Kent State site to see an example.

Adding HTML + Stylesheet

Class Evaluations

The class is going to help give you feedback on your prototypes and pattern libraries. As you show your project, the class will respond to a survey with the following items:

  1. Does the website meet the initial goals defined for the website? Why or why not?
  2. What are some things that were done well?
  3. What are some things that could be improved?

The class will turn in their anonymous evaluations after each presentation. Participation in the evaluations is part of your participation in the class.

How to Turn In the Assignment

There is nothing to submit for this assignment, but in order to get the points you must:

  1. Participate in the review class period by filling out an evaluation for each project.
  2. Be present and participate in your project review during class.

Although there is nothing to submit, you may find it helpful to prepare some bullet points/notes to help you and your partner stay on track during your discussion.


Use the following rubric to ensure you receive the highest possible grade for the assignment:

Return to Assignments