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…

• http://www.creativebloq.com/app-design/examples-app-navigation-10121122

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……..”