Creating your prototype

In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an application Considering house style and fitness for purpose

At the end of this lesson students will be able to: Create a multi-menu template interactive presentation Select an appropriate font family and apply a house style

What software could you use to create your interactive app prototype?

Remember your App needs to include …. a home section featuring a basic map of the school a section featuring a short video a section featuring a downloadable prospectus a section featuring an audio advert or interview Each section must be accessible from any other section.

Today we will focus on: “Each section must be accessible from any other section” So what does this mean?

App navigation is important! If your user finds navigation straight forward then they will continue to use the app. This could lead to future purchases. Here are some exemplar user interfaces… design/examples-app-navigation design/examples-app-navigation

Examples The Cocktail app has a very simple task for its users: choose the cocktail you like from its selection, then view the recipe, ingredients and preparation details. In the same vein the main navigation has been designed with just four plain icons. Notice how well the designer makes use of ‘white space’, even in the small area of the buttons, giving the navigation a minimal, elegant touch that is nicely integrated with the overall app

In this app for fashion retailer Zara, the designer has successfully integrated the navigation into the distinctive look of the entire UI. We see a minimal design with no heavy graphics using a black and white colour scheme. The navigation has simple and clear appealing icons. They are combined with wording that supports the app’s general style, by using the same typography and enhancing usability by clearly stating what each navigation element is about.

The ChoreMonster app has a unique and strong illustrative style that the designer has rightfully chosen to follow through the navigation too. Unlike most apps they have devoted a rather large part of the screen to the navigation, providing users with strong, detailed illustrations for each menu option. The size of the clickable area and the playful typeface reminds us that this app is mainly aimed towards children.

Headspace is an app that offers meditation tips to users. The designer has used a deep purple colour for the navigation, a colour that is considered highly spiritual so it enhances the purpose of the app quite effectively. It is a simple and clear menu using both icons and typography for each element, a very subtle but beautiful approach.

So how do I create an effective navigation system? You probably have two main options ‘Styling’ aside you will probably have to consider navigation using a structured menu Or Use of hotspots over images

Menus Here is an example…. Your teacher will guide you as to how to create it….

Home History Contacts HOME Next

HISTORY Here is some random info about our company history Home History Contacts Next

CONTACT Here is some random information about how to contact us Home History Contacts Next

Or you could use hotspots… Next

All about cows in winter Some information about Cows here Back to home

All about Glastonbury Tor Some information about the Tor Back to home

Here are some really good examples of how to create a prototype app The Beatles The arctic monkeys Wacky Races

Task You should now begin to construct your prototype app as you have planned it It is ok if it doesn’t look exactly as planned because in your CA you will be able to use this as a point of evaluation e.g. “I found it really difficult to ….. And so instead I……..”