Unit 41: App Development

App Development

App icon

To start off my app i needed to design my icon. i began with the logo and wanted to incorporate welcome to Doha into the logo like i had done with my home page.

For the background i took the bridge image that i also used for my website home page, and added a slight blue gradient which added the shiny app look.

Looking back at my previous design is realised that that colour i used for the app was too light, using the eyedropper i was easily able to get the shade of blue for my design.

Homepage

Moving onto the apps home page i took the background from my app icon and placed it on the page, next i did the same for the logo positioning it in the centre of the page.

I thought about having the menu bar slide up from the bottom of the screen so i added in an arrow to the bottom of the page and added swipe here for extra guidance.

Home Menu

I wanted to show how the menu bar would look so i drew out a few ideas for the icons as i wanted to use symbols to represent the different pages for the app. After drawing out a few sketches i went onto illustrator and drew out using the pen tool. i played around with the icons positioning and really liked the idea of having smaller icons circling the home symbol. I then added my icons to the page where i already placed in the background. To finish it off i made a few refinment to the apps and added in the arrow the represent the idea of swiping to pull up the icons.

Maps

Next was my maps page where i started with taking a screenshot of the map of doha on my Iphone. After adding the blue overlay i went onto illustrator and drew out a pin icon using the pen tool and added them onto the map. However i didn't really like the look of the pins i drew out so i tried again drawing out a new pin design which resembled a water droplet look, i found this design looked much better and professional. I needed to add in the title so i took the shape tool drawing out a quick circle and placed it in the centre of the design, i really like how in the circle acted as the main focal point for the design. Next I then added the title 'maps' into the circle and added in a little text underneath to add a little detail to the design. After looking at the design i found the circle looked a little flat so i played around the adding a drop shadow and i really like the 3D effect it gave. To finish off i added two other circle, one for restaurants and the other for hotels which i placed either side of the larger circle.

Weather

My weather page was next and i wanted to have the page laid out with todays date enlarged at the top and have the rest in a list just below. To start off i used two colours to separate the page into two sections, one for todays weather and the other for the list. I then added in a little box at the top of the page to place the pages title.

Next i moved onto creating the icons which i started drawing out on illustrator. After adjusting the icons width and making small refinements i could start adding them to my page.

For the todays weather section i played around with the position of the date and temperature until i found it worked well, adding in the cloud icon next to them.

Next i moved onto creating the list and i wanted to have one box highlighted to show the idea that you could click on a day and it would expand revealing more detail. I outlined each box with a slight darker blue so to separate each day from one another, and started to add in details such as the day of the week and the date.

To finish off i added in a couple of my symbols going down the right hand side the list.

Information

My information page was next and i wanted to keep with the same layout i used for my weather design. I added the title in at the top of the page, and drew out a dark box underneath where i was going to be placing the information.

Gallery