Download - Hebefoundation app workshop
![Page 1: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/1.jpg)
DESIGN | DEVELOP | DISTRIBUTE
App Workshop – Hebe Foundation
![Page 2: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/2.jpg)
What is an app?
“A mobile application (or mobile app) is a software application designed to run on smartphones, tablet computers and other mobile devices.”
![Page 3: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/3.jpg)
Operating Systems
iOS Android
Blackberry Windows
![Page 4: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/4.jpg)
There’s an app for that…
800,000900,000
70,000,000,000Expected app downloads in 2013
Total Apps Total Apps
![Page 5: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/5.jpg)
Who uses apps?
In the UK 1 in 2 people aged between 15-55 own a smartphone capable of
installing apps.
![Page 6: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/6.jpg)
Some stats
Users spend an average of 158 minutes each and every day on smartphones and tablets.
![Page 7: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/7.jpg)
Apps are personal
64% of people fall asleep next to
their phones
![Page 8: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/8.jpg)
An Multipurpose Tool
Apps turn a mobile phone into a multipurpose tool
![Page 9: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/9.jpg)
Mobile Toolkit
TEXT PICTURE MESSAGE EMAIL MOBILE WEB
BLUETOOTH PAYMENTS QR CODES GPS
@
£
ACCELEROMETER AUDIO TOOLS CAMERA TOUCH
![Page 10: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/10.jpg)
What makes a good app
![Page 11: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/11.jpg)
What makes a good app
Discover, explore and share more music, TV shows and ads you love.
![Page 12: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/12.jpg)
What makes a good app
![Page 13: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/13.jpg)
What makes a good app
Apartments for Sale in Augmented Reality
![Page 14: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/14.jpg)
Components of an app
![Page 15: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/15.jpg)
DESIGN | DEVELOP | DISTRIBUTE
Creating a Mobile App
![Page 16: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/16.jpg)
The Process
DEVELOPMENT TESTING RELEASE MARKETING
THE IDEA FUNCTIONALITY WIREFRAME DESIGN
![Page 17: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/17.jpg)
The Idea
What does the app do?
Why is it different from other apps?
What is the main purpose of the app?
The best ideas tend to be the most simple ones. An app that tries to do one thing well is better than something that does a lot of things badly.
![Page 18: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/18.jpg)
The Functionality
Now you know the purpose of the app what does it need to do to be able to achieve it?
What phone features will it use?
What must a user need to be able to do?
What is the main purpose of the app?
![Page 19: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/19.jpg)
The Wireframe
An App wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the structure and flow of an app. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.
Details on how every single page of the app link together
Demonstrates how the app works and what a user can do
![Page 20: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/20.jpg)
The Design
USER EXPERIENCE
THE BRAND UI DESIGN
![Page 21: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/21.jpg)
Brand
![Page 22: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/22.jpg)
Colour Schemes / Style
SeriousProfessionalTrustworthyCleanInformative
Colours
Keywords
![Page 23: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/23.jpg)
Colour Schemes / Style
FunColourfulGameChild FriendlyEntertaining
Colours
Keywords
![Page 24: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/24.jpg)
User Experience
![Page 25: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/25.jpg)
User Experience
![Page 26: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/26.jpg)
User Interface Design
Colours, style & layout should be an extension of the brand and purpose
![Page 27: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/27.jpg)
DESIGN | DEVELOP | DISTRIBUTE
“Gamestacker” Example
![Page 28: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/28.jpg)
The idea of Gamestacker
Gamestacker is a location based, peer-to-peer game trading app designed to help gamers discover
2nd-hand games nearby.
![Page 29: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/29.jpg)
What it does?
SCANSEARCHAbility to search for
games for trade based on your location
MESSAGEAbility to scan the
barcode of your game to add it to your stack
Ability to message users to set up trades
and purchases
![Page 30: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/30.jpg)
Target Audience
Gamestacker is for anyone who has a stack of games they want to get rid of.
Typically 16-30 year old gamers.
![Page 31: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/31.jpg)
The Wireframe
![Page 32: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/32.jpg)
Log in flow
This flow shows the users the first connection to the app
![Page 33: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/33.jpg)
Browse games flow
This flow shows the user’s searching and selecting a game
![Page 34: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/34.jpg)
Add a game flow
This flow shows the user adding a game to their “Stack”
![Page 35: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/35.jpg)
The Brand
![Page 36: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/36.jpg)
The App Design
![Page 37: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/37.jpg)
The App Design
![Page 38: Hebefoundation app workshop](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554d2a39b4c905c5208b506d/html5/thumbnails/38.jpg)
DESIGN | DEVELOP | DISTRIBUTE
And now its your turn…