Skip to main content

Assignment 4: Wireframes & Mockups

Deadline for uploading wireframes to Canvas: March 5, 11:59pm

Deadline for critiques on Canvas: March 8, 11:59pm

Deadline for mockup and writeup: March 12, 11:59pm

Introduction

Thanks to you, Remy can now tell the weather whenever he wants! Never again will he have to worry about whether or not his chic apparel is fit for the weather. However, Remy's dreams are bigger than our WeatherFeed. Our scrappy rat wants to create a web and mobile app for millions of users - he needs your help nailing down an initial design that will knock the socks off of investors.

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!

Overview

Your task is to create at least one wireframe, and one mockup of a web application. Your wireframe(s) and mockup will need to be responsive and take into account a desktop view and a mobile view.

Your wireframe 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 receive and any changes to the wireframe that you see fit. You will not be able to start assignment 5 until you have created your final mockup.

Here are some examples of wireframes and subsequent mockups:

wireframe and mockup example of a mobile travel app
wireframe and mockup example of a web app

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:

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 5


Responsive design example.

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 can be used to represent text and "X" squares can be used to indicate placeholders for images. A few key characteristics of wireframes are:


Here are some examples of wireframes:

web wireframe for a bank app
generic mobile wireframe


For this assignment, you will need to create at least one wireframe. You may create more to get a better idea of how wireframing works, for getting more feedback from critiques, and for having more options for a mockup. A wireframe should contain all of the important pages in both desktop view and mobile view. A wireframe should contain all functionality and important navigation --this means your wireframe(s) 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.

A wireframe may be either hand-drawn or created with a wireframing tool. If hand-drawn, please scan it and make sure it is neat and readable. Points will be deducted if your wireframe(s) are not presentable.

Examples of wireframing tools that you can use include:

Once complete, upload all of your wireframes to Canvas. 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

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 others' 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).

mobile mockup of facebook
web mockup for a burger joint

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

Handin

Upload your wireframe to Canvas by March 5.

Submit your two critiques to Canvas by March 8.

Upload your final mockup and writeup on Gradescope by March 12.