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 »
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 correctly emulate the Windows 8 coloured tile icon style.
However, for Windows Phone 8.1 only 4 sizes are commonly used, as highlighted above, so it is those sizes we will concentrate on.
As you can see from the examples above, the white metro icons are horizontally centred but vertically offset. Extrapolating from Windows’ own default icon tiles, the following icon sizes and proportions can be calculated.
24 x 24 pixels – Badge Logo
30 x 30 pixels – Small Logo
50 x 50 pixels – Store Logo
70 x 70 pixels – Square Logo
150 x 150 pixels – Square Logo
310 x 150 pixels – Wide Logo
310 x 310 pixels – Square Logo
620 x 300 pixels – Splash Screen
Want a new Windows 8 or 10 tile icon?
We can bring your software up to date with clean, contemporary Windows tile icons
Bear in mind these dimensions are approximate based on a square icon. The relative weight and proportions of your icon should be taken into consideration, rather than trying to match the dimensions suggested below.
So to summarise:
70 x 70 pixels – Square Logo – Icon 40x40px centred in X & Y Axis
150 x 150 pixels – Square Logo- Icon 70x70px centred in X, +10px in Y axis
310 x 150 pixels – Wide Logo- Icon 70x70px centred in X, +10px in Y axis
310 x 310 pixels – Square Logo- Icon 70x70px centred in X, +20px in Y axis
Just remember Microsoft does not provide these dimensions and I provide these as a guide. Feel free to experiment with different proportions and offsets, and remember the text you decide to include will also have an impact on positioning.
Always render your finished Tiles as transparent PNGs with your white icon correctly positioned within the file.