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!
No setup is required for this assignment.
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
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:
- Who is this app for?
- What are the goals of the app?
- What makes the app better than similar existing ones (if any?)
- How many pages will your app contain? Your app should be no more than 5 pages.
- What features will you include in your app design?
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):
- group scheduling tool
- will this be used by peers, subordinates, or superiors (would you ask your boss to fill out a when2meet?)
- how concise do you want your time intervals?
- news-reading application
- will this be used by a busy person or someone just looking to be entertained?
- will the app be specific to a particular topic, or for all users’ interests?
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:
- they show the main chunks of content
- they draw the outline and layout structure
- they depict the most basic UI
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:
- Balsamiq (30 day free trial)
- Photoshop/Illustrator/Adobe XD (free with a Brown account)
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:
- Layout - Are elements placed in a clear, visually appealing way?
- Usability - Is the app easy to navigate and understand? How could it be more user-friendly
- Concept - Is there a consistent thematic concept for the app? Is it effective?
- Audience - Is this an appropriate application for the intended audience?
- Functionality - Does the app include all of the necessary functionality? Are the goals realistic?
- Responsiveness - Does the app transition smoothly from desktop to mobile view?
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:
- Photoshop/Illustrator (free with brown)
- Adobe XD (free with brown)
- Sketch (not free, trial)
- Moqups (free for one project)
- Figma (free)
Part 5: Writeup
Your write up should address the following areas:
- What is the application concept?
- What are the goals for your application?
- What makes it better than existing alternatives (if any)?
- What/how many pages did you decide to include and why?
- Why did you choose the layout that you did? Ex.: Grid layout
- What features did you decide to include and why?
- What steps would a user need to take in order to accomplish the goal?
- Usability: Is the app easy to use? What choices did you make to improve navigation? Ex.: Purpose of different navigation items. Does it address accessibility?
- Visual Design: What design decisions did you make and why? How did you tailor the visual design to meet the needs and concept of the application?
- Examples of things you can address: Font choices, color choices, image alignment
- Responsiveness: How does the application change from Desktop to Mobile view?
- Critiques: How did you incorporate feedback from the critiques you received? What did you learn?
Some things to keep in mind as you create your wireframes, mockup, and write up (you will be graded on these things):
- approved app idea
- two sets of wireframes
- each wireframe should have a mobile and desktop view
- show all state changes in your wireframes
- your wireframes should be neat and presentable
- two constructive critiques on Canvas
- final mockup of your app with a mobile and a desktop view
- writeup adresses all required points mentioned in the writeup section of this handout
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