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 »
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 »
Basic Principles of User Interface Design Well-designed icons serve to inform users of the purpose of an app, and encourage them to download or open that app. Great icon design is important because icons frequently create the entire first impression and can affect a user’s decision to download an app or not. A badly-designed icon… Read more »
What to consider when designing Icon Colour Schemes We have looked at accessible icons and discussed the importance of colour for establishing an icon’s meaning and purpose. Although our earlier article focused mostly on design for visually impaired users, the basic concept can be extended to all users of icons. Colour is a key identifying… Read more »
Accessible Icons Technology has, without a doubt, improved the lives of millions around the globe. Both specialist devices, such as refreshable Braille displays and speech synthesisers, and general devices, like smartphones with voice recognition software, enable quick, efficient communication and aid the disabled with everyday tasks. Yet accessibility isn’t always an obvious concern when it… Read more »
Technology is forever being used in new and exciting ways. That’s why it’s important that you consider all sorts of different target audiences in your design work. This includes children. Programs and operating systems are increasingly being designed with kids in mind. For example, with the launch of the Windows 8 operating system for Windows… Read more »
I don’t do many ‘icon deconstruction’ rants but this one has really got on my wick recently. I must confess I don’t eBay a great deal but recently I have been after some Noise Cancelling Headphones for an upcoming long-haul flight (I am not great on planes so anything that will help!) I have been… Read more »
There are some simple, basic methods of good icon design which can yield great results if they are followed. Sometimes some designers stray too far from the basics by trying to be too original. Originality is important, but it’s also important to remember the basics. Here we outline some easy, memorable keys to effective icon… Read more »
Flat icons and what we’ve termed “almost flat” icons are currently carrying a certain level of vogue with them in the world of software. However, that’s not to say that 3D-style icons aren’t as effective or innovative. In fact, in the current climate, if 3D icons are designed well enough, they can go above and… Read more »
What information do you need to quote on the Icon Design project? This is the minimum information we require: How many Icons do you need? Is it one App Icon or a set of Menu or UI icons? What Style do you want? Please provide examples of icon designs you like. Which Sizes and File… Read more »
In our last two blog posts we discussed how traditional filmmaking concepts could be used and updated for the modern app product video. We have explored the concept of mise-en-scène as the visual events staged for the camera, such as setting, lighting, and staging. We now want to turn to how these concepts play into animated product videos and promos by focusing on sound effects and music. If we consider the mise-en-scène of a film as being made up of its visual elements, then the aural equivalent is the soundscape.
A soundscape, or sound track, is made up of three different elements. Firstly, voice: this includes dialogue and narration. Secondly, sound effects: these can be used to create an atmosphere or texture in visual media. Lastly, music: this is usually ‘background’ in most films and videos, used to give a sequence rhythm or imply certain emotions. It can also be used to associate different scenes or characters with one another. Let’s explore how soundscapes, if used effectively, can significantly enhance an animated promo or product demo.
Soundtrack, alienation and resolve in Chipotle’s ‘The Scarecrow’
Chipotle’s The Scarecrow is, by now, perhaps the most famous example of an animated app promo, having garnered over 13 million hits on YouTube, as well as an Emmy. Set in a future technological dystopia, it follows the story of Scarecrow, a worker at a corporate food company who, totally alienated by the unethical treatment of the environment and animals by his employers, as well as the artificial nature of their food production, returns to the countryside to grow fresh ingredients and ‘Cultivate a better world’. Needless to say, no irony is wasted in this advertisement selling an app for a large fast food corporation. Nevertheless, it is an excellent app promo video, and we can learn a lot from it by analysing its use of sound.
Use of minimalist soundscape
Although it utilises rather complex and extensive visuals, The Scarecrow actually has a very minimalist soundscape. There is no voice or dialogue used, only music and sound effects.
The music used is particularly powerful. It is a cover of Pure Imagination by Fiona Apple, significantly reworked to invert and distort the message of the Willy Wonka original. It does this in two ways. First of all, it mixes a digital backing track (with a definite rhythm) with classical instrumentation, in a way reminiscent of Valve’s Portal 2 soundtrack. This gives the visuals some context: ‘natural’ sounds are subdued or overridden by digital / electronic sounds, in the same way that the Scarecrow lives in a world where the natural (food and the environment) is subordinate to industry. This is reinforced by the use of ‘industrial’ sound effects: we hear machinery, steam rising, automated doors, that sort of thing.
Secondly, it uses a lot of dissonance and minor keys, compared to the original, which was a relatively uplifting and positive song. Dissonant notes are often used to associate certain visual representations with negativity or negative emotions. For example, musical dissonance really picks up and crescendos when the Scarecrow sees a chicken being injected with growth hormones (see below).
As the ‘story’ of The Scarecrow is resolved, so is the soundscape: gone are the electronic and synthetic elements of music and SFX, replaced with a tender and affective naturalistic major key just as we come to see the Scarecrow pluck a suspiciously Chipotle®-shaped pepper from a tree. A subtext is created that Chipotle offer consumers resolve in a fragmented, alienated fast food market. One wouldn’t argue that the video successfully sells its app (its appearance at the end feels very tacked-on), but it does successfully use soundscaping in a motion graphics context.
Cumulatively, then, the soundscape of The Scarecrow helps capture mood and emotion in a way that the visuals do not; or rather, it is far more able to express feeling than the video’s minimalist 3D scarecrow protagonist could alone (who operates mainly through facial expressions). What we can learn from this is that sound can be manipulated successfully to put across a message, even if there’s no dialogue involved. Many app promos use narration to explain a product’s features, but if you use other elements of soundscape, you can really stand out from the crowd.