- Billy Van-der-have- Hilton Alessi- Ummad Ahmed

Intro

Our app is called “Karate Kicks”, its based on Jackie Chan. We created this app to have a laugh, there is no serious or technical element to it as it is simply a sound board of Jackie Chan's quotes and some martial arts sound effect, but it does also hold a bio about his early days with a link to a website which gives more detail.

Roles/ ResponsibilitiesMain Responsibilities

- Ummad - design/wireframes

-Billy - figured out Appfurnace

-Hilton- figured out the functions and code

Joint responsibilities

Final design

Designing Assets

Research

Final layout

Colours

Inspiration/ Influences Launch Pad (Apps)

Soundboards (Apps) –DJ Mixer

Celebrity apps - Hero Face Changer

- Gangnam Style yourself

YouTube vids – beat board vids https://www.youtube.com/watch?v=3vC5TsSyNjU

movies- Rush Hour

Common interest

Fighting games – Tekken

Younger experiences (mimicking sounds)

Icon Archive – to create assets

ICON Archive

Intended Audience 14+

Martial arts enthusiasts

Jackie Chan lovers

People looking for a laugh (humor)

Nostalgia (Rush hour Quotes)

FormThere are similar apps to the one we created but there were no Karate sound boards available.

Some apps do have sounds according to who its about.

There are music apps which hold a similar layout to our app when it comes to the design of our sound page.

However these other apps don’t really tells us about the person, so we added a biography page to tell the user more about the person.

Style We were using a cartoon / animated style for the assets

and overall look of the app.

Used a lot of gradients to add depth to each element.

Silhouettes to create simple buttons

Easy and intuitive layout

Warm bright Colours / bold borders.

App TechniquesThere are buttons linking the pages together

The audio is linked to the buttons, once pressed, they play sounds.

We have a pop-up which opens which provides an option to remove ads.

There is a scrolling section in the bio page.

Research / IdeasMind maps – initial ideas

Flow Chart – shows how pages are linked

Wire frame Paper and Digital - Designs

Wire Frame processes -

Mind Maps

Flow Chart (Paper)

This flowcharts simply shows how all the pages will be connected.

Flow Chart (Digital)

Wire Frames (Paper)& Initial Sketches

we started by creating rough sketches of each of the pages which we would later develop.

We chose a few of the good ideas/ designs and created neat versions just to better represent want they would look like.

Wire Frame Process

Wire Frames (Digital)We made these wireframes in Lucid Chart

Wire Frames (Digital)

Concepts / Themes Having a digital version of a physical Launch Pad.

Being Able to Record and Share sounds. But we scrapped the record page as figuring out the code for the recording device was troublesome and we couldn’t work it out in time.

The logo has traditional style to it as the app is about martial arts. Made to look like an opened scroll.

Production of App

Assets

Adding sounds

CODE

Appfurnace (Final)

Asset Sketches

Before we could actually use appfurnace to create the app we had to design our assets, which we would be using as the buttons and banners.

04/20/23Footer Text

Adding Sounds

Adding sounds was particularly tricky as at first we couldn’t find the right code to link the sound to the buttons. We had to try a lot of code which we found on different forums to get the buttons to play the sounds but majority would not work for us.

- But once we found the right code it was pretty simple as we first had to download the sounds from http://soundbible.com/tags-martial-arts.html ,-Then we uploaded them to our library in appfurnace .-Named all the buttons and sounds.-Then used the code to link them together but changing the source name and the button name each time.

Code

Sound NameButton Name

Code for links

Code for Sounds

Code

If we had more time we were thinking about adding a tweet button / widget which allows us to share information about our app on twitter in a personalized way.

However we didn't’t want to limit our self with just linking this was to Twitter but also the other social media platforms which we have links to in out app.

Appfurnace Final

SHARE/BIO

QUOTES/SOUNDS

Project Evaluation

How can we improve

•Within time constraint, make do-able designs – previous or initial ideas we first worked off of were difficult to do within the time we had to do it.

In appfurnace change restraints for different phones – there was a small gap at the bottom of app when you view on your phone but when working online there is no gap.

Create assets in the sizes they are going to be used.

Use smaller canvases which would speed up the loading time

References Rebi. (2014). Beat Maker (Version 1.9) [Mobile Application Software].

Retrieved from https://play.google.com

Widebeam Digital. (2012). Keith Lemons Mouthboard (Version 1.3) [Mobile Application Software]. Retrieved from https://play.google.com

M4sonic. (2012). M4SONIC – Weapon (Live Launchpad Mashup). Available: https://www.youtube.com/watch?v=3vC5TsSyNjU. Last accessed 17th November 2014

Music Paradise. (2014). DJ Mix Maker (Version 117.5.15.7) [Mobile Application Software]. Retrieved from https://play.google.com

04/20/23Footer Text