What size are Android App Icons? It is a simple question but even Android, who provide better icon documentation than most, seem to want to make you work a little for the answer. Fear not, I have compiled a simple Android icon size guide for you! There are two types of Android icons, those that… Read more »
With each new iteration of the iPhone and iOS adding new screen sizes and resolutions, Apple seem intent on making designers play catch-up. There are now around six different icon sizes for Apple’s plethora of iOS devices, and with this figure often changing, it’s important to keep up to date on the latest iOS icon… Read more »
What icon sizes do I need for Android 5? Android 5.1 Lollipop continues with the same sensible icon size methodology as Android 4.1 As technology has evolved, phone & tablet manufacturers have created screens with ever increasing resolutions and pixel density. An increase in pixel density or dots per inch (dpi), means more image information… Read more »
How good are free icon maker tools? These programs let you select the format, size or even add some simple effects. How cool, is that? App icon generators are really helpful. They work like some kind of magic. Import an image, let the software scale it to the sizes you need & export the correct… Read more »
Windows IconsWindows ICO Specification You can view all the Windows icon sizes within the file explorer Windows icons can be more complicated than you might think As with all the other software platforms that support icons files, Icons for Windows have there very own set of sizes and specifications. Icons for Windows use a Windows… Read more »
What are Android Icon Sizes? It is a simple question but even Android, who provide better documentation than most, seems to make you want to work a little for the answer. Fear not, I have done the work for you! Android Icon Sizes – App Launcher What sizes do I need for Android App launcher… Read more »
Microsoft does provide a lot of information to Windows Phone App developers about the Windows 8 and 8.1 User Interface, but they don’t tell you how big your icons should be or where exactly they should be placed within the tiles to match Microsoft’s own Application Tiles. This guide provides those answers so you can… Read more »
*UPDATE* 11/11/13 Check out our new Windows 8.1 Icon Tile size guide. Never being one to make life easy, Microsoft have released some fairly ambiguous information to Windows 8.1 App developers. From the information I have had access to, I have put together this brief guide to the Windows 8.1 App launcher & Tile Icon… Read more »
As Apple have decided to make some changes to their App Icon size and corner radii form iOS7, I thought it would be helpful to myself and others to create a PSD template to both produce all the different Icon Sizes now required, as well as show how these will look on both iOS6 and… Read more »
Find the correct Android App Icon Sizes, fast For the latest information see: Simple Android Icon Size Guide for Lollipop 5.1 (5.1) An icon is a graphic that takes up a small portion of screen real estate and provides a quick, intuitive representation of an action, a status, or an app. So, Icons should get… Read more »
If you’re just starting out with icon design, it can be easy to fall into a number of common traps and design mistakes. In this post I’ll discuss some of the pitfalls novices may face and how best to avoid and move past them.
One common mistake beginner icon designers can make is to neglect proper icon sizing. It might seem obvious that to get smaller or larger sizes of an icon, a high resolution vector can just be resized and retain its clarity. However, this can lead to really messy results when resizing or magnifying your icons – think lots of pixel blur and pixelation. As icons are now used on a wide range of different resolutions, you should assume that your icons will not work at all screen resolutions.
This is particularly the case when it comes to Windows 8.1, wherein icon sizes play a really important role in the functioning of the main UI, or Apple’s operating systems, most of which have commonly used ‘magnifying’ tools. Many designers of course miss this major issue, content to just resize vector graphics to smaller sizes – which only exacerbates this problem. The only real way around this is to create size variations. It’s best to start with the smallest version and work your way upwards individually until your icon is rendered in all sizes and formats. It’s a long and boring process, but vital to the strength of your design work. Scaling is lazy and ugly!
Details are important to make an icon look sharp and crisp. But it’s easy to get overexcited, especially if you’re doing some good detailed work, and end up adding far too many details and elements. This makes icons look far too ‘busy’. The major problem with this is overcomplication: users struggle to easily comprehend what an icon means or what it is for, and it clutters designs that would otherwise be great. Older iterations of Windows were infamous for this, as were older iterations of OS X. As you add new elements, ask yourself: is this necessary to the functionality of my icon? It’s a simple but important question that some icon designers forget about.
Windows XP icons: guilty as charged? (Source: http://www.osx-e.com/)
Poor colour schemes
Coherent colour schemes are vital to good icon design for a number of reasons: to make your icons recognisably similar, to make them noticeable, and to shape the user’s response to your interface, among other reasons. However, novices can often fall into the trap of using bland or garish colours, inconsistent colour schemes, or colour schemes that are so common as to prevent the icons standing out from others. Many people accused the new iOS7 interface of this in particular – its colour schemes, while somewhat consistent in their simplicity, are certainly bordering on garish in many instances. Good use of colour won’t solve every design problem you have, but it definitely doesn’t hurt to acquaint yourself with the colour wheel. Experiment with different colour schemes to see what fits best with the client’s needs.
A common general mistake is inconsistency in design. This can range from a set of icons not suitably fitting with one another, to icons being too dissimilar once scaled or resized, or inconsistent use of style, scale, or shadows. When we’re talking about common design mistakes, what we’re really talking about is design inconsistency. Each icon obviously needs to have its own identity, but if you’re designing a set or collection of icons, they need to have a few things in common such as perspective or style (at the very least).
An example of inconsistency comes (again) from Microsoft in their Vista icons. With Vista, it’s clear they tried to make glossy but realistic icons. However, their seemingly arbitrary use of the shading and lighting really undermined the effectiveness of their designs. It’s not clear where the light source is coming from and it uses far too much contrast, making segments of the icons appear unnecessarily washed out where other parts are not. Is the light source raised directly above the object, or to the side? It’s really not very clear, and what may have been an honest attempt to add depth to the image has become overcomplicated and inconsistent. Virtual light sources can be a bit tricky to get your head round at first, but with experience you’ll soon realise how important they are in 3D icon design especially.
Perhaps the biggest reason we as designers fall into these traps time and time again is poor planning and drafting. You may be inspired by an idea and are itching to get on the computer and design it right away, but over-hastiness can be a huge error and leads to all the sorts of things I’ve discussed above. After you’ve discussed your plan with the client, it’s really important to design things by hand and explore all design possibilities before settling on a single design. Drafting is the most important part of any creative process, especially in any type of graphic design. Of course, just because one of the icons we’ve discussed above might be guilty of one or two mistakes doesn’t make them bad icons, it just undermines their quality. To avoid these mistakes and more, it’s important to have a clear planning and development process such as our design process infographic that you stick to when you’re designing icons.