App Icon Design

24-New-iOS-7-Style-App-Icons-PSD-1Today we started back doing sessions with Kavi using Photoshop again. We looked into how different apps are displayed to be simple yet really effective. Above you can see a range of app icons and easily you can see what each app may be used for. Like the settings icon, This icon most of the time is displayed as a cog, however it has been redesigned in so many different ways yet we all can understand it is the icon for settings. Although some icons try to think out the box and do a spanner and/or screwdriver to be different but sometimes isnt as obvious as the cog. Over icons include an image of a camera so this must be an app to take photos. A image of a envelope meaning mail, So this must be E-mail and also a sun and cloud must be an app for the weather. However some are not as simple unless you know them. take a look at the one with 4 coloured circles, this is an app for the games centre on iPhone but the app icon itself doesn’t tell you that and can leave you obvious to what it is for. But seeing as most iPhones have this app people who own an iPhone tend to know what this app is.

Designing an app needs to follow a few basic guidelines such as they need to use universal images and shapes so people all across the world can recognise the icon without without a language barrier. When it first comes to making the app icon you would start with the background. The background needs to be tested that it is visible both on dark and lights backgrounds. This is because the user my have different colour backgrounds such as black, So if you have a black background on your app it wont standout on there device. The background normally is flat colour or a gradient however no transparency. This is because it loses the simplicity. However some apps make some of the background transparency to make thire apps a different sharp to other apps, but still the main icon sticks to these rules. Next you will work on the foreground by displaying an image to represent what the app is about. You will need to make it really simple so it is easy to understand and don’t over complex the user in what they are looking at. weather@3x

One task for the day to to create a weather icon for an app. I then chose a gradient that went from dark blue to light blue to symbolise the sky as it is blue across the world. I then added the umbrella on top making it stand out more with shadowing and embossment to show a simple depth to my icon. This makes a nice simple app for weather but it isnt the best design but people can tell what the app symbolises.

The next task we had to work in groups making 3 individual apps that all follow the same design progress. We looked into Utilities apps such as Calculator, Calendar and Notes/Task Lists. We then wanted to stick to some nice flat design with nice flat colours nothing too fancy but really effective. I had the task to make the Task icon. Working in my group we all didn’t want to have the same background but we did all want a box in the centre of the icon displaying what the app is about in a simple design. I then made my a turquoise colour with a white box to match the others along with some lines to indicate writing for notes and a Tick on top for the tasks you need to remember. But this could have been all lines for notes or just a tick with a box for tasks but we were on a time limit so wasn’t much room for experimental ideas.

Verity made the calculator icon in the navy blue, Simply displaying a simple calculator. However this could have been made simpler by just displaying the 4 buttons and maybe having a divide symbol, But there isnt a divide key on a keyboard so maybe do times where that is just a capital X. But again if we had more time to look and test ideas they could have been a lot better. Lastly the Calendar in which amy made. Amy went with a nice Red which is always used for calendars because the colour Red means WARNING and this is to warn you about upcoming events. I like the X marking of the days as this is what shows it really is a calendar. But if we had more time we could have experimented by just added a big number below the line. But this is really simple and not over used so it unique and I like it. Overall I enjoyed the icon creation today and think this will help me more when it comes to creating my app later on this year.

apps

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