Selfie Centre

Today I learnt about user interface and how to map it out using diagrams. User Interfaces are an essential part of interactive media. I mean whats the point of greatest app out there, if the user can’t even use it right. we learnt the importance of User Interfaces and how to ensure they are an enjoyable experience for the user, so that they don’t get bored or frustrated with the interfaces clunkiness. First of all I designed a simple layout for the different app pages and mapped out how they link together. This is for an app Called SelfieCentre. The rough idea of SelfieCentre is that everyday you can take a selfie and the app will merge all of these selfies together to make a video montage of the transformation of the images. A key feature of this app is that previous self can be brought back in almost like a template to ensure that all pictures are lined up correctly, giving a smooth transition between images.

Here Is the Mapping for how all the pages connect together.

Screen Shot 2015-10-13 at 12.22.21

This is to help me plan out my pages and get a basic grasp on how i might lay out my pages such as buttons, links, ECT.

The Next step was to plan a rough layout for my app homepage

This is what i came up with

Home ScreenScreen Shot 2015-10-13 at 12.09.40At the top you see the ‘Add Banner’ This to give an extra bit of revenue because companies will pay a small amount of money to put adverts into your app. In the middle will be the apps logo with simple animation to make the home page have bit more colour to it. From there you have your main three buttons which the user can interactive with. The settings button will take you to the settings app page. The Take Photo Button will be the main aspect of the app. The library will take you to the library app page. This is where the user can look back at all the images and video montages you have taken.

Settings Screen

Screen Shot 2015-10-13 at 12.13.39

This is the Settings app page this is where the user can make some minor adjustments if they so desire as well a link to the apps webpage. This is mainly to help improve the user experience, so that they can make some minor tweaks here and there to there liking.

Take Photo Screen

Screen Shot 2015-10-13 at 12.09.49

This is the Take Picture app screen. This is where the user takes their selfies and apply simple filters as well as getting the back the previous picture to help them line up their face correctly. The camera screen is where they will see the live feed of their camera on their phone. The previous Photo button is where you would get the template outline of your previous selfie to help you line yourself up correctly. The take image button simple takes an image and add it to your current montage video. The Filter button give the user some optional filters to add to their images.

Library Screen

Screen Shot 2015-10-13 at 12.13.48

This is where the user can either watch their video montages or the look through the individual images themselves. The individual photos takes you to the library of all your images where the group photo which i think i will change the name of will take you to your finished videos.

Layout for both libraries

Screen Shot 2015-10-13 at 12.14.21

This just gives you a large section of images and videos to look at at once.

Full Screen In View Mode

Screen Shot 2015-10-13 at 12.14.51

This what the full screen will look like when you have selected your image or video. It will be a simple swipe to go to next image or video. when you tap the screen you will also get the options to go back to the image or video library or the take photo screen.

This is a very simplistic start to how i would want the app layout to be.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s