Mobile app design: create your own app – part 3

Throughout our series of articles on creating your own app, we’ve looked at the planning phase-app development and the process of technically implementing a native mobile application using app maker or app programming software. In this third part of our series, we’ll look at the design concept of an application, offering valuable tips for what to look out for when choosing how to display your app’s content. It doesn’t matter whether you’re looking to design an Android app or an iOS one – the general rules are the same. But one important thing to remember when designing your own app, is that you can’t just focus on the appearance – the app usability (how user-friendly the app is) is crucial as well. There are a wide range of app design tools on hand to help.

As soon as you’ve determined how you’re going to technically implement your app concept, the next step is to design the graphical user interface (known as GUI for short). The user interface is like the hub of mobile app design; here, you present the application’s completed design. For this reason, the importance of the graphical user interface design in app development can’t be underestimated: many expert developers consider the design of the GUI to be just as important as the actual content of the app itself. This makes sense too – even if an app has exciting sounding functions that awaken the interests of many users and lead to thousands of downloads, a bad app design will quickly overshadow the great functions offered and turn users off. The most important elements for user friendliness are the position, size, and layout of content on your application. 

The term ‘mobile app design’ should be considered an umbrella term for the different parts of the GUI design. The design of an application is considerably more than just a choice of font and colors – the whole graphical user interface, including its functions and control elements, all contribute to the mobile app design. As a result, it’s important to keep a handle on all graphical elements of your app.

Mobile devices have two main features that influence the GUI design: One is the variety of the size and resolution of different display screens that will house the user interface. The other is that the touchscreen functionality of mobile apps has a major impact on the possible layouts on the graphical user interface. And even if these basic frameworks for an app sound quite straightforward, they’re crucial and should be considered in every step of the mobile app design process. We’ll offer you the best advice on how to take care of the conception of your new app’s graphical user interface, and present the most up-to-date design principles for its layout and usability.

In the app design world, layout is the term used for the optical positioning of elements within the app user interface and the arrangement of the app’s content. There are certain packages that can be used to help define the layout of a native app. These are mostly known as GUI or UI kits and contain ready-made elements for user interfaces and suggestions for their placement and structure. Typical elements include icons, templates, widgets, colors, and more – and some of these packages are available to download for free online. 

Google offers a variety of GUI components that can be downloaded for free from its material design website (including templates and icons). Apple offers similar options – although they are slightly more limited. Some components for creating a perfect iOS layout are available for free from the Apple developer page. Some developers also offer their own compiled GUI kits to the community for free (e.g. on designcode.io for iOS or on sketchappsources.com for Android).

Using one of these standard packages gives you the advantage of being able to create an attractive design with little effort. The style of these designs is also familiar to the user, increasing their affinity and trust to the app. But the flipside of the coin is that packages with pre-made templates and icons limit creativity, restricting design options and making it harder to guarantee that an app’s design will stand out. They also increase dependency on the platform templates used to create the design.

The ready-made packages and graphical user interface kits for Android and iOS app design are a clear indicator that certain standards have been established for what’s considered an acceptable layout for a native mobile app. These include the use of fonts, the color scheme for a design, and the various built-in app layout variations to cover the diversity of display sizes and screen resolutions.

Every application contains text. Even if images and symbols dominate the layout, some sections of the app inevitably require text – at the very least in the terms and conditions section. And the use of a suitable font is crucial, especially for elements that determine the appearance of the user interface (menus, article titles, etc.) This makes the design of text an elementary part of the app layout.

When it comes to choosing the font for an application, you can refer easily to the system-specific typography of your chosen app platform. Since iOS 9 was released, this font has been ‘San Fransisco’ – previous iOS system fonts included ‘Helvetica’ and ‘Helvetica New’. Android has been using ‘Roboto’ since its version 4.0. Many app developers decide to stick to the standardized fonts used on the Android and iOS apps, and with good reason too: The font design is optimized for the operating system and saves valuable space on mobile display screens. The fonts are recognizable to users, too, making the flow between your app and the mobile system apps slicker and improving user trust in your app. System fonts can also be used straight away – other fonts require prior installation.

But there are benefits to choosing a different font to the iOS and Android system fonts – particularly if your app is full of text and you want to help that text stand out and differentiate your app from the competition. There are plenty of free fonts that are available for download online, but choosing the right one for your application usually comes down to the topic and content of your app. If the concept is quite artistic and classy, then an elegant font would make sense – but if it’s playful and cartoonish, then an eccentric, jazzy font might work better. But most importantly of all: If your app contains a lot of text, then the font should be readable and pleasant to look at. This is why standard fonts like ‘Open Sans’ or ‘Lato’ are popular – the characters are narrow and sans serifs, making them suitable for many different applications.

When it comes to deciding on the color scheme of your layout, it’s important to note that successful apps tend to have a good contrast ratio. Since apps are often used when people are out and about, often in difficult light conditions like bright sunlight, a strong contrast can make it easier for users to read the text no matter where they are. Different colors and color schemes tend to suit different topics and target audiences. If the application is part of a company or project that already has a set color scheme then it makes sense to stick to this for the app in order to improve corporate identity. Along with continuity of color schemes, a logo and a corporate font can also unite your app with your website and improve the chances of brand recognition. In general, it’s important to make sure that all elements in GUI design are formatted consistently. There are further tips about the appearance of the graphical user interface in our article about corporate design and the effectiveness of color in web design. The guidelines and examples explained in that article can be applied to app design, too.

The display size of the end device will always determine how much space is available for presenting content, and this varies from device to device. There’s a huge difference in display screen size and resolution between smartphones alone – and the range of display formats gets even wider when you factor in the wide variety of tablets on the market. Although iOS and Android apps will automatically adapt to fit all device screens every time, this just involves the different app elements being scaled up or down on the user interface – meaning that the app layout remains unchanged and can quickly become distorted or confusing.

An example would be that a layout that’s optimally designed for the smaller display of an iPhone will rarely look perfect when blown up to the size of a much larger iPad screen – because the buttons and menus could be way too large on the iPad if not properly optimized for tablet use. In almost all cases, then, it’s better to create a specialized app layout for tablets and smartphones separately. Tablet layouts will typically have noticeably smaller buttons in proportion to smartphones, creating more space for presenting additional content.

Several layout versions optimized for particular display resolutions and sizes are an absolute must in the professional mobile app design industry: In fact, many apps even have three, four, or even more variations once they’ve established their market share. But developing different app versions naturally involves more effort and higher costs.

Another thing to remember is that there are two different orientations possible for display on a smartphone or a tablet: if you switch from portrait to landscape, your app’s content and GUI should adjust accordingly. You’ll need to create an additional layout for this purpose. The number of different app layouts your application requires will depend mainly on the project and the app’s overall purpose. But always keep in mind that usability will be affected if you don’t invest in different layout formatting.

One requirement for a high app usability rating is what’s known as an intuitive app design. Above all, this refers to a simple, self-explanatory app that follows pre-established patterns and structures for its operation, making it familiar to users and easy to get to grips with. Whether or not an application is user-friendly always falls into the hands of the app user. This means that it’s crucial to get to know the user preferences and expectations of your target market in mobile app design, and to use these as a guideline when deciding on the layout and functionality of your app. Designing a great app isn’t about showcasing your amazing creative design skills as if you’re at an art exhibition or a trade fair – instead, it’s about giving your target users the best possible experience.

User-friendliness is often best achieved by employing a clear, tidy, and engaging app layout. This is extra important when optimizing your app layout for smartphone screens, as you don’t have nearly as much space to play with. It’s best to proceed with caution when adding content, to make sure that the display screen never becomes too cluttered and only the most important content is available. Reducing your app’s features and content to the bare minimum will not only allow you to make everything big enough to be readable and clickable, it’ll also create space, which can help to make a screen look more harmonious and attractive.

The menu of an application should be positioned prominently so that the user instantly recognizes it. Most applications use drop-down menus because they’re particularly practical when it comes to saving space. Individual menu items should be designed with the user in mind: Remember that menus should be clear, concise, and feature only the most vital information. If your app has a lot of different features that all require their own menu item, the best solution could be to include a handful of the most important app functions in the main menu and offer sub-menus to give users access to the rest of the functions.

But the design of additional individual menu items shouldn’t affect the overall structure of your app. One thing to avoid at all costs is lengthy click-throughs and menu jumps. Many industry experts advise that designers should ensure all areas of an app are reachable in just two clicks. Whether you can manage to squeeze all your app features onto either the main menu or sub-menus is dependent entirely on your app of course, but trying to keep pathways in your app as short as possible is a good way to improve the app’s usability. Over-complicated menu structures can confuse users and cause them to get lost within the app.

Another important factor in measuring an app’s usability is how user-friendly the controls are. The biggest thing to look for here is the size, arrangement, and design of buttons within the user interface. Make sure that all interactive elements (drop-down menus, buttons, links, etc.) are easily recognizable and straightforward to click on. When arranging buttons, it’s important to check that users with broader fingers can easily click on a button without accidentally clicking another at the same time. Buttons that are too small or poorly positioned lead to mistaken clicks and frustrate app users. Additional indicators of app processing can be very useful as well. An interactive notification, like a symbol or animation display, is a great way of letting the user know that the app is currently loading and that they don’t need to press anything else. This increases the transparency of app processes, like search functions and loading, which will usually result in users displaying more patience with the app. Unlike a web app or a hybrid app, the design of a native app can largely be adapted to follow the underlying iOS or Android platform. For this reason, native apps usually ‘look and feel’ better, resulting in increased usability.

If you’re looking to experiment with different layouts, you can use specialized programs – there are tools offered by a variety of providers that help with the finer points of mobile app design. It’s an advantage to have digital design templates of each individual app screen, which can be created with programs like Photoshop or Sketch. These image files can then be opened in an app design tool, linked together into one file, and presented as a prototype of the application (also known as a mock-up).

Using these tools is usually quite straightforward and many of them operate with a WYSIWYG (what you see is what you get) editor and drag-and-drop controls. By linking different GUI screens within the app together and including interactions, you can effectively simulate usage of the app. The prototype can then be tested on a smartphone or a tablet, where clicks and screen swipes can also be checked.

These tools can make it easy to develop effective app mock-ups without having prior programming knowledge. With little effort, you can create a prototype that functions in a remarkably similar way to your actual app. Below, we’ll assess three of the best and most popular design tools for developing an app prototype.

InVision is a very professional application for designing app prototypes. It can be used free of charge, but the free version lacks some key functions. By inserting and customizing design templates, you can quickly and easily create a complete prototype of your app layout and test it on a mobile device. There are also various settings to help make the app prototype look and feel very similar to a real app.

One special feature of the tool is how easy it is to use the teamwork function. You can offer multiple users access to the mock-ups and make notes directly in the prototype using a comment function to exchange ideas on the app’s design. Many notable companies like IBM, Twitter, Netflix, and SoundCloud have used InVision for their design prototypes.

If you haven’t created any design templates yet, Fluid UI offers a huge collection of pre-designed screens that you can integrate into your prototype. But Fluid UI isn’t just templates – it also offers many of the same functions as its rivals InVision.

The downside is that the free version only lets you build an app prototype with up to 10 screens. This usually isn’t sufficient for a full test of the application, but you can still use the functions and operation of Fluid UI’s app design tool for free as long as you need.
 

There are a lot of details to consider when it comes to mobile app design. In order to present the ideas behind your app layout to other colleagues or possible sponsors, you might find it helpful to look at the three mobile app design tools we’ve introduced (although there are plenty of alternatives too). Once you’ve found the perfect design for your app, it’s important to make sure that it’s readable and usable on different screen display formats and resolutions. It’s highly recommended to create different versions of the app to match your content to different display formats. If both your mobile app design and your app development are finished, you’re onto the final stage of app creation before you can release your new application on your chosen app store(s): the testing phase. The next article in our series on creating your own app will look at app testing and what to watch out for in the testing phase.