Mobile Apps UI Design Trends for 2018-Top 15

App designs, themes, templates and downloadable graphic elements on Dribbble

Mobile Apps Designs continue to change with the changing demand of the industry’s million users. In the race of catching and keeping the attention of the crowd of impatient users, the UI design market keeps coming with new ideas and keeps revolutionizing the old ways to make the experience innovative and value offering.

2017 bid adieu to a number of UI elements that were making the product design old and boring – hamburger menu, content with less to no images, safe colors. While 2018 will be all about on the face, no nonsense designs.

There has been a new found demand for mobile app design agencies that can understand and help keep the brands in trend, when it comes to offering uniquely innovative experience to the users.

There are a number of UI elements that have together made a list of Mobile App Design Trends 2018.

Let’s get on them to keep you on trend this year.

1.Vibrant Colors

Bright Colors in UI Design: Benefits and Drawbacks | by tubik | UX Planet

In 2016, UI designers reinvented flat designs in mobile apps and shifted their focus to offering greater personalization with their design elements.

Instagram was one of the first apps to modify their logo, move on from the flat, dull-muted tones to multi-colors. The trend was then trailed by a range of famous companies. Moving in the same direction, 2018 is going to be the time of vibrant colors, shooting up warmth, energy, and subtleties to your home screen.

It’s time for designers to be valiant and try out newer colors, but select and apply them wisely. Make sure the colors allow you to create unique, powerful, and eye-friendly experience.

2.Borderless Display

Future of UX Design: Trends That Really Deserve Your Attention

When Apple declared the launch of iPhone X with a borderless display, the major buzz was made around the effect of the design on UI design. They introduced the trend of transforming the usage of strict flat design ideas in mobile apps, boosting fluent storytelling. While it was still a lot restricted in 2017, Borderless Display specific designs have found themselves in the list of UI Design Trends of 2018. We will soon start seeing designs that cover the whole mobile from edge to edge.

3.Videos

50 Awesome Music & Video Player UI Designs – Bashooka

2017 witnessed a rise in the fame of video content format. Hubspot stated that 78% of people watch online videos per week, and over 55% see online videos every single day.

In the context of the mobile apps, designers will be adapting the video formats in their apps in 2018.

The human attention period has reduced from 12 to eight seconds. Video-based UI is a result of this change in span.

2018 will see more of video-based content and more platforms coming up with live video options to convey information and feelings.

4.Cards

Card UI design: fundamentals and examples - Justinmind

It was in 2015 that mobile devices overtook PCs as most used tools for surfing the web and doing the regular online activities. To cover the gap between desktop and mobile app usage, there had to be an element that would work well on both.

One of them is cards.

Although not an innovative addition in Mobile App UI Trends 2018, they play a crucial role in curating an effective UI design. Having all – video, photo, text, and link to a specific subject, cards are one of the most brilliant ways to display and organize large amounts of content on screen. Above all, they are aesthetic, easy to digestible, and properly-optimized for clicks and taps. This is why they have found themselves as the prime UI design mode on Pinterest, Netflix, and Newsfeed.

5. Sounds

PureMind | Sounds | Interactive design, App design, Sound

The newest element in 2018 UI Design Trends is sound layers. This trend are with respect to the sounds which users listen when they open a website, send comments, select emojis, etc. The sound element of UI design adds features like enjoyment and pleasure in user experience. 2018 has come with an expansion to this trend and is set to take user experience to new levels.

6.Big Typography

Big Typography designs, themes, templates and downloadable graphic elements on Dribbble

Typography is another feature for the UI designers to experiment when designing uber personalized app designs. When added with images, colors, video, animations, and innovative layouts, the element brings about exceptional user experience.

Solely because of the reason, Typography has become crucial piece of UI design world in 2018, helping designers transform from the traditional font styles to a more experimental, creative space. What you should expect this year, is fancy and bold fonts in place of done till death system fonts, which have been applied since forever.

7.Overlapping

Pattern 10: Create Overlapping & Collaged Elements - UI & Visual Design Patterns - Proximity School of Design

Overlapping of graphics, fonts, and colors not only makes UI design distinctive and eye-catching, but also add a false sense of white space. Creating an illusion of open space in the crowded real estate of a device, is the number one reason why designers are adding overlapping feature in their mobile apps.

Furthermore, in most cases, the overlapping of the same elements, combined with shadows, makes the mobile app interface designs impressive and fantasy like. All these reasons combined, make overlapping an important part of Mobile Application User Interface Design Trends 2018.

8.Gradients

Gradient designs, themes, templates and downloadable graphic elements on Dribbble

In 2018, one can expect to see bright vivid colors and much greater use of the gradients.

In the last some years, we have been seeing a rise in the number of app designers who are adopting color gradients in design when designing buttons, logos, and backgrounds.

The reason behind this adoption is when you chose a specific color, you can show a hierarchy while drawing a picture and combining it with different graphics and color gradients.

This sense of hierarchy will continue to make Gradients famous in 2018 as they did in 2017.

9.Opacity

30 Clearly Cool Transparent UI Designs – Bashooka

Same components tend to have diverse effects once you adjust or play around with their transparency level. When designing mobile app interfaces, adding opacity in components can be an excellent design work. Furthermore, the opacity settings for various graphics or colors can also help create colorful glass like texture to the app elements.

Overall, irrespective of how you add opacity to your UI design in mobile apps, they will see a concrete rise in demand in 2018.

10.Animation

5 phenomenal examples of motion design in UI | Inside Design Blog

Introducing motion design or animations in fonts, icons, buttons, and photos always have an optimistic impact on app users giving them more enjoyable experiences. The trend will continue in 2018.

11.Responsive Logos

Joe Harrison - Design & Interaction

The idea of modifying logos to fit in with the n number of devices, has been a very recent doing of the app design world. Brands have now started refreshing the logos in simplified, modern versions since last some years and making them responsive is the only logical next phase when it comes to meeting the today’s demands.

12.Real Life Photography

40 Best Photography Web UI Design Examples 2019 – Bashooka

It’s very energizing to see authentic, real-life images return to the mainstream again.

The demand for real photos rose greatly in 2017 and is set to grow massively in 2018, with brands seeking to bond with users, and designers looking to get rid of tawdry stock photos.

13.Highly-Detailed Vintage

Pin on APP UI

Vintage is nothing new, but its usage will grow stronger in 2018. Although it contradicts the mainstream need for minimalism, finely crafted images are timeless. This year, brands will be looking to attain top-shelf expression that shouts sophistication and distinction.

While not everyone’s cup of tea, food and beverage domain—specifically those involved with organic food and wine—will be leveraging the style in 2018.

14.Voice Enabled

How to Design Voice User Interface? (VUI Design Guide)

Voice-activated elements of apps helps simplify users’ operations. In 2017, apps with voice dependent services finally found their fair share of demand from the industry. The popularity of voice-activated mobile apps will only grow in 2018.Other than the voice-activated elements, fingerprint-activated ones will also play a very crucial part in defining mobile app interface designs for 2018.

15.Emoticons

Popup design - Daily Ui 16 by Ashley Saleem-West on Dribbble

In 2018 we can expect to see emotional intelligence getting integrated in mobile experience to a much greater level. It is no more about animated effects that are shown when users complete any specific action. EI has now become a mainstream way to make users experience delightful and engaging.

In the year of mobile apps, we will see more emoticons in the list. They will see an integration with Face recognition elements that will be used for providing an array of reactions. One such technology that have been doing this perfectly is Animoji — the animated emoji that responds to iPhone X camera’s facial expressions.

Creating Widgets in iOS 10

Widgets are something that every trending iOS application is looking forward to. Widgets help users to get some quick and relevant information without even opening the app. They are best suited for applications like Weather apps, To-Do list apps, Calendar apps which might show a day’s schedule. The widget should provide the immediate and relevant information that user must be interested in. The amount and type of information that widget carries, varies according to the requirement of the containing App of the widget.We will learn through this blog what are widgets and how to make widgets for our iOS app. We have already made an application called RemindME which is a small To-Do list application.How to create widgets in iOS 10 | Humble Bits

What we are going to cover 

  • iOS 10 Widget UI
  • Sharing UserDefaults and Files with Widget
  • Updating the content
  • Adjusting Widget’s Height
  • How to open App from Widget
  • When my Widget should Appear?
  • Home Screen Widget

Start-Up Project

We have already created an application that allows user to add some To-Do items with title and description and shows its status as done or not done. This will be containing app for our widget.

Getting Started

So, enough saying now and let’s get started with the real code. Widgets are nothing but a type of App extensions called Today Extension. So if anybody needs to know about app extensions, you can see this apple documentation. Now, add target by selecting File/New/Target and then under iOS section select Today extension and press next. After that give name to your widget and select the containing app as your project.

Now we can see in project navigator a new group will be added with our Widget’s name. Change Schema and select target as the widget and run project. You will  see widget in the notification center of our simulator with a message “Hello world” like this.

10 Tips on Developing iOS 14 Widgets Swift and SwiftUI | The Startup

iOS 10 Widget UI

Let us now design how our widget is going to look like. Open the storyboard of our newly added target and remove the default label. We are going to add a tableview and a button and two labels in our tableview cell. We have added UIImage for the status of the reminder and labels for title and description of the reminder. We have added a class called WidgetTableViewCell. Select the tableview cell and in identity inspector, add class name as WidgetTableViewCell. Add constraints to the views as needed and connects the outlets in the WidgetTableViewCell using Assistant Editor.

iOS 10 UI

We will also add Visual Effect View With Blur  from the object browser in our tableview cell. This is to add vibrancy effect to our widget. This causes a blur background in our Widget’s view. This is to make it look similar to what default iOS widgets look like. Make an outlet of visual effect view in the WidgetTableViewCell and name it as “visualEffectView”.

This ensures that vibrancy is similar to system-defined one for Today Extensions and the UI looks like default iOS 10 widgets.

Sharing UserDefaults and Files with Widget

Widgets are nothing but extensions. Extensions are just like another application so our containing app and widgets cannot communicate directly. There may be situations when our containing app and widget need to share some data. We can do that by sharing UserDefaults between them.

To enable this, select the main App target and choose Capabilities tab and then enable App groups. We require apple developer account for this. Now, create an app group. App group name must start from “group”. We have created an app group with name “group.com.quovantis.RemindMe”

Similarly we will repeat the process by selecting the target for widget. But we don’t have to create a new app group, we can use the one we created before. Now when we will save or retrieve anything from UserDefaults we will use this group.

We have made a class that will manage writing and reading our Reminders from UserDefaults. This code can be used by both our containing app as well as our widget extension.

We have used UserDefaults(suiteName: “group.com.quovantis.RemindMe”) for writing and reading our Reminders. This ensures both our containing app and the Widget extension save and read the data from a shared UserDefault under a common suite.

Now if we have to use the same UserDefaultsManager class in our Widget target also, we will have to enable it explicitly from the File inspector. Select the file UserDefaultsManager.swift and from File inspector check RemindMeWidget. Similarly if we have to import any other file like Assets.xcassests into our widget extension we can do the same.

Now we have shared UserDefaults between main app and widget, we can now add content to our widget. We will read data from the UserDefaults and will show the reminders in the table view of the widget. Widget will show the title and description of the Reminder and a button checked or unchecked depending upon the status. We will fetch the reminders from the UserDefaults in the viewWillAppear and will refresh the tableView. You can look the code in the TodayViewController.swift file in the RemindMeWidget folder.

We can also add actions to our widget. We have added an action to the button in our widget. When it is pressed that reminder is marked as done by updating status of the reminder in UserDefaults. Code for this action is written in WidgetTableViewCell class.

Now when we add any reminder from our main App, it will be reflected back to our widget also.

Updating the content

Now we will see how to add support to our widget to update its view when it’s off-screen, by allowing the system to create a snapshot. The system periodically takes snapshot to help our widget stay up to date. That is done through widgetPerformUpdate method.

We need to replace the existing implementation of widgetPerformUpdate

If we get reminders from the UserDefaults successfully, we update the interface and the function calls the system-provided completion block with the .newData enumeration. This informs the system to take the fresh snapshot and replace it with the current.

If we fail to get reminders then we call the completion handler with .failed enumeration. This informs the system that no new data is available and the existing snapshot should be used.

Adjusting Widget’s Height

As we have limited space in our Today View, System provides a fixed height to all the widgets. We have to design our widget UI in accordance with that . But we can also provide the option to increase the height of the widget so as to show more information in the Today view.

Our TodayViewController conforms to the NCWidgetProviding that provides the method to do this. There are two modes of the Widget of type NCWidgetDisplayMode, compact and expanded.

This will specify that widget can be expanded and we get a default button to expand and close the widget. Now add this method to adjust the size of the widget.

Whenever the widget height is adjusted this method is called where we have specified the height in case of compact and expanded state. In expanded mode we set preferredContentSize to the combined height of the cells of our tableview in Widget and when it is in compact mode we set preferredContentSize as CGSize() which gives the default height to the widget.

How to open App from Widget

Users may also want to open the containing app from widgets so as to have a detailed look over the information shown in the widget. For that we will have to allow our widget to open our containing app.

For this we use URL Schemes. We can open any app that supports URL Scheme from our widget but we should do that rarely. As user may get confused regarding the container app of the widget. Generally we should link the containing app of the widget only.

For enabling the URL Schemes in our containing app we need to add the following rows in our info.plist

After that we use the extensionContext property of type NSExtensionContext in our TodayViewController class to call the openUrl function. We have written this code in didSelectRowAt Index of our tableView

When my Widget should Appear?

There can be situations when under certain circumstances, you want your widget to appear in Today view. For example, there is no new or noteworthy information to show and you want to hide your widget until something new information comes up.

You can do this by using setHasContent: forWidgetWithBundleIdentifier: method of class NCWidgetController. Set the flag as true or false to show or hide the widget respectively and specify the bundle identifier of the particular widget which we want to hide or show.

In our case we will hide the widget if there are no reminders in our app. And as soon as the count of the reminders is one or more we will show the widget again.

We can write the code to hide widget from the TodayViewController itself but we must always avoid this. Our containing app should be the one which will decide when to hide or show the widget.

Write this function in the ReminderListViewController-

Home Screen Widget

We have seen applications show widget along with the quick actions when we Force Touch the app icon. If we have only one widget in our app, it is shown by default. But if our app offers two or more widgets then we will have to specify the bundle identifier of the widget in the info.plist that we want to show when we Force touch our app.

Add UIApplicationShortcutWidget key in the info.plist with the bundle identifier of the widget as its value.

Summary

So, this is all about iOS 10 Widgets for iPhone. Thank you for reading this tutorial and I hope you enjoyed this. You can think some more innovative ideas to explore more possibilities from Today extensions and think about ways to update your existing applications with your own widgets.

error: Content is protected !!