Every year or so, Facebook tend to roll out a new design and layout. These changes are always met with uproar from users and are eventually quietly accepted. The last major change was ‘Timeline’, which restructured profile pages into linear, narrative-style pages. Now, Facebook have made big changes to their news feed, events and group… Read more »
Flat icon design does not mean boring – Dribbble Icon Design Examples Indeed, flat design can be beautiful and charming, attractive in its purity and simplicity. In a context of an over-abundance of information products, flat design can appear as an island of calm, stability and clarity. Many designers use the method of “almost” flat… Read more »
In this Illustrator icon design tutorial we look at creating a small set of ‘almost flat‘ icons from scratch. First, open the Adobe Illustrator and create a new document. Then create a rounded rectangle using Rounded Rectangle Tool with: Width:200px; Height:155px; Corner Radius:10px. After that create another Rectangle with: Width:36px; Height:36px; Rotate it 45°. Unite… Read more »
Lately there’s been a lot of talk of how the ‘flat icon’ has come to dominate interface design across all different platforms. The flat icon trend can be seen as a conscious effort by developers to return to basics when it comes to design. Of course, the ideal icon is one that explains its function… 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 »
So here it is… I am very slowly falling in love with Android. This romance is still in its early stages. I am still metaphorically stealing glances from afar, working my way up to my ‘big move’. You see, I have been having a lukewarm affair with iOS for some years now. Never an Apple… Read more »
Icon design is ever evolving. As new platforms embrace the use of icons, new terms and references are dreamt up and older terms fall out of favour. This glossary is an ongoing project to document the icon design lexicon. Contributions are very welcome. 16×16 Pixel Icons This icon size has its own entry here because… Read more »
The evolution of the flat icon, to the ‘Almost Flat’ Icon Style OK, it’s time to nail my colours to the wall. Sorry, but I don’t like the flat icon style. I think they are boring and bland. When they first started appearing and even worse started becoming popular, I did get a little worried… Read more »
Flat design has become very popular recently. Many websites utilise the principles of flat design and simplify their interfaces accordingly. Indeed, many recent user interface redesigns and new websites use a flat design; this trend has begun to appear almost everywhere, both on websites and in applications. Icons are also keeping pace with the times,… 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 »
An important element of developing an application is conveying usability through the interface for users of the product. Users need to feel that the application has been developed to meet their needs through extensive market research, as well as finding it simple and straightforward to use.
Too often, however, developers go overboard from a design point of view, concentrating on making their interface designs artistic masterpieces with an array of colours, rather than consider a practical design process. A good application can often be interpreted without the use of instruction manuals, simply from the icons used in interface design. The design should be as intuitive as possible. This can help to reduce costs in the long run, as well as increase the application’s popularity.
Items or icons that have a logical connection should be grouped together on the interface to show users that they are connected or have features in common. It helps to familiarise between the icons and not mistake one function for another. You can use several methods, including boxing groups together or a simple use of white space.
It is not a good idea to create busy user interfaces. While it can be tempting to show off everything that your application can do, crowded screens are difficult to understand and negotiate. A rule of thumb is not to increase the overall density of a single screen by 40 per cent. You can go up to 60 per cent when grouping a “local” set of icons together.
Making your application work in a uniform way is extremely important: if, for example, when you click on one item in a set of icons, a certain function appears, then something similar should occur in another set of icons.
The application’s coIour scheme is of prime importance. The different colours in the icons should “go” well together. This includes the colours of any wording and labelling in or around the icons.
You may want to consider making your application suitable for colour-blind users as well. Using colour in your application means you should be aware of the contrast rule. It is an obvious rule, but one that can cause disaster if not followed. Your application should be readable, so use dark text on light backgrounds and dark on light. There is enough contrast between blue and white to make it readable; blue and red, on the other hand, can end up merging into purple-looking blurs.
Users of the application should be able to interpret icons in a manner that is relevant to the spoken and written language they are familiar with. People of some cultures, notably Western language users, read from left to right, and top to bottom, but this is not necessarily the case for every language.
There is probably not a generic format you can use, but it is worth considering some variations, or even tweaking the final interface design to make it accessible on an international level.