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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

The post Mobile Apps UI Design Trends for 2018-Top 15 appeared first on anteelo.

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.

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.

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

The post Creating Widgets in iOS 10 appeared first on anteelo.