7 Hot Trends in Mobile App Design

by Christina Warren

This article first appeared on MASHABLE.

The Mobile App Trends Series is sponsored by Sourcebits, a leading product developer for mobile platforms. Sourcebits offers design and development services for iOS, Android, Mobile and Web platforms. Follow Sourcebits on Twitter for recent news and updates.

The mobile application space is exploding. Users increasingly turn to smartphones and tablets to consume and create content, whether on the go or on the couch. The iOS App Store and the Android Market both have app collections in the hundreds of thousands.

Like web or desktop apps, mobile application design is often trend-driven. As mobile platforms have evolved over the last few years, some of the common design practices of the past have ceded to new styles and techniques.

We’ve scoured the App Store and Android Market to highlight seven of the hottest trends in mobile app design.

1. The “Instagram” Effect

In the words (we think) of Pablo Picasso, “good artists borrow, great artists steal.” That adage is true for most creative endeavors and it can certainly be applied to the mobile phone space.

In the past few years, we’ve seen apps like Facebook for iPhone and Twitter (new Tweetie) influence the direction and UX paradigms in mobile applications. Loren Brichter introduced the pull-to-refresh gesture in the first version of Tweetie for iPhone back in 2008, and the technique has since become so commonplace, it has been adopted on multiple app platforms and applications.

Instagram is already proving itself to be the Tweetie or Facebook of 2011. Photo sharing apps are exploding right now, and Instagram is leading the pack in terms of features and user interface.

Need proof? Check out the recently redesigned Picplz for iPhone. The navigational structure of the app has been augmented to mirror Instagram in terms of functionality (which is great, because that makes it easy to use both apps). Likewise, the app now handles filters in a similar way.

We fully expect to see photo apps adopt Instagram’s navigational structure, feed browsing display and instant effects preview well into 2011.

2. Bold, Primary Colors and Gradients With Minimal Gloss

Color is becoming an increasingly popular way for developers to make their apps stand out from the competition.

The first wave of apps created for touchscreen devices often mimicked Apple’s native iOS applications. This makes sense. After all, those components are included within Xcode’s Interface Builder.

What we’re seeing more of, however, is a move away from the iPhone blue and gradient stripe background and a shift to bolder primary colors and gradients. The glossy button look popularized by the Web 2.0 era has been eclipsed by more matte finishes.

Having strong colors in an application can create emotive responses from users, sometimes deeming an app more memorable. If a user remembers an application, he just might pick it up again.

3. Retro Photo Viewfinders

Apps like Hipstamatic and 8mm Vintage Camera [iTunes link] are a great example of how modern technology can be retrofitted to the past.

The real-time video effects within 8mm help create the experience of using an old analog movie camera to capture video. Likewise, the smaller lens window in Hipstamatic — which obscures the full capture area, just like on a real toy camera — is a dead ringer for using an old Holga.

Apps like Instagram and Picplz have shown that applying filters is a great way to make sharing photos more fun. The apps that apply filters in real time, as an image or video is being captured, usually invoke more retro-realist design choices.

4. Texture, Texture, Texture

Along with the trend of bolder primary colors, app developers are also shifting to using textures and patterns in their application backgrounds.

Wood panels are a popular choice and semi-transparent menu items often look great on these types of backdrops. Some apps, like Jamie’s Recipes use textures in the overlapping elements as well.

Texture-driven app designs often use inset text and various levels of transparency.

Texture can add a tremendous amount of personality to an application, but developers should be mindful of how text and button elements look on top of the background. The wrong color choice can make content unreadable or buttons hard to find.

GO Launcher for Android is a good example of how a textured background and shelf paradigm can be applied to the standard Android homescreen.

5. Smooth, Clean Gradients and Shadows for Depth

Some of the trends in mobile app design can be directly traced to the same trends in web design. A big trend in web design is a move towards clean, minimalistic designs.

We’re seeing this in mobile apps as well, particularly with menu and navigational headings. Rather than using the standard iOS or Android menu paradigm, developers are creating their own layouts that, while still appropriate for a finger, look more elegant.

Using shadows to create the perception of depth can give these buttons and interface elements a more “touchable” look and feel, while also appearing more striking.

These shadows can work particularly well in apps that don’t have a simple list view interface. For instance, in the XfinityTV app, the left channel bar can move independently from the main programming section. Rather than just use a grid, Xfinity added shadows to clearly designate both sections. The user can instantly sense that the elements are separate and can be controlled independently.

6. Text Driven Interfaces

We can credit Microsoft and its Windows Phone 7 for making text a mobile design trend.

The earliest mobile apps, of course, were largely text based because text loads quickly over a slow connection and doesn’t require an advanced rendering engine.

Modern mobile apps don’t need to rely on text but as Microsoft has shown us, when used appropriately, text-driven interfaces can be highly usable and great on the eyes.

The best apps that embrace a text-centric approach are those that use text appropriate in context. Text works best when it is large, easy to read and unencumbered by other interface elements.

For example, Weather Quickie is a very sparse weather app that simply tells the weather in the context of current conditions. For instance, “colder than yesterday” or “tomorrow will be warmer than today.” By not showing specific temperatures or forecast conditions, the app is easy to read and understand on the go. Icons can add context for conditions like rain or snow.

Likewise, Trickle is a Twitter app that display tweets in a very readable way, one tweet per screen. You can then choose to favorite or retweet that message before scrolling off to the next. By showing only one tweet per page, the app can be used much more passively than traditional Twitter clients.

7. Thin Sans Serif Fonts

As mobile apps evolve, developers are shifting away from the standard app fonts and utilizing more custom weights, styles and sizes. Like shadows and depth contours, many of the design cues for typography in mobile apps come from the web.

Thin sans serif fonts — usually with some level of drop shadow — are increasingly common place in desktop web design.

On mobile devices, the combination of thinner type and high resolution screens often makes for a more readable experience. It also helps differentiate apps. Thin sans serif fonts are often coupled with text-driven designs or with designs that utilize background texture.

Although some apps are including their own custom fonts for logos or header elements, simply changing the weight and size of a font can make the system default (Helvetica Neue on iOS and Droid Sans on Android) appear totally different.

1 thought on “7 Hot Trends in Mobile App Design

  1. I’ve been surfing on-line more than 3 hours nowadays, but I never discovered any interesting article like yours. It’s beautiful value
    enough for me. Personally, if all site owners and
    bloggers made just right content material as you probably did, the net will be a lot more helpful than ever before.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s