Mobile app design: create your own app – part 3

Through­out our series of articles on creating your own app, we’ve looked at the planning phase-app de­vel­op­ment and the process of tech­ni­cal­ly im­ple­ment­ing a native mobile ap­pli­ca­tion using app maker or app pro­gram­ming software. In this third part of our series, we’ll look at the design concept of an ap­pli­ca­tion, 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 ap­pear­ance – 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 de­ter­mined how you’re going to tech­ni­cal­ly 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 ap­pli­ca­tion’s completed design. For this reason, the im­por­tance of the graphical user interface design in app de­vel­op­ment can’t be un­der­es­ti­mat­ed: many expert de­vel­op­ers 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 over­shad­ow the great functions offered and turn users off. The most important elements for user friend­li­ness are the position, size, and layout of content on your ap­pli­ca­tion. 

The term ‘mobile app design’ should be con­sid­ered an umbrella term for the different parts of the GUI design. The design of an ap­pli­ca­tion is con­sid­er­ably more than just a choice of font and colors – the whole graphical user interface, including its functions and control elements, all con­tribute 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 res­o­lu­tion of different display screens that will house the user interface. The other is that the touch­screen func­tion­al­i­ty of mobile apps has a major impact on the possible layouts on the graphical user interface. And even if these basic frame­works for an app sound quite straight­for­ward, they’re crucial and should be con­sid­ered in every step of the mobile app design process. We’ll offer you the best advice on how to take care of the con­cep­tion of your new app’s graphical user interface, and present the most up-to-date design prin­ci­ples for its layout and usability.

In the app design world, layout is the term used for the optical po­si­tion­ing of elements within the app user interface and the arrange­ment 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 in­ter­faces and sug­ges­tions 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 com­po­nents that can be down­loaded for free from its material design website (including templates and icons). Apple offers similar options – although they are slightly more limited. Some com­po­nents for creating a perfect iOS layout are available for free from the Apple developer page. Some de­vel­op­ers also offer their own compiled GUI kits to the community for free (e.g. on de­sign­code.io for iOS or on sketchapp­sources.com for Android).

Using one of these standard packages gives you the advantage of being able to create an at­trac­tive design with little effort. The style of these designs is also familiar to the user, in­creas­ing their affinity and trust to the app. But the flipside of the coin is that packages with pre-made templates and icons limit cre­ativ­i­ty, re­strict­ing design options and making it harder to guarantee that an app’s design will stand out. They also increase de­pen­den­cy 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 es­tab­lished for what’s con­sid­ered an ac­cept­able 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 vari­a­tions to cover the diversity of display sizes and screen res­o­lu­tions.

Every ap­pli­ca­tion contains text. Even if images and symbols dominate the layout, some sections of the app in­evitably require text – at the very least in the terms and con­di­tions section. And the use of a suitable font is crucial, es­pe­cial­ly for elements that determine the ap­pear­ance of the user interface (menus, article titles, etc.) This makes the design of text an el­e­men­tary part of the app layout.

When it comes to choosing the font for an ap­pli­ca­tion, you can refer easily to the system-specific ty­pog­ra­phy 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 de­vel­op­ers decide to stick to the stan­dard­ized 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 rec­og­niz­able 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 in­stal­la­tion.

But there are benefits to choosing a different font to the iOS and Android system fonts – par­tic­u­lar­ly if your app is full of text and you want to help that text stand out and dif­fer­en­ti­ate your app from the com­pe­ti­tion. There are plenty of free fonts that are available for download online, but choosing the right one for your ap­pli­ca­tion 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 car­toon­ish, then an eccentric, jazzy font might work better. But most im­por­tant­ly 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 char­ac­ters are narrow and sans serifs, making them suitable for many different ap­pli­ca­tions.

When it comes to deciding on the color scheme of your layout, it’s important to note that suc­cess­ful apps tend to have a good contrast ratio. Since apps are often used when people are out and about, often in difficult light con­di­tions 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 ap­pli­ca­tion 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 con­ti­nu­ity of color schemes, a logo and a corporate font can also unite your app with your website and improve the chances of brand recog­ni­tion. In general, it’s important to make sure that all elements in GUI design are formatted con­sis­tent­ly. There are further tips about the ap­pear­ance of the graphical user interface in our article about corporate design and the ef­fec­tive­ness of color in web design. The guide­lines 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 pre­sent­ing content, and this varies from device to device. There’s a huge dif­fer­ence in display screen size and res­o­lu­tion between smart­phones 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 au­to­mat­i­cal­ly 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 spe­cial­ized app layout for tablets and smart­phones sep­a­rate­ly. Tablet layouts will typically have no­tice­ably smaller buttons in pro­por­tion to smart­phones, creating more space for pre­sent­ing ad­di­tion­al content.

Several layout versions optimized for par­tic­u­lar display res­o­lu­tions and sizes are an absolute must in the pro­fes­sion­al mobile app design industry: In fact, many apps even have three, four, or even more vari­a­tions once they’ve es­tab­lished their market share. But de­vel­op­ing different app versions naturally involves more effort and higher costs.

Another thing to remember is that there are two different ori­en­ta­tions possible for display on a smart­phone or a tablet: if you switch from portrait to landscape, your app’s content and GUI should adjust ac­cord­ing­ly. You’ll need to create an ad­di­tion­al layout for this purpose. The number of different app layouts your ap­pli­ca­tion 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 for­mat­ting.

One re­quire­ment for a high app usability rating is what’s known as an intuitive app design. Above all, this refers to a simple, self-ex­plana­to­ry app that follows pre-es­tab­lished patterns and struc­tures for its operation, making it familiar to users and easy to get to grips with. Whether or not an ap­pli­ca­tion is user-friendly always falls into the hands of the app user. This means that it’s crucial to get to know the user pref­er­ences and ex­pec­ta­tions of your target market in mobile app design, and to use these as a guideline when deciding on the layout and func­tion­al­i­ty of your app. Designing a great app isn’t about show­cas­ing your amazing creative design skills as if you’re at an art ex­hi­bi­tion or a trade fair – instead, it’s about giving your target users the best possible ex­pe­ri­ence.

User-friend­li­ness is often best achieved by employing a clear, tidy, and engaging app layout. This is extra important when op­ti­miz­ing your app layout for smart­phone 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 every­thing big enough to be readable and clickable, it’ll also create space, which can help to make a screen look more har­mo­nious and at­trac­tive.

The menu of an ap­pli­ca­tion should be po­si­tioned promi­nent­ly so that the user instantly rec­og­nizes it. Most ap­pli­ca­tions use drop-down menus because they’re par­tic­u­lar­ly practical when it comes to saving space. In­di­vid­ual menu items should be designed with the user in mind: Remember that menus should be clear, concise, and feature only the most vital in­for­ma­tion. 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 ad­di­tion­al in­di­vid­ual 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-com­pli­cat­ed menu struc­tures 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, arrange­ment, and design of buttons within the user interface. Make sure that all in­ter­ac­tive elements (drop-down menus, buttons, links, etc.) are easily rec­og­niz­able and straight­for­ward to click on. When arranging buttons, it’s important to check that users with broader fingers can easily click on a button without ac­ci­den­tal­ly clicking another at the same time. Buttons that are too small or poorly po­si­tioned lead to mistaken clicks and frustrate app users. Ad­di­tion­al in­di­ca­tors of app pro­cess­ing can be very useful as well. An in­ter­ac­tive no­ti­fi­ca­tion, 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 trans­paren­cy of app processes, like search functions and loading, which will usually result in users dis­play­ing 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 un­der­ly­ing iOS or Android platform. For this reason, native apps usually ‘look and feel’ better, resulting in increased usability.

If you’re looking to ex­per­i­ment with different layouts, you can use spe­cial­ized 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 in­di­vid­ual 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 ap­pli­ca­tion (also known as a mock-up).

Using these tools is usually quite straight­for­ward 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 in­ter­ac­tions, you can ef­fec­tive­ly simulate usage of the app. The prototype can then be tested on a smart­phone 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 pro­gram­ming knowledge. With little effort, you can create a prototype that functions in a re­mark­ably similar way to your actual app. Below, we’ll assess three of the best and most popular design tools for de­vel­op­ing an app prototype.

InVision is a very pro­fes­sion­al ap­pli­ca­tion for designing app pro­to­types. It can be used free of charge, but the free version lacks some key functions. By inserting and cus­tomiz­ing 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 Sound­Cloud have used InVision for their design pro­to­types.

If you haven’t created any design templates yet, Fluid UI offers a huge col­lec­tion 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 suf­fi­cient for a full test of the ap­pli­ca­tion, 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 col­leagues or possible sponsors, you might find it helpful to look at the three mobile app design tools we’ve in­tro­duced (although there are plenty of al­ter­na­tives 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 res­o­lu­tions. It’s highly rec­om­mend­ed to create different versions of the app to match your content to different display formats. If both your mobile app design and your app de­vel­op­ment are finished, you’re onto the final stage of app creation before you can release your new ap­pli­ca­tion 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.