With exponential developments in smartphone OS and GUI technologies, it may often seem like new visual designs are becoming obsolete faster than they’re being created. A couple of years ago, flat icons were all the rage—and are now being superseded once more by 3D and ‘almost flat’ Material Design-style icons. Keeping up with the trends… Read more »
With the recent releases of iOS 9 and the new OS X, El Capitan, Apple have introduced a number of incremental updates to their operating systems—mostly oriented towards speed and optimisation. Visual changes are few and far between, but the operating system is as beautiful—and often, unnecessarily prescriptive—as before. With over 1.5 million apps on… Read more »
This week saw the release of Apple’s new (and much hyped) iOS 9, the primary operating system for all of its mobile devices – in particular, the iPhone and iPad. iOS 9 boasts a range of new features and functions, including improved mapping, note-taking capabilities, multi-tasking, and customisation. While it was the much earlier iOS… 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 »
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 »
When someone asks me for a ‘set of application icons to cover all platforms’ they are usually shocked by just how many different sizes and formats are required. In fact, this is something that seems to evolve and increase every few months. There is some overlap across legacy platforms but most newer mobile platforms choose… Read more »
Running an Icon Design agency can be a lot of fun when you have a terrific set of people working with you. Not everything we churn out is always a commercial project, sometimes the icon designers like to kick-back and have a little fun. I thought it would be nice to showcase some of my… 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 »
Free App Icon Download Following on from my last post on designing cross-platform App Icons, here are the Free App Icons for you to download. Android PNG – 512, 96, 72, 48, 36, 32, 24 & 18 pixels iOS PNG – 1024, 512, 144, 120, 114, 100, 72, 58, 57, 50 & 29 pixels Windows… Read more »
I thought it might be useful for designers and clients alike to see how we approach a typical App Icon design project. In this case study the client requested an App Launcher Icon for an Email App developed on multiple platforms. The first thing to consider when creating an icon for different platforms is how to… Read more »
Video games have never been more popular, especially since the advent of affordable mobile gaming. Revenue for mobile gaming in the US alone is estimated to reach approx. $3.31 billion in 2016, up from 2.03 billion in 2013. With the same source revealing that the mobile gaming market is “the fastest growing segment of the gaming industry worldwide”, there has arguably never been a greater role for icon designers to play in designing game interfaces.
While a lot of general design principles still apply, user interfaces in games have quite a few important differences from OS or web GUIs. Erik Fagerholt and Magnus Lorentzon argue that there are four different types of game interfaces related to both game geometry and narrative. These include diegetic, non-diegetic, spatial, and meta interfaces. These traditionally apply to 3D game worlds, but can just as easily be applied to a 2D game.
Diegetic interfaces exist within the game world, and the player interacts with them directly through the game’s character. Non-diegetic interfaces, on the other hand, are completely external to the game world’s narrative and mechanics and often serve to give players extra information about what’s going on in the game, e.g. health bars or the ‘HUD’. Spatial UI elements exist within the game world external to the game’s narrative, with the express purpose of giving the player – rather than the character – additional information about the environment, a game mechanic, or an objective. Finally, meta elements are those which exist separate to the game world, but communicate something about the narrative to the player – often by manipulating the fourth wall.
As we will see in the examples of Worms 3 and Temple Run 2, icon design can play an important role in the effective functioning of the first three types of in-game GUI – often in combination with one another.
The Worms 3 GUI is a great example of an icon-heavy non-diegetic interface. Throughout the main menu and within gameplay itself, Worms 3 relies heavily on the use of icons to allow users to interact with the game.
The icons are simple and refer very literally to the main game mechanics – choosing a weapon, jumping, or firing – but what makes them standout is that they reinforce the game’s visual geometry: the worms can backflip or jump forward in the style described by the icons; when a weapon is used, it will resemble the weapon icon; and the explosions look like, well, the explosion icon. It’s a really simple, straightforward way of integrating icons into the game interface, no text needed.
Temple Run 2
Although it may not be as popular as it once was, Temple Run 2 is still a good model for using diegetic icon elements in a really interesting way. Just take a look at the gameplay video below. Gameplay begins when a player ‘takes the idol’ – but, once the idol is tapped by the player, the game character appears from the tunnel and takes it.
Similarly, the golden tokens the player needs to collect are in an easily recognisable icon format, and the trail they form for a player to follow is also an example of effective spatial use of icons. These elements not only make gameplay straightforward and accessible, but serves to quickly immerse the player in the position of the character.
By learning about the different types of ingame interfaces, it’s possible to learn a great deal about the possible applications for icons within games.
“Game UI has a key advantage (or disadvantage from some perspectives) in that players are often engaged with the narrative and/or game mechanic enough for them to learn new interaction patterns, or forgive bad ones. This is likely the reason so many games have bad UI, as testing needs to encompass the core game mechanic while UI is seen as secondary.”