Finalised design- code and app!

This is the blog on the final application design with more coding and the pages all intwining perfectly and working with added sounds and little details for the users enjoyment, we also linked the app more to a famous well known person, ours being jackie chan.

image

So here is the pre-home page, it shows jackie-chan, our famous person for the app to be based on, and the logo, once tapped, the logo will take you to the main home and will also make the noise of a throwing knife hitting a board.

image

Here is the main page, as you can see we have made some changes to it since the previous,. We have aded a picture of jackie chan from the animated series and if tapped he says ‘how may we help you’.

image

Here is the finished sounds page with all 12 blocks holding a different sound each.

image

So here is the newly added quotes page, this page is filled with funny a memorable quotes fromthe films, rush hour 1,2 and 3

image

This is the brand new BIO page, this page we have ut in instead of using a record page, the reason for this is because we couldnt find any code on making the record button actually record and allow you into the phone. This page is also great as it links you more to jackie chan and tells yo about him.

image

Again here is the page for the bio, this time as you see the image is glowing, the reason for this is because iff tapped on the image, it will take you to an external site allowing you to read a full biograpghy on jaciechan.

image

Here is the bio that it will link you to.

image

Here is the new improved share page, i took my time to add the code to these buttons making it possible for them to be tapped and take you starght to the log in page of each of these social network sites.

image

Here is the QR code for anyonne who may wanna test the app out themselfs

image

Here you see the coding i done to link the buttons with the social media sites.

Original wire frames

image

Here you can see some of the original wireframe designs that we’re made before we got using app furnace, these designs was made by ummad, while umad was designing these wireframes, i slipped off to do abit of research on app furnace, seeing what it was about, how its used and see what the code was like, i quickly learnt how to do alot and this critically helped the group as i knew what to do before needing to know how to do it.

The above page is the original idea for the share page and sounds page, which was then called a beat board, this idea we scrapped and just called it sounds.

image

Above are the wirefram designs for te record page and the saved page.

image

So above we see something that isnt in the app, this page is the quick navigate page, well its not exactly a page but more of an interactive screen fixed element to the app, we never used this because we  couldnt figure out the coding and we never had enough time, but this would have been a slide up menu from the bottom showing the different page names for the user to navigate around the app faster.

App design v2- my other design

image

Here is a pre home page that I designed, a pre home page is basically everything the user see’s before they enter the aplication and see its functions, the reason for this page is simply because it shows the user the name of the appliction aswell as the logo and also a random button

image

After taping on the logo you get to the main page, this is where you an pic all of the following options from sounds to record to share.

image

Here is the record page, this page allows you to record your own sounds, and change them to make them sound how you want them to sound.

image

Here is the sharing page, each of the buttons will link you straight to either one of the following social networking sites where, hopefully, you can share your sounds.

image

Here is some of the code for the sounds, as you can see we have accumulated many different sound effects from punches to sword fights for the users entertainment.

image

Here is the folder that ummad made full of assets from logos to images, sounds to icons.

image

Here you can see some of the icons that have been made.

image

Here is some of the title pages, for the user so they know what page they are on.

image

and here is the page filled with different sounds.

image

we are also thinking of adding some different quotes too, just to give the application some more jacki-chan feel.

App design on computer

image

Here is the desktop version of app furnace, I am about to be experimental and try create a beta for the app Karate Kicks.

image

Here is some of the separate pages I am putting into the app

image

Here is a little design I have come up with so far with working buttons that should take me to each page

image

I downloaded the app version on my iPhone to test out the app

image

Luckily it loads and works and you can see here that this is the home page I made

image

Here is my design for the sounds page, as you can see I have a back button a more button and the sounds buttons

image

Here is the more sounds page of you was to click the more button,  thereby also a r transition that slides to make it more attractive to the eye.

image

Here is the design for the saved sounds page,  where it says sound and length you can chose to sae your own sounds and name them and next to that will be the length of the sounds.

image

Here is the recording page, on this page you can record your own sounds to add to the soundboard as well as change the pitch and length and also distort the sounds.