Designing Mobile Apps
Index of contents

Design Best Practices

There’s a lot to learn from those who have already paved the way. We’ve selected three apps from each principal operating system that, for us, got it right.

Learn desing systems
Check this online course on Domestika to keep growing as designer.
More information

Android

500PX1

This app for photographers nailed it. It offers multiple and clear login options and has successfully translated the platform’s explorative quality. Visually exceptional, 500px uses dark colors for controls that help to enhance pictures.

FIGURE 13.1 Login, picture details and comments screens.
FIGURE 13.2 Categories screen.

Google Drive

This cloud-based storage service and document collaboration tool keeps its main features at the center while at the same time including editing elements as well. It is ideal for users who change frequently between their desktop computers and mobile devices.

FIGURE 13.3 Drawer menu, file preview and edit.
FIGURE 13.4 Documents list.

The Guardian

The English newspaper makes an extensive use of native elements and, at the same time, keeps its own corporate identity, using headers as the strongest element of communication. Likewise, it establishes clear hierarchies for reading texts and contemplates accessibility features, such as zooming in on fonts.

FIGURE 13.5 Main news
screen, photo detail and text size configuration.
FIGURE 13.6 News detail.

iOS

National Parks

On both the iPhone and the iPad, the attention to detail evident in this app from National Geographic is absolutely astonishing. The different screens enable the appreciation of the fair use of textures with transitions that add value to the concept. Layout hierarchies are very clear, thus favoring the interpretation of content.

FIGURE 13.7 Parks seen as photographs and as locations on a map, and filtering options.
FIGURE 13.8 Park detail.

Google Maps

This highly anticipated iPhone app has not disappointed. Since its launch, Google has demonstrated that it sets its own rules wherever it goes. The app makes a conscious use of space; each screen displays elements in direct relation to current needs, hiding and highlighting only what’s necessary. It is simple and robust at the same time.

FIGURE 13.9 Main search screen, results with road and navigation screen.
FIGURE 13.10 Detail of the result with options.

Instapaper

One of the pioneers of the read it later concept, Marco Arment’s text reading app is super polished, and everything revolves around the main idea: making reading easy. Flexible at every moment, it is capable of hiding unnecessary controls and switching to night mode to adapt to low light conditions.

FIGURE 13.11 Main menu,
screen with reading options and night reading mode.
FIGURE 13.12 Items marked as favorites.

Windows Phone

Spotify

The online music service has found a great way to adapt to the Windows Phone proposal. It uses branding on patterns like Panorama and Pivot Control in a way that only a handful other apps can. It has an excellent balance of features, branding and consistency with the operating system.

FIGURE 13.13 Main screen
with Panorama, list of songs and playback options.
FIGURE 13.14 Album thumbnails.

Twitter

At a glance, we know it’s Twitter’s app, and that’s saying a lot. They’ve found a way to strike a balance between native elements and visual identity without diverging from Microsoft’s proposed guidelines. It is a clear example of a content-centered application.

FIGURE 13.15 Main screen,
tweet detail with picture and composition screens.
FIGURE 13.16 Tweet detail.

Tumblr

The microblogging platform understood the mobile environment, and their answer was a simple and effective app. The features familiar to web users are maintained in an app that is focused on the exploration of visual material and the ability to publish content quickly.

FIGURE 13.17 Main screen,
selecting the new entry type and notes of an entry.
FIGURE 13.18 Exploring content.
Learn desing systems
Check this online course on Domestika to keep growing as designer.
More information