MMP 200 Multimedia Design

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:

• Date time and location of the festival
• About the festival
• Festival map
• FAQs
• Food and drinks
• Contact info
• Lineup
• Tickets
• Travel information
• Directions
• Accommodations (if festival geographical reach is outside of commuting distance)
• Photos and videos that show the festival experience
• Links to various social media
• Subscribe to email list
• Any additional info that you deem useful for target audience.

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.

Deliverables:

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:

• Overall style that is consistent with the music genre and theme of your music festival
• The complete header design
• Column-based layout design for desktop mockup and a stacking vertical layout for mobile mockup
• Navigation bar designs for desktop and mobile
• A defined color scheme including background colors and link colors
• A defined typographical theme
• Actual text
• Actual images

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.

• Must adjust to at least two screen sizes: mobile and desktop
• Must have fluid layout- use ems and percentages for widths, margins, padding and font sizes.
• Menu bars must include all links and be functional.
• All text must be real- not dummy.
• Images must be real- not placeholders.

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.

Grading

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

Submissions

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