Menu
homeMicrosoft

Modern trends in web development. Animation and micro-interactions. Animation, video and interactive objects

Good owner The site 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. Select only those that are suitable for the solution current problems website 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 sites attract more clients and reduce the number of calls to support. 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: long texts no one reads. Exceptions include books and articles. When a client wants to order some 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 site 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 this approach The point 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 relevant or you read the article and found obsolete elements- pay attention to the service

Every year the number of sites that surprise and delight with new design features is growing. Two years ago we posted a translation about trends in web design 2015. What has changed since then? There is still an emphasis on high-quality graphics and minimalism, large fonts and interactive elements(For example, hidden menu). However, technology does not stand still, and web designers are experimenting with dynamics, animation, and the arrangement of objects on the screen without compromising the performance of the site. We bring to your attention an overview of the trends that, traditionally, are set by our Western colleagues.

1. Mobile-first principle

The name of the principle speaks for itself: the design is developed, first of all, taking into account the ease of viewing on mobile device screens. This principle is not new, but since more than 60% of users access the Internet from smartphones, it has become decisive this year. Since mobile device screens are small, designers provide the most informative, but at the same time effective display of content. The same goes for texts - water and empty phrases have no place in the “mobile-first” concept.

2. Freehand illustrations

This is a great way to convey an idea or mood in an original way. Hand-drawn illustrations are unique, add variety and a touch of informality to the user's interaction with the site, making the design warm and friendly.

Example illustration from dropbox.com

Talented illustrators can create images that the best way will correspond to the brand and corporate style, with their help you can achieve deep personalization.

3. Animation

Designers are gradually moving away from using only static images and are looking for new ways to engage audiences to stand out from others. Brands need personalization, and animation, thanks in large part to the development of HTML5, CSS and jQuery, plays an important role here.

Animation can be implemented in different ways: from an unusual loading status bar that will brighten up the wait, to changing the appearance of an object when hovering the cursor. There is also full-screen animation, which is the central element that focuses the user's attention.

But animation should be used in a balanced way to deepen the user’s interaction with the site, and not scare him away. After all, no one wants to wait to watch the main content while ridiculous and useless animation loads - everything should look natural, appropriate and not distracting.

4. Bold colors

Until recently, experts recommended using only “web-compatible” colors in design - those that do not cause irritation and do not strain the eyesight. Today everything is changing - when used correctly, bold colors work wonders, turning ordinary websites into bright, rich and memorable ones.


Example of using bold colors on spotify.com

Bright colors are a way of personalization in the global fashion for minimalism in design. It's likely that designers will continue to experiment with palettes, creating unique gradients and pops of color.

5. Unusual scrolling and parallax

In the past, designers tried their best important information place it in the part of the page that the user sees immediately after going to the site. Today, it is difficult to determine which part of the page will be “visible”, because transitions are made from devices with different display resolutions. Therefore, a different approach is needed.

Scrolling, originally necessary to move up and down a page, is now being used creatively by designers. When implemented skillfully, it becomes a universal tool for presenting content. Thus, you can automatically configure the display and stop of video or animation when scrolling, the appearance of text and images, etc.

6. Asymmetrical patterns

2016 was influenced by mesh patterns, and in 2017 there was a trend towards the use of asymmetrical and “torn” patterns. Despite the fact that the vast majority of brands prefer traditional and clear card UI templates (after all, they are logical and easy to navigate), some are still starting to experiment in order to stand out and differentiate themselves from competitors.


Asymmetrical design example (isaidicanshout.com)

Asymmetrical design created with skillful hands, is great for drawing attention to certain parts of the page. Thanks to different sizes fonts and arrangement of elements can correctly place accents on the page and guide users in the right direction.

7. Shadows

Shadows themselves are far from an innovation in web design. At one time they were popular, then they were forgotten. What then is the trend? In the use of huge, sometimes even exaggerated shadows cast by images when hovering the cursor.


Deep shadows when hovering over images (abduzeedo.com)

This approach allows a flat template to focus on active element and engage in interaction. This creates an effect of depth - it’s nice to just move the cursor over such images.

8. Large and bold fonts

Typography is another way of personalization. Distribution of devices with high resolution screens make fonts readable and clearly distinguishable, so designers are increasingly experimenting with them.


Usage example large font(bigyouth.fr)

9. Ultraminimalism

Minimalism has long been a defining trend in web design. But some go further, removing any hints of decor from sites, leaving only the elements that are most important to users.


Absolute minimalism (mathieuboulet.com)

In the example given, there is only the indication “Scroll”, a link to the “About Me” section and links to profiles on social networks. Next, as you scroll, there is a designer’s portfolio.

10. Mix horizontal and vertical text

Changing the usual horizontal arrangement text “refreshes” the site and motivates you to read what is written there.


Example of unusual text direction (takewhatyoucancarry.com)

Please note that the mix is ​​done well - there are no unnecessary confusing elements. The word “take” is written vertically - this is enough for a branded presentation of content.

11. "Modulation"

In this case, the text should contrast with background images so that they do not merge.

13. Two-color

The site design is based on 2 basic colors. It looks stylish and modern. For example, the Australian Design Radio website is designed in exactly this style:

14. Geometric fonts

In this case, fonts are combined with a variety of geometric shapes. Fonts like Futura, ITC Avant Garde and Proxima Nova are suitable for this purpose.


An example of using “geometric” fonts (hugeinc.com)

You can add expressiveness, assertiveness and even some aggressiveness to your site by using very bold fonts from the above families.

Let's sum it up

In 2017, designers will try to add touches of individuality to the usual minimalism. Some will do this with color, some with fonts, and some with unusual block placement.

When developing and approving a design, do not forget the main rule - it must be user-friendly and motivate to take the target action. Are you confident in the performance of your resource? The report of a site audit conducted by the “service” can tell you about this. Personal manager" SeoPult. In addition to the design and usability audit, you will receive a detailed analysis of the technical component, semantics, position in relation to competitors, etc. All this will help you improve your website and increase its effectiveness as a sales tool.

Ryan McCready, content editor for infographics service Venngage, talks about what's trending in the world right now. graphic design, and what techniques had to be abandoned this year.

Bold and vibrant colors

Over the past few years, many technology leaders have used muted and easy-to-read colors. So they tried to create a very clear design scheme and show that the elegant and functional future, which is usually shown in science fiction films, has already arrived.

This method helped the company move to new stage development and unite all your applications under one color. As with Spotify, this bold use of bright colors made the brand stand out.

Fashion for the bold and bright colors The design follows the principles of Google's Material Design. The company chose flat, streamlined and intuitive design with the addition of "unexpected and energetic colors, as well as functional and eye-pleasing fonts and images."

In general, many current trends 2017 arose under the influence of the principles of Material Google design.

We also used them to make this advertising image. e-book. As a result, the image became incredibly popular.

If you can't choose best colors for your design, read on for some great examples of color palettes. And don't be afraid to use colors that contrast with each other.

Bold font

Bold font attracts readers' attention. You involuntarily pay attention to the large and eye-catching inscriptions.

My favorite example is Wired. It uses different fonts to highlight specific headings and maintain a hierarchical order of information on the page.

Just take a look:

Another good example using catchy fonts - HubSpot. The text is in the foreground and supported by graphics:

HubSpot understands that every year the amount of time it takes to absorb information from a tweet tends to zero. Therefore, to attract the reader’s attention, they use short and succinct inscriptions in bold letters.

In addition, now more and more people surf the Internet with mobile phones. Due to high-definition screens, there is an increasing need to use bold fonts. So, to retain readers, you need to deliver your content in the right way.

Buffer highlights headlines throughout the entire article, not just at the beginning - making articles easier to read on all devices. I recommend using this approach for long articles - this way you will help readers navigate them.

We applied this method when creating this infographic. Combination bold and interesting color solutions attracts attention:

Fonts from Google Fonts

I use Google Fonts for a very long time, because they are universal. If I need to come up with a design for an online publication and then add it to a presentation, I'm confident that all the fonts will work well together. They all look great on any blogging platform or website.

By the way, all 810 fonts are absolutely free! Oh yes, people like free things. They also like things that are very easy to use. Here is one example of combining several popular fonts from Google:

On our website we use Roboto and Open Sans fonts.

Original photos

Every year the amount of content grows, as does the need high-quality images. So that the photos can last long term, the authors try to make them as universal as possible.

There's just one problem: the best generic images tend to become stale over time. If you follow news in the field of technology and marketing, then you are probably familiar with this photo:

It is used in landing pages, blogs, and even in Instagram posts. To be honest, I took it myself for a site I worked on a few years ago. Due to the popularity of such stock images, the originality of graphic content has dropped sharply.

And the need to use clear and perfect photos only made the situation worse.

When a reader sees the same picture for the hundredth time, he thinks that the author of the article did not try to be at least a little original. So why even read such an article?

This is why you should use original images. Stop taking popular pictures, start making your own.

I'm sure everyone on your team has a camera phone. Why don't you use them? Take photos of your office or logo and use those photos.

Find out if there is an aspiring photographer among your colleagues. Give him a couple of days to rent an office - and you will have enough photos for a whole year!

When we created our new website, we took photographs of our employees, and we were very pleased with the result.

Hand-drawn images and icons

Not only the photographs must be original, but also the icons and drawings. Some brands have already realized this and are trying to stand out from the crowd in this way. This approach adds an element of personal and fun to the design.

Some say the trend looks unprofessional and childish, but it's still definitely eye-catching. Like most trends of 2017, it acts as an alternative to the sterile clean design of recent years.

Dropbox uses hand-drawn illustrations throughout. They became part of the company's brand and made it recognizable.

Such illustrations create a relaxed mood and delight the child who lives in the soul of each of us. They make the product look more affordable. They're especially effective at large tech companies like Dropbox.

Another good example This approach is the mattress company Casper. Almost her entire site consists of hand-drawn drawings. Here is one of them:

The trend was also picked up by the MailChimp service. In the 2016 report, he also shows similar drawings.

Moz, a company that develops marketing software, inserts illustrations into the header of articles:

Sometimes our love for drawings manifests itself in other projects:

Return to the roots of minimalism

If you were asked to explain to a stranger, what is minimalism, you would probably answer that it is when you have to abandon decorativeness in favor of functionality. Most likely, you will immediately think of neutral color palette, consisting of shades of black, gray and white.

It seems that the true spirit of minimalism has been supplanted by the use of boring black and white color schemes. I think this was done on purpose to compensate small size screen and low power of mobile devices.

But in 2017 everything will change. Minimalism will return in its true form. Which means there will be more color. In our time mobile devices They are as powerful as computers, and some even have better screens.

My favorite example of minimalist design is the Medium platform logo. Its creators were able to combine several different colors and still maintain a minimalist style.

Google made another logo redesign in favor of minimalism and a combination of bright colors. It is noteworthy that it was this company that served as a catalyst for the emergence of many new trends. The designers slightly trimmed the font style and presented the new kind a G-shaped logo that I really like.

The spirit of minimalism is felt in all this, but the press did not write about it. People have forgotten what true minimalism is. The logo was not colorless and made in a single form, so no one thought that it was made in a minimalist style.

The new logo was bright and eye-catching - while maintaining a minimalist look. After the redesign, people around them began to imitate Google, as they had done before in other aspects.

We ourselves began to use a more minimalist style for the design of our blogs.

The simple image design easily conveys the necessary information.

Using GIFs

Everyone (well, almost everyone) loves GIFs. They help us in conversation because sometimes they can convey emotions better than text.

In addition, to play them you do not need any special programs. GIFs are usually small in size and can be embedded almost anywhere.

They are better than videos and images, especially when you want to reduce page load time and traffic. I believe that thanks to their versatility, GIFs will become even more useful element design.

I really like putting gifs in the header of an article. Instead of putting a boring stock image there, take a couple of minutes and make a GIF like this one.

To do this, you don’t have to make any special creative efforts, but this way you will definitely attract attention to your post in in social networks. Here is another good example of using GIFs in the header of an article.

Two-color images

This is a combination of two, usually very bright or contrasting colors in one image. To create such images you will have to turn on your design skills, but it is worth it.

Only a very skilled designer can make such beautiful two-color pictures. I'm sure I can't create something like this, but that doesn't mean you should cut this technique out of your design plans.

Considering active development technologies, our communication with the computer is becoming more and more natural, and the possibility of interactive communication using voice appears. Therefore the future is voice assistants, but this is the next generation of applications.

A call to action button should be a key element on any page. Nowadays, colors that are too bright and irritating are often used. But to emphasize the CTA button in 2017, it will increasingly be used simple animation, it is not so annoying, but it perfectly performs its function of attracting attention.

Remember that the main thing is not to overdo it! Use smooth movements in the animation after a few seconds; they attract attention without being too annoying. We recommend adding a call to action button to your website header to better effect. And not only on the website, add such buttons to your mailings too!

Large photos, and especially videos, always attract attention. Moreover, the video plot itself can truly interest the visitor.

If this background video, then you have two in one - it is both a photo and a video. Since videos are still used relatively rarely as backgrounds, they immediately arouse interest.

Strive to create PERSUASIVE videos. Real people Your video should create a feeling of authenticity, sincerity, and authenticity. Be sure to use different tactics: customer reviews, reasoned responses to possible objections, and product demonstrations.

With the help of such videos, you will be able to overcome any doubts of your clients much faster and close the deal.

Trend #4 for website design in 2017 – scrolling as the main type of navigation

In 201, scrolling had already become widespread. He made the information more meaningful. Now users will be happy to scroll through long texts, instead of following links and waiting for pages to reload.

Important information in the site header, such as the main navigation menu, phone number or button call back is fixed and always available without additional actions.

Scrolling helps the story flow smoothly interesting story, show a lot of photos and thereby overcome user doubts and encourage conversion.

Well planned landing page takes customers on a carefully crafted journey that leads to conversion without forcing them to think twice about choosing a path.

Offer related and similar products, as well as profitable promotions during the ordering process to increase average bill. Related products in e-commerce account for 10 to 30% of income. Remember that selling to a new client is ten times more difficult than selling to someone who is already ready to pay.

With the help of a pop-up window, you can retain the client when he is about to leave the site. But a sense of proportion is very important here, since many users began to hate them.

But if you creatively approach the creation of such notifications and do not demand anything in return, for example, offer free shipping, write down the coupon code or download a free one trial version, then this approach causes irritation.

What does 2017 bring new to the Web? What are the main directions and trends in web design that we should expect? Now we’ll find out everything – in the format of a succinct review of the most striking trends, using examples of TRENDY sites.

Web design is constantly being updated with bold ideas, and the popularity of everything practical is already stimulating the development of trends. To the menus that slide out through the hamburger button and the navigation that automatically hides when scrolling, the fashion for split screens is added, dividing the main and other pages in half.

Read also: 8 web trends for 2019: modern layouts

In terms of aesthetic appeal, the flat style dominated the WEB for 3 years in a row. Then Google introduced material design, which took us a little out of visual abstraction. In 2017, web design will take another step back towards realism. Be it shapes, choice of color or functionality - 2017 will be the year of hybrids in which the realities of the physical world and technology intersect. As a result, you can expect a better web browsing experience.

Here are nine web design trends that can close the gap.

1. Pop-out navigation

Today when mobile audience Already enjoying browsing the Internet, the importance of screen space is greater than ever. By hiding functionality and navigation until “until it’s needed,” modern web designers and marketers strive to free up website space for selling visuals.

Pop-out menu, created specifically for smartphones, improves UX and big screens. Oddly enough, the hidden menu does a better job of emphasizing what's important, encouraging you to focus on a specific goal at a time. When you open the menu, it becomes the center of attention on the page, and is also actively used in the process of exploring the site.

Advantages:

  • Saving screen space
  • By focusing users' attention on the menu, it improves site navigation
  • Hiding navigation elements helps you focus on other things (like conversion goals)
  • Improved appearance first screen
  • More flexible structure design

Read also: 20 best examples design home page site

Best practics:

Color design to match the website pages. Maximum effect This type of simplification of a web page is achieved with a single-color background or a single-color slide-out menu structure.
Don’t distract the user’s attention to navigation - it’s better to leave the features and decorations for the pages themselves. Of course, a beautiful modern design and a stylish menu won’t hurt:

Simple large typography. Stylish, clean typography adds variety to the above model of “practical” web design. Large/bold, easy-to-read fonts improve navigation efficiency and fill space.

Designers often follow this trend by using capital letters.

Hamburger icons with a cross to open/close the menu. Since the standard allows, it would be more correct to combine them in one icon for greater clarity and visibility.

Shift/overlap content when opening. A pop-up menu is rarely made to occupy the entire screen. Typically leaving some of the page content visible, which makes it easy to return to on a small screen. On the desktop it looks like a fashionable “mobile imitation”.

2. Contrary to navigation paradigms - alternatives

In the dark days of the web, there were two types of navigation: Top Menu and lateral. WITH adaptive design a hamburger menu appeared, which is now actively criticized: it makes it more difficult for the user to engage / difficult to discover / less effective.

Advantages of non-standard navigation:

  • Unique design
  • Innovations attract
  • Enhanced user experience (UX)
  • For designers - new possibilities for website design

Best practics:

Read also: 11 creative websites of domestic web design studios

Various experiments with site navigation. With such an ambiguous attitude towards “burgers”, in 2017 we should expect the emergence of interesting innovations in navigation.

Hillsiderancho.com's unique menu combines top, left, right and scroll navigation

No navigation menu at all. The modern user is faced with a lot of content and does not need to be told what to do next. Scroll! The organic nature of this behavior has already been noted in previous web trends (horizontal, infinite scrolling, keyboard control, gestures...). Some designers do away with menus altogether, inviting the visitor to use/get an “advanced” site research experience. Adapting sites for mobile and tablets also changes the UX/interfaces themselves and opens up prospects for horizontal scrolling.

The site does not have navigation menu– they ask you to scroll to discover content, you can scroll with the cursor

Read also: The most unusual and original sites

Pop-up menu. We were so passionate about Drop-Down that we didn't even consider a simple alternative to Pop-UP navigation. In the example below, the menu pops up in the center of the screen. In general, web pages have enough space to create accessible and prominent navigation, without any drop-down lists.

Pop over navigation is used when hovering over one of the 6 sections changes the background of the entire full-screen menu

3. Cards – wearable electronics inspiration

How mobile users have changed the design of modern websites, so wearable devices are beginning to influence their design. With tens of millions of wearables sold since 2015, users have learned to value rational excellence in other areas as well. By saving space on the screen, wearable electronics will teach web designers to simplify things visually, and marketers will learn to further specify and formalize website tasks. The main rules of web design based on the principle of containers: stylish, concise and without much effort - the “less is more” ideology does not limit itself to screen sizes.

Advantages:

  • Optimized UX design
  • Less ambiguity and distractions
  • Minimalism speeds up site loading

Best practics:

Tiles, the principle of containers and blocks in the structure of web pages. The trend has been maintained for more than one year (2014 - 2016...) and probably 2017 will continue this trend. Currently popular and new models of gadgets (smart glasses, watches, bracelets, clothespins, sensors built into clothes...) are made in a laconic style and equally unobtrusively inform the user. Expectedly, wearable technology will inhale new life into easy-to-read tiled interfaces. The container model of card UI is designed to be self-contained and scales well for larger screens.

Large SVG icons. The icon needs scalability, simplicity - so that it looks on HD devices and is noticed by a quick glance.

Strict color palette. Fashionable color schemes going back to basics now. Two-color website design (duotone) or black and white design with the addition of one color are becoming increasingly popular.

Sufficient white space. To ensure uniformity among different formats, they add “air” to the site’s pages. This is called extreme minimalism. In addition to aesthetics: a sophisticated-casual atmosphere, saving space on pages, opportunities to attract attention, etc.


4. Material Design Lite (MDL)

Read also: The best online store designs in Flat and Material styles

Lightweight implementation material design from Google (MDL) provides a library of templates, sets of elements (cards, forms, icons, buttons...) and is an interpretation of the catalog of ready-made Polymer components.

With tutorials on pre-existing templates and open-source components, MDL makes material design open to implementation on any site or application. Pseudo-3D layers, shadows, animations are interface elements of classic web design that bring usability closer to simulating the real world.

Advantages:

  • MDL differs in better side from the design of traditional websites, while maintaining the original benefits of classic web design
  • Easy to understand thanks to the clear, realistic interface
  • Cross-platform availability for all devices (without binding to JS)

Best practics:

Mechanics of the material world. Treat the stylistic elements of MDL as if they were real physical objects, namely:

  • Shadows should look like they are cast by a natural light source
  • Choose the size and thickness of elements as for real objects - in accordance with physical laws
  • Movement – ​​response to user interaction

Customization. Take advantage of the MDL library of components by selecting what you need in the right combination.

Flat color palette. The MDL style material is best suited to flat colors – bright and bold combinations of them. Usually one main color and one accent color are chosen. It also fits with the minimalist aesthetic espoused by the previous two trends.

Read also: Colors in Web design: color trends (bright colors)

5. Vintage colors

Gray tones have dominated the web for the last couple of years: light gray backgrounds instead of white, slate gray text instead of black, and subtle gray shadows that create depth in a material design style. In 2017, gorgeous vintage shades are finally making a comeback.

The online shoe store uses muted colors like sepia. The color design, imitating vintage with old photographs, emphasizes the high quality of the product (in the best traditions of the family brand)