Modern web design trends. Use of cinemagraphs or “live” images. Let's kill stock images

Web design trends come and go. Some linger for a slightly longer period of time, others transform into something new, and others disappear forever.

What does the next year have in store for us? The awwwards.com team tried to identify the main trends...

I’ll warn you right away that you shouldn’t expect any kind of revolution. The major trends that set the tone in 2015 will continue to dominate.

The evolution of responsive design

Just a few years ago, creating a responsive website was essential to work on desktops, tablets, and smartphones. While each platform has its own unique challenges, tablets and smartphones have very familiar interaction systems, and the main challenge is ensuring that content is of sufficient size and easy to navigate.

Flat design will conquer every pixel

But in smartwatches, for example, even the navigation system must be carefully rethought to take into account how we use the device. While some argue that there are problems with flat design in the field of user interfaces, the general consensus is that it is a beneficial technique for web design.

Recently, we have seen a surge in the popularity of responsive design. And this was not just a whim of the designers - the circumstances developed, everything needs to be done to ensure that the site is displayed optimally on mobile devices.

Other trends flow smoothly from this, the main and most important one. Let's take a closer look at them.

It's all about how we consume content online and the technology behind serving web pages. Flat design has minimalist principles, which in turn results in poor and uncomplicated websites that are fast and content-focused. It is not only aesthetically appealing but also very practical, allowing visitors to easily engage with the content and also enjoy it without distractions.

It's not just text that's going to get bigger on the Internet: images too! Previously, there were important restrictions regarding image sizes due to limited bandwidth, but these days it's less and less. As a result, large images have taken over the web.

Distribution of UI templates

One of side effects adaptive design is that all sites become somewhat similar to each other. But it's not just responsive design that's to blame. The construction of WordPress sites and the rapidly growing market of ready-made templates also had a hand in this.

But that's not necessarily a bad thing. If only because we have changed the way we use the Internet, which has led to the popularity of common user interface design patterns. There is no real reason to reinvent the wheel. Interface templates should give users good experience, be simple and understandable.

Fascinating techniques will emerge for flexible scaling, drawing dominant colors for backgrounds, and optimizing images more and more. Blurred and colored overlap filters will allow text to “float on top” without compromising usability.

Scrolling and parallax effects

Using scrolling instead of clicking as a successful navigation method. Firstly, it requires less page load time, and most importantly, it makes it easier to create smooth transitions from one point to another without dissonant updates. Information is always flowing.

Here are a few models you should be familiar with:

- hamburger menu. Although many people criticize this template, its widespread use makes the function easily recognizable to users.

- account registration Now it is carried out in two ways: either using the registration button, or through social networks. These two options are convenient and understandable for users, and save them from unnecessary and confusing actions.

Have you heard the conversations in web graphics?

We are very visual people, we tend to absorb information better when we see it graphically, which has led to the popularity of infographics. We create infographics as a simple way to convey large amounts of information with high retention rates. Like infographics, websites convey large amounts of information, but they include elements that allow the user to interact with the information. They are more visually appealing than infographics and significantly increase user attention.

- endless scrolling. Accommodation of all important elements at the top is currently irrelevant. In addition, almost everyone is accustomed to scrolling thanks to mobile devices. The technique works especially well for sites that want to entice users through stories, and you can still simulate a multi-page site by dividing the page into zones.

You can expect this to become popular and become a core component of modern web design. Web trends come and go, but the creative ingenuity of designers is what drives changes in web design patterns. Designers are responsible for turning ideas into trends and trends into patterns.

The design trends listed here are quickly becoming commonplace in web design and will gain even more recognition in the coming year. But calmly, we will not extinguish the apartment. Let's just look at the good changes that have been happening since last year and that we can predict will be introduced this year. Microinteractions are subtle animations that interact with the user in some way.

- card design. First appearing on Pinterest, the card template quickly spread across the Internet. This is thanks to the fact that maps allow you to quickly scan information and find what you need. Each card represents a single concept. This design makes it much easier to organize content for optimal display on different devices.

To be more clear, microinterpretation works as feedback from the action or task you just did. For example: the action of a button when pressed, which interacts with different movements. Notice what happens when you...

Welcome back to gradient

It's these small interactions that make your navigation and experience more enjoyable and natural. Yes, the gradient is back. The era of flat design is ending and the gradient is making a comeback. Depending on how the gradient is applied, it grabs your attention. It is often subtle on the eyes. It's worth investing in this trend.

- large background images. HD images are one of the fastest ways to grab a user's attention. Thanks to advances in bandwidth and data compression, users won't suffer from slow loading times.

This is something that has been adopted by big brands where minimalism is taken to a new level. This is part of it: large and spare names and simpler and more universal icons. But don't forget: create minimalist designs, but always think about user experience. Reducing elements is not always the best solution, it all depends on the actual claims for each project.

Scrolling Innovations and Parallax

Gif was very 90s and considered tacky for a long time. It was a fever these days, especially in in social networks, giving us a new way to express emotions. As they say: “a picture is worth a thousand words.” This feature is a reimagining of navigation. That is, a very well accepted and used technique in mobile devices that has great potential to attract users as it helps in quickly absorbing more content without any interruption.

As we can see, all the trends that we could observe over the past year remain relevant.

Rich animation

Animation is being used more and more and makes the user experience more interactive and interesting.

Parallax is a technique that allows the foreground and background to move at different speeds, creating the illusion of depth and immersion. If applied correctly, it will have a beautiful dynamic and crisp look. And it allows you to tell a story to the user using only graphics.

Contradicts all design methods that seek to depict reality on screen; shadows, gradients, reliefs, realistic textures are left behind. And he values simplicity, clear layout, classic aesthetics and the expression “less is more.” Why does this concept work?

However, you can't just apply it wherever you want. Animation should serve a purpose and not just be decoration.

Animation can be considered from the point of view of two groups:

Large scale animations. They are used as a primary interaction tool, have a large impact on users, and include effects such as parallax scrolling and toast notifications.

Flat design principles are a hierarchy of information and elements that makes the user experience easier to understand. The interface is planned for functionality, not just a pretty website, so sites using this aesthetic receive positive feedback because they are user friendly.

Simple images convey messages faster and more effectively than detailed illustrations. Icons and buttons with solid colors attract more attention and convey their meaning more easily without requiring further explanation. Use elements with simple forms, such as rectangles and circles, and bold for buttons.

Small animations. They include counters, hover tools and loading bars, and do not require any user manipulation.

We will describe the 7 most popular animation methods:

- loading animation. It is used to improve the waiting time for a page to load. Typically popular on flat design pages. minimalist style, as well as on one-page websites.

It's important to know how to choose a color palette that doesn't leave the layout or create contrast while highlighting action elements like buy buttons. In this aesthetic, typography is very important; they should be bold to stand out, but at the same time simple, clean and effective, coordinating with the rest of the layout. Sans serif typing - a good choice, but serif fonts can be an option if they are used well.

In e-commerce, high-quality images are a great differentiator and are extremely important; attracting the user's attention and helping to increase conversion. The aesthetic simplicity of the flat design allows images and action buttons to become prominent rather than distracting from the consumer's attention.

Keep things like this simple, and don't use additional sound (even though this is fashionable lately). Please remember that these parts must match color palette and the overall style of your site.

- navigation and menu(NOT scrolling).

Although the premise is "less", it is necessary to know how to use all these elements correctly, so the help of professionals is recommended as it is important that the layout attracts the consumer and creates a great shopping experience. Additionally, it is extremely important that you know your target audience so that the site meets your needs.

By looking at the trends and evolution of the industry itself, we can determine what features will be present on the Internet from now on. Creating content for the Internet is a complex field, professionals working in it must constantly update themselves. Technology is moving forward, and major innovations and behavioral changes may mean new ways to create and publish online.

Hidden menus are becoming increasingly popular, especially in cases where they can be used to save screen space.

- hover animations widely used to create feedback when you hover the mouse over an object.

- galleries and slideshows are effective way to show multiple images without overwhelming users.

Most trends for the future arise from the needs of the present. We see that the use of smartphones to overcome the use of conventional desktop computers, the popularization of smart wearable devices, virtual reality, the promotion of content marketing, all these cases create new needs.

Below are new directions that are expected to develop on the Internet in the future. Online typography is something else. Just like any visual web typography will also have to adapt to the new devices being used, the trend is that fonts created for the web are getting more power and fans as they can adapt to different screen sizes and resolutions. as well as images and vectors.

- motion animation.

Our eyes are naturally drawn to movement, making it an ideal tool for attracting the user's attention. Movement can also help with visual hierarchy and add interest and intrigue.

Unlike the way we look at printed materials, online typography has to follow its own rules, follow a different path to better use it on screen in the same way it's already done on paper. The concept of responsive design, adapting the page to smartphones and tablets should gain more importance. With the advent of IoT smartwatches and other types of screens and devices, design will need to adapt not only to screen size, but also to the context of use.

Sites must adapt to different sizes and contexts of use. The same product will be useful on a mobile app, or on a watch, or in a car, and each experience will be viewed differently. It is already a trend in the interface design world and should gain momentum as it benefits both parties, the designers creating and the users accessing the content. Flat design is simple, adaptable, lightweight and makes a website easier to operate while being simple, non-distracting to the reader and visually pleasing.

- scrolling. Smooth scrolling relies on animation and gives additional control to the user, who can determine the pace at which the site's content unfolds.

- background animation (video). A simple animated background can be added to a website design, but it should be used in moderation otherwise it can be very distracting to the user.

Website with all images in background. With the development of the Internet and increasing connection speeds, we can expect sites that use large, premium quality images. This style will be very similar to what we already see in magazines and printed materials, which do not have restrictions that limit visual resources, with these restrictions disappearing, and we will be able to see the full potential of increasingly beautiful and immersive layouts.

Today's users are more familiar with navigation techniques, for example, on a computer, many use mouse scrolling or a trackpad to navigate pages, which allows you to create sites where content is concentrated and dynamically displayed, like Parallax effects.

Microinteractions are all around us all the time, starting with turning off the alarm on our smartphone in the morning.

Each of them is done without a second thought. It's likely that you started your day with a micro-interaction. Turn off the alarm clock on your mobile phone, you are dealing with the user interface for just one moment. And more and more of them are implemented in the programs and devices we use.

Micro-interactions should occur naturally and almost unnoticed by the user. They are an important part of almost every digital design. It's almost impossible for you to create a website or mobile app that doesn't include some element that the user needs to interact with.

Material Design: A Rich Alternative to Flat Design

The goal of material design is to create clean, modernist design that focuses on UX.

With its minimalist look, material design has a lot in common with another growing trend - flat design. But it uses depth and shadow, which makes it more interesting and rich.

So far we have seen that most “tangible” projects are limited to application design. Next year, material design will be used everywhere on websites.

Responsive Design

Responsive web design has become incredibly popular in recent years, thanks to the rise in mobile web usage.

It's safe to say that responsive design isn't going anywhere anytime soon, as it represents a relatively simple and cheap way for businesses to build a fully functional mobile website.

Responsive web design works well with card and flat designs.

Flat design is here to stay

Flat design has been popular lately, and fits perfectly with other trends such as minimalism, responsive and material web design.

Looking ahead, it is likely that we will see the following trends in flat design in 2016. The following come to the fore:

Long shadows. They bring more depth to flat designs.

Vibrant color schemes. Popular templates have prompted many designers to start using more bright colors in your projects.

Simple typography. Simple fonts help keep text legible and readable in a flat design.

Ghost buttons. They remain functional without disturbing the overall style at all.

Minimalism allows you to create a laconic interface and get rid of all unnecessary things.

Instead of results

As we see, the coming year will bring us practically nothing new. The same trends that we have observed for several recent years, remain relevant. We may be able to see some new forms - but the main trends remain the same.

A good website owner is constantly working to improve it. In this work, he needs to rely not only on analysis of his audience, web analytics data and customer reviews, but also on industry trends. Because there are many useful things in trends that can improve customer interaction with the site. But trends need to be applied carefully and wisely. Choose only those that are suitable for solving current site problems and for business development.

Therefore, in this article we not only provided a list of web design trends, but also made recommendations for applying these trends to your website.

1. Usability will become a commodity.

An example of improving the usability of the site http://www.telemirspb.ru/

Following basic principles Usability helps websites attract more customers and reduce the number of support calls. More and more companies are offering website audits, as there is a demand for finding errors on the website. The habit of shopping and ordering services via the Internet increases the demand for convenient sites.

Alas, many create websites themselves, and then come to us with the created disgrace. It is important to think through the process of interaction with the resource in advance: which sections will be in the first version and which will be added later. It’s impossible to plan for everything, but pre-planned navigation will save time and money on future improvements. Also, carefully choose the engine for your site. You should not choose a blog engine (for example, WordPress) if you plan to sell something on the site or create product/service pages.

If you work in a highly competitive environment, you understand how important it is to differentiate yourself from your competitors.

That is why, when planning to create a website or improve an existing one, you first need to look at the interface through the eyes of the client and try to predict the problems that the user may encounter.

2. Long texts will disappear

Let's be honest with ourselves: no one reads long texts. Exceptions include books and articles. When a client wants to order a service or product, he is interested in specific information: price, main characteristics of the product/service content, delivery conditions/fulfillment time. Brief and structured information saves the client time and encourages him to order. Moreover, if the client compares several sites, then the most concise description will definitely win.

Also, long texts are inconvenient to view from mobile devices, which almost everyone uses. According to global statistics, in October 2016 the number of mobile users became greater than desktop ones.

Look at the audience of your website, for example, in Yandex.Metrica in the Summary → Device type report and see what percentage of clients come from phones and tablets. Keep this audience in mind when posting content.

Add animation to your website wisely. It should be as accurate and fast as possible. Enlarging an image when you click on it, progress indicators while waiting for results on the site, a pop-up window appearing when adding an item to the cart, changing the color of buttons and links after clicking are the most common microinteractions that will definitely help your users.

6. Use of cinemagraphs or “live” images

Widescreen videos have been replaced by cinemagraphs - images in which only one element moves. It is best to place them on the first screen of the page to attract the user's attention and create a wow effect.

If you choose such a gif to match the theme of the site, it will look very cool. For example, you can take a live photo of your main product and place it on your Home page or promotion banners.

In Russia, cinemagraphs are mainly used in social networks, so we give examples of foreign sites - a site for water protection and car rental.

7. Avoid “typical” stock photos

We hope that all sorts of little people, girls in headphones and photographs of smiling families will disappear from the sites. Example of stock images:

9. Mobile First

The essence of this approach is that when designing a website, you need to think about how it will be displayed on mobile devices. Many articles and books have been written on this topic, for example, we recommend reading “Mobile First” by Luke Wrobleski.

As mentioned above (see point 2), mobile traffic is growing and there are even users who do not have desktop experience. That is why, in order not to lose customers, we recommend optimizing your sites for mobile devices.

The article lists only the most basic trends. Let's see what awaits us this year. If you also notice some trends and are sure that they will develop, write in the comments, we will be happy to discuss. And if you doubt that the design of your website is up-to-date or you read the article and found outdated elements, pay attention to the redesign service.