Modern trends in web development. Video is a functional element. Using cinemagraphs or live images

Every year we learn something new about design and 2016 is no exception. The article we wrote last year was such a success that we decided to make some predictions for 2017, so let's get started!

New article published →← Read and get inspired!

Design trends are influenced by media, technology, the fashion industry and, more recently, usability. The trend appears slowly, gradually, penetrating all areas of design, and then disappears in exactly the same way. Most design trends last no more than one or two years. Design in 2017 will continue the trends that started in 2016 with some new changes added, this feeling is well known and familiar and you may have noticed it in the last couple of years. The main influence remains Google's Material Design, with minor changes.

What web design trends await us in 2017

01. Semi Flat Design

For the past few years, flat design has been the most popular in the web design market, but now, under the influence of Material Design, it is becoming more and more one-dimensional. This transition starts with some light shadows, making it a semi-flat design. The evolution of flat design from the minimalist style is moving into new developing technologies. Flat design is still there, but it has undergone some improvements.

Smooth shading adds depth and complexity without ruining the feel of the flat design. This is a new feature added to the flat trend and will continue to develop in 2017.

Project: Resource | UI/UX Tool for Web Services
Authors: Ruslan Latypov; LS Graphics; Anton Mishin; Valery Gurkov

Project: Listener's Playlist

02. Moving photographs (Cinemagraphs)

Cinemagraphs are not those GIF animations that we see everywhere on the Internet. Cinemagraphs are still images with minor elements of movement. This technique makes a simple photo more realistic.

03. More 3D

3D is definitely moving in our direction and we will see this influence in all areas of design. With VR/AR technologies picking up pace quickly, this field is developing quite quickly.

Project: LUV.IT

Project: Open Annual Awards

Project: Air Max '17

Project: NIKE F.C. | 3D Golden balls in the real world

Project: Better You Brand

04. Animations

Animation is more and more present in web design, the format can be any - WebGL CSS, GIFs, SVG or video. Animation has been one of the most important web design trends of the past year, don't be shy about using it.

Project: Nickelodeon Kids Pick The President

Project: AR Virtual Fitness Coach App

Project: ZH OURO- Rio 2016

05. One-page sites/landing pages

In 2017, we will see the growth of one-page sites due to their potential for marketing purposes and their ability to better target visitors.

If you need a landing page, you can order it from me →

06. Geometric Shapes, Patterns, Lines and Circles

This trend started in 2016 and will definitely continue in 2017. You can personalize your site by simply adding some modern shapes, either flat or with a soft shadow.

Project:

Project: DRAP.agency Branding

Project: Pfizer - Active and 50+ for The New York Times

07. Courageous Colors

Use bright colors to stand out. Material and flat design go well with bright colors. You can use the color palette provided by Google to select and combine the colors you want.

Project: Edris — Logo Designed by MiLo

Project: Rendered - Responsive Demo Website for Adobe

Project: b2mach

08. Innovative Scrolling and Parallax

This is a great visual idea that will add uniqueness to any website. From multi-layer parallax to video parallax, everything is possible with the D.ex Multilayer Parallax plugin. This product was developed entirely by the Milothemes studio under the direction of Loredana Papp and Mihai Baldean. It is available for purchase on Envato Market / codecanyon.net

This is a WordPress plugin that allows you to make beautiful Parallax blocks with more than one layer. Be creative and combine layers in any style you want. We've made 12 different examples in the plugin guide to make your first introduction to the wonderful world of parallax easier. Play with layers!

09. Color Transitions

Gradients are one of the biggest trends right now. The trend began to gain popularity in 2016 and continues to grow rapidly after large brands, such as Instagram, decided to change their logo and images from one color to a multi-color transition (gradient). From logos to buttons or picture overlays, this trend is everywhere.

10. Mobile Browsing (Responsive Design)

2015 and 2016 saw a significant increase in views from mobile devices. Tablets and smartphones are now the preferred choice for browsing the web, surpassing desktops and laptops - and the trend continues. Any website that does not have a responsive web design needs to be updated ASAP!

Project: Responsive Website Animation

11. Custom Graphics and Illustrations

Stock photography is still quite popular, but a new trend has emerged in 2016 and will continue to grow in 2017: the use of custom graphics and illustrations. If you want a unique, beautiful website that any visitor will remember you, collaborate with digital designers. This means fewer stock photos and more original, unique images.

12. Creative Use of Neutral Space and Grid

In recent years, web design has been more inclined towards orderly, organized columns and grids, but in 2016 we could see a significant shift towards irregular layers and ultra-modern designs.

13. Tell stories (Storytelling)

Websites are now starting to tell stories to win over the customer. People tend to remember stories more than reading simple (dry) information.

More video about storytelling from Business of Youth:

14. Gradual loading of content (Lazy Loading)

Lazy Loading delays the loading of images on long web pages, this allows information to appear at a specific point while scrolling down, which reduces page load time.

15. Split Content

Split content is now popular in responsive web design; it is splitting the screen into 2 or more parts. Such a split-screen site will show the viewer several equally important messages in one block of the site. This trend appeared in 2015, but in 2017 it will continue to grow and, most likely, you will see it on many sites.

16. Full-Screen Forms

There's no need to navigate to another page to fill out a form because new sites use full-width forms that adapt to responsive design.

17. Videos Everywhere

Video content has increased over the past year, and people have become more demanding of high-quality videos. A video on a website can be short and auto-repeat, showing a product or a large-scale cinematic project that will keep the viewer involved in the story.

Project: Hillsong

18. SEO is important! (SEO is Important)

SEO is very important for a website, so a beautiful website without good SEO will remain an outsider.

19. Hidden Navigation

Hamburger menus create a lot of debate for and against how difficult it is for users to find the menu, but one thing is for sure - this trend is here to stay and people will eventually get used to such menus.

20. Tiny Design Details

Focus on details is very important this year. Small details such as navigation points, etc. Focusing on the small details will make the work complete.

Project: Barometa - Next-generation Job Platform

21. Logo Design Trends

21.1. Minimalism

All the big brands are moving towards simpler, minimal designs and this trend is here to stay.

21.2. Hand drawn

This trend has been in the spotlight for the past few years and this style is great for hipster businesses. It is used for hairdressing salons (barbers), cafes, restaurants, art and craft items.

21.3. Negative space

This is an old trend, but we've seen it pick up steam over the past few years and will continue to grow in 2017, so it's definitely worth taking a closer look at.

21.4. Cropping

It doesn’t get more minimalistic than this trend. It shows only what is enough to indicate in the logo to recognize the company, and nothing more.

21.5. Geometry

This trend is old school, but it's one of those styles that will never die.

21.6. Line art

This trend is popular among new generation businesses

Authors: Sam Healy; Andrea Schlaffer; Jacek Janiczak

21.7. Patterns

Patterns are the new trend, and this repetition is an unusual way to make a business memorable and differentiate it from its competitors. This original direction can also be used in the presentation of logos.

Authors: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner

21.8. Animated logos

Motion design is a popular trend today, and we can see it in all areas of design.

Authors: Javier Miranda Nieto; The Woork Co

21.9. Vintage

Vintage style is still in the game. Even if this trend has been popular for a long time, it still has something to say.

Authors: Roman Dodonov; Mingo Ideas Up; Will Try Further

21.10. Color Transitions

Gradients are everywhere this year—and logos are no exception.

21.11. Illustrations in logos

Illustrations are a good way to create a unique and personalized logo for your business. They are becoming increasingly popular this year.

Authors: Bodea Daniel; Jacek Janiczak

21.12. Photography in logos

The combination of pictures and typography is very popular now. They work very well together and it creates a contrast between them.

22. Typography Trends

22.1. Big, bold & beautiful typography

Typography may be the most important element in creating stunning design. This year the typography will be bold (bold) and large with prominent headings.

Authors: Alexander Laguta

Authors: Quim Marin

Project: Baugasm Series - Pack 4

22.2. Gradients/color transitions in typography

Gradients are without a doubt a trend today, and you will find them in typography as well.

22.3. Visual hierarchy

Hierarchy in typography is important in any design direction. Font size and width can easily indicate which words or headings are prioritized, so use this factor when creating your texts. You should also remember that you can achieve a clear visual hierarchy through text placement and color.

22.4. Tiny Typography

Very small text is usually surrounded by an opposing color space, but you can create a visual difference between the color or image to make the text stand out. You can also use animation to help your text stand out.

Authors: Slava Oleinik; Bahaa Samir; Witty Digital

Project: Baugasm Series - Pack 4

22.5. Animated Typography

Animation is used everywhere now, and typography is no exception. If you use motion software, you can't go wrong this year.

Project: Gotham Pro Animated Typeface Free

22.6. Typography meets photography

The combination between text and photography can produce excellent results. Check out these great examples.

22.7. Geometric shapes and typography

Geometric shapes can work well with typography to create a beautiful design.

22.8. Font pairing

Use two or more fonts together. This is still trending in 2017.

———————————

It is a common belief among designers that trends will be an important part of their work. Keeping yourself updated with the latest updates is considered a must. Many designers judge the work of others through the lens of trends, and tagging some work with #old can be seen as an insult, as if a design doesn't incorporate the latest trends and automatically becomes less valuable.

However, there are reasons to follow the trends. Checking out sites like Awwwards, FWA, or the CSS Design Awards can inspire you and, as a result, help you look beyond your design habits. You can learn about new visual worlds, which you can then (consciously or not) integrate with a graphical language. Watching others work helps improve your own skills as well as stay up to date with the latest technology.

In the last year or two, it has become noticeable that many designers are trying to move away from simple compositions. More and more open, seemingly chaotic, “broken” and “cut” design works are appearing. The glorification of the grid, as it once was, is losing its significance, and the rules are being deliberately and consciously changed. The content begins to move, it seems to be moving, and its parts sometimes overlap and intertwine with each other.

The evolution of Canvas and WebGL plays a big role in this process. Modern designs are often a little messy, less intuitive than minimalist ones, but they certainly leave a lasting impression on users.

What else awaits us in web design in 2017? Here are my predictions.

Open composition

Until recently, the design world was dominated by “closed”, symmetrical and static compositions. Since 2016, many sites have appeared that have moved away from this style. Open compositions with freely arranged elements running somewhere off the screen are gaining popularity - examples of such work can be seen at romainpsd.com, durimel.io or booneselections.com. The distribution of elements on these sites gives the impression that they continue to live behind the monitor.

Asymmetry

2016 also broke the rule of symmetry that has dominated the industry for quite some time. Many designers have created asymmetrical layouts that are far from perfectly balanced on the left and right sides. As examples, I would like to show you the excellent culture.pl site, the chaotic dada-data.net, and the previously mentioned durimel.io.

Diversity

Designers have created more dynamic compositions that feature more intersecting diagonal lines (poigneedemainvirile.com, vanderlanth.io), or more complex shapes (residente.com/en, helloheco.com, predictiveworld.watchdogs.com).

The illusion of chaos

In 2016, many designers consciously and intentionally began to move away from minimalist design. There was a desire for more freedom and a less rigid approach to design. Behind this, of course, is the need for change, but also the usual feeling of boredom. At some point, everyone gets bored of creating simple layouts with simple elements.

However, analyzing the projects of 2016, it becomes noticeable that chaos only seems to be chaos. The layouts are still based on the classic contrast of shapes, colors, textures, sizes, etc. What has changed is the arrangement of the various elements and the harmony of dependency between them. Nowadays, headings, icons or text blocks are more often shifted, despite the banal logic. Despite the fact that they are part of the same thematic block, they are separated and located at a decent distance from each other. They are not aligned to the same edge and have different backings.

Some geometric figures “suspended in the air” have only a decorative purpose (melanie-f). This is also typical for overlapping elements. Texts are partially overlapped by photographs, as on e03.epicurrence.com and melville-design.com, or images are superimposed on each other, as can be seen on olivierbernstein.com.

It is also a distinctive technique to break the usual minimalist harmony. Huge titles contrast sharply with delicate and subtle structures and colors.

Rich backgrounds and patterns

More and more often, backgrounds and patterns appear on which there are small dashes, stripes or dots.

A particularly common pattern is the grid pattern, which provides a “frame” for other layout elements. These elements move in parallax along the grid and are often located chaotically.

Grid pattern

One of the first sites on which such a grid appeared was werkstatt.fr, which, however, did not use characteristic animations.

A slightly different way to use the grid pattern is shown at klimov.agency, brand.uber.com and maisonullens.com. In these cases, the grid has a very specific function - to make the movements of the elements logical. This allows you to rationalize non-standard solutions and provides answers to questions such as “why don’t the margins of the illustration match the margins of the button”? This creates a rhythm, and at the same time justifies its violations.

Decorative details

What has really changed lately is the approach to detail. There is a gradual shift away from minimalism. There are many other elements that have only decorative functions. “Flying” geometric shapes and corresponding fragments. Linear, flimsy icons are slightly detached from the content they illustrate. Underlines and lines are shifted. Graininess and glitches appear, like on bigyouth.fr or kikk.be.

Buttons are less often created as clear rectangles with text inside. They often appear as soft, offset lines, such as those on dahllaw.dk or yasuhiroyokota.com. Another button option is a spectacular hover on Canvas, like on hpsoundincolor.com and cavalierchallenge.com.

Thoughtful concepts - smooth animations between sections

There's nothing new about animations on websites. Moreover, it cannot be said that they contradict the minimalist approach. However, like Canvas, they are an important part of the greater possibilities in web design. And new opportunities are always tempting because they allow you to do something different, fresh and original.

The abundance of animations eliminates the sharp division of the page into sections. The site changes smoothly as you scroll. Content fades in and out using soft animations. The sequences of these transitions are becoming more and more elaborate. These are not just random effects between blocks of content, but a thoughtful concept in which each element appears at the right time (Nationalgeographic.com, stylenovels.com). Animations are part of the website from the start, not just a random detail added.

Interesting animations decorate simple layouts. They add new value and make the page unique. They become the essence of the entire project, as on Ifly50 or tennentbrown.co.nz. Animations often create a beautiful, sleek structure on websites: Cuberto.com, lookbook.wedze.com, skarv-fashion.com or corentinfardeau.fr.

Varied typography

Changing trends can also be seen in the fonts used. Until recently, the entire Internet was dominated by simple, neo-grotesque fonts such as Helvetica, Roboto, Lato or Open Sans. The slightly more "decorative" neo-grotesque is used more often in titles, with a simpler version chosen for the rest of the text. Serif fonts are practically never used.

Over the past 2 years, the situation has begun to change. Designers boldly use different types of fonts. Now they are more willing to work with contrasts - combining serif and sans serif fonts.

There's a lot going on in the typography that's used on websites. Texts are animated, divided into individual letters, and various effects, images and videos are placed in the texts.

Greater technological capabilities and bolder decisions are driving the growth of diversity in web typography.

Geometric fonts

Geometric sans-serif fonts have become very popular, such as the classic Futura, ITC Avant Garde, Proxima Nova, or those available in the Google library - Poppins or Montserrat. These fonts are much more expressive than the “invisible” neo-sans serif. A more “aggressive” and expressive character of a website can be achieved by using greater thickness, as on the fairly old site hugeinc.com, but here are newer examples: sequence.co.uk, startuplab.no or www.protest.eu.

Serif fonts

Very often, serif fonts are used not only for body text, but also for large headings. Decorative ones are especially often used, such as those on duhaihang.com or jennyjohannesson.com. Other popular fonts include those related to Bodoni or Didot.

Monospace fonts (“typewriter”)

Using proportional fonts, which are usually associated with typewriters, is innovative. Now they can be seen on sites such as admirhadzic.com, cuberto.com or designembraced.com.

Contrasting font combination

In 2016, it was common to move away from soft, harmonious combinations of fonts for more pronounced contrast. Expressive combinations were enhanced by the high contrast of text sizes. Large and decorative fonts were paired with simple geometric ones, just as geometric headings were paired with serif fonts in content text.

Huge typography as part of the main image

A very cool and common thing was the use of very large text sizes on the main images. This created a very strong contrast between the headlines and the rest of the content. Examples can be seen at oursroux.com, femmefatale.paris or monsieurcaillou.com.

Sometimes, as a decoration, lettering is used at the beginning, such as coretinfardeau.fr or nurturedigital.com.

A prime example of the above is jennyjohannesson.com, which uses the decorative qualities of the serif font Goku.

Additional effects applicable to typography

One can observe strong integration between typography and images, videos and animations. Individual sections are connected—the typography interacts with both the background and other elements. Random placement of typography on a dark image is a thing of the past. Today, designers are building interesting relationships between all the elements, weaving typography into the background, animating it, etc.

Large letter sizes in texts

When I first started my web design journey, I had an old habit of using font size 10 that I picked up when I worked in print. However, I quickly realized that on the web the optimal readable size is 14.

Nowadays, it is noticeable that designers are using much larger fonts, especially when it comes to serif fonts.

Come to the dark side

In 2016, designers used different colors. But you can notice a tendency towards choosing dark tones.

The trend of creating all-white websites is becoming less popular, and is giving way to gray variations, textures and patterns. It is now quite common to create darker sites, where black or a gradation of it fills the background and creates a slightly dark, grotesque mood.

Despite this, it is difficult to predict how this trend will grow over the course of the year. Colors, however, are part of brands' visual identity, so it's hard to expect them to fundamentally change their communications based solely on the popularity of certain trends.

Summarize

2017 promises many exciting prospects, but there are also some dangers on the horizon.

Personally, I'm afraid that many web designers can be a little overconfident when it comes to working with Canvas. Add to this new trends, and you get a lot of flashy and obscure websites for a wide audience.

I'm also a little concerned about the fact that many of today's creations won't work properly on all browsers and mobile devices. I got the impression that we were back at the starting point. We are now in a situation similar to the times when Flash, despite ruling the Internet, was blamed for its lack of responsiveness and high Internet connection requirements.

Another thing that scares me is the fact that new trends towards “deconstruction” will be impossible to apply to commercial clients, or simply will not fit their communication profile. (Government or banking websites cannot be cluttered).

I wonder how long it will take for new trends to take hold in the commercial market. It's worth noting that the vast majority of the websites I used as examples were created for agencies, designers and the creative industry. These sites often set their own rules and are usually ahead of the curve compared to other industries. Sometimes trends take a long time to become popular in a niche and break into the commercial market. Then their shape is smoothed out a little to suit everyone.

Despite all this, I think 2017 looks very promising when it comes to web design. To say that the era of minimalism is coming to an end would be too much, but it is definitely undergoing changes and development.

Minimalism will become more complex and detailed. Websites this year will increasingly use Canvas. We will see a lot of “chaos”, variety of forms and expression in future projects. This is good news for designers who are fed up with minimalistic Flat, Material or Metro design styles.

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 usability principles 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 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 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 have read the article and found outdated elements, pay attention to the service

On New Year's Eve, someone tells fortunes using coffee grounds and throws their slippers over their shoulder. And designers are trying to probe the future and identify trends that will become the main theme of 2017. Let’s try too. We will rely not only on taste and the fact that “the art director said so,” but also on analysis.

1. Video is a functional element

The texts are too difficult, you need to concentrate. Pictures are not informative. And video is the type of content that a modern Internet user is ready to consume and sip on. And when you tell the user a story - for example, how a complex website development process works - use it. Film and show how an analyst makes prototypes and a designer draws mockups. Immerse the user in the story and answer questions they might have.

And stop pushing videos everywhere where the customer asks for something breathtaking within the budget. Video for beauty - the user's broken hope. He looks and hopes that they will show him something useful, tell him a story. But no. Therefore, as a decorative element of web design that does not perform a useful function, video remains in 2016.

Yes: A video that answers user questions and solves website problems.
No: The video is in the background because it’s beautiful and everyone does it that way.

2. Cinemagrams instead of videos

Use cinemagrams. They are more interesting than static images, but do not give false hope to users, like videos without a story or purpose.

Carefully! The cinemagrams are terribly sticky.

3. Font graphics

Another alternative to videos and images is font graphics. It both decorates the site and makes it more informative. The main concern here is quality content. But that's a completely different story.

4. Icons are the main decorative element

Why do you need images, videos and font twists, if you can add “wow” to the icons that will already be on the site? Seriously, add some custom animation and call it a day. You will be the most trendy.

5. Sticky infographics

The problem for users is that they become less diligent. And forgetful as goldfish - they went to the site, then the phone blinked (oh, a false alarm - just a glint of sunlight), returned to the monitor and cannot remember what they were doing here. And they leave.

The problem is getting worse every year. Therefore, the designer’s task is to hook the user and force him to interact with the content, even if it is boring statistics. Especially (!) if these are boring statistics.

Animate it, paint it in bright colors, force the user to interact with it - do everything to pull the user in and not let go until the end of the page.

6. Combined navigation

A technique that is gaining popularity - combining horizontal and vertical scrolling - will also brighten up the user’s drab everyday life, interest him and force him to thoughtfully interact with the site.

7. Avoiding the hamburger menu

In 99.9% of web design forecasts for 2015 and 2016, the authors promise that this year designers will certainly abandon the hamburger menu. Just like that. Well, let’s support the tradition and also say: in 2017, the hamburger menu will not be in trend, don’t do that, ugh!

The problem with the three-bar icon is that it is not intuitive. It is recognized by seasoned kalachi who have already interacted with it and know what is hidden behind the symbol. But more newcomers are appearing on the Internet: both very small tadpoles and older people. And the hamburger menu icon is neither familiar nor understandable to them. They can only find out what she is hiding and where the hell the menu is after going through a painful experience.

Let’s be realistic: it’s unlikely that you’ll be able to completely abandon the hamburger menu. But before you stick it in, look for a possible alternative on each project.

studio-spoon.co.jp

8. Frame around the site

A popular solution is not to stretch the site to fill the entire screen, but to place it in a neat frame. It’s nice and there is free space that can be used for navigation (why not, since the hamburger menu is dying).

teletype.online

9. More emoji

The less effort the user spends to react, the more willing he will be to do so. And they haven’t come up with any simpler reactions than emojis. For now, on websites you can only like content, the maximum is to give a Facebook Emote. But it's time to switch to emoji, fellow designers.

10. Material design

Yes, he is still with us.

11. More Mobile First

There are more and more users viewing websites from mobile phones, which is why the Mobile First approach is being more easily accepted by clients every year. It is no longer considered a strange experiment, but a method that justifies itself. So get ready for an avalanche of sites of the same type, but so convenient for mobile phones.

12. More micro-interactions

Websites will absorb more features from mobile applications. In 2017, there will be amazing micro-interactions that will make your fingers shiver. Like a heart on Twitter - well, it’s a work of art! I want to press him forever. There will be more of this in Mobile First and classic projects.

13. CTAs are even more intrusive

The designer stirs up beauty for beauty’s sake only on the table and on Dribbble. In other cases (in those for which money is paid), marketers are breathing heavily in his ear, who need something brighter here and a bigger button there. It seems that in 2016 there was a turning point and a rethinking of these requirements - expect big, juicy, eye-catching CTA blocks in 2017. Such that marketers have nothing to add to them.

strv.com

14. Nostalgia for the 80s

On the refined Internet, designers miss match-head lamp pixels, the eight-bit sound of set-top boxes and the noise of tube TVs. And they compensate for their longing for the 80s and 90s in website design. Be on trend - add acidic colors, interference and glitches to your projects.

retrominder.tv

15. Avoid stock photos

Stock images have already set the teeth on edge, seriously. The hamburger menu is worse, and it’s easier to replace them. So let's film ours.

The 21st century is in the yard, kamon. Phones have become such that they take high-quality photos. Therefore, it’s not a problem to film employees or the work process right now on your phone. The main thing is time and desire to make a good project.

16. Greens

The guys from Pantone believe that the color of 2017 is this little green Greenery. Let's listen and add it to our list.

17. A New Approach to Prototyping

Whatever wonderful design you draw, the main thing is to present it in such a way that the client falls in love. Or at least saw it the way you see it.

A static layout can barely cope with this task, so in 2017 you need to improve your presentation skills. So that immediately, before layout, the customer sees all the invented pew-pews, and does not imagine them in his mind. Otherwise, he will imagine something wrong for himself, creating expectations that the developers will not be able to justify.
Now it’s not comme il faut for a designer to simply draw and show a picture. You need to be able to handle either one of the prototyping tools to create an interactive template, or improve your animation skills.
Here is your arsenal for the coming year, colleagues. But don't squabble with a customer who wants a videophone. Don't shove pixel elements and emojis where you need clean, minimalistic e-commerce. And don’t bombard reluctant clients on Skype with links to this article. Use trends wisely - or don't use them at all. Anyway, in three years they will be completely updated :)

Lines, colors, light and shade, space and shapes are the elements that make up a painting. Each era had its own tendencies in representing the world. Web designers are the same as artists, only they create in digital format. And if trends in art did not change so often, then web design is transformed from year to year. We will try to compile a guide to graphic design trends and predict how websites will change in 2017. You can read about web design trends for 2018.

So, 14 turns on the way to a fashionable interface:

1. Focus on content

What is more important: content or page design. The answer is simple - the design should present the content favorably. Designers of the WebFlow service (website builder) propose to end the struggle for supremacy in 2017 by giving preference to content. A user visits a website looking for an answer to a query, whether it’s a product, a service, or a useful article. The web designer’s task is to present the content as conveniently as possible for a person.

2. Avoiding “hamburgers”

The small and convenient menu icon in the form of three stripes, which was nicknamed “hamburger” for its resemblance to fast food layers, is gradually losing its popularity. It's used too often. In 2017, experiments with navigation and unusual arrangement of menu sections, for example on a frame around the site, are encouraged.

3. “Card-based design”

Card web design has quickly conquered the Internet. The advantages of this design method:

• convenient location of blocks on the site;
• visually advantageous presentation of content;
• adaptability for mobile devices.

To the question: to be or not to be card design in 2017, there is no unanimous answer. It will be used because it has already proven its effectiveness.

But block design is gradually losing its position as a favorite due to the “cluttered” nature of such an interface. Minimalism and flat design remain popular. Clear and convenient navigation elements without unnecessary maneuvers, the use of only a few colors in the design are time-tested techniques.

4. Broken mesh

This trend encourages designers to think outside the box. Try using a non-standard grid on the site - let the blocks “overlap” each other a little, and let the texts go beyond the usual boundaries.

Originality is always in fashion. Western designers have already tried non-standard layouts and new approaches to graphic design. The most daring solutions can be implemented using Flexbox and CSS Grid modules.

5. Catchy unusual fonts - typography bias

Large font has been one of the main elements of web design for some time now. The trend will only strengthen in the new year. The trend is handwritten inscriptions and hand-made icons stylized.

An excellent addition to the website design would be font graphics (if appropriate).

6. Responsive design

Website versatility for devices with large and small screens is no longer a new trend. The “mobile first” approach is still relevant in 2017. In addition to the ability to adapt to mobile gadgets, in the near future sites should adapt to a specific user depending on:

• age;
• skills (competencies).

For example, fonts, brightness of colors, navigation will change depending on who visited the site: a pensioner, a preschooler, an Internet novice or a confident user. This will become possible thanks to the development of metadata.

7. Colors

Rich monotonous colors, their shades and halftones have moved from the trends of last year to this year. Designers continue to use gradients and create interesting transitions. By the way, if you can’t decide on the choice of color, take a closer look at the fashionable “Greenery”.

It resembles fresh spring greenery and will help add color accents to the site. Experts from the Pantone Color Institute named it the color of 2017.

8. Infographics

The technique is not new, but effective. With the help of infographics, any statistics on the site is transformed into a visually understandable picture with interesting content.

9. Animations

Static pages are boring. It is much more interesting for the user to “walk” around a site with animated icons. Draw attention with animation to those elements that are beneficial to you, for example, to the “Buy” button.

Use microinteractions so that the user sees a response to clicks, transitions, and confirmations on the site. Then mechanical actions will become interactive and attractive.

10. Background photos and videos

Animation is good, but wide-format background photos and videos for website design are even better. Video adds dynamics to a web resource and allows you to immerse the user in a certain story, look “behind the scenes” of the internal processes of a company or brand. Storytelling in web design is still relevant. Photo - illustrates, creating an atmosphere.

If you are tired of these elements, use cinemagraphs (a symbiosis of photos and videos). In such an image, only one element continuously moves smoothly, as if part of the photograph comes to life.

11. Stop “stock”!

Stock photos are found on every corner of the Internet, and this makes a site lose its personality. In 2017, the web gives preference to unique images.

12. Scrolling +

Scrolling has gained popularity thanks to mobile gadgets, which make “scrolling” more convenient. But many people are annoyed by not being able to get to the bottom of the page. Among the trends of 2017 is the combination of scrolling and page navigation. Let the user choose how to view the content.

13. Parallax scrolling

In 2017, the parallax technique (movement at different speeds of the background and foreground) will gain a new breath - the development of more complex multi-layer techniques. Experiment with parallax, captivate the person who visits the site with interactive elements. But do not overdo it so as not to confuse the user.

14. 3D panoramas

360° panoramas are another way to effectively demonstrate a product to the user or “give” the visitor the opportunity to be virtually present in some place, for example, in a company office or hotel.

These are the main web design trends for 2017. But don't focus only on them. Experiment, learn from experienced colleagues, and then your site will become original and understandable to all users. And we are always ready for you in this!