Rufen Sie uns an: Deutschland +49 30 23320715 - Österreich +43 1 3059571 | E-Mail: sales@creativeworkline.com
0

Mobile Design Trends & Guidelines 2015

Posted Februar 19th, 2015 in Blog by creative workline

mobile_design_trends_guidelines_2015

Every once in a while we see a change in design trends. We definitely can say that the last couple of years we have been seeing more minimalistic design around us, flat design. All the big players like Apple iOS and Google Android have now lost their shadows and hard gradients. They’ve replaced it with hard elements.

We often just speak of flat design in general, but within every design trend we see a lot of design elements which we see more often than others. Besides the shadows, bevels, patterns, etc that didn’t make the end of the year we have seen more trends showing up: simpler and more minimalistic user interfaces, more sophisticated color palettes, blurred and translucent elements, better use of images, animations between screens and elements, feedback and better use of gestures. So which of these trends are we going to see more in the next year?

Simplified User Interface

Flat design is based on the principle of “focusing on simplicity and clarity to ease functionality and emphasize usability”. We have seen simplicity and clarity in visual design languages but this trend also has affected the interaction designer, who is working a step earlier in the design chain. We have seen that the user interfaces are getting simpler and more minimalistic as well. We often intent to give our users as much information as we can, but we need to question ourselves: are we making it clearer for our users with all this information?

Before the trend to simplify user interfaces, every inch of the screen needed to be filled up with a design element (a gradient or a texture as background for instance). By now the empty background has become a design element by itself. Keeping the background white has become a way to style the app and let users focus on other elements placed on the background. We are calling it “keeping it white” but actually designers are keeping it white on purpose, to provide clarity and simplicity throughout the whole app.

Providing more clarity to users is something what Apple already accomplished in late 2013. With the design changes in iOS 7. Last year’s Android update (Lollipop) presented a big change in design. By using more spacing between all elements and using more white backgrounds, the whole system provided more clarity.

Android Lollipop is clearer than its predecessor
Android made their interface cleaner and simpler since Lollipop

Canopy uses white space wisely
Canopy uses white space wisely

Canopy is a great example of the usage of white backgrounds with a lot of white space (enough space between all elements). Canopy is an app that lets users see curated products at Amazon. The app is always showing beautiful products, so the decision of leaving the background white was a right thing to do.

Clear only shows what is needed
Clear only shows what is needed
Clear is an app where you can make lists, to-do lists for example. The app has downscaled the user interface to a level where the only thing that users see are lists or list items. The negative side of the extremely minimal interface is that users need to learn to use the interface. Once users completely adapted the way of usage, the app has a high level of differentiation and is unique.

Colors

Colors have been always a part of every design and it always has been an important design element. When we were still designing according to the skeuformistic style trend, we were also using realistic and hard colours. Now the world has moved on to minimalistic design, the colours have been changed as well. They where substituted by more subtle and softer color palettes.

Working with colors can be a hassle. You need to define colors that are in harmony together, a palette. A range of pastel colors for instance. The colors that Apple uses since iOS 7 can be found at the handy website ios7colors.com and here you can find Android’s new Material Design colors.

A good example for the change of colour in design is SimpleMapp Location Guide Tool, one of our products where we just made a redesign for.

SimpleMapp Redesign iOS
SimpleMapp before and after the redesign

An example of a very popular game that uses trending colours is Two Dots. It is a game with a simple goal: connecting two or more dots of the same colour. The map (where users can choose levels and see their progress) is created with beautiful designed illustrations and a colour range that is in complete harmony.

Two Dots’ Color Palette
Two Dots’ Color Palette

Blurred, transparent elements

When Apple introduced iOS 7 they introduced a new trend as well. iOS uses overlaying layers or elements that are transparent and blurres the underlying layer or elements. Or how Apple calls it: translucent UI elements. It is a perfect way to lay focus on the sharper elements that are laying on top. You can compare it to a picture taken with a low diafragma rate, where the background is blurred out and the object where the viewer needs to focus on is sharp. But the blurred out information still shows enough to make the user curious and let them wonder what is laying behind the translucent layer.

translucent UI elements in iOS
iOS uses translucent layers in the control center & notification center

translucent UI elements in Gogobot
Gogobot uses a translucent layer which you can slide down to reveal what is beneath

It is interesting to see that the market and other app developers easily adapt the trend that is set by Apple. Gogobot implemented the translucent elements of iOS in the startscreen of their app.

Gestures

Apple had noticed that their devices needed to gain inches if they want to keep up with the competition and to face the demand of the end user. Apple always had praised the iPhone for it’s usability, and mostly the fact that it can be used with only one hand. That isn’t possible anymore because of the larger screen of the iPhone 6 and 6 Plus. That is where gestures comes in.

traditional iOS gestures
‘Traditional’ gestures, used since the introduction of the iPhone

We’ve been using gestures for a long time, at least since the first iPhone in 2007. But the way we have been using gestures differs since last year. Instead of using the interface buttons to navigate through the operating system, almost the whole operating system has become an input method. Users can swipe back and forth through (web)pages by simply swiping the complete page. Users can swipe up/down to pull up/down an extra panel (control center and notification center). The fact that the future devices probably will be larger than the current generation, it will be likely that gestures will be implemented in apps and operating systems more often to improve the user experience.

Recher used innovative gestures
Rechner makes use of gestures to give commands to the app (calculator)

Except for the gestures that users can make in the system, we are seeing that stand alone apps are implementing more gestures to create a richer experience. Rechner is an calculator app made for iPhone and iPad. It makes use of the traditional input buttons for inserting the numbers which the user wants to work with. Adding, extracting, dividing, etc. can be done with gestures. Because these actions are made with gestures instead of buttons, the user interface can be made even more minimalistic than it already is. Which is an addition to the trend of ‘simplifying the user interface’.

Use of images

“Pictures are faster than words”, is how Android is calling it in their Design Guidelines. We can compare it to traffic signs, people can recognize a sign faster that reading a short line of text. The last year we saw less boring lists, and more image based lists or list with a clear icon that says what kind of content the user will get after tapping the item.

Animations

Animations is a way to go further than ‘only’ delivering a beautifully designed app. It has proven to make the interaction between user and device more intense. iOS had implemented several animations in 2013 such as swiping between pages in Safari. Android has gone a bit further in implementing animations in their latest update. The system is adaptive and gives the users feedback when they tap on a list item for instance.

Different animations in iOS and Android
Left the animation Apple has implemented since iOS 7. Right the input feedback of Android’s Lollipop.

The key is to use them consistently throughout the system (or the app) and not ‘overdoing’ it. Users need to experience animations that are making sense, but disorienting your users with unrealistic animations is not the goal. An example of animations that is not overdoing it and is consistently used throughout a system is the menu button of Android that literally turns into a back button by animating. We at creative workline GmbH are already implementing interactive animations like these and some custom animations to make our new products more intense and increase the user experience.

Which design trends or guidelines will survive 2015?

The effort that Apple and Google have made to flatten their mobile user interfaces has to stand out for the next 5 years, at least. The old skeuformistic design style of iOS 1 until 6 didn’t made users complain until iOS 5, from then on people wanted to see changes. Android has designed a complete design language called Material Design that is based on flat design, which surprised users and made Android a beautifully designed operating system and got rid of it’s ‘Beta’ look and feel.

We can definitely predict that we’ll be seeing more gestures in apps. Where screens are getting bigger and buttons are becoming harder to reach, we cannot ask our users to reach out for that one button in one of the upper corners. We need to give them options within their reach. By making more use of gestures instead of visible buttons, the interface can be designed simpler and cleaner. Besides the usage of gestures we are looking forward to implement animations in our apps. We have seen animations throughout mobile operating systems for a while, but more and more in third party apps lately. Complete in line with the minimalistic design we also think that the colors that are currently widely used (subtle and softer color palettes) will keep being implemented more often throughout 2015. Predicting the future is never possible, but the line of changes in design trends last year tells us that the earlier mentioned trends wont extinct within the next year.

So it is good to follow current trends in the market and try to stay ahead of the competition, at least know what your competition is doing. We at creative workline GmbH are always on the look out for new trends, pick up on them as soon as possible and consequently implement them in our projects. Are you interested in knowing which trends we find suitable for your idea or concept, or is your app ready for a meaningful design update? Get in touch with us.

VN:F [1.9.22_1171]
Rating: 3.6/5 (9 votes cast)
Mobile Design Trends & Guidelines 2015, 3.6 out of 5 based on 9 ratings

Leave a Reply





Share:  
Mobile App Entwicklung und App Programmierung in Deutschland und Österreich. © App Agentur creative workline GmbH 2016
  App Entwicklung Berlin App Entwicklung Köln App Entwicklung München App Entwicklung Frankfurt App Entwicklung Hamburg App Entwicklung Hannover App Entwicklung Bremen App Entwicklung Düsseldorf App Entwicklung Deutschland App Entwicklung Wien App Entwicklung Österreich In Berlin App erstellen lassen
  App Programmierung Berlin App Programmierung Köln App Programmierung München App Programmierung Hamburg App Programmierung Hannover App Programmierung Bremen App Programmierung Deutschland App Programmierung Wien App Programmierung Österreich