Due: Thursday, October 25
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:
The Coffee Bean
http://www.peta.org/ They have an app so be sure to check it out
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
- 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
- Project Summary
- Audience Profile
- Communication Strategy
- Competitive Positioning
- 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.
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.
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
1. Damaris Santiago
3. Lor Fogel
4. Kyungwon Bae
5. Roya Nouriff
6. Eniko Hoblyak
7. Maria La Roche
1. Sawako Iizuka
3. Maria Nyren
4. Murray Smith
1. Hector Cruz
2. Brian Negrete
3. Drew Polk
City of Los Angeles
1. Candice Hartung
2. Ken Gross
3. Mahnaz Fatima
1. Erik Rodgriquez