Coding/Video editing

Tom had the difficult task of programming the code. this involved constructing pages with several functions , including triggered coordinate sensing (for navigating through the video), embedding video and audio, whilst linking the pages together.

Tom and Charlotte were responsible for editing the footage that was acquired from the woods and turn it into a practical maze game, which they successfully did.

Charlotte also managed to write a script for the narrative of our app and record Rik speaking the lines.

GIF/Demonstration

gif.gif

instructionsNAVWOOD PAGE2

For our app we needed some form on instruction or diagram so that the user knows how to navigate through the different paths. The style of app instructions, seen on the screenshot above, uses a technique where the background goes darker and white arrows/words of instructions are placed on above.

We decided to make a GIF to illustrate the movement of the user from a birds eye  view in a chair. Using a GIF generator I put 3 white circular arrows on top to represent the rotational movement. The GIF is supposed to fit in the blank space on the page

Location

location.jpg

woods1

woods2woods3woods4

On the 14th of April, Charlotte and Tom visited Stockhill woods which is our chosen location to host this app. On this trip, they acquired photographs and videos of the of the woodland to give our project greater depth and meaning. This location suits the purpose of our app because the scenery isn’t disturbed by any buildings or anything unnatural. I can see that the environment compliments the theme of the app and the colours featured link together with the logo and some layout elements

App layout

My role in my group was to take care of the graphic aspect of the application. Firstly I made a layout in an iPhone 6 resolution. Using the images that Tom and Charlotte got from our chosen location, we used one of the photographs as a background to resemble the woodland theme we were trying to accomplish, however, I decreased the saturation  and brightness of this background so that any elements on top can stand out in light/white colours can stand out and are readable.

Using the same logo as the app icon, I placed the lettering as a heading/title at the top of the page. I also added a line border to visually contain the content on the page.

Charlotte wrote the terms and conditions that the user must agree to if they want to use the app. In addition the terms and conditions highlight one of the main points of this application. It states how the user must give up a wide variety of permissions on their phone. Users commonly never read this.

There is also a section where the user can see a GIF that explains how to play the app

The second page is a page where the user is introduced to the main character of the app, Jack, There is also a start button to launch the videos/maze.

In order to make the cartoon of Jack, I looked for a photograph that best resembled a park ranger. Using layers of different colours and sizes, I cut around recognisable detailed (face, hat, t-shirt etc…) and added symbols on his hat/tshirt that looks like the National Trust

Screen Shot 2017-04-28 at 12.57.56.pngNAVWOOD PAGE2

Video Editing – Corruption

My group required me to help with some of the video editing. My job was to create the illusion of corruption on the clips that lead the user of the app into dead end. Thos involves the previous no entry images I made.

I began by testing how I could make an authentic as possible corruption effect. Using a video from youtube I experimented with solid layers, together with adjustments layers and effect presets. I played around with colours and fractional noise effects until I was satisfied with the outcome.

I applied the same effects to all of the applicable videos and I also attached the photoshopped images in a glowing style so that it flashes like an alert.

Screen Shot 2017-05-01 at 14.35.04Screen Shot 2017-05-01 at 14.39.37Screen Shot 2017-04-28 at 13.38.24Screen Shot 2017-04-28 at 13.36.34Screen Shot 2017-04-28 at 13.36.26Screen Shot 2017-04-28 at 13.36.17

App Logo

An app logo was required as one of our final outcomes for the application and I used Photoshop to achieve this. My font selection and style were subject to trial and error, as I tried to use wooden textures to begin with. After researching some of the typical nature/navigation app icons I realised that generally icons have either a solid or fading background, as opposed to photographs. I used the font Lemon milk because it gave me a sense being modern. I also liked the boldness of the font because the app name needs to be visible from afar. Similarly to the apps I was comparing to, I tried to incorporate some symbolism, so that the concept of the app can be communicated immediately. Because the theme of the app is based around navigation, I decided to add a simplistic compass. In addition the wording Navwood has leaves attached to,i order to convey woodland

 

 

 

 

Sign postage

 

18195514_10155188566578991_94689200_o18136424_10155188565133991_751819439_n18142910_10155188558178991_1536511156_n18195324_10155188558153991_471029437_o18191129_10155188558148991_38949129_n

The game maze idea required a variety of no boundary and no entry signs in order to guide the users on to the right path. With the aid of photoshop I made and modified traditional sign postage styles to try and an emulate the idea of branding with in the application, so that, from a marketing stand point, the user familiarises with the logo. When it came to mimicking a theme for some of the designs, I used wooden textures to stick with the context of the woodland theme. I also made one of the signs link back to the main character Jack.

In addition, i was very limited in terms of design because I realised that the functionality of most roadsigns/boundaries is to communicate the message ‘no trespassing’ as efficiently as possible, whilst using hazard related colours like orange, danger invoking colours like red and having fonts that are easy to read. Further more, I had to use the most basic shapes so that the main focus is the message.

 

Testing

So that we can have a good understanding of how this game would work visually, Me and Charlotte took some mock footage of a 1st person view walking up and down corridors. These corridors represent the paths that the user will take in this game but one challenge we encountered was trying to make the clips transition seemingly therefore we decided that we’ll start/end each clip facing the ground and blur the start/end so that it looks smooth

Wireframe

IMG_3734-768x576

Charlotte illustrated the way the app would run by drawing a wireframe for her maze inspired game. As we can see there is an introduction page with the terms and conditions. Page 2 is where the user is introduced to Jack through audio and a cartoon oh him. The 3rd page is where the user begins their journey through a maze of videos that’ll end up at a mutual ending.

The pink colour represents left turns, orange represents right turns and the crosses represent the dead ends in the maze