Over the half of 2018, through the past 6 months of observation, we have been able to have a clearer judgment on the design trends of the whole UI field in 2018, and a more reasonable opportunity to launch this article. Today, let’s take a look back at some of the trends in the field of UI design over the past six months.

1. full screen background pictures

Today’s full screen background is one of the most widely used design trends, whether it’s a photo or a specially rendered visualizations that are within that range. This method is very attractive both visually and emotionally. In addition, it enables all layout elements to have a strong sense of wholeness.

This is the landing page design of Big City Guide. The background is the famous local architecture in Berlin, which makes the whole look elegant and abundant information.

And the home page of the interior design studio, also adopted a full screen design, a large number of original modeling and built color scenes created by the background, a good highlight of the nature and characteristics of the studio itself.

2. Multiple interactive layers

UI designers have been exploring various experimental designs, and now more and more designers are starting to add multiple overlapping layers in the web to allow users to interact with the web. In contrast, simple scroll browsing is very primitive.

This is the website that saves the ocean as the theme. When the rotation chart changes, the other two interaction layers will also change. In addition, there is a branch of this design, which is a picture filled typesetting, and pictures and even video are filled into the text as textures and materials, some are static, and some move along with the interaction.

3. custom illustrations

Custom illustrations have been widely used in web and UI design, but today’s web pages and custom illustrations in UI are more mature, with more prominent features in usability, intuition, metaphor and information transmission. Pictures and illustrations will enhance the accessibility of the whole design, support each other between illustration and text, and make the whole design more uniform.

The custom illustration has enhanced the sense of value of the website. It not only embody the sense of consistency between the website and content, but also highlights the content.

Like this illustration, it is designed for the 3C elements in the UI design: color, contrast and content. The three key words in this article are color, contrast and content, and this is a semantic element that selects color as the core, and is very subject to the theme of drawing as the content of the illustration. The main body. In detail color matching, strong color contrast fits the key word of contrast.

4. story and role design

More and more websites and APP are trying to integrate special roles / mascots into the whole design, using visual illustrations, video, text and even icons and details to show stories, create an atmosphere, convey information, express emotions, adopt a more consistent way of speaking in the current language, and transmit the content vividly. To the user. This is the advantage of the story and the role. The personified image can make users associate more easily with the real world and carry emotions. In the design, the role of the design can also visually, make the page more lively.

This case is a set of custom illustrations designed by the illustrator of Tubik Studio for Florence APP, in which British nursing practitioners can find higher salary and more reasonable business. The illustration gives the role image a story – like presentation, also illustrates the functions and advantages of the application, and the collocation explanation can better let the user understand the intrinsic value of the function and service.

5. split screen design

The split screen design itself has been around for a long time, but it is not as frequent as it has recently appeared, and it has begun to appear widely in different design works. First, the split screen design can fit the current response design well, on the other hand, it can carry different content under the same design, and the designer can explore various possibilities under different colors and layout. By split screen design, designers can better display the two elements of web content itself.

This landing page is designed for a dating application, using an inclined split screen design. The visual elements and text are separated by diagonal lines, interdependent and consistent under the echo.

6. bold typesetting

Bold and impressive typesetting also exists widely in today’s web pages and APP, and even in the vast majority of cases, it exists as the most critical visual design element. Designers will be very concerned about the readability and readability of these texts and typesetting, the hierarchy of typesetting and the choice of fonts, which are always the most important issues for every UI designer.

Similarly, in the case of Big City Guide mentioned above, text font typesetting is taken as the most striking part of the whole vision. Fine cutting and bold selection make the text and background elements well integrated, full of sense of harmony and close design.

The design of the Upper application is also simple, which does not use too unique illustrations or graphics. On the contrary, text typesetting plays an important role in the design of the entire APP.

7. button – free UI

Although buttons are still one of the most important elements in the current UI design, we have found that more and more designs are starting to use button free UI in experimental UI interaction cases. This design saves space while using gesture driven interaction instead of clicking.

This is the conceptual design of an encyclopedia APP produced by our team, which provides a variety of interactive information charts, data and interaction are implemented by sliding, without any buttons.

8. lively and bold colors

Color matching is also one of the designers’ greatest concerns. Nowadays, UI designers have completely transitioned from the subtle color matching they sought before to the pursuit of lively and bold colors. Whether it is dark color matching or light color matching, always try to make the color scheme as colorful as possible. More and more designers began to combine traditional technology and innovative color matching, trying to create a more expressive visual experience.


This is a conceptual design for the application of the music news category, which includes fresh and interesting content including lyrics, music news and music tests. The whole APP gives a strong sense of originality, which is largely due to the use of color matching and geometric graphics. When users browse through the screen, changes in graphics, colors and icons will be very eye catching.

9. UI animation with enhanced participation

The dynamic effect of UI interface is a well deserved hot spot at present. Although there are still many designers who think that the need for dynamic effects is not strong, animation may make the interface more complex, but in the present time, the dynamic effect does have a significant increase in the entire interactive experience, even gradually becoming an integral part of the design. As a result, designers and developers are working together to find ways to achieve effective and dynamic performance in modern web pages. Dynamic interaction and micro interaction can quickly create feedback for users, making navigation and interaction more intuitive. All of these can enhance the participation of UI.

This is a conceptual design for APP that helps users track everyday consumption and manage revenues and expenditures. The color matching and high recognition of the dark color system make the whole design more readable and more stable. The dynamic effect makes the whole APP more vitality and makes the user feel more comfortable.

10. landing pages with a large picture background

Landing page is an important part of many websites. The use of large background images can make the landing page more attractive and create more distinctive vision. In the transmission of emotion and atmosphere, the function of super large picture will be very prominent. In landing pages, the effect will become more prominent. The large picture of the landing page is red enough to meet multiple needs.
Attracting users’ attention
Intuitional transmission of information
Strengthening style
Create a theme and create an atmosphere
Show the features of the core and highlight the attributes of the project
That’s why designers nowadays favor this landing page design so much.

Below is the landing page design of the dance academy called HeartBeat. The simple layout, with the dynamic dance figures background, through the dancer’s big picture to attract the interest of the young people interested in the dance, create emotional appeal.

11. poster style pages

The poster design always emphasizes visual attraction. Poster style web pages and APP’s visual design also emphasize visual angle, typesetting and atmosphere. Choose the right pictures and fashion typesetting to make the layout and style more eye-catching, so as to achieve the purpose of attracting users.

The landing page of the Tasty Burger application is the same: to strengthen vision through expressive fonts, to create emotional attractiveness with coveted color and gourmet food, and to highlight the layout of the visual body so that the user will not miss the key information.

12. experimental color matching and layout

The experimental design has never disappeared. The designer tries to explore new and original color matching and different layout in mediocre and universal design. Because, in any case, effective experimental color matching is not only because it is creative, which often produces surprising effects, exploring a really interesting combination in the same color theory and color psychology.

This website, called The Gourmet, is an e-commerce website selling herbs and spices. The layout and color matching of the user interface are very innovative. This experimental layout creates a sense of fashion completely different from other websites under the dynamic effect.

13. personalized user experience

In the past 6 months, we can see more and more, gradually mature personalized user experience design, designers are starting to provide more functionality for users, which are based on the individual needs of the user and provide a broad enough space for custom.

Perfect Recipe, a health APP, can provide users with personalized healthy recipes. Because each user is different, some need fitness, some need to increase weight, some need to lose weight, different people need to be fully personalized under different needs, and this application is to respond to such needs, to provide users with real reliable, reliable service.


There is a variety of design trends today, thanks to the designer’s spirit of exploration, and at the same time, there is an inherent relevance between different trends, largely due to the unremitting pursuit of experience and creativity by the designer. To summarize the design trend, another advantage is to provide design ideas for the design you are designing.

1 thought on “More than half of 2018 summed up the 13 main design trends for you.”

Comments are closed.