We are halfway through 2018, and through the observation of the past six months, we can already make a clearer judgment about the design trend of the whole UI field in 2018.
It is also a reasonable time to launch this article. Here’s a look at some of the most popular trends in UI design over the past six months.
1. Full screen background image
Full-screen backgrounds are indeed one of the broadest design trends today, whether using photos or specially rendered visualizations.
This approach is visually and emotionally appealing. In addition, it gives all layout elements a strong sense of wholeness.
This is the design of the landing page of Big City Guide. The background of the famous local buildings in Berlin makes the whole look elegant and informative.
The home page of this interior design studio also adopts full-screen design, with a large number of original modeling and color scenes to create the background, which well highlights the nature and characteristics of the studio itself.
2. Multiple interactive layers
UI designers have been exploring experimental designs for a long time, but more and more designers are now adding multiple layers of interactivity to a web page, allowing users to interact with the web in complex ways. By comparison, simply scrolling through looks primitive.
This saving the oceans website does just that. As the rotation diagram changes, so do the other two interaction layers.
In addition, a branch of this design is image fill typesetting, in which images and even videos are filled into text as textures and materials, either static or moving with interaction.
3. Customize illustrations
Custom illustration has been widely used in web and UI design, but today’s custom illustration in web and UI will be more mature, with more prominent features in usability, intuitiveness, metaphor and information transmission.
The pictures and illustrations themselves will enhance the accessibility of the whole design. Illustrations and texts support each other and make the whole design more unified.
Custom illustration enhances the sense of value of the site, which not only gives the site a sense of consistency with the content aesthetically, but also makes the content more prominent.
Like this illustration, it was designed for the article “The 3Cs of UI Design: Color, Contrast, and Content.”
The three key words in this paper are color, contrast and content, and color is chosen as the core semantic element, and painting is chosen as the main content of the illustration.
4. Story and character design
More and more websites and apps are trying to incorporate specialized characters/mascots into their designs, showing stories with visual illustrations, videos, text and even ICONS and details.
Create atmosphere, convey information, express emotions, adopt a more suitable way to the current context, vividly convey the content to the user.
That’s the strength of the story and the character. Anthropomorphic images are more likely to make users associate with the real world and bear emotions. In terms of design, character design can also make the page more lively visually.
This case is a set of custom illustrations designed by Tubik Studio’s illustrator for Florence APP, which enables nursing practitioners in the UK to find higher-paying, more reasonable business.
Illustration makes the character image have a story-like presentation, and also illustrates the functions and advantages of the application. With illustration, users can better understand the intrinsic value of functions and services.
5. Split screen design
Split-screen design itself has been around for a long time, but not as often as it has been lately, popping up in a wide variety of designs.
First of all, split-screen design is a good fit for current responsive design. On the other hand, it can carry different contents under a consistent design, allowing designers to explore various possibilities under different colors and layouts.
Through split-screen design, designers can better represent the duality of web content itself.
The landing page, designed for a dating app, uses a slanted split-screen design, where visual elements and text are separated by diagonal lines that are interdependent and consistent with each other.
6. Bold typography
Bold and eye-catching typography is also ubiquitous in today’s web and apps, and in most cases it is the most critical visual design element.
The readability and legibility of the text and typography are of great concern to the designer, and typography hierarchy and font choice are always at the forefront of every UI designer’s mind.
Similarly, in the case of Big City Guide mentioned above, text typography is taken as the most eye-catching part of the whole vision.
Careful cutting and bold selection make the text and background elements blend together, with a sense of harmony and tight design.
The design of the Upper APP is also simple, without using too unique illustrations or graphics. On the contrary, text typesetting plays an important role in the design of the entire APP.
7. Buttonless UI
While buttons are still one of the most important elements of UI design today, we are seeing more and more designs using buttonless UIs in experimental UI interaction cases.
This design allows gesture-driven interaction, rather than clicks, while saving space.
This is the concept design of an encyclopedic APP made by our team, which provides various interactive information charts. Data and interaction are realized by sliding, without any buttons.
For the most part, though, designers rely on buttons.
8. Bold colors
Color matching is also one of the most important things designers care about. Today, UI designers have gone from subtle color schemes to bold and lively hues.
Always try to maximize the color scheme, whether it’s dark or light. More and more designers are combining traditional techniques with innovative color schemes in an attempt to create more expressive visual experiences.
This is the concept design of a music news app. The app contains new and interesting content including lyrics, music news and music tests in bright colors.
The whole APP gives people a strong sense of originality, largely thanks to the use of color matching and geometric graphics. As the user swipes through the screen, the changes in graphics, colors and ICONS are eye-catching.
9. UI animations that enhance engagement
UI interface dynamic efficiency is the current hot spot. While there are still many designers who would argue that motion is not necessary, animations can make interfaces more complex.
However, at present, dynamic effect does significantly improve the whole interactive experience, and even gradually becomes an indispensable part of the design trend.
As a result, designers and developers are starting to work together to find ways to achieve and experience great motion in the modern web.
Combined with microinteraction, dynamic effects can quickly build feedback for the user, making navigation and interaction more intuitive. All of these things enhance UI engagement.
This is the concept design of an APP to help users track their daily consumption and manage their income and expenditure.
The use of dark color matching and highly recognizable fonts makes the whole design more readable and stable. The addition of dynamic effect makes the whole APP more vibrant and makes users feel more comfortable.
10. Landing pages with oversized picture backgrounds
The landing page is an important part of many websites, and using a large background image can make the landing page stand out and create a more distinctive look.
In the transfer of mood and atmosphere, the function of large pictures will be very prominent, in the landing page such as the page, the effect is more prominent. The popular oversized image of the landing page can satisfy multiple needs simultaneously:
Get the user’s attention
Intuitive delivery of information
To strengthen the style
Create a theme and atmosphere
Show core features and highlight project attributes
That’s why designers today are so interested in landing pages.
Here is the landing page design for a dance academy called HeartBeat. Under the simple layout, the dance character background with dynamic effect is matched, and the interest of young people who are interested in dancing is attracted by the huge pictures of dancers to create emotional attraction.
11. Poster-style pages
The design of posters always attaches great importance to visual appeal. The visual design of poster-style web pages and apps also emphasizes perspective, layout and atmosphere.
Choose the right picture, fashionable typesetting, let the layout and style more eye-catching, so as to achieve the purpose of attracting users.
Tasty Burger’s landing page is just that: visually enhanced with expressive fonts, emotional appeal with mouth-watering color palette and food, and a layout that highlights the visual body so users don’t miss out on key information.
12. Experimental color schemes and layouts
Experimental design has never gone away, as designers strive to explore fresh and original color schemes and radically different layouts in the midst of mediocre and ubiquitous designs.
Because, after all, effective experimental color schemes are not just about creativity; they can often produce surprising results, exploring really interesting combinations in the same color theory and color psychology.
The Gourmet, an e-commerce site that sells herbs and spices, uses an innovative user interface layout and color scheme that combines dynamic effects to create a stylish feel unlike any other site.
13. Personalized user experience
What we’ve seen in the last six months is more and more personalized user experience design, where designers are beginning to offer users more features that are tailored to their individual needs, with plenty of room for customization.
Perfect Recipe, a health APP, can provide users with personalized healthy recipes. Because every user is different.
Some need to exercise, some need to gain weight, some need to lose weight, different people under the different needs of the need to completely personalized customization, and this application is to cope with such needs, to provide users with real reliable, credible services.
conclusion
There is a variety of design trends today, thanks to designers’ spirit of exploration, but there is also an inherent correlation between the different trends.
This is largely due to designers’ relentless pursuit of experience and creativity. Another benefit of summarizing design trends is that they can give you ideas as you design.
So if you are still confused about learning UI design or want to learn UI design well, please click on the bottom left to read the original article to learn more about UI design.
By Tubik Studio
Translator: Chen Zimu