Midterm Assignment- Website Planning and Design

Learning objectives: practice organizing information, web interface and visual design for a user-first web experience.

Task: plan, design and prototype a responsive website for a music festival. Visitors to the site should get excited about the festival, easily figure out the festival’s dates, location and how to buy tickets, and find out the line-ups and other activities.

STEP 1: Identify site goals and requirements

Deliverable: Creative Brief

STEP 2: Plan the content and its structure for your music festival site

Your website will include the following information:

Your job is to:

  1. Organize this information into categories and pages in a logical manner that reflects the way users are likely to search for information.
  2. Label categories and pages in terms that clearly reflect their content and that are easy to understand by the site’s target audience.
  3. Plan navigation bar(s).
  4. Sketch the interface of the homepage.


  1. A sitemap in a form of a flowchart
  2. Neat sketches of wireframe designs for the homepage, for mobile devices and desktops (2 sketches in total). Sketches can be done on the computer or neatly by hand.

STEP 3: Visual Design

Based on your sketches design two mockups for your music festival site in Photoshop, one for desktop size screens and one for mobile size screens (portrait). Your mockup should look like a complete finished homepage and must include:

Deliverable: mockups for the homepage in desktop and mobile versions.

STEP 4: HTML Production

Write the HTML and CSS code to re-create the homepage based on mockup.

Upload your prototype to the server and test it on as many devices as you can (you can go to a phone store and test it there on multiple devices). If a design element does not work well on a phone or tablet make changes to your design and test again.

Deliverable: URL.

Class presentation

You must make a case for the effectiveness of your design.


  1. Brief: 10%
  2. Sitemap: 20%
  3. Sketches: 10%
  4. Mockups: 20%
  5. Final page: 30%
  6. Class presentation: 10%


Creative brief, sitemap, sketches (scanned), mockups and URL of the site’s homepage should be submitted as one PDF file.