Midterm Project


Due: Thursday, October 25


Midterm Project

Many major brands need your help.

Many companies and institutions do not have a mobile presence. This is where you can help. For your midterm project you will create a mobile website for one of the sites keeping “Mobile First” in mind.

Choose from one of the websites listed below:

Mrs Meyers

Calvin Klein

The Coffee Bean

http://www.peta.org/ They have an app so be sure to check it out

Norah Jones

The City of Los Angeles

Your project wil include the following:
1. Informal Competitive Analysis

Find 3-4 competitor websites and do an informal competitive analysis. Criteria for analysis:

  • Strategy & Concept
  • Target Audience
  • Priorities (Keeping “Mobile First” in mind)
  • Content /Organization
  • Navigation
  • Hierarchy
  • Visual Design
  • Usability: Touch Gestures, Task Scenarios
  • Social Media
2. Communication Brief

We will discuss in class what to include in the creative brief. Be sure to include your concept and strategy for the mobile website.

Write a paragraph statement for each of the following:

  • Who is the target market?  (everyone cannot be the answer to this question!)
  • With “Mobile First: in mind, what are the three priorities to include on the mobile website?
  • What are the business objectives and goals for the website? These are goals set by the client.

Follow the structure outlined in the Web ReDesign textbook here:

So, you will include the following sections for your Communication Brief

  1. Project Summary
  2. Audience Profile
  3. Perception/Tone/Guidelines
  4. Communication Strategy
  5. Competitive Positioning
  6. Targeted Message

Save this document as a PDF and post to our WP blog. Also be prepared to turn this in with your midterm project.

3. Create a Site Map

Create a diagram of the organization of the mobile website.

Here is a sample for those who are unfamiliar with one. Please note that this site map is for a desktop website. Your map may look different since it is for a mobile site. At this stage, if you want to draw it on a piece of paper, that’s fine. Just be sure you can take a picture of it so you can post it to your WP blog.

Save this document as a PDF and post to our WP blog. Also be prepared to turn this in with your midterm project.

4. Create Design Comps

You will redesign the home page and one landing page. This design is to be optimized for 990 (desktop), 768 (tablet), and 320 (smartphone).

5. Build a 2 page prototype in HTML5/CSS

Build a prototype for 2 pages of the site incorporating flexible grid (including margins + padding) and flexible images (no media queries necessary for this assignment). The prototype does not need to contain any visual design. It can be created with a series of gray or colored boxes. This is only a mockup of the site.

Example – Alima PURE


Prototype – Fixed Layout (HTML5)


Prototype – Flexible Layout


These steps will lead to a site that scales, but does not reformat the layout. We will change the layout of the site with the use of Media Queries.

Sneak Peek

This is where we’re going with it after the midterm project. USING MEDIA QUERIES IS NOT REQUIRED TO THE MIDTERM PROJECT.

Prototype – Flexible Layout +  Media Queries



Mobile Design Process



Coffee Bean

1. Damaris Santiago
2. Sakuna
3. Lor Fogel
4. Kyungwon Bae
5. Roya Nouriff
6. Eniko Hoblyak
7. Maria La Roche
8. Peri

Mrs. Meyers

1. Sawako Iizuka
2. Marie
3. Maria Nyren
4. Murray Smith

Calvin Klein

1. Hector Cruz
2. Brian Negrete
3. Drew Polk
4. Courtney

City of Los Angeles

1. Candice Hartung
2. Ken Gross
3. Mahnaz Fatima

Norah Jones

1. Ty
2, Jeanette


1. Erik Rodgriquez


Comments (11)

  1. Midterm project:
    I’ll go with “The Coffee Bean”, even though City of L.A. might be the biggest challenge but I don’t think I’m ready yet 🙂

Leave a Comment