P4: Create the planned interactive product/M3: Create a graphical user interface combining media elements with user interactivity
Folder Arrangement with resources in
Screengrabs of building the finished app
Finished App walkthrough
Timecode 0:00 - 0:03 - App Icon 0:04 - 0:06 - Loading Page 0:07 - 0:08 - Home page 0:09 - 0:15 - Moving around the map 0:16 - 0:18 - Coffee shop page 0:19 - 0:25 - Starbucks link to their website 0:26 - 0:31 - Costa link to their website 0:32 - 0:43 - Caffe Nero link to their website 0:44 - 0:45 - Information Page 0:46 - 0:49 - History of Cambridge page, scrolling through text about Cambridge 0:50 - 0:55 - Parking Page 0:56 - 1:01 - Quiz main page 1:02 - 1:08 - See answers and back button to homepage Specific forms of interactivity Map: 0:09 - Allows people to look at whats around in Cambridge and move the map around to see where shops are Links to coffee shop websites: 0:17 - Allows people to browse the menu to see what drinks they'd like as well as through the coffee shops website, find where their nearest store is. Buttons (whole video but the 'see answers' is 0:59): As links to different pages like when you click the 'see answers' button on the quiz page t shows you the answers.
D2: Demonstrate optimisation techniques across the interactive media product
Timecode(This includes a bit more info on why I did certain things)
0:00 - 0:02 - This is a background my teacher made for his app which is the exact size for an iPhone 7 which is what we are making the app to fit so I'm hopefully going to use it as a template 0:03 - 0:11 - Showing the exact measurements for that iPhone 7 background (Height: 735 pixels Width: 414 pixels) 0:12 - 0:33 - Dragging my pre made loading page backdrop into photoshop and putting it on top of the template and fitting it to size so it is those right measurements for an iPhone 7 0:34 - 1:04 - Changing the brightness, contrast, hue and saturation to make the colours pop a little bit more and add some more excitement to the backdrop so the audience is more engaged because it is more vibrant. 1:05 - 2:18 - Saving the image for web so that I can get it in the right format for Xcode. I wanted it to be as high quality as possible with all those colours but I went for PNG-24 which, as you saw was very high quality, the backdrop looked great but it was also a smaller file size which means that the user is going to be able to navigate the app faster and interact with it easier because they won't be waiting for the page to load. 2:19 - 2:29 - Saving it into my folder so I know where it is to be put into the assets folder for Xcode
User accessibility needs to be thought about more so more people can access the app and use it well, this will also give a wider audience of people that can use the app and will consequently, get more downloads.
In future to optimise and improve the app I will - add more icons so people who's native language is not English can understand what the app is saying and older people who are 'digital immigrants' can understand and navigate the app as well. - I will also have an option of speech navigation on the app for blind or visually impaired people. I could also make the text a lot clearer and bigger so everyone can see it. - I could make the colours and themes of the app clearer, so it is easier to see for older people and everyone can navigate it better. - If I added videos on the app, I should have them subtitled so that hard of hearing users can understand what is being said.