App icon template
This is a tutorial on how to create an iphone application icon. Carefully following the tutorial I made my application icon, I found this very useful as if i had any difficulties I could just rewind the video to gain a greater understanding.
This is my final finished application. The reason I chose the colour blue is that the colour blue is often associated with depth and stability and also confidence. Having this as the primary colour with those meanings behind it give the user a subliminal message through the use of colour that the product they are buying is stable and that it has some depth that its not just an application.
Anemometer Icon
Signified:Anemometer icon
Signifiers:Colour, weight/stroke,the feel of measuring wind,wind relations and understanding
Here is my first initial idea for the anemometer icon. Firstly I tried to make it look as similar to a wind turbine as possible, having a wind turbine as the icon implies the meaning of wind which then further relates to the measurement of wind.
Connotation
Does my image look as it intends to? Yes it looks like a wind turbine, understandable at first sight. How might others view it? If the viewer understands that it is a wind turbine then they may imply the measurement of wind. Are there possible miss-readings? Is it clear? Yes, although at a first glance a wind turbine would come to mind but at a smaller scale due to the stroke of the lines this may not be understood. Could this refer to any other meanings? Yes it could, a wind turbine is to generate energy not the measurement of wind so the meaning behind the icon and what the purpose of it is can be misleading.
This is my second idea, I tried to make the image look as similar to a windmill as possible, similar to the wind turbine the initial idea you get from a windmill is wind which is the implied meaning.
Connotation
Does my image look as it intends to? Yes, it looks like a windmill which was my intentions, when you first look at the image you understand that it is a windmill. How might others view it? If the viewer understands that its a windmill the meaning of wind may follow. Are there any possible miss-readings? Is it clear? The image is of a windmill but the implied meaning may not be understood as windmills are not used to measure wind but to generate energy to grind grain into flour. Could this refer to any other meanings? Yes, a windmill is not used to measure wind but to generate energy similar to the wind turbine so the meaning behind the image can be miss-leading.
Development
My 2 previous designs although the thought of wind may come to mind the most significant of the measurement of wind does not. I was trying to think of something that is very simple but at the same time conveys the message of measuring wind that can also be visible at a smaller scale.
This is my final piece for the anemometer which is a wind sock, I tried to make the wind sock look as effective as it could be but also at its simplest form which is still visible at a much smaller scale.
Connotation
Does my image look as it intends to? Yes, I have asked friends and members of my family as to what they think this image is of and they all agreed it looked exactly like a windsock although I only used one colour. How might others view it? are there any mixed messages? is it clear? I dont think any mixed messages will come from this image as its straightforward and clear that it is a windsock.Could this refer to any other meanings? No, a windsock is used to measure the speed of wind and this comes across clear and direct in my image. Overall I think this is a very good image for my anemometer icon.
Altimeter Icon
Signified:Altimeter Icon
Signifiers:Colour, weight/stroke of the lines, height of the mountains, plus and minus symbol.
This was my first idea for my Altimeter Icon, My initial idea was to keep it plain, simple and to the point. The first thing that comes to mind when you think of an Altimeter is mountains because its the measurement of altitude which is most commonly used by mountaineers.
Connotation
Does my image look as it intends to? Yes, as my first initial idea was to have mountains as the icon because an altimeter is most commonly used by mountaineers. How might others view it?are there any mixed messages? is it clear? I think people might get mixed messages from this as its just an image of 2 mountains which could mean anything, there needs to be a bigger implied meaning of measurement of altitude.Could this refer to any other meanings? Im not sure what other meanings you can get from just the image of mountains but I know there needs to be a clearer meaning of measurement.Development
My thoughts lead me to make my image more involved around measurement to give a greater implied meaning, but also taking into consideration the small scale this will be at so adding the meaning of measurement may come to be difficult.
This is my final idea for the altimeter icon after developing this from my first initial idea I think it has a greater meaning and the user will understand what the application does that bit more.
Connotation
Does my image look as it intends to? Yes, after developing my image to give a better meaning of measurement I added a graph behind the mountain image with the plus and minus symbol giving the user clear thought of what the app does. How might others view it? are there any mixed messages? is it clear? I dont think anyone can get this mixed up or not understand what the application is for as the graph gives the clear thought that its the measurement of height on a mountain better known as altitude. Taking into consideration of scale I think this is the most effective way to imply the meaning of measurement as other methods may not be visible as the one I have chosen to use. Can this refer to any other meanings? I believe it doesn't as the only message I get from this is the measurement of the height on a mountain, there isn't any other possible message. Overall I am very happy with my icon in both a visual and communication prospect.
Signified:Thermometer Icon
Signifiers: C and F, numbers, stroke/width of lines, colour.
This was my first initial idea, trying to keep things as simple as possible I went for the classic C for celsius and F for farenheit with some typical values underneath with the C to F conversion.
Connotation
Does my image look as it intends to? Yes, as simple as possible but also very understandable, I also put a line between both C and F so there is an even clearer definition between the 2.How might others view it? although its plain the meaning is simple and to the point but in my opinion it has no eye-catching factor. Are there any mixed messages? is it clear? There is no mixed messages from this icon, the C and F are simply understood and cannot be mixed up with anything else, this makes the icon clear to anyone that knows the slightest about temperature. Can this refer to any other meanings? No it cannot, C and F are what they are and with some simple typical values underneath it makes it all that bit clearer. Overall this is a simple clear and to the point icon but in my opinion no eye catching factor thats going to make the audience take a second glance at the icon.
Development
Although my initial idea is very simple and clear I feel that is too boring and does not have an eye catching effect. To further develop this I want to add something to the icon that makes it look a bit more interesting to look at which also gives the application some character.
This is my final idea, keeping the the F and C symbols I added the thermometer which gives a further meaning of the measurement for temperature. The icon also looks a lot more eye catching and people would have a second look at buying it.
Connotation
Does my image look as it intends to? Yes, the main image being a thermometer, although there is no numbers on the thermometer it has the main feature shape and line measurements in place, the F and C also imply a further meaning that the center piece is a thermometer. How might others view it? Are there any mixed messages? Is it clear? Others would view this the exact same way I have as there are many signifiers that make the signified and these factors cannot be mixed with any others which makes the icon very simple yet eye catching. Overall I am very happy with this icon, its simple, clear, eye-catching and to the point.
Signified:Decibel Meter Icon
Signifiers: colour, stroke/weight of lines, style of the line, Plus and minus symbol.
This was my initial idea for my Decibel Meter icon, my first thoughts were to have the icon using the form of a graph with a line scale measuring the sound.
Connotation
Does my image look as it intends to? Yes and no, in some ways for example I was happy with the way my graph came out as it is still visible at a small scale but at the same time I dont get the measurement of sound from it. How might others view it? Are there any mixed messages? is it clear? Other people may view this differently, at the moment it just looks like a graph that could take any form, the implied meaning isn't great enough for the viewer to know that its an application to measure sound, this makes the icon far from clear. Can this refer to any other meanings? Yes it can apply to hundreds, this could as well be a graph for a wide range of things when it is actually meant for sound. Overall I think this icon needs development to make the meaning of sound measurements apply.
Development
After my connotation I have realised that the implied meaning of sound needs to come across more to make this application more understandable as when this is put into the app store nobody would have a clue as to what the graph is for but a small simple change could transform this in an instant.
This is my final icon for my Decibel Meter, in order to make this application icon more clearer I changed the lines to make them more like wave lines, this is how sound is measured in similar wave patterns like above.
Connotation
Does my image look as it intends to? Yes, a simple wave line which is commonly used in terms of sound measurement. How might others view it? If some people are unsure that the style of wave line above is used to measure sound then some people may be unsure as to what the icon is used for . Are there any mixed messages? Is it clear? There may be some possible mixed messages if people are not sure that sound is mostly measured in wave lines but on the other hand is someone understands this then it would come across very clear, the plus and minus sign also help to give a sense of measurement. Can this refer to any other meanings? It can possibly but that depends on the understanding of the wave line used. Overall im very happy with the icon as its highly visible at a smaller scale and is understandable and to the point.
Speedometer Icon
Signified:Speedometer Icon
Signifiers: Colour, Width/stroke of the lines, numbers, Mph, font size.
Connotation
Does my image look as it intends to? Yes, the digital number for the mph reading is large and highly understandable. How might others view it? Are there any mixed messages? Is it clear? At a first glance if you dont see the MPH sign at the bottom the number 40 could be related to anything, this factor could make the icon unclear. Could this refer to other meanings? Again if the MPH isn't seen then the 40 number could refer to absolutely anything else but the MPH is at a size where it is visible and will still be seen. Overall I think its a good icon and very understandable but boring at the same time.
Development
After my connotation my first initial idea is simple and to the point but is also very boring I want to add something to the icon to bring it to life a bit more and also make it eye catching.
This is my final application icon for the speedometer, I changed the whole idea to make it more appealing to the eye but also just as understanding. I also put in the numbers as it gives a further greater effect to the speedometer.
Connotation
Does the image look as it intends to? Yes, the speedometer image has all the relevant parts that make up a typical speedometer which is clear, simple and to the point. How might others view it? Are there any mixed messages. Is it clear? Others will view this the exact same way I have as it is very clear that it is a speedometer, there is no mixed messages to the speedometer as there is numbers and the MPH sign to give a greater understanding of the image. Could this refer to anything else? Given that there is numbers and the symbol MPH this could not refer to anything else other than the measurement of speed. Overall im very happy with my speedometer icon, it looks like its suppost to and has a clear and to the point meaning and understanding.
Pedometer Icon
Signified:Pedometer Icon
Signifiers: Colour,shape of feet,width of feet,footstep, trainer step,size of feet.
This is my initial idea for my pedometer icon, my first thoughts were to give the viewer the thought of walking or running. A simple silhouette image of a man running gives this message, but as an initial idea there is still room for development.
Connotation
Does my image look as it intends to? yes, a simple silhouette image of a man running which portrays the message.How might others view it?Are there any mixed messages? Is it clear? Some people may view the icon as a workout application of some sort when really its only a pedometer which measures steps, this is the only mixed message with the icon itself. In some ways the icon is clear but may not portray the message of steps counter and more of a distance running application. Could this refer to anything else? As I have already said this could relate to a number of other things but may not relate to a pedometer. Overall I think this icon design is a good start but needs further development.
Development
I think my image needs to relate more to a pedometer with no mixed messages, a pedometer is most commonly known to measure steps so perhaps footsteps would give the idea of measuring steps.
This is my second idea in further development from the first idea, I tried to make the message easier to understand and create an image that wasn't so mis-leading or can refer to other things.
Connotation
Does my image look as it intends to? yes, the image was made to look like feet to emphasise on the fact that a pedometer is the measurement of footsteps. How might others view it? are there any mixed messages? is it clear? I dont think there can be any mixed messages from the image on my icon as they are footsteps which then may lead to the implied meaning of measurement of footsteps which is commonly associated with a pedometer. I think the image is clear enough and cannot be mistaken for anything and overall I am happy with it.
This is a small development from my previous idea but I felt i had to change the soles of the feet to just the outline as it did not go with my other icons and with this change it does. This change does not effect the visibility of the feet and is still understandable.
Barometer Icon
Signified:Barometer Icon
Signifier:Colour,Width/stroke of lines,icons,point size, font, Choice of weathers.
This was my initial idea for the barometer, out of all the icons I had designed I found this one the most difficult as a barometer's job is to measure atmospheric pressure and I could not think how to present a barometer in a way that someone could understand it. I think the barometer out of all the icons is the one thats heard of the least so it makes my challenge even harder to make the audience understand what a barometer is. How might others view it? are there any mixed messages? is it clear? I think others would view it as a barometer as I think it is clear that it gives the weather but not through pressure, My only concern is that at a small scale the type will not be visible and the text is unable to go much bigger as it wont all fit in. Could this refer to anything else?I dont think it can as it is clear what the icon is for and it portrays this message quite easy.
Connotation
Does my image look as it intends to? Yes, my intentions to creating a barometer icon was to give the measurement of the weather aswel as giving the hint of pressure. Atmospheric pressure is used to help tell how the weather is going to be so I tried to create a image that is similar to a speedometer only that the hand goes to different weather times as aposed to numbers. How might others view it? are there any mixed messages? is it clear? I think others will view this the same way I have as I dont think there can be any mistake as to what it is. The message is also quite clear as the written meanings are they but not readable because of the small scale, its a good starting point for an initial idea but there is still room for further development.
Development
I think without using type the message of a barometer and what it does can be convey'd in a much easier way, I looked into a typical barometer and how they looked and they were very similar to speedometers but they went up in tens and started at around 960 so I thought to create an icon similar to this but maybe using a small image of a cloud or some image that gives the implied meaning of pressure ,weather in a measurement format.
This is my final idea for my barometer icon, taking points from my development ideas I constructed the image shown above. I feel this is a much better and more simplified option from my initial idea and I am very happy with the icon even though this is the one I found the most difficult to do.
Connotation
Does my image look as intends to? Yes, taking aspects from my speedometer making this icon come across easier than I first thought. How might others view it? are there any mixed messages? is it clear? I think others will view it as I have, I dont think it can be mistaken for anything else as there is a clear indication that there is measurement used. The message in my opinion is also clear as a standard barometer is measured in the same way but I have also used an image of a cloud to enhance the meaning of pressure/wind. Could this refer to anything else? I dont believe it can , the message is clear and straightforward.
Here are my apps that I created on to an actual size iphone, this gave me an idea of the small scale in which the apps are going to be and give me an insight into the visibility of each individual app. Overall I am very happy with the outcomes as each app is visible at a small scale and is also understandable. If anyone was to see these icons they would immediately understand what it was for.
This would appear on screen when the application is clicked, this is a similar style to Bloggers application as it has the icon and then the name of the application underneath.
This is the use of my application, when the application is opened this would be the main interface of where the temperature information is shown. The C and F symbols when clicked convert the temperature between Celsius and Fahrenheit which is shown at the bottom in the center of the phone. Some additional information is also shown on the app such as the current location, the current location tool is found on most modern phones which knows the area you are currently in and when the application is used it identifies this and gives the temperature of the given area. Another tool is used which is todays high and low temperatures, as this is a purchased app I feel that people want more for their money than just an app that tells you the current temperature.
Evaluation
I feel the visual communication and message meet the brief as I was given a series of application icons to design with a given subject, I had to bring the message of this across in a simple form which is clear, understandable and to the point. I also had to make the applications work in serious and compliment one and other as they are made from the same company and I believe I have achieved this as each icon is very similar in terms of design.
In some ways I think the visual communication of the brief I found to be difficult and within my work such as the visibility of my applications, something I had to consider was the small scale in which my apps were going to be so I had to design in a way which my icons were going to be visible at a small scale so a couple of my final pieces some people might say they are hard to recognise.
Some of the strengths to my visual communication is that I believe I have managed to get them into the most simplest form but also the most understandable, this was one of the main aspects to my design and i really did have to try get this almost to perfection as if someone does not understand the icon then the whole interest is lost. I think the only weakness to my visual communication is that the implied meaning of measurement might not be understood enough in some of my applications, in some of my applications I have used the plus and minus sign to indicate a form of scale and measurement. I have written about each individual icon and spoke about how it may mis-read or mis-understood by the audience. My icons could have been further developed to indicate the visual aspect of measurement as well as understanding what the application is used for.
I feel my time keeping in this project was very good, I dont think at any point in this project I was rushing myself into completing anything as rushing to complete something can end up in a bad quality end product. I used research of current applications and how they looked from the Iphone, I screen shot some apps from my Iphone and analysed why they worked as well as they did. This made me come up with initial ideas which I put into sketch which made things much easier to start my application design off. I think I used experimentation quite effectively in this project as I started with initial ideas which developed into a much better end product, I wrote a paragraph about each of my initial ideas which then helped me to further develop and perfect my final idea. A way I enjoyed this project was the thinking and making process of each of applications, for example the thermometer and thinking in ways I could portray this in such a small scale and also understand it in a simple way.
An area that inspired me was when I was looking for current applications with the given subjects and the look of their icon design, I wanted to create something of that standard if not better. An area I found difficult was some of the individual icons as I could not think what would be associated with them like the barometer for example, I didn't have much knowledge of what a barometer was myself after some research into what it was I started to gather ways in which it could be presented. A way in which I could improve the parts I found difficult is to gain a greater understanding of what it is I find difficult. A skill I think I have developed is working at a small scale and taking into consideration the visibility of what it is I am designing.
