Skip to main content

Assignment 2 - Responsive Design Visual Report

Weight: 20%

Due:

Background

Responsive Design, and in particular, mobile first design have become important concepts in modern web development. As more and more people use mobile devices to navigate websites and use web applications, it is essential that your websites are responsive and mobile friendly. This assignment is to research how responsive design works from an end user perspective.

Task

This is very similar to the moodboarding that you did in assignment 1. However the structure of your content should be less exploratory and more analytical/critical. This is like a visual book report.

You will create this in figjam, you are welcome to use one of the figjam templates to structure your report, or you can work from scratch. Find examples of the UI elements listed below, take screenshots of them at their different breakpoints to show how content is reorganized to fit different sizes of screens.

UI Elements to screenshot

  • Navbar & Navigation links
  • Header or Footer
  • Gallery
  • Section with a large image and text

Instructions

  1. Find examples of the above UI elements
  2. Test the breakpoints by resizing the browser window
  3. Screenshot examples of good and bad responsive design
  4. Add the images to your report
  5. Write your analysis of why each example that you show represents good or bad design
  • between 2-10 sentences each
  • Analysis and Images need to be positioned using good visual hierarchy
  1. Export your figjam file to PDF

Marking Rubric

This assignment will be marked out of 20 points.

Navbar & Navigation Links: 5 points

  • Images for each breakpoint (make sure to include a screenshot of the mobile menu) 2pts
  • reflection notes and critiques 3pts
  • Images for each breakpoint 2pts
  • reflection notes and critiques 3pts
  • Images for each breakpoint 2pts
  • reflection notes and critiques 3pts

: Image and Text Section: 5 points

  • Images for each breakpoint 2pts
  • reflection notes and critiques 3pts

Submitting Your Assignment

In order to receive a grade, you must:

  1. Export your report to a pdf
  2. Get a viewable link to your report and paste the link in the text box of your submission (do not send an email invite)
  3. Zip the pdf of your report
  4. Submit the PDF along with the link to your active report