Examples of App Icons and Designs

app design, Research, U62_U63, U_5

Our next project involves designing and developing an app. Here are some examples of already existing app icons.

1

Aviary

Having installed and used a dozen or so photography apps, one of the most comprehensible and best designed ones would be Aviary. It certainly isn’t an Android equivalent of Photoshop, but the options and functions that come with this sleek app are more than enough to cover your basic mobile photo editing needs. Coupled with a minimalistic image-based icon design of a camera with a stylish balance of black and  white against streaks of colour, and a very user-friendly interface, this app’s design is great.

Aviary

When using Aviary, the photo you choose to edit takes up the majority of the screen with only one scrollable tool bar along the bottom. You can navigate in and out of the different functions with your phone’s back button, meaning that the app doesn’t need to open any extra extension toolbars or drop-boxes that might obstruct the photo you’re editing. This minimalises the interface’s complexity immensely whilst also giving maximum space for you to see your photo. You can also zoom in just with you thumb and index finger like on any other good app which really helps if you want to edit details on such a small screen. Other hand swiping functions such as ‘Undo’ (swipe right) have also been integrated into the interface which is great because it shows that this app really understands its user’s capability and interaction with mobile phones. This also helps avoid adding any extra buttons on the screen that could make things clustered. Once you’re done you can simply press the ‘Done’ button at the top right hand corner and it will save the photo onto your phone whilst also giving you the option to share your image via social media.

Aviary_gif

15

DecoPic

I only really used this app because of its abundance of effects, but the interface itself was rather clunky and difficult to use. The design itself was charming and cute, but a lot of the graphics have been poorly scaled and shrunken horribly in bad resolution. That and also the overlapping and translucent graphics that flood the screen in an attempt to appear ‘decorative’ but in actuality just make the buttons more difficult to see.

The icon is very cute and appealing with all the pink, but my only critique would be that it’s very difficult to see the text. Generally, app icons shouldn’t really have text in them because of how difficult it is to read. One or two letters at most would usually be fine, but more than that and the icon becomes clustered and awkward to read because of how small it is. Images are much better at representing something in a small and concise manner than text when it comes to graphics. They are also easier and quicker to recognise too.

1

It doesn’t help how the app handles adverts rather poorly too, having them pop-up as you start up the app and also scroll along the bottom and top of the screen in rather uncomfortably large banners. The editing mode itself is alright, but the fact that the stickers open up in a massive dropbox that takes up half of the screen space probably isn’t the nicest way to display them. Sure, you can view a lot of stickers at once that way, but it just feels chunky and slightly overwhelming at times. It also covers a lot of the photo you’re editing, making it tricky to see what you’re putting your sticker on. You could have easily just had them running along the bottom as a scroller with a back button (or a swipe) to navigate back to the main editing menu or something. Having said that, it isn’ t the most horrendous interface; it’s just a lot of button pushing and graphics. And, although buttons are commonly very useful things to have, having too many can become over-powering and unnecessary. With the fact that this is a phone app with a touch-screen interface in mind, there could be many other ways to incorporate navigation into this design that could make the overall experience a lot easier and clean-cut.

 1340848453-3011919027_m

puri-5

20111020-230414

5

SnapChat

And here is where I get to sit you down with a cup of tea and tell you how much I detest SnapChat. Oh, this app…where should I even start? My first impression of this app, judging solely on the icon was, “What kind of mascot monstrosity is this?! Yellow and white with a tacky black border?! Who thought this was going to be an good eye-catching design? I don’t even know what that’s supposed to look like!” It wasn’t the best silhouette of a ghost, which for some reason is completely unrelated to a social camera app. And it’s attempt to seem abstract just didn’t work for me.

But that wasn’t even the worst of it. Not only did the SnapChat mascot refuse to appeal to me in the slightest, but once I downloaded the app and was greeted with a sudden minute video tutorial that came out of the nowhere with no control over how to pause or play it, I was welcomed with the most confusing app navigation systems I’d ever seen.

Upon opening the app, the camera mode immediately turned on. This was great because it allowed the user to access their camera and start snap-chatting straight away without having to deal with things like a menu screen. However, due to the lack of clarity as to where to access the different sections and functions of the app, I spent a good half-an-hour or so trying to navigate through everything and even then there were still tons of little settings that I had missed out on. The app itself isn’t bad once you know where everything is – it’s just hugely frustrating to me that the developers didn’t show any clear direction or instruction as to where to get everywhere. They only dropped a couple of pointers here and there but even then, the whole UI was just so different and relied so heavily on the user’s intellect to know where to swipe in every direction possible and to hold down on as many icons as possible to do things. It was really frustrating to handle.

10

WeChat

WeChat is the equivalent to WhatsApp and the icons for both apps are widely recognised to many as a messaging app due to it’s clear and basic symbol – speech bubbles. The colour green gives a sense of friendliness and social company. The app itself is the standard copy of most messaging apps out there with a section for chat logs, contacts and even a newsfeed where you can post statuses and photos. No text or type was used in the icon, avoiding delays in having to read tiny text and making the app more easier to recognise.

4

Bubble Play

Bubble Play is a game created by NAVER LINE made for most Android and iOS mobiles. The icon, like most game apps, feature the main playable characters against a fitting background. A lot of other game apps would have the setting involved in the background too. Although in this case, I really approve of the designer’s choice to keep the background a simple solid orange, complementing the simplistic and cartoony nature of the art style. I think it works really nicely, as orange is associated with energy and fun. The fizzy drink brand Fanta also uses orange! It’s a very zesty colour.

Colour psychology and emotions is considered to be the most important factor into why consumers buy what they buy. A study titled Impact of Color in Marketing found that up to 90% of snap judgments made on products were based on colour alone (depending on the product)

color-emotion

A chart of colours in sections to show what kind of influences they can have on product design.

I understand that a lot of apps are not the standard rounded square shape – some apps such as Quiz Up and Twitter rely on other shapes like circles and even just the mascots themselves against a transparent background. This is a different approach to the commonly used rounded-square layout, but the transparent background adds a nice novelty without over-powering the overall branding of the icon too much. It can also make it stand out quite nicely amongst the sea of rounded-square icons on a phone.

9

7

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s