j187 | IIM

Intro to Interactive Media

Project 1 – Website Redesign


PROJECT 1: Web Design

DUE: Monday, September the 8th by 11:50 pm

VALUE: 100 Points

Create a full comprehensive redesign for one of the following three multimedia news packages produced by UNC’s Powering A Nation team:

Create wireframes and color comps with a color scheme and text treatment that is consistent with the content of the site you choose to redesign. You should use images and other content from the existing site, but you need to design a different layout along with different typography and color scheme. As long as you do not copy the original site, you have the freedom to do whatever you think looks best.


  • Design on 1280 grid using this grid template
  • Create 4 consistent designs (with a wireframe and color comp of each): 1 for a computer screen homepage, 1 for a computer screen story page, 1 for a mobile screen homepage, and 1 for a mobile screen story page
  • Design in Illustrator
  • Turn in one or more PDFs that includes the wireframes for both the desktop and mobile screen for the homepage, the wireframes for both the desktop and mobile screen for the story page, the color comps for both the desktop and mobile screen for the homepage page, and the color comps for both the desktop and mobile screen for the story page. That is eight total artboards. I recommend you create the wireframes first, then copy and paste each one onto a new artboard and work off them to build your color comps.

Design the entire homepage for both the computer screen and one of the mobile screens (that means you will likely continue to design below the end of the screen template in Illustrator – that’s OK). For the story pages, design only what the user would see “above the fold.”

Please feel free to write notes on your designs to help convey the site’s usability. For example, a note might tell me that the navigation items change color when you hover over them.

Some suggestions from the client:

  • Intro video to be shown on homepage
  • Strong/large display of video
  • Group content in two or more categories of your choosing
  • Design shows featured content more prominent over everything else.
  • Must be able to switch from English to Spanish on Living Galapagos site.
  • Must be able to navigate from 12-24 stories (via categories) (this does not mean you need to show each of the 12-24 stories on the design – you only need to show categories so it is clear how to navigate to all the stories)
  • Each story needs a sidebar or additional content

Note About Grading:

You must earn every point. You earn points by showing you understand the concepts to create a beautiful and usable web design. The purpose of this assignment is not to follow rules or a checklist but to create a professional, well-designed website. Your task is to show me you understand everything you have learned about quality web design up to this point. If this were an essay exam, you would be writing more than enough so I would know, without question, you are an expert on the subject. I expect professional, high quality work. This project should be at a level you would be proud to show a potential employer at a major publication, agency or firm. See the rubric here.

Example Comps:

Home page | Story page (desktop version only)

Story page only (mobile and desktop versions): colorcomp_storypage

Remember CRAP design, have fun, and be creative.

Leave a Reply

You must be logged in to post a comment.