App Icon Design

To begin with I started by creating the background for all the apps using a gradient affect changing from a dark green to a lighter green and also rounded all the edges of the apps to match most of the apps featured on iPods and Iphones. I used a grid that had ninety and forty-five degree lines to be used as a frame to help in the structure and positioning of the app icons.


For the thermometer app icon I began by designing an actual thermometer, however after completion it looked too simple to have just that as a pictogram so I used the fire and ice design. after sketching some simple fire and ice-cubes that I scanned in I  traced over my designs using the pen tool and added gradient effects over the pictograms to make them stand out more and also look more like ice and fire. After I had designed the icon I looked at it its actual size and added in the forty-five degree line to divide the pictograms. I checked that the line was thick enough to be seen at its actual size as well as when close to the app.


Screen Shot 2013-03-20 at 16.13.32


For the speedometer design I began by creating the needle for the gauge with a simple black circle and then the arrow drawing round an image of a speedometer that was behind it using the opacity feature and the pen tool; once the arrow had been designed I then began by adding a gradient affect on the pen to give it more depth and also it is in opposition with the green on the background being blue. Then numbers I then placed on the app icon as if the audience was looking at the speedometer at an angle and using the image of the speedometer I had used for inspiration I found the typeface they had used onto the app icon. After designing the app I look at at it at its actual size and the numbers were easily readable.

Screen Shot 2013-03-20 at 16.14.13

Decibel Meter

For the decibel meter i began by designing the cone of the pictogram, becuase of teh 3D nature of this app icon i designed the area behind to cone to also look 3D which after trying gradients and other effects I changed the back piece to match the point of the one with grey lines so that it looked more 3D when i had zoomed out to its actual size. I kept the inside of teh cone hollow so that the background colour was stil visible like some of my other designs to keep them similar. I added the lightning to emphasis that the noise was loud and altered the centre piece of lightning so that it was different to the others.

Screen Shot 2013-03-20 at 16.14.01


For the Barometer I decided to do a cloud with various types of weather placed around it. Using the circle tool I quickly created a cloud and grouped them all together and coloured them all grey; I created the rain simply by using the line tool and making the lines at forty-five degrees using the grid. Another use of the circle tool made the sun which originally I coloured just yellow but then afterwards went back and gave it a gradient to give the pictogram more depth as well as complement the green background.  After creating the app icon I looked at it in its actual size and altered the line stroke so they were thick enough to see easily.

Screen Shot 2013-03-20 at 16.13.18


The Anemometer was another app which was simply designed using the circle and line tool. After creating the first three turbine blades I simple copied and pasted them two more times and altered the colour to represent movement which I think could have been represented better at and also a gradient could have been placed onto the actual turbine so that it stood out more. I used the grid to help me position and scale the pictogram . This is my least favorite app which think could be improved.

Screen Shot 2013-03-20 at 16.13.04


The altimeter i designed so that it followed the grid exactly, but forty-five degree mountains didn’t look right so i altered the angle of the mountains peak. to created he mountains i just used the pen tool and created equilateral triangles and altered the positioning of the smaller second mountain. Using the line tool i placed some measuring lines so that people could work out at least that it was an app used to measure how high someone is on a mountain. I added individual gradient effects to the rocky areas of both the mountains so that they stood out. the snow-cap has been left black with the background showing through to be similar to the decibel meter app icon i had created.

Screen Shot 2013-03-20 at 16.13.50


For the pedometer icon i simply found an image of a pair of sports trainers and using the pen tool drew around them and added some clear pieces of detail to make it obvious they were trainers. I kept the inner-sole, laces and edge of the shoes white so that they stood out against the gradient blue of the trainers as well as the green of the background. Using the grid and my own personal opinion I centered the pictogram as well as made sure that it was large enough to identify at a distance.

Screen Shot 2013-03-20 at 16.12.21

The page of an app I chose was the pedometer because of the idea for having the pedometer record the route that the owner has taken and also works out from that their time, calories, distance and their average beats per minute. To begin with I took the mock-up iPhone 4s and using my own ipod took a screenshot of the iMaps as well as the top bar with time battery and wi-fi; using this I created the map and also the interface to the map. Using the iPhone mock-up layouts to create the bar on the right with multiple buttons to start the pedometer and also to save the information so that people could try to beat their best record. After some research I found the typeface that Apple uses on their products and created my own information that the pedometer created. I also added a glare and a shadow for the iPhone so that it looked more realistic. The information bar on the left has been given a gradient to match other apple information bars. I also added another button for people to be able to access their music when they run; I clipping masked the button from the Iphone mock-up which was difficult because I wanted the curved corners that Apple’s buttons have.

Screen Shot 2013-03-20 at 16.15.40


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

%d bloggers like this: