Interface design trends present a hot topic when a new year is at the door. Before another creative season starts, we offer you a quick look back: let’s review what 12 trends dominated 12 months of 2018 in UI design for websites and mobile apps. Traditionally, with a big pack of examples.
Custom graphics created specifically for web and mobile interfaces really rocketed in their diversity. For 2018, this kind of visual content established itself on top positions. As we have already mentioned in our earlier posts, interface illustrations cover multiple goals:
So, in line with photo content, this year digital illustrations have won broad presence in all kinds of user interfaces. In addition to the mentioned benefits, graphics crafted in one style for various screens of one app or website are a solid factor of consistency of user experience. Today, more and more designers apply stylish images to show different processes, errors, system messages, and onboarding screens. That’s one of the aspects we took into account creating free interface illustrations shared via Ouch.
Another trend connected to graphics is all the variety of prominent visuals on web pages – hero images, that are the first element catching users’ eye in the first seconds of interaction. These are usually high-quality photos, illustrations or even abstract graphic compositions connected to the theme and content of the web resource. In most cases, they cover a big part of space from quarter to even a half of the page. For sure, with such a big weight in layout, hero images should be thought-out well not to waste the chance of impressing users from the first glance.
One of the hottest trends of 2018 is a variety of 3D graphics integrated into mobile and web UI. No doubt, this kind of visual content is a challenge for designers. It demands specific skills, software and really much time to be designed well. But in many cases, all the effort is worthy as 3D images are much closer to real-world objects than flat graphics, so the chances are high to set solid associations and emotional background supporting positive user experience. What’s more, looking so realistic, 3D renders can be a huge help for web and mobile designs in which the needed photo content is impossible to get or too costly.
One more object of designers’ attention and creative experiments is typography. This year brought a wide variety of catchy and elegant font combinations, prominent designs for taglines and creative approaches such as:
It also has to be mentioned that in the choice of fonts, interface designers are paying more and more attention to the factor of high readability as the core aspect, especially in mobile UI which is often perceived on the go, in terms of limited screen space and variety of environments. Also, carefully chosen fonts transfer the required mood and build up the strong visual hierarchy, so designers seem to be restless to play with fonts.
One more trendy way to impress users are full-screen images used without any frames as a background. This approach has been widely found on web pages with a variety of visual content: photos, flat and semi-flat illustrations, abstract graphic compositions and even 3D renders. This technique is the step to poster-like web pages and it allows the background to play the bigger role transferring mood and theme of the website.
Web design by Locomotive for Hop Deco is also based on full-screen background images setting the theme of interior design
For a recent couple of years, video content has shown itself as a powerful and effective way of communication with users: it activates multiple sources of perception; it quickly shares the information and the needed mood; it breathes life into the layout with the advantages of motion. No wonder, video content got booming popularity this year. Promo and explainer videos have become a typical part of marketing strategies and campaigns. Also, websites often used engaging background videos this year.
In 2018, the creative experiments on interface animation are becoming more and more daring. To make the pages or screens stand out and add a pinch of emotion, designers are often keen to add motion to web and app visuals from icons to logos and complex illustrations. The role and practicability of UI animation keep its position as a theme of hot debates, still, most users expect motion and elegance of microinteractions as a must for user interfaces they choose.
This year is sometimes called the come back of gradients as a step of evolution from total flat design in interfaces to semi-flat. Gradients allow for creative color experiments making interface layouts catchy and vibrant. On the other hand, they demand a good knowledge of color theory and artistic skills as creating gradients is a design challenge with high risks of making the screen look dirty in case of poor color combinations.
Personalization or customization of web and mobile interfaces can be defined as one more trend of the year. Designers and developers give more and more freedom of choice to the users so that interactions were as close as possible to their preferences and wishes. Customized feed, multiple color themes, collections of relevant content based on interaction history and much more stuff is done to increase usability and desirability.
Google design team shared the new tab page, a surface that reflects users and allows them to make Chrome “their” browser. It enables to upload/select custom backgrounds and customize shortcuts with edit/add/remove functionality for quick navigation to common sites.
Contrast of all kinds has become an effective way to set expressiveness of UI looks, especially in the aspect of color. One of the approaches to its integration is the design of split screens. Except for color contrast, they are handy in separating different content or interactive zones, presenting the duality of options and making the content more responsive-friendly.
Stylish web design concept by Manuel Rovira is all based on contrast: light background and rich colorful hero images as well as black and white contrast of typography together create powerful and elegant layout.
With evolving software and techniques of motion design, this year witnessed a wide variety of complex animations for transitions between pages or screens. Among the main reasons for putting time and effort into this aspect, there are:
One more trend that covered both graphic and UI design is style concepts based on multiple layers. It adds originality and artistic vibes to interactions.
Sure, it’s only a small part of the creative experiments of this year. Would you like to add any trend that wasn’t mentioned in the list? Welcome to join the discussion in comments.
Finding the right music for a video can be challenging. And buying a proper license…
We've all had enough fun with face swapping. It's time to put jokes aside. Meet…