Skip to content

UI Mock-Up

You should create a mock-up (illustration) of at least eight screens you would include in your app.

Example of what this might look like

https://docs.google.com/presentation/d/1WiYdHbJOljnntJfSqziVJpv7NkpU-uMoWdj1TPjnxkc/edit?usp=sharing

The example was created using draw.io. You may use whatever software you'd like. Some other possibilities you could explore:

  • MIT App Inventor is a simple interface for developing phone apps. You can drag and drop components onto a phone screen, then screen shot the results.

  • NetBeans is normally used to develop applications in Java, and is installed on the school computers. It includes a feature where you can design GUI components using drag and drop.

  • There are also drawing tools integrated into Google Slides, which you could use.

Accessibility

Skim through this webpage that summarizes app accessibility, paying particular attention to the six best practices listed under the Best practices for mobile app accessibility in iOS and Android heading.

A couple clarifications from this list

  • (#1) The colour contrast ratio is technically defined as the ratio between the luminance of your foreground and background colours. In practices, a you'll want to use a tool such as this to pick foreground and background colours that have at least a 4.5:1 contrast ratio.

  • (#4) The dp in 44dp stands for density independent pixels. Density independent pixels are a constant size on all screen types. For the purpose of applying this design practice to your project, you'll just want to make sure all components that the user needs to touch with their fingers are at least 44 pixels wide and 44 pixels high.

Of the six practices,

  • Choose one that you will attempt to integrate into your UI mock-up. The best choices would probably by #1 (colour contrast), #3 (UI Labels) or #4 (touch targets)

  • Choose a second one where you will just explain how you would integrate it into your final app.