Tuesday 3 January 2017

Design for screen - App design - Icon

The first thing which I need to design is icon for the application. Every app needs a beautiful and memorable icon that attracts attention in the Store and stands out on the Home screen. The icon is the first opportunity to communicate, at a glance, your app’s purpose. It also appears throughout the system, such as in Settings and search results. Looking at the Apple web page I have found some tips how to create the icon. 

Embrace simplicity. Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously. If an icon’s content or shape is overly complex, the details can be hard to discern, especially at smaller sizes.
Provide a single focus point. Design an icon with a single, centered point that immediately captures attention and clearly identifies your app.
Design a recognizable icon. People shouldn’t have to analyze the icon to figure out what it represents. For example, the Mail app icon uses an envelope, which is universally associated with mail. Take time to design a beautiful and engaging abstract icon that artistically represents your app’s purpose.
Keep the background simple and avoid transparency. Make sure your icon is opaque, and don’t clutter the background. Give it a simple background so it doesn’t overpower other app icons nearby. You don’t need to fill the entire icon with content.
Use words only when they’re essential or part of a logo. An app’s name appears below its icon on the Home screen. Don’t include nonessential words that repeat the name or tell people what to do with your app, like "Watch" or "Play." If your design includes any text, emphasize words that relate to the actual content your app offers.
Don’t include photos, screenshots, or interface elements. Photographic details can be very hard to see at small sizes. Screenshots are too complex for an app icon and don’t generally help communicate your app’s purpose. Interface elements in an icon are misleading and confusing.
Don’t use replicas of hardware products. Products are copyrighted and can’t be reproduced in your icons or images. In general, avoid displaying replicas of devices, because hardware designs tend to change frequently and can make your icon look dated.
Don’t place your app icon throughout the interface. It can be confusing to see an icon used for different purposes throughout an app. Instead, consider incorporating your icon’s color scheme.
Test your icon against different wallpapers. You can’t predict which wallpaper people will choose for their Home screen, so don’t just test your app against a light or dark color. See how it looks over different photos. Try it on an actual device with a dynamic background that changes perspective as the device moves.
Keep icon corners square. The system applies a mask that rounds icon corners automatically.
I have done a bit of research of how those applications looks like. Here is what I have found: 

Applications for Iphone. The icons are very simple without any text. The vibrant colors makes the icon look readable even from the distance. Used images are simple, users don't have to analyse the icon to figure it out whats it represents. 



Using the logos which I have created before I started to design my own icon for the app. I was experimenting with different colors to make the best choice. The first design contain one logo on different colour backgrounds. I think the black text looks much more better as the text in white is quite hard to read from the distance as well. Also words 'on the' are not readable at all as it is too small. The 2nd design is of the shopping basket, it may work for the icon but I am quite not sure if the image has to many details and it may make the picture blurred when the icon would be very small. 

 

Using my designed icon for application I have designed half of the Apple store page to show how does its going to look like.

No comments:

Post a Comment