In any field, new trends emerge from the current context. Some of them manage to stick around for years. Even trends that do stick around, however, slightly change their shape under the influence of cultural and technological forces.
With mobile app design, trends are usually ushered in with the appearance of new operating system versions and the release of new devices.
From 2013’s release of iOS 7 to last year’s Android Marshmallow and iOS 9, mobile UI/UX design has gone down a path of simplification and minimization of user interfaces, making them more intuitive and immersive. In 2016, this trend is still here. What’s more, the growing market share of phablets and wearables is shaping new design standards.
We’ve analysed the latest trends in mobile app design and picked out the 7 most relevant.
1. Material design
Announced at Google’s 2014 I/O conference, material design remained one of the hottest mobile app UI/UX design trend of 2015. It was developed to improve user experience across platforms making it more unified, simple, and intuitive.
The roots of material design are in the concept of flat design, which has been a constant trend for the past few years and has become standard in UI/UX design. During the past few years, flat design concepts have undergone certain changes, including the adoption of concepts from other design styles, but the general look is more or less the same.
“During my first attempts to make something in flat design," says Dmitry Goncharov, UI/UX designer at Yalantis, "I felt eager to add some shadows or subtle gradients. I think many of my colleagues felt the same way. It was obvious that flat wouldn’t last for long as it was supposed to be.”
The flat design trend indeed shifted a bit closer to its counterpart, skeuomorphism, by integrating subtle shadows, glow effects, gradients, and translucent elements without harming the clarity and functionality of the classic flat design. This tendency is often called almost-flat or skeuominimalism, and it’s widely used in apps for iOS.
Meanwhile, Google invented an alternative to the almost-flat design concept: the material design language.
Material design brings substantially more meaningful motion and interaction into flat design: cleaner designs, simpler color schemes and iconography, and an emphasis on functionality are implemented across multilayer interfaces that consist of flat paper-like objects called materials. These materials can change their size and form, fuse and divide, elevate and descend between the layers placed on the Z-axis. To indicate a material’s position on Z-axis, virtual lighting and shadows are used. Using layers on the Z-axis gives users a much clearer understanding of an app’s hierarchy and, thus, provides better UX.
“The thing is, you can’t just copy-paste interface elements using ready-made buttons, bars, and icons provided by Google," says Goncharov. "It doesn’t work this way. A decent designer would want to take on a challenge to bring something new into the material design concept. If this novelty you brought proves successful, Google might even ask your permission to add it to their next update:) In other words, material design is a great basis for creativity, and open for various improvements.”
Material design can be seen in most of Google’s apps for both Android and iOS, such as Gmail, YouTube, Google Drive, and Google Maps as well as in the Android versions of popular apps including Evernote, Telegram, Lyft, Tumblr, QuickPic, and others which have been updated to follow the material design guidelines. The Android Lollipop OS is built on the same principle.
Some aspects of material design have become separate trends and have been translated to iOS and other platforms.
2. Functional animations and motion design
"I think the main app design trend of 2015 is functional animations," says Anton Kosolapov, UI/UX designer at Yalantis. "They make user experience more unique and immersive.”
The functional animation trend isn’t about making animations for the sake of animations. The motion and shape change illusions that you create have to serve a clear, logical purpose.
[Guillotine menu animation by Vitaly Rubtsov, UI/UX designer at Yalantis]
Simple, fast, vivid, meaningful, and responsive – these are the key characteristics of the material design language that we should adhere to. The idea of functional animations, however, is widespread across different mobile platforms. Some animations are rather unconventional, but, nevertheless, accomplish certain practical tasks. For example, here are some animations made by our developers at Yalantis: Pull to Make Soup and Guillotine Menu animation for iOS and Android.
[Pull to Make Soup animation by Sergii Ganushchak, UI/UX designer at Yalantis]
Button morphing, highlighting, movement, smooth transition between screens, zooming effects, pull-to-refresh, and other animated responses to user’s actions make UX dynamic, more intuitive, interactive, and delightful. Functional animations help you to “feel” an application, understand its principles, and make interactions more engaging and fun.
3. Card layouts and swipe navigation
[Transport app concept by Dasha Ermolova, UI designer and illustrator at Yalantis]
Another way to make UX more dynamic and meaningful is by using card layouts. Yes, one of the most popular mobile app design trends that started in 2014 continued to expand in 2015, is about to stay for long, as UX becomes less visual and more functional.
Grouping information in outlined boxes and making these boxes a one-tap entry point to more detailed information is attractive, convenient, and efficient from a user’s perspective. Small chunks of information in “cards” are easily sorted and adapted to user preferences.
Today, we see card layouts in very diverse forms: card-based feeds in social networks like Twitter and Facebook, boards like in Pinterest and Trello, and stacks like in Shot Bucket or Tinder. Here is an example of card layouts in a concept car app created by our designer, Dasha Ermolova.
“Born together with new means for navigation, card UI became the new black," says Vitaly Rubtsov, UI/UX designer at Yalantis. "It appeared to be really convenient to use swipe-based stacks of cards to swiftly navigate through an app’s content.”
For example, Tinder, a dating app, uses swipe-based navigation as the core of its design. A user just flips through a stack of profile cards accepting or rejecting possible dates by swiping in a particular direction. The whole navigation in Tinder can be performed with a single thumb.
Read also: Dating app development
Other great examples of apps that use cards are Facebook Paper, an iPhone app which offers a card-style newsfeed with swiping and tilting navigation, and Steller, which allows users to tell stories by making sequences of swipeable cards.
Card layouts are suitable for both users and designers: they are simple, easy to navigate, hold sufficient portions quantities of information, and can rapidly - with a single tap - provide you with more content.
4. UI/UX adaptation for larger screens and new means of navigation
[Tab Bar animation by Vitaly Rubtsov, UI/UX designer at Yalantis]
So-called phablets brought a new challenge for app designers: larger screens change the way we hold devices. Therefore, to take full advantage of phablets we need to reconsider the whole approach to UI and UX design.
Of course, designers can continue holding on to the canons of the previous years and even hope that thumb extenders become as popular as selfie sticks. However, we don’t find this solution very elegant.
We have already touched upon the issue of app UI/UX adaptation for phablets in our article about building the Folding Tab Bar Animation (check it out on Dribbble and Github). The idea of Vitaly Rubtsov’s concept was to concentrate all controls at the bottom of the screen, so that a user could easily navigate with his/her thumb without having to engage the other hand.
Another way to improve UX and take advantage of larger screens is to put an emphasis on gesture-based navigation and make apps look and feel more spacious by hiding additional content and controls in contextual menus. Our Flip View Pager component can serve as a good example of implementation of this idea.
5. UI/UX design for wearables
Wearable devices – smart glasses and, especially, smartwatches – are a hot trend on the mobile market, and it doesn’t seem to be going anywhere anytime soon. The latest research forecasts wearables to surpass a number of 200 Million units to be shipped by 2019, driven by strong smartwatch growth. The rise of wearables forces designers to constantly learn new design paradigms to make an efficient UI/UX for wearables, and also to seamlessly integrate wearable functionalities with other mobile devices.
Yet, crafting UI/UX for wearables like Apple Watch or Android Wear is a real challenge. Designers simply can’t include all the complex features they design for smartphones because wearables are quite limited in size, battery capacity, and use cases. We have to limit navigation, functionality, and the quantity of information shown on a display, focusing exclusively on core features. In most cases, the interaction between a user and a wearable device is limited to a single glance, so legibility and size of text are the key features to consider when designing an app for wearables.
Lack of animations, dark backgrounds, hidden menus, and simple gesture-driven navigation primarily serve functional purposes when it comes to wearables. Designers have to deal with all these particularities to achieve a distinctive look and appropriate UX in their products.
Using the right font or style helps to achieve a visible hierarchy between headlines and paragraphs. With phablets and wearables infiltrating the market, designers must implement scalable typography so that apps fit every device regardless of a screen size. In response to this trend, new typefaces have been developed by Google and Apple for designers to use with their platforms.
Since Apple refined its system’s fonts with Helvetica Neue in iOS7, it has become a norm to handcraft legible typography for a specific platform. In 2014, with the release of the Lollipop OS, Google presented a new version of their Roboto font remastered for material design. It is now open source. Meanwhile, Apple released a new typeface called San Francisco which serves as a system font in Apple Watch, OS X and iOS 9. San Francisco Compact for Apple Watch has plenty of space between letters, providing maximum legibility on tiny Watch screens.
7. Diversity of color schemes
Flat design made subtle colors and white backgrounds a trend. Conversely, material design guidelines suggest using unexpected and vibrant colors, and building color hierarchy within the app. Material design praises both light and dark backgrounds, but most of today’s apps still use white themes by default. Here at Yalantis we don’t think it will last for long.
“I’d say 70-80% of apps have white backgrounds, and only some of them use other colors," says Anton Kosolapov. "In a perfect world, developers should give users an option to choose a color palette (of course, if there is a point in doing that). Light palettes are more convenient to use during the daytime, while darker colors are more appropriate for indoor and night use. I believe designers will seek different color schemes. Otherwise, color minimalism which is trending now will quickly turn into color primitivism, if we use the same color patterns over and over again.”
It’s possible that in the near future we will see more unconventional, diverse, but at the same time simple color schemes.
[Animated preloader animation by Dasha Ermolova, UI designer and illustrator at Yalantis]
Read also: App icon design trends
All in all, the direction of UI/UX design in 2016 hasn’t dramatically changed from last year. We’re still seeing a general simplification of interfaces, and an emphasis on functionality and user engagement. These trends are especially relevant because of the proliferation of small wearables and massive phablets. As a new approach to solving these problems, Google’s material design concept is likely to play a decisive role in app UI/UX development, and we undoubtedly will see elements of material design in this year’s top app designs.
See also: App design cost