App Design #2

Screen Shot 2015-11-09 at 09.12.12More app design today, So we started with a new photoshop document that was 750px X 1334px to represent the size of an iPhone 6 screen. We then made that background a simple gradient. I then added the status bar at the top of the screen to indicate the time, charge and signal on the phone. After this we moved onto making buttons to sign up and log in. Here I just used some simple rounded boxes and made them a little transparent so you can see the colour behind them. I then added the lower 30% of the box a darker colour by selecting that about i wanted and filling in the selected bit with a barker colour to add a flat design look to it. Finally I then added text in the boxes to indicate what they will do. After this I then made a little nav bar at the bottom while waiting for the class. I did the same as the buttons and made a white rounded box and then made it transparent. I then just added some simple useful buttons that could be used to waste some time. I then got back to the log in button where I made it have a drop shadow. I then thought to change the colour so they stand out a bit more as these where the only buttons going to be on this screen so I wanted them to stand out. With the colour change I changed the text back to white so it was easy to read and added an embossing to the buttons and finished it off with an Apple logo. Finally made it all central and look neat.Screen Shot 2015-11-09 at 09.39.52 Screen Shot 2015-11-09 at 10.09.22 Screen Shot 2015-11-09 at 10.09.13

It then came to making a second page in which I then stole my Nav bar from the first page as it wouldn’t be needed untill you sign in and then placed it at the bottom of the page. (Please note that I used some diverse symbols for the buttons just to show what they can look like. I do know they make no sense together) I then added a Giant Snail! because why not and again made it have a back shadow with a transparency and embossing to stand out more. We then placed the images onto a phone to make it look real. With time to spear we then was asked to make a Map. I then went ahead and got a map from google and pasted it in. Again added a transparent box at the top to make a Search bar. I used apples more symbol or options and the magnifying glass. I then added the tool bar at the bottom again and to finish it of a button to find you r location. After I tidied it up I then placed it on another phone next to the others. Here shows some pages that you can quickly design for when it comes to creating my own.
Screen Shot 2015-11-09 at 10.43.44

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