App Color Best Practices

App Color 101

Color. It affects our mood, perception of things and even our app choices. It is almost second nature for some to categorize things according to colors among other characteristics. Some apps use colors to catch attention, define mood and character, and to convey an industry standard. It can’t be denied that color is at the forefront of app design.

To see how colors influence the design of apps, here are the common colors used in the icons of some of Apple App Store’s top apps:

Common App Icon Colors in the Apple App StoreSource : brandisty.com

 

According to an analysis conducted by Colin Eberhardt, majority of app screenshots favor shades of blue, orange and red. It’s quite surprising to note that some, if not most of the top apps don’t follow common app color conventions. For example, Eberhardt’s analysis showed that screenshots in the game category on average use mostly shades of red and orange with some shades of blue. Shades of green and purple used very sparingly, yet these two colors are among the top five used by the top apps of this category. The same can be said in the food category where the top apps used pink and shades of green, colors that aren’t quite popular in the category.

 

Though the analysis done by Brandisty only used the icons of the top five apps in each category and Eberhardt used 250,000 screenshots, it is quite interesting that apps that don’t follow the ‘color standards’ in their category still perform well. This could be because of other factors that affect the use of color in  apps. Some of these factors are:

 

Industry Appeal

Color has many facets and properties to explore. For example, the use of dark and light shades of a color creates a degree of contrast that may affect the visual appeal of the app. Categories like games, music and entertainment favor darker colors, thus a darker screen output. While categories like finance, education and weather favor lighter colors because there is a necessity to clearly convey information. Categories that use darker colors go for the impact of presentation with an emphasis on the visuals.

 

Muted tones also convey an air of credibility and seriousness. Apps in business-related categories are colored less vividly than apps in entertainment-related categories. This is based on a proven practice where a product can convey its function and mood with colors that are often attributed to its  industry.

 

The Entire Palette

It’s not just about a single app color. Some apps just use a single color range to create a feeling of familiarity that enhances the user experience. Other apps with much complex navigation designs (like productivity apps) use solid colors as navigation aids, defining each category and its subcategories easily. It is important to create palettes of color that are in harmony and in context with the app’s functionality and mood.

 

The Psychology of Colors

As mentioned earlier, color affects our app choices – well, almost all of our life choices. Color is a big factor in brand recognition. It is such that 84.7% of consumers consider color as the main reason for a purchase.

  • Yellow is full of warmth and stimulants that it attracts the eye to the product but makes babies cry for some reason.
  • Red excites and creates a sense of urgency; it basically shouts “Buy now!”
  • Blue makes you feel secure like you can trust this product with your life. It increases productivity but makes you lose your appetite though you feel calm and serene in the process.
  • Green is the color of abundance and makes you feel like you’re just out grazing on the grass, no worries at all. It’s also an eye-friendly color.
  • Orange is a persuasive color. It attracts your attention and then encourages you to take action. But it can also create a sense of caution (through association with other objects).
  • Pink is soft, with a hint of youthful infatuation and reminds you of a little girl’s bedroom.
  • Black creates the impression of luxury and no-nonsense approach.
  • Purple is an older pink, soothing and calming with a hint of sophistication that attracts the wise, experienced consumers especially those into anti-aging products.

 

Some tests also revealed that there are some colors that convert higher, triggering certain subconscious responses from users. For buttons that ask for call of action, colors like red and yellow have higher conversion rates compared to colors like green and blue.

 

Cultural Influences

Not all cultures define colors the same way. A positive color for some may induce negative emotions for some. For example in China, the color red is dominant even in the finance sector where blue is the global favorite. But in South Africa, the color red symbolizes mourning. Mexico’s national color is green but it is forbidden in some parts of Indonesia.

 

App color (or just icon color) is sometimes adjusted depending on the targeted market. This doesn’t sound practical in the long run. Some developers and companies choose the color blue instead. Blue is considered to be the safest color with only a few negative associations.

How to Make an App Reskin Look Original

How can a mere app reskin look and feel original? Is originality even on an app reskinner’s mind? It should be! As convenient it is to ride on a viral trend, it is not a sure-fire way to earn the top spot or even drive downloads and revenue. Aside from that, an app reskin that lack originality would cause a lot of criticism not only from other developers but also from users.

 

So how can things become a win-win situation between the app reskinners and app users? Here are ways to make even the most cloned app reskin into a unique creation:

  1. Only use the framework of the app: its general concept and gameplay. Sometimes, even when an app reskin is visually different from the original app, the use of similar UI elements (especially if the placement and design layout are the same) and UX design would immediately give away the fact that the app is not original.
  2. Resist the lure of imitation. There are proven and trusted design strategies; then there are original design strategies. It’s tempting to just follow a popular app design template especially if the design is considered as the de facto standard of the market. You don’t need to think of something new, just think of solutions in order to improve the existing design. Even trends don’t require every new app to be uniform.
  3. Create your own trademark and own it. Even with clones sprouting the very moment an app becomes successful, it’s worth noting that the original still stands out. It’s mostly because app studios promote apps as if they are brands. There’s either a catchy tagline or an unforgettable character and the studios build from there. They aim for memorability, a characteristic that makes the app sell itself even without aggressive marketing.
  4. Repetition can do funny things to users’ minds. Just imagine downloading an app you’ve never heard of before. It looks interesting but as you open it, there’s this nagging feeling at the back of your mind that you’ve seen this app before. It could be just déjà vu, but the font is really familiar. This usually happens with app clones and apps that emulate popular apps. Do not copy design elements from other apps if said elements do not represent the brand you want to create. Create custom color palettes and avoid using typography (especially the customized ones) prominently used by other apps.
  5. Small details matter. Sometimes injecting character or just a certain vibe about an app changes the way people perceive it. Set goals to engage users to a personal level. The main character could be a typical cute cat that is not really a standout but is animated to make different facial expressions. Interactions like this can create a unique user experience.
  6. Good quality performance is a must. “That’s an app reskin. I’m sure it’s crappy” said a good friend but he downloaded the app anyway. The app reskin was still loading after thirty seconds…then it crashed – and that’s just the beginning. As users demand more from free apps, app reskins should aim to deliver the best quality. An app reskin after all, needs to hook the audience before the time is up.
app-interface-design

App Reskinning: What to do with an Existing App Interface Design

App reskinning is considered as a quick-fix solution to the drudgery that is mobile app development. All you need to do is just slightly change the graphic elements, the sound, and music, a little tweaking in for the monetization models and that’s everything, right? No sweat at all. But with all its advantages, there are also inherent disadvantages in app reskinning (some of whom are mentioned in this post). These disadvantages can limit the effectiveness the reskinning process. So what of the app interface? Would an existing app interface limit creative customizations?

Common Issues with App Interface in App Reskinning

So here’s the deal with app interface: it’s part of the backbone of the reskin so it needs to be strong in the first place. When selecting a source code or app template to reskin you should watch out for these issues:

  1. You can’t see what you get. One disadvantage of buying a source code to reskin is not knowing how the individual screens look and if the screen flow create quality user experience. On the flip side, most of these source codes come from apps that are still up and running in the app store. You can just install the app and have a ‘feel’ of the screen flow and the app interface’s layout. Observe anything that needs improvement.
  2. Trends come and go. The app template that you plan to reskin may be using outdated design trends. Some designers often emulate the design of popular apps to ride in the trend but when it’s time to put the app template up for sale, the trend is already stale.
  3. Usability is not equal to ease of use. Some apps earn the label “user-friendly”. This is somehow deceiving since task completion is the only measure in us to gauge effectiveness. There aren’t any consideration to factors that aid in ease of use. A task may be important enough for the user that he/she would try to accomplish it even through stumbling blocks in the app interface but it doesn’t mean that it would be true for all tasks, especially when it comes to navigation.
  4. Very simple UI that it’s stupid. The general mantra of UX design is KISS (Keep It Simple, Stupid). This is all good since simplicity often equates easy understanding which then leads to ease of use but there are instances when the app’s design is so simple and straightforward that it looks like you are underestimating (unintentionally of course) your prospective user’s capability to think beyond the surface. Buttons should be intuitive and not redundant. Walkthroughs and tutorial modes should not interfere the normal flow of gameplay and should only appear as per the user’s request. App users, especially those of game apps are up for the challenge of more complex interfaces. For some cultures and subcultures, it’s somehow a rite of passage -that just being in the know separates you from mere mortals. This is why the same UX and UI design will not work for different target markets.

 

Reskinning a User Interface Design Template

App skins make an app an almost unrecognizable incarnation of its old self or it could make it look like a lazy knockoff done by the dozen in sweatshops. But the question still lies: would you retain a UI’s original elements or would you make it something else entirely? Here are some things that you can do to solve this dilemma:

  1. Make the user experience memorable. We humans, make impressions based on the emotions that an experience evokes. These emotions would immediately be called upon the moment we see a reminder of that event. It’s like when a brightly-colored window suddenly popped up in the middle of an exciting game or a dialog box telling that you did awesome and you should share your achievement with your friends. Bring to mind your experience as an app user; what was your first impression of the app? Does the familiarity of the app interface make you feel at ease? Does the presentation of the app’s features and functionality kept you hooked? Is the app design working because they arrange the things this way or because of the overall aesthetic appeal? A lot of apps have memorable UI and UX elements, most of them for the wrong reasons.
  2. Flat app interface design for fast loading times. Flat designs are minimalist and mostly focus on the iconic value rather on the overall aesthetics. Without the drop shadows, textures and gradients, your app will load faster. Also, adopting concepts from Google’s material design would make the colors and shapes of design elements intentional, focused and organized. The design itself serves as a guide for users as it draws out defined hierarchies almost effortlessly.
  3. Don’t change navigational elements too much or any UI elements for that matter. The key is to make navigational elements as familiar as possible. You can change the colors or shape of the navigational tools but it should still be distinguishable. You can also tweak the layout of these elements
  4. Buttons can be at the same place but should not look the same as the original. This is something that stands out with most reskins. Some buttons and other graphic elements are sold as kits or bundled with templates. These graphic elements are usually customizable to better fit the reskin’s overall aesthetic.
  5. Elements should have cohesion and consistency. As mentioned above, you can customize UI elements. But it’s better if the same people working on the other graphic elements also work on the UI elements.
  6. Create adaptive UI elements. As a rule of thumb, create graphic elements with three screen sizes in mind.

The Importance of Good UI and UX Design in App Reskinning

It is always said that user experience is everything. The app’s design should be able to invoke the right response from the users that would translate into engagement and transactional completion. UI design is not only important in the aspect of aesthetics but also in exploring user behaviour through the way the user interacts with an app’s interface.UX is the general feel of the app according to a user’s perspective. This could include the coherence of graphic elements, the layout of UI elements and the flow of the app’s screens. UI and UX design defines the mobile function of the app. It should provide the user with mobile functionality that is defined by speed, ease and accuracy. Read More