Creating your prototype. In this lesson students are learning about: Selecting appropriate software...
-
Upload
ashlee-hoover -
Category
Documents
-
view
217 -
download
0
Transcript of Creating your prototype. In this lesson students are learning about: Selecting appropriate software...
![Page 1: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/1.jpg)
Creating your prototype
![Page 2: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/2.jpg)
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
![Page 3: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/3.jpg)
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
![Page 4: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/4.jpg)
What software could you use to create your interactive app prototype?
![Page 5: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/5.jpg)
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.
![Page 6: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/6.jpg)
Today we will focus on:
“Each section must be accessible from any other section”
So what does this mean?
![Page 7: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/7.jpg)
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
![Page 8: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/8.jpg)
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
![Page 9: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/9.jpg)
![Page 10: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/10.jpg)
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.
![Page 11: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/11.jpg)
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.
![Page 12: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/12.jpg)
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.
![Page 13: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/13.jpg)
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
![Page 14: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/14.jpg)
Menus
• Here is an example….• Your teacher will guide you as to how to
create it….
![Page 15: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/15.jpg)
Home
History
Contacts
HOME
Next
![Page 16: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/16.jpg)
HISTORY
• Here is some random info about our company history
Home
History
Contacts
Next
![Page 17: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/17.jpg)
CONTACT
• Here is some random information about how to contact us
Home
History
Contacts
Next
![Page 18: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/18.jpg)
Or you could use hotspots…
Next
![Page 19: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/19.jpg)
All about cows in winter
• Some information about Cows here
Back to home
![Page 20: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/20.jpg)
All about Glastonbury Tor
• Some information about the Tor
Back to home
![Page 21: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/21.jpg)
Here are some really good examples of how to create a prototype app
• The Beatles
• The arctic monkeys
• Wacky Races
![Page 22: Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.](https://reader036.fdocuments.in/reader036/viewer/2022062722/56649f2a5503460f94c442da/html5/thumbnails/22.jpg)
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……..”