Total Shares 595

How to
Create an App

Chapter 5

create a winnning
design for your app
A great app keeps in mind that in most cases, the user is operating a device that has a small touchscreen. The user interface needs to be as unobtrusive as it can be, leaving out any design elements that don’t add a use or function to the app.
- Matt Brian -
News Editor for The Next Web

When it comes to apps, design is important. Well-designed apps are more likely to attract users, retain users, and achieve whatever it is they’ve been created to do (e.g. generate revenue, promote another product, educate users, etc.).
And design is about more than just creating a great look and feel. It’s also about function and usability. Look and feel are, no doubt, extremely important.

But, unless your app functions beautifully, looks won’t get you very far.

Now, the perfect design for your app isn’t going to be the same for other apps. So coming up with a great design is a process that’s unique to each project.
That said, there are some design fundamentals that you should know about.

— colour —
Colour is one of the most powerful items in the design toolkit. Developers use colour to impact emotions, grab attention, and encourage purchases.

It’s hard to underestimate the importance of colour. Colour impacts us in an unconscious, emotional level. For this reason, having a basic understanding of the psychology of colour is a must for all hopeful app creators.

For the sceptical reader, here are some
interesting stats about colours and consumer behaviour
as Andrew Hubbard states in his excellent post.

80 percent of people believe colour increases brand recognition
85 percent of consumers cite colour as the primary reason the buy a particular product
Up to 90 percent of snap judgements made about products can be based on colour alone (depending on the product)
Colours have been proven to convey messages and evoke emotions

Certain colours elicit particular emotional responses and associations. And it may be a good idea to pick the colours you will use on your app based on their psychological properties.

Positive associations:
courage, strength, warmth, energy, masculinity, excitement, stimulation.

Negative associations:
defiance, aggression, strain.

Positive associations:
optimism, confidence, self-esteem, extraversion, friendliness, creativity.

Negative associations:
irrationality, fear, fragility, depression, anxiety.

Positive associations:
spirituality, luxury, authenticity, truth, quality.

Negative associations:
introversion, decadence, suppression, inferiority.

Positive associations:
tranquillity, nurture, femininity, love, sexuality, warmth.

Negative associations:
inhibition, claustrophobia, emasculation, weakness.

Positive associations:
intelligence, communication, trust, efficiency, serenity, duty, logic, calm, reflection.

Negative associations:
coldness, aloofness, emotionally lacking, unfriendliness.

Positive associations:
harmony, rest, balance, refreshment, love, restoration, outdoors, peace, reassurance.

Negative associations:
boredom, stagnation, blandness, fatigue.

Positive associations:
comfort, food, warmth, security, sensuality, passion, fun, abundance.

Negative associations:
deprivation, frustration, frivolity, immaturity.

Positive associations:
psychological neutrality.

Negative associations:
lack of confidence, dampness, depression, lack of energy.

Positive associations:
sophistication, glamour, security, emotional safety, efficiency, substance.

Negative associations:
oppression, coldness, menace, heaviness.

Tapping into the psychological properties of colours can help you convey what you’re about in the quickest, most effective way without the need for lots of descriptive words. And you can also use colours within your app to combine certain emotions with certain functions.

For example, many apps use red to signify new notifications no matter what colour scheme they choose for the rest of their app. Aside from drawing their attention to the stand-out colour, this helps users see new notifications as exciting and stimulating.

Here are a few other facts about colour:

  • Complementary colours (those which appear on opposite sides of the wheel – red/green, yellow/purple, blue/orange) are more stimulating, and so are great for attracting attention and building energy.
  • Analogous colours (those which sit beside each other on the colour wheel – pink/red, yellow/orange, blue/green) are more harmonious, and so are great for creating relaxation and peacefulness.
  • Women prefer softer colours, whereas men prefer bolder ones, according to Gregory Ciotti.
  • Certain industries are already associated with particular colours (e.g. healthcare with green, and technology with white, while social media was synonymous with blue for quite a while due to Facebook, LinkedIn and Twitter).
— font —

Fonts, as with colours, can have a huge emotional impact on users.

The font you choose is your brand’s voice. And so certain fonts are more appropriate for certain apps. Round, playful fonts, for example, may attract children or signify that your app isn’t too serious. Whereas sharper fonts may have more serious connotations, and imply authority.

Bear in mind that particular fonts work well with others (you can see a great list of complementary fonts here), and that certain fonts may already have certain associations (comic sans is often seen as childish and unprofessional, and courier is often seen as retro and antiquated).

Stick Man
Snowboarder

Stick Man Snowboarder uses an exciting, chunky, and icy font with a warmer, smaller and differently angled font. The fonts complement each other well, appeal to the app’s target demographic, and are eye-catching enough to draw attention on the Apple App Store.

— layout —
Your layout needs to be visually
appealing and easy to navigate.

Visual appeal comes from colour, design, and button placement.

Crossy Road, below, has been lauded for its innovative and beautiful design.fonts may have more serious connotations, and imply authority.

Again, there’s no one perfect layout, and arriving at the one that best suits your app will be a process of trial and error.

Still, here are a few
best practice layout principles:
Position your most important buttons in the bottom corners of the screen – most people hold their phones in a way that allows them to use their thumbs for navigation; placing your most important buttons within “thumb-reach” makes it easier for users to hit them.
Buttons should be greater than 1cm – buttons that are too small are hard for users to press; it’s best for them to be over 1cm – and remember: a bigger button signifies a more important function.
The “two-tap” rule – users don’t like wasting time; as such, it’s good practice to allow them to perform anything they want quickly and easily. If it takes more than two taps to do this, then the user may not want to persevere. (This may not always be possible, and more subtle actions may require more taps; still, it’s best to stick to the rule when it comes to your apps most important functions).

The best way to nail your app’s layout is to carry out design and research at the same time. Sketch out and list potential user flows (you can write them out, sketch them, or map them out digitally), and see the possible ways users may navigate your app. Play about with different paths and see what works best.

If you’re working with a designer, you can use project management tools like Invision and Asana to share your ideas quickly and easily – and for free. They’re ideal collaboration tools the make you and your team more efficient and productive when simultaneously working on such a project.

And remember to incorporate standard device movements and gestures – swiping, pressing, drawing the fingers apart, pushing them together, and so on. The less unique gestures your users have to learn, the quicker they will be able to navigate your app efficiently and intuitively – app users don’t like learning new things so... make it as familiar
and as easy as possible!

Stacks 2 is a beautifully designed currency conversion app. The app was featured on several Best Designed Apps lists due to its simple, intuitive interface and thoroughly useful function. However, the app lost points because of the new and hidden gestures the app attempted to introduce to its navigation.

Monument Valley, winner of Apple’s Game of the Year 2014 award, has also been praised for its beautiful and sophisticated design. The game’s artwork and design, combined with its controls and ingenious puzzles, led to the game becoming incredibly popular – with more than 4,000 reviews across Apple’s US and UK App Stores averaging 4.5 stars.

Taking each of the aspects highlighted throughout this chapter, Dhru explains the process and essence of HaikuJAM’s layout and design:

The design of HaikuJAM is often described as 'Zen' and 'elegant'- I actually practise meditation daily and I'm fascinated by the concepts of stillness and channeling energy around the body. Such ideas have definitely played a role in the evolution of HaikuJAM's aesthetic and user experience: the process of consuming content is still and deeply immersive, with beautiful full screen photographs and crisp typography. However, the underlying content creation mechanic is radically collaborative and dynamic. 

When designing the product, we let ourselves be inspired by the worlds outside of technology, specifically the worlds of meditation, Ashrams, cloud formations and fractals! It is of course necessary to marry aesthetic with function and also to be simple, but one should not fear originality. Design reflects culture, process and your fundamental belief system. It’s much more than just an interface or set of animations, and is definitely worth deep consideration.
- Dhrupad Karwa -
Founder/CEO of HaikuJAM
— testing —

Once you have settled on a skeleton design, you need to make sure that your users will love it as much as you.
The best way to find out whether they do is by running some remote usability tests. There are plenty of companies that offer this service, and a key benefit is that they allow you to see how people use your app in a natural setting. This will show you what aspects of your app they like, as well as where your app goes wrong.

Usertesting.com offers a Basic Package, including video and audio of your app being used, including testing on computers, phones, and tablets, for $49. They also offer a Pro Package, which include benefits such as demographic filters, moderated usability testing, competitive benchmarking, highlight reels, and more.

3diusability.com offer a more flexible service that integrates with the way their clients want to work. The company’s usability evaluations are bespoke packages consisting of specially designed usability tests and in-depth reporting. This service is available from £1450 + vat.

If you’re working on a budget, you can always ask friends and family to download the app themselves and watch how they use it. Whilst not as comprehensive as professional usability testing, this should still flag up any major problems. You’re unlikely to nail your
design first time, so after each test
be prepared to make changes and take
all feedback constructively.
Once you feel you’ve removed the first set of problems, send your new design for testing too. Repeat this process until your users are happy, and when you launch, your app is sure to navigate like a charm.

The benefit of conducting robust testing across every platform is significant, as Marty Zwilling, CEO & Founder of Startup Professional Musing, and Advisory Board Member for multiple startups, highlights:

Make your app support all platforms. Port every app to all the popular platforms – IOS and Android. Compensate for low profit by aiming for maximum reach. Cultivate a preferred relationship with Apple, Amazon, Facebook, Microsoft, and Google to ensure the best possible placement of your offering.
— in summary —

Design is so much more than simply making your app “look pretty”. Although smartphones are getting larger, with far greater quality graphical displays, they still have relatively small touchscreens. Design is therefore fundamental to not just the usability and navigation of your app, but the emotional connection you want your users to make with it too. You want them to enjoy the experience, keep coming back for more, and to rate it highly with positive reviews too!

This chapter details everything from which colour to use for the type of app you are developing and the emotional response you want to spark, to font style and spacing, and from layout to usability. Just be sure to test, test and test again to make sure... that your users are
wowed as much as you are!

— key takeaways —
Design can mean the difference between retaining users and acquiring new ones, or bad reviews and low volumes of downloads.
Colour is vital – think about the purpose of your app, the emotional impact you want to deliver, and the associations you want users to make as a result.
Fonts play a surprisingly significant role in the user experience, so be sure to choose your font – or combinations of fonts – wisely.
Layout boils down to making sure that your app looks great and is easy – intuitive – to use.
Testing is a critical stage in the design process – from friends and family to paid-for services, be sure to be thorough and to be open to feedback.

take me to
chapter 4

take me to
chapter 6