Design & UX
Article

5 Big Mobile Design Trends of 2015

By Gabrielle Gosha

The mobile Internet is ramping faster than desktop Internet did, and we believe more users may connect to the Internet via mobile devices than desktop PCs within five years. Morgan Stanley – December 2009

Rosenfeld Media

Photo: Rosenfeld Media

I remember the predictions like this back in the late 2000’s. They sounded a little outlandish at the time, but it’s 2015 and the predictions were right, kids!

In fact, Comscore had us passing the ‘tipping point’ early last year. While it no doubt varies from site to site, for general purposes we can think of desktop users as a minority – in some sense a ‘fringe group’.

So, it follows that if mobile is now the majority viewing device, ‘designing for mobile’ is now just plain ‘designing’ now.

With that in mind, today we are running down five big trends that you can expect to see through mobile design in 2015. If you’re looking to redesign your apps or create a new one I suggest you check out the list.

Subtle Color Palettes

Subtle Color Palettes: 2 cobalt interface mockups

While it is quite likely that you will be seeing bigger and bolder colors used in web design, the exact opposite will be occurring as far as mobile apps are concerned. Since mobile design seems to be taking a step in the direction of minimal design it isn’t a surprise that designers will be dialing back on the color.

Simple, subtle color schemes will now take the place of bold and flashy palettes. From a psychological standpoint this is a smart move in design for while bright hues can grab attention they can also be a distraction. Subtle colors can help draw in users and allow for focused concentration.

Subtle Color Palettes: beige and sand colors

Don’t let the talk of subtle color palettes fool you, there will be plenty of contrast to be had. The only difference is instead of the typical fire hydrant reds and neon greens colors will be more “warm” in nature instead of “hot”. This will make flat design more optimized and elements more interactive thanks to subtle colors being implemented in mobile interfaces.

Animated Elements

Animated mobile speedometer

Facilitating more interactions seems to be the new plan as mobile apps continue to expand. Nothing seems to draw more response than animation so don’t be surprised to see more of it being introduced as far as mobile is concerned.

Instead of just being used to make an app stand out from the competitors you should expect to see animation used in a more functional and motivational role opposed to purely visual. Animation will be used to steer users for a more pleasant and effective experience. Implemented properly users will also have an easier time deciphering what is interactive and what is purely for show.

Expanded navigation animation

With animation, mobile design will be able to take on more of a realistic approach to coincide with typical human behavior opposed to mechanical and “dry” experiences. Using animation will hopefully provide not only more entertainment but also more personality to the app itself which conversely will help apps stay relevant to its targeted users.

More Scrolling

Sliding Animation

Now we have already seen scrolling taken to another level with web design but in 2015 expect to see it used to the fullest in mobile design. Scrolling in mobile apps is already a thing so it only makes sense to take an everyday feature a step further. I’m talking about introducing one of web’s biggest trends, parallax scrolling.

Parallax scrolling will help take animation and more interactive storytelling in mobile design to the next level. With traditional design being more flat and one dimensional, parallax implementation will add depth to mobile design that we haven’t experienced before.

Parallax scrolling in apps.

Other than parallax scrolling you should expect to see some mobile apps using modular and infinite scrolling as well. Of course a responsive design will be needed to make sure certain effects with let’s say modular scrolling can be fully appreciated. Despite this we will without a doubt see both vertical and horizontal scrolling used to create some amazing effects to delight the user experience. Scrolling will definitely become the new click.

Storytelling

Storytelling

With the addition of some new effects being used in mobile design it only makes sense that storytelling will take on a new form in itself. Mobile design will stop relying so much on actual words itself to get its story across. Instead stories will take on a more interactive role.

As noted before mobile design is looking to become more interactively charged and stimulating with a focus on both UX and UI. This means you should expect to see elements being used to make the user the “character” of these “stories. I’m talking about visually bold imagery, high quality and smartly crafted video as well as more personalized experiences based off of collected data.

Storytelling

Crafting interactive stories will not only be used to create stimulating experiences but it will act as a conversion tool more so than the standard call to actions. You will see animation being used hand-in-hand with storytelling elements to help bring these stories to life.

Blurred Backgrounds

Musci player app with blurred background

Sure this trend has already been around in web design but it is being adopted increasingly in mobile app development. Blur effects will be used in mobile design not only to create visually pleasing design but to create focus on important elements. This aesthetic trick will be used mostly to keep copy readable. It will also make call to action buttons stand out.

Using blurred imagery in the interface will lend users the ability to know what is interactable and what isn’t. Expect that with blurred backgrounds that call to action buttons will now be given bolder designs to make them stand out more than ever before.

Weather apps using blurred cityscapes

Note that blurred backgrounds won’t just be used to make sure you press those buttons to convert but they will also be used in conjunction with interactive storytelling. Other than blurred backgrounds we will also see more translucent elements being incorporated in mobile interface itself for a cleaner and minimalist feel.

Conclusion

These top mobile design trends are just a handful of changes we are going to see as far as mobile development is concerned. There are plenty of trends that didn’t make the list including a focus on mobile gestures, material design, simplified interfaces, wearable devices and a lot more. Either way it is clear that mobile design is really on the road to making mobile use a better interactive experiences for its users.

Out of all the trends which is your favorite and looks to have some staying power? What trends are you looking forward to seeing?

  • Marketing Sweet

    Thanks for the article, Gabrielle.

    We’ve definitely seen a change in trends in both web design and mobile app design throughout the past 12 months, particularly with the “more scrolling” & “blurred background” features. In fact, I’ve noticed that Spotify have implemented the blurred background characteristics in their mobile app.

    • Gabrielle Gosha

      Glad you liked it. Blurred background seems to be heavily used nowadays. I see it a lot in weather apps as well.

  • M S i N Lund

    Yeah, we over 40 just love to see more blurriness in our UIs…

    • activist

      usually you just use it for background images..just to make anything on top of it stands out. Its not that bad of a practice I think?

      • eddie404

        It works, it’s one of many options and looks great when implemented with a complimentary design. So I agree @activist, it certainly has its place.

  • Chris Ward

    Very nice :)

    • Gabrielle Gosha

      Thanks Chris :)

  • happycatbasket

    just a heads up, but your parallax example is not actually parallax animation. the example has animation tied to scrolling, which people often mistake for parallax animation because of it’s (commonly) shared use of scrolling to cue these animations.

    my understanding of it’s presence in the mobile world is that it’s limited. scroll events on certain mobile devices fire only after scrolling animation ends, as opposed to on a per-pixel basis, so building scroll based animations on mobile devices is difficult without drastically increasing the overhead.

    • happycatbasket

      the second paragraph only really applies to webdev.

  • http://pudDesign.com pud

    i don’t think multiple parallax elements, work properly at the moment on mobile devices

    • caroline

      this comment jumped out at me so i consulted our head of UX here at Webydo – he said said: not necessarily when done right… most of the cases of parallax elements not functioning properly arise from a problem with CPU overload. if spaced properly these effects should work well and feel seamless.

  • Lia

    Hi,
    I loved your article! Can you please recommend on an awesome online responsive builders?
    Lia

  • A8ch2oh

    Great quick article. The only point I am not sure of in my mind is the scrolling. Only the vertical part, I agree about horizontal scrolling. I hate to keep scrolling up and down, I prefer AJAX to place pages as if I was in a stack or stacks and be able to jump from somewhere to anywhere. Scrolling was not a big item for my designs and now if is, I still hate to create that.

  • http://www.ineedhtml.com/ ineedhtml

    Thanks for the post! Very nice. :)

  • http://www.mobileapptelligence.com/ kailash mobileapptelligence

    Mobile Website Design With so much traffic on mobile, it is impossible to ignore the potential of mobile devices. No one wants their customer to struggle with misplaced content and un-adapted layout. In a world, where almost everyone owns a mobile phone and brand perception is everything, mobile websites are must for business. MobileAPPtelligence [dot] com, an award winning mobile website design company, specializes in rendering innovative and out-of-box responsive mobile websites for global clients.

  • Cole Rowden

    Hi Gabrielle,
    I just recently was invited to AppsWorld London, UK and had a great response. The people loved my app! However, the design is dated and looks 5 years old. I was wondering if you could help me re design and add more animation, beauty, and overall appeal to my app? Please get in touch with me at rowden47@hotmail.com if you are able to help!

    By the way, great article!
    Kind Regards,
    Cole

  • Cole Rowden

    Hi Gabrielle,
    I just recently was invited to AppsWorld London, UK and had a great response. The people loved my app! However, the design is dated and looks 5 years old. I was wondering if you could help me re design and add more animation, beauty, and overall appeal to my app? Please get in touch with me at rowden47@hotmail.com if you are able to help!

    By the way, great article!
    Kind Regards,
    Cole

  • a11y Sherpa

    There are a lot of really bad ideas here. Thanks for compiling them.

    e.g. “Don’t let the talk of subtle color palettes fool you, there will be plenty of contrast to be had.” The highest contrast section of this example (the “about” icon) still fails contrast guidelines for accessibility.

    Inclusive design please.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.