Over a million developers have joined DZone.

How to Make the Perfect App

Mobile design is vital to a successful app today. You don't want something cluttered and loud, but you do want to make an impression. Here, learn how you can use fonts, spacing, and good design to do just that.

· Mobile Zone

Mobile UI design is an important factor when you consider how users perceive, utilize and enjoy your mobile app. Proper mobile UI design can lead to an improved UX and boost your retention rates.

But what can you do if designing user interfaces isn’t your strong point?

Thankfully, there are a number of tips and principles you can follow to make the perfect app. On top of that, there’s a selection of online tools and resources that can improve your mobile UI design. You can check them all out here and create the kind of mobile app you always wanted to make!

Use Best Practices for Your Target Platforms

Knowing the best practices of the mobile platform or platforms you’re targeting is an essential first step before you make any design decisions. Both iOS and Android have their own set of best practices and they’re freely available online.

Once you’re familiar with these best practices, a number of design decisions will become much easier for you to make.

Consider the Devices You’ll Target

In this day and age, you’re not just designing one UI for your app. With the advent of tablets, and phones of all shapes and sizes, your UI design will need to adapt to many different screen resolutions (see here for a V-Play Guide on how to support multiple screen sizes & screen densities with a single source code).

mobile UI design-screen resolution

Take that into consideration and you won’t fall victim to any nasty surprises when you test out your app on different devices.

Get the Orientation Right

This is a problem unique to mobile development. You should decide early on if your app will support multiple orientations or just portrait or landscape. This will help you to make better decisions when it comes to other UI factors.

If you already know how you’ll orientate your app, what devices you’ll support and what platforms you’ll target, then you’ve gotten your most basic UI decisions out of the way.

Be Consistent

One of the simplest things to get right when designing your user interface is consistency. A consistent UI can be understood by people all over the world, whether it’s a home button or a set of traffic lights.

If you have 3 blue home buttons in your app and 1 red home button, you’ll quickly succeed in confusing your user. Keep things simple; visual cues such as colors, shapes and fonts need to be consistent within your UI.

mobile UI design - User

Design for Users, Not Yourself

Who are you making your app for? If you can imagine the type of person that will use your app, then you’ll have a much easier time designing for them. Try to find out as much as possible about your prospective users; you can never know enough about them.

Some basic questions you can ask are:

  • How old are they?
  • Where will they use your app?
  • When will they use your app?
  • Will they use it for pleasure or work?
  • What kind of device will they use?

Once you’ve answered these questions, you can begin tailoring your UI to meet their needs.

Consider the Size of a Finger

For most people, the finger is the tool they use to interact with your app. Whether it’s the thumb or the index finger, your UI needs to be flexible enough to read their input. Make your users happy by giving them buttons they can press without a dialing wand.

Choose Your Words (and Fonts) Wisely

Significant parts of your UI will involve text. For this reason, it’s crucial that the wording of buttons, dialogs, etc., are informative above all else. Keep things familiar for the best results. "Home" and "Back" are fan favorites, there’s no need to replace them with "Start" and "Return".

It’s also worth noting at this point, that you’ll want to choose a font that’s easy to read and fits with the overall style of your UI. Your choice of font may be one of the defining features of your UI, so take the time to get it right.

Replicate What Works

You don’t need to reinvent the wheel every time you create a UI. And often times, it’s better not to.

If you see a UI design somewhere else that you think will work well for your app, find out as much about it as you can. Replicate everything you can and only innovate when necessary.

Large companies spend a lot of time and money to ensure that they’re using the most optimal UI. If you have the same goal in mind, then there’s no reason you can’t benefit from their testing as well. Especially when all you have to do is take a look at the front end of their app. Most of them rely on common UI patterns anyway.

Give Clear Signals

In general, your user’s navigation through your app should be quick and painless. One way to guarantee this is to make sure that navigational buttons, such as the "home" or "back" button, contain visual clues that give users the best chance of finding what they’re looking for.

mobile UI design - Clear Signals

Use Colors Appropriately

Your app might have some kind of color scheme long before you begin designing your UI. What’s important to remember is this color scheme won’t be so obvious to people using your app for the first time. In V-Play Apps, it’s simple to change your color scheme by using the ThemeColors component.

So don’t over-depend on a beautiful palette to guide users through your app. Individuals with color blindness or impaired sight will be especially thankful. Accessibility should never be sacrificed to satisfy style.

Test As Much As Possible

The best way to improve your UI is by testing it on as many devices as possible. This gives you a chance to find flaws you hadn’t even considered and fix them before release.

You should also invest some testing time yourself. Install your app onto a device and carry it around for a week. You’ll soon notice ways to create a better UX through smarter mobile UI design.

Get Feedback

Even if you’re just getting feedback from family or a friend, make sure to ask them a lot of questions about how they found the UI. Were they ever confused by what should happen next? Did they always end up where they wanted? How easy was the app to use in general?

This kind of feedback can help you refine your UI design and cause a tremendous improvement in your app’s UX.

Create an Intuitive UI

The end result of your UI design will be an intuitive UI. Users will be able to make educated guesses about what your UI does, and get it right. If your UI isn’t at this level yet, then you still have work to do.

The Best Fonts, Icons, & Sounds for Mobile UI Design

You’ll need a number of different resources when designing your UI. Check out these fonts, icons, and sounds for crafting user-pleasing user interfaces. They’re all free to use!

Fonts

Font Squirrel

This is one of the biggest collections of fonts online, so you’re sure to find something to suit your tastes. As an added bonus, they’re all 100% free for commercial use. Font Squirrel also has a font identifier tool so if you have something in mind, this site can help you find it too.

mobile UI design - Fontsquirrel

DaFont

DaFont is another large online collection of fonts. If you’re serious about fonts, DaFont also offers a number of tools for font management and creation so make sure to check them out.

The League of MoveableType

This site is for anyone that wants to be on the cutting edge of mobile UI design. The League of Moveable Type’s mission is to reshape the way the average person thinks about fonts. They provide free and open-source fonts with an emphasis on high quality.

If you’d like to see a full list of free fonts, check out this post!

Icons

Iconfinder

This site boasts over 1 million icons to choose from, however, some are only available as paid assets. Iconfinder has a great search function and with such a large collection, it shouldn’t take too long for you to find what you’re looking for.

mobile UI Design - iconfinder

Icon Archive

Icon Archive features a large collection of free icons and iconsets. One of the most useful features of this site is the related icons it displays when you view an icon that interests you. You can also browse their collection by category or freshness.

iconmonstr

iconmonstr is a good back-up if either of the other sites fail you. Their icons have a distinct style, meaning they always look great together. Make sure to check out their sets if you find something you like; they contain alternative versions that you may also enjoy.

For more free icons, check out How to Download the Best Royalty Free Icons on the V-Play Blog.

You can also use V-Play’s built-in icon set, powered by Font Awesome.

Sounds

Raised Beaches

Octave by Raised Beaches is a free library of UI sounds. While UI sounds may not be high on your priority list, they’re one of the subtle touches that can push your UI design over the edge for users.

RCP Tones

Another free collection of UI sounds, dev_tones by RCP Tones is a great choice for your mobile UI design with over 500 tones. You can test them on site to find what you’re really looking for.

UI Sounds from Kenney

This is a great collection hosted over at opengameart.org and while these sounds started off for games, they’ll be right at home in your mobile app as well.

For more royalty free sounds and music, check out this article!

3 of the Best Mobile UI Design Examples

Depending on your apps functionality, your UI will have different demands. But just because your UI needs to work hard to give the best UX, doesn’t mean it can’t look good. Here are some recent examples of apps that offer a great service and made some inspired UI choices.

1. Marline

Marline was an app created to track tide changes. It eventually evolved to include weather forecasts and give info on how full the moon would be. It’s supposed to be the perfect companion for anyone that loves going to the beach.

mobile UI design - marline

With its smooth animations, smart color choices, and intuitive design, you can definitely see yourself relaxing at the beach with this app to keep you informed.

You can check out Marline now on the App Store.

2. Noisli

Noisli aims to boost focus and productivity among its users by giving them the ability to create their own natural soundscape. It was imperative then that they create a UI that wouldn’t take away from their users' focus and productivity.

mobile UI design - noisli

On desktop, iOS and Android, Noisli features one of the most pleasing user interfaces you’ll ever see. Pleasant on the eye and simple to navigate, it’s not only easy to use; it encourages users to explore and discover the settings that work best for them.

IS app

IS app is a location tracking app with the combined functionality of a social media app and an instant messaging app so you can meet up with your friends easier. The UI of an app that does even one of those things can be tricky to design, which makes the IS app even more impressive.

Over a few simple screens, all of this functionality is clearly displayed to users. What’s most impressive is the clean design of the location tracking feature. The map is easy to read and the profile pictures are clearly displayed. If you think you have a lot of challenges to overcome when designing your UI, make sure to check this one out to see how to make the complicated, simple.

mobile UI design - IS app mobile UI design - IS app 2

Design Your Mobile UI with V-Play Apps

V-Play is your free SDK for creating cross-platform mobile apps and games. It uses QML and JavaScript to create beautiful apps and games in just a couple of days.
It’s free to download, use and even publish your apps and games with V-Play. Just sign-up and start making the perfect app today!

For more info how to make your own app with V-Play, see these 2 tutorials:

Make Your First App with V-Play!

How to Create a Density-Independent App for Multiple Screen Sizes & Screen Densities

 
If you enjoyed this article, make sure to share it with your friends. Just hit Retweet or Like it on Facebook using the buttons on the left!
 

More Posts like This

The 13 Best Qt, QML & V-Play Tutorials and Resources for Beginners

tutorials capture

7 Useful Tips That Will Improve Your App Store Optimization

ASO tips

How to Integrate V-Play Plugins: The Quick Guide

Integrate V-Play Plugins

21 Tips That Will Improve Your User Acquisition Strategy

Topics:
mobile ,design

Published at DZone with permission of Michael Organ. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}