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:

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?

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 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:

• Displaying the main chunks of content
• Drawing the outline and layout structure
• Depicting the most basic UI

Here are some examples of wireframes:

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:

• Balsamiq (30 day free trial)
• Photoshop/Illustrator/Adobe XD (free with a Brown account)

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:

• 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).

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:

• Idea:
  • What is the application concept?
  • What are the goals for your application?
  • What makes it better than existing alternatives (if any)?
• Wireframes:
  • 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?
• Mockup:
  • 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?

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

Requirements

• One wireframe uploaded to Canvas
  • Should have a mobile and desktop view
  • Should show all state changes
  • Should be neat and presentable
• Two constructive critiques on Canvas
• Final mockup of your app with a mobile and a desktop view
• Writeup which addresses all 3 required areas mentioned in the writeup section of this handout