Skip to content

Design Milestone

Due Date

Due Date: September 27
Grading: Team

Lecture

You must watch the Design Principles lecture before starting this milestone.

Description

For this milestone your group will work out in detail the design of your app. You will use a diagramming tool like Pencil, figma, justinmind, balsamiq, mockflow.com, or just your favorite paint program . If you are building a game or other widget-free app then a paint program will be easier to use.

Your design should include:

  1. An image for each of the major screens and dialogs of your app. Show all the widgets in their proper placement. Name each screen and write some text to explain how actions in one screen will lead to other screens.

  2. In the case of a widget-free apps, you should include diagrams for all the major ‘areas’, animation stills that detail the most common animations and game mechanics (for example, Super Mario would have a set of drawings showing Mario jumping, punching up, and landing on a Goomba’s head), as well as story boards if they are more relevant to your game.

A goal of the design is for you to think about the usability of your app. Try to ‘use’ the app in your mind: simulate how a user might use the app. Printing the screens into sheets of paper of the correct size and shuffling them as you pretend to use the app is a very common way to test the usability.

Another goal is to save you time. Remember that making a change now, like adding or deleting a screen, is a thousand times easier than if you wait until after you have written the code.

Rough Designs

Before you start drawing your design with a tool, I recommend you do some rough designs by simply sketching out ideas with paper and pencil. Show these rough designs to your client and each other until you reach an agreement on the overall layout of your app: what are the major screens, what kind of navigation you will use, etc.

Once you know which are your main screens and what goes inside of them then you are ready to start using one of the drawing tools.

Deliverables

Add one page to your wiki called "Design" and add the images of your design
here, along with some textual description of each screen and what it is used
for. You can split it into multiple pages but, if you do, make sure the "Design"
page has links to all of them (so, it works as an index page).

Do not make any changes to the wiki pages used for this milestone after the deadline. Wait until after you receive the grade for the milestone to make any further changes to these pages.

Uploading images to GitHub wiki

Github does not allow you to directly upload a photo to the wiki. Instead, create a dummy Issue. You can upload photos to an issue comments (just drag-n-drop). Then you can use the URL of the uploaded photo in your wiki page. See this example. Another way is to just git-clone the wiki and add the images to the wiki repo itself. I highly recommend you read the About GitHub Wikis Help Page.

Grading Rubric

Grade is 100 minus the total points lost, with minimum of 0.

Points lost are:

  1. Is there a drawing for each one of the main screens of the app? 0–50 points.
  2. Did you add some English text associated with each screen which explains what that screen is used for? in the case of a game, what happens in this screen? 0–40 points.
  3. Color scheme(s) for your app? 0–40 points.
  4. Are these drawn in a wireframing or design tool? 0–60 points.
  5. Are the images embedded in the wiki page? and hosted at github? Is the wiki page easy to read? 0–40 points.
  6. Do the screens correspond to the core (most frequently used) functionality of the app? 0–80 points.
  7. Is there a clear way to navigate between screens? 0–40 points.
  8. Are the most common (frequently used) navigations short? easy to find? 0–40 points.
  9. Are there widgets for everything the user wants to do (create, edit, delete, share, re-order, sort, etc.) ? 0–50 points.