Mobile design trends to watch out for in 2019

It’s that time of year when design predictions are being made. 

I’ve read a few great ones, added my own ideas and would like to share some of my predictions for the upcoming year, focusing, as usual, on mobile.

Three design trends that started in 2018 will shape the evolution of mobile apps in 2019: 

1. There are no more small smartphones. What used to be called phablets (giant phones) are now mainstream.  

2. Smart devices no longer have buttons (nor bezels) - they are all-screen.

3. Digital design is getting bolder, more colorful, spectacular and extravagant.

I believe that the above 3 will play significant roles in shaping up the look and feel of mobile apps in 2019.

Here’s what I’m expecting to see in 2019 in mobile apps design:

Less chrome, more content:

1. Bigger screens = more + bigger + richer content

It’s a marvelous formula. App developers can double and triple the content they show without compromising on clean design principles such as using lots of whitespaces, proper hierarchies, and grouping.

It’s OK to combine multiple view types in one screen without creating too much clutter: shortcuts, stories, photo carousels, tab-bars, there’s room for a combination of them due to growing screen real-estate. 

  

2. Horizontal collections inside table views 

This “criss-cross” pattern where some of the vertical rows are actually containers to horizontal collections is not new but it got much more popular since Apple’s latest AppStore redesign in iOS 11.

I’m sure many app developers have tried to avoid it in the past, but this pattern is becoming a best practice when there’s a need to present more content without having to tap and navigate away from the main view.

3. The brand goes behind the scenes   

Medium, Airbnb, Evernote, Instagram - they all went through a similar process of gradually emphasizing the content while getting rid of their brand colors, logos, and practically the app personality… (similar to Apple’s getting rid of the iPhone’s home button…).

When you’re big and famous - it probably makes sense and improves app usability. However, if you’re a smaller brand you may not feel comfortable doing so.
It’s important to know where to place your brand visuals.

A good rule of thumb is to decorate empty states with visuals consistent with your brand.

 

Bouhnick’s Takeaways:

1. Aim for large screens.
2. Don’t waste your energy on designing small and scaling up your designs. 
3. Make content bigger, even if it expands beyond screen boundaries and requires scrolling.
4. Get rid of the chrome and minimize background noise. 
5. Show your brand wisely without pushing content aside.

[Read: 7 must-have product ingredients for creating a true mobile experience]

Flat UI is dead, long live Flat UI 2.0! 

Flat UI was great but after 6 years it’s time to spice things up a bit and fix some of its’ problems.

Flat 1.0 suffered from some usability and discoverability problems. Flat 2.0 addresses some of those problems by adding metaphors and principles borrowed from physics (such as Material Design’s shadows and motions) while spicing up monotonic colors with the likes of vibrant gradients, duotones, layers, colorful illustrations and more.

Flat UI 2.0 helps users interpret visual hierarchies and clickable content while making UI more sophisticated. 

While flat 2.0 isn’t new - it’s not yet widely adopted by mainstream mobile apps (definitely not yet in iOS apps).

I believe this will change in 2019. 

Here’s how to prepare your mobile app to flat 2.0:

Evolution of mobile apps: from skeuomorphism to flat 1.0 and flat 2.0

1. Vibrant colors

It wouldn’t be a 2019 design trends post without mentioning vibrant colors or without showing some Apple designs, right? 

So here you go:

[Read: How to use the on-screen keyboard in your app without messing up the usability]

2. The gradients are back!

Monotone colors are out - gradients are back and they are more sophisticated than before. 

The new gradients (also called: gradients 2.0) are vivid, they consist of multiple vibrant colors and create a warm effect. 

If you’re looking to refresh your completely flat mobile app, gradients are a great way to do it but pay attention to the colors you pick and beware of the unwanted 3D effect that will make your app look like it's the 90’s...

If you feel insecure about gradients - here’s a useful guide explaining how to create good looking gradients and how to select the right colors.
You can also use tools such as UIGradient and Coolhue for CSS to create great looking gradients very easily.

3. Duotones

It wouldn’t be a serious guide without mentioning duotones.
So… duotones.

Duotones work well with bright gradient colors. They became extremely popular in web designs this year and I think it’s just a matter of time until they will become part of mainstream mobile app designs.

Here’s my first attempt to create a Duotone (what do you think?):

4. Depth and multiple layers

Multiple layers, sophisticated backgrounds, illustrations, and duotones - they all turn flat design into deep flat design.

(source: unknown)

5. Material design shadows are taking over

Did Google win the design battle?

Did Apple lose again?

Am I crazy to include shadows so late in my post?

Isn’t this a trend that started 5 years ago? 

Don’t waste your time trying to answer these questions. Instead, check out this little example below to see how shadows should look like in your mobile app.

  

  

6. Watch out for those big, fat, bold fonts

Big bold headers were introduced in iOS 11, replacing the extra thin font that was used beforehand. 

If you are developing your apps using standard view controllers -you get this new title style automatically, but bold fonts can and should be used in sub-headers as well.

Just make sure not to use bold fonts in normal text blocks.  

7. Line icons are getting a chubbier look 

Still flat, still minimalistic, but icons are slowly getting some of their weight back.

If you are looking to renew your app’s icons - pay attention to this trend.

8. Rounded corners. Everywhere.   

All smart devices have rounded corners these days: iPhones, Android phones, Apple Watch. 

When every device has curved corners - it’s only natural that the UI will get the same rounded look and feel.

Twitter, Google search, Gmail - all started using rounded corners more frequently. 

According to researches, rounded corners are easier for the eyes, improve readability and increase conversion rates of CTA buttons.

If you want to give your app an up-to-date look & feel - round some of those corners.

9. Cards 

Cards play a crucial role organizing information in mobile apps.

You can group different data types (such as photos, icons, buttons, text) inside a card to make them look part of one object.

Going back to the beginning of this post, adding content to your app to better utilize the screen, will often require shifting from simple table view rows to cards.

(source)

10. Meaningful motion 

Meaningful motion can boost your mobile app: meaningful animations improve overall experience, they turn micro interactions into delightful and understandable interactions and above all - spice things up for the users. 

Good UI motions can help users understand the workflow, emphasize navigation movements, confirm actions and add rhythm to the app workflow.  

I’m a huge fan of UI motions but unfortunately many app developers are unaware of how important motions are. 

It’s very important to invest time adding meaningful (and not stupid) animation to any mobile app. It’s a relatively low effort, it doesn’t have to be over sophisticated, and it turns any mobile app into a more professional one. 

Takeaways: 

1. Flat 2.0 is more sophisticated than flat 1.0
2. Gradients, shadows, bolder fonts and icons, will continue to change the look & feel of mobile apps. 
3. Investment in mobile UI will have to increase in order to stay up-to-date. 
4. Besides the big changes, you can achieve small wins with small tweaks like curved corners, light shadows   

[Read: The most comprehensive guide for designing and writing text in mobile apps]

New navigation alternatives: 

 

1. Hamburger menu is looking for a new home  

There has been a lot of criticism about the hamburger menu.

While it certainly provides an easy and aesthetic solution for many design needs - it doesn’t provide a proper information architecture and therefore considered to be a lazy solution. 

As devices grow bigger, the top left location of the hamburger menu is getting harder to reach, forcing app developers to find alternatives. 

One of the alternatives is to use a traditional tabs bar (located at the bottom of the screen) with a twist: important views are easily accessible through the tabs and the less important ones are located in the ‘all the rest’ tab that behaves more like a side menu. 

I see a growing number of apps adopting this approach, here are 2 examples:

 Hamburger menu alternatives: tabs bar combined with a ‘more’ button

2. Full-screen menu 

This one exists for quite a while on websites.

I’m not a huge fan of it, but if you’re looking for ways to emphasize your menu items and even add some rich content to some of them - it might be a nice solution. 

 

3. Swipe-up gestures for more options 

This is becoming a big one.  

As it gets harder to reach the upper area of the screen, more apps are placing key navigation elements at the bottom of the screen. 

Swiping up your thumb is without a doubt the easiest gesture for mobile. iOS and Android already use this swipe-up gesture to go back to the home screen, but apps can still place buttons or UI hints at the bottom of the screen. 

See some examples below - the idea is to have the common actions as easiest as possible to access.

Some great examples of how a swipe-up menus/views work on mobile apps

Placing your main actions as swipe-up container has few advantages: 

1. It’s easily open (most accessible, easiest gesture).
2. Easily closed (using the opposite gesture).
3. It overlays the contextual content, increasing clarity.
4. It’s clean, no need to place a lot of buttons on the main view.
5. It doesn’t force you to navigate away from the main view. 
6. It makes good use of the screen real-estate (much bigger and nicer than using a popup). 

Miscellaneous 

1. Haptic feedback: 

Haptic feedback provides a tactile response, such as a tap, that draws attention and reinforces both actions and events. Most mobile apps are not yet using haptic feedback enough, the ones that do it well, provide a superior user experience.
I can think of a few apps that managed to upgrade their overall experience using smart haptic feedbacks (check out the new WhatsApp popup menu).
Once again, if you are looking for ways to achieve quick and easy wins - you should consider using it, but don't overuse.

2. Smart push notifications 

Most people think that adding a personal name to a push message makes it smart. I disagree. To me, a smart notification is one that either works for the user (i.e. he taps it) or never appears again.
Apps should focus on analyzing the behavior of their users. If a certain user never taps a certain push notification - the app should stop sending it.
A new user should receive different notifications than an experienced one: when I just started my Twitter account I received a push for every new follower. After a while (I think it happened after reaching my first 1K follows) - I stopped receiving notifications for nw followers which made a lot of sense.

1. Group messages into topics (Android channels or iOS groups)
2. Analyze user behavior around each topic 
3. If a user doesn’t react to a certain topic - stop sending it. 
4. Focus on the value your notifications can bring to the users. 

That’s it for this one, happy to hear your thoughts and own prediction to the upcoming year in mobile app design. 

Join my mailing list to get more of these directly to your inbox and become 23% more awesome than average or follow me on Twitter and never get lonely again.