Assignment 3: Mockup

Deadline for uploading wireframes to Canvas: March 6 @ 11:59PM
Deadline for critiques on Canvas: March 9 @ 11:59PM
Deadline for mockup and writeup: March 15 @ 11:59PM

Introduction

With the PizzaTweeter4000 now finished and pumping out pizza tweets, Gary the Gadget Guy is ready to move on to his next gadget. The problem is, he's run out of ideas and can't think of what to invent next! All he knows is that he wants to create a modern web app. He needs your help coming up with an idea and designing the interface for his next invention.

In this assignment, you will be creating wireframes and a mockup for a web application of your own design. In the next assignment you will be converting your mockup into HTML, CSS, and JS. Keep this in mind as you are working on your design--don’t design something too ambitious that you can’t code!

Setup

No setup is required for this assignment.

Overview

Your task is to create two sets of wireframes and one mockup of a web application. Your wireframes and mockups will need to be responsive and take into account a desktop view and a mobile view.

Your wireframes will be uploaded to the Canvas discussion page where we will hold critiques. You will then create your mockup based on the feedback that you will receive. You will not be able to start assignment 4 until you have created your final mockup.

*Examples of wireframes to mockups

Assignment

Part 1: The Idea

You can design a web application of your choice for this assignment--choose something you’re excited about. When choosing your idea, keep in mind these following points:

Before committing to your idea, please fill out this form with a short description of what you want to do. If you’re having troubles coming up with an idea or are concerned whether your idea fits with the goals of this assignment, please let us know. If your idea is not approved, you will get points deducted.

If you are having trouble coming up with a concept for your web application, here are a few ideas (along with some guiding questions):

Part 2: Wireframes

Must be uploaded to Canvas by March 6 @ 11:59pm!

Wireframes are low-fidelity and show only the bare skeleton design of an app. The aim of a wireframe is to show the general layout, functionality, and navigation of your app before taking into consideration any visual or aesthetic details such as color, fonts, and images. The purpose of wireframing is to easily and cheaply iterate on the layout and functionality. You can show it to potential users and ask for feedback which is great because people will pay more attention to the functionality and user experience than the aesthetics. As such, wireframes typically use placeholder symbols to represent content -- lines are used to represent text and "X" squares indicate placeholders for images. A few key characteristics of wireframes are:

Here are some examples of wireframes:

You can read more about wireframing here.


*Responsive design example.

For this assignment, you will need to create two sets of wireframes. Each set should contain all of the important pages in both desktop view and mobile view. Your wireframes should contain all functionality and important navigation --this means your wireframes need to show all states of your app. An example of a state change would be a hamburger menu that opens a dropdown menu when selected. You will have to depict what the page will look like with and without the hamburger menu open.

Your wireframes should differ from each other. Try different layouts to see how that may affect the functionality. Keep in mind the user flow--what steps does a user need to take in order to accomplish a task.

Your wireframes may be either hand-drawn or created with a wireframing tool. If they are hand-drawn, please scan them and make sure they are neat and readable. Points will be deducted if your wireframes are not presentable.

Examples of wireframing tools that you can use include:

Once you are done with your wireframes, upload them to Canvas (Link). Along with the files, please include a description of the concept of your app as well as any specific areas of your wireframes that you would like feedback on.

Part 3: Critiques

Your critiques are due by March 9 @ 11:59pm!

We will be holding critiques on Canvas here. These will be helpful for getting immediate feedback on your wireframes.

On the Canvas page, please comment on at least two other submissions providing helpful and constructive feedback. Feel free to respond to comments and continue conversation threads as necessary. Try to prioritize commenting on posts that haven’t received feedback yet.

Here are some points you may want to touch on in your posts:

Be sure to reference specific aspects of the wireframes in your critique, and if you’re pointing out an area that could be improved, try to give suggestions. Don’t be afraid to point out things that you think were done well!

Part 4: Mockup

If wireframes are the skeleton of your app design, then mockups can be thought of as the skin. Mockups are more high-fidelity and display all the visual themes of the app. The purpose of the mockup is to show what fonts will be used, how colors will be placed, and what types of images will be used. Mockups are a static map of your app (so like a wireframe, they are not clickable).

Here are some examples of mockups:

Once you have received feedback on both of your wireframes, create a single high-fidelity mockup of all the important pages in both desktop view and mobile view. This final mockup can combine elements of both wireframes, or just be the final draft of the wireframe you think is better.

You may create your mockup in a program of your choosing; some design software you can use include:

Part 5: Writeup

Your write up should address the following areas:

There is no page length or word count requirement for this writeup. Just make sure your write up is well thought out.

Requirements

Some things to keep in mind as you create your wireframes, mockup, and write up (you will be graded on these things):

Handin

Submit your app idea here by March 6: Link

Upload your two wireframes here by March 6: Link

Submit your two critiques here by March 9: Link

Upload your final mockup here by March 15: Link