A GUIDE TO APP-INESS: TUTORIAL VIDEOS & SCREENSHOTS

A Guide to App-iness is a time-lapsed YouTube and screenshot tutorials on app user interface design. These tutorials are recording of myself experimenting and learning how to create an app for the first time. These videos and screenshots will be uploaded weekly to this blog URL.

First: A Guide to Ethical Development of an App

Login Page

The Login page allows you to prevent users from accessing the entire mobile app, meaning that the login page reveals itself right after someone downloads the app to their phone and opens the app. This is obviously ideal for companies that don’t want any customers seeing what the app is all about. Upon landing on the Login Page, the user sees an option to register, which would eventually let them see the content beyond the login page.

Sign Up Page

With the Sign Up page, a user logs in with a single ID and password to gain access to a connected system or systems without using different usernames or passwords, or in some configurations seamlessly sign on at each system.

Listen, Playlists, Favourites Page

The Listen, Playlists, and Favourites pages are the start up features when you first join the app. They are scroll through feature so that the consumer is able to navigate easily and understand how the app functions. Providing pages like this would benefit a business as it allows the consumer to easily navigate and engage with the app creating a positive first impression.

Selection Page

Screen Shot 2017-05-25 at 1.28.54 pm

The Selection page is the main interface of the app. This is the startup page that the app will automatically present once the user has logged in. The page has four functions including Search, Browse, Radio, and Music. As you can see, it also displays the username as well as whether they are using the offline or online function.

Search Page

Screen Shot 2017-05-25 at 12.46.46 pm.png

The Search page allows the user to be able to look up albums, artists, and songs. The albums displayed are previously listened too or searched items. This function allows for users to discover new music and see related artists.

Browse Page

Screen Shot 2017-05-25 at 1.25.24 pm

The Browse function allows for users to listen to public playlists and playlists generated by the app developer. The layout is divided into Activities & Moods, New Releases, and Concerts. This page is ideal for discovering new music and it attempts to promote the live music industry by suggesting concerts near your location.

Radio Page

Screen Shot 2017-05-27 at 8.19.27 pm

The Radio page is created by collecting the data from your playlists and previously listened songs/artists to formulate various stations that include similar music suited to you. Artists are suggested and from this, similar music to that artists is provided in the station. You also have the option to create your own public station that other users can listen to.

Music Page

Screen Shot 2017-05-28 at 1.47.18 pm

The Music page is one of the main navigation centres of the app. This is where the all of the users personalised music is stored and can be accessed. The bottom of the app is where you can see what the user is currently listening to.

Playlists Page

Screen Shot 2017-05-28 at 2.19.19 pm.png

The Playlists page lists the users personalised playlists that they have created, as well as any playlists that they may have subscribed to.

Music/Song Player Page

Screen Shot 2017-05-28 at 2.09.58 pm

This display screen is the page you arrive on when listen to a song/album. The plus symbol to the left allows you to add this particular song to an existing playlist.

Album Page

Screen Shot 2017-05-30 at 2.00.54 pm.png

The Album page includes a search engine bar so that the user is able to find a particular album by an artist. The design is simply just a display of albums previously searched and include suggested albums.

Artist Page

Screen Shot 2017-05-30 at 2.18.09 pm.png

The Artist page also includes a search engine for the user. The page displays a headshot of the band or artist which links to their individual profiles that contain all of that particular artists music.

App Icon

Screen Shot 2017-05-30 at 2.25.33 pm.png

This displays the App Icon template and one design for the app icon. I have chosen the same colour palette for the app icon as what I’ve been using for the whole app. The record is an easily identifiable symbol that suggests a music application. It’s simplistic and not overcrowded, however it does need more refining.

***Currently the app is not at full functionality so it is not yet available to the public to download. This is due to coding difficulties that will hopefully be resolved with more experimentation.***

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s