Trends in web design. Geometric shapes, lines and patterns
Every year the pace of life increases, and with it the amount of information grows. Users are spending less and less time studying websites, while the number of demands placed on them is increasing. Tools for attracting attention that were at the top a year ago are losing their effectiveness. To stay on trend and create turnkey websites that attract customers, web designers should take into account the main trends of 2017 while working. What will they be like? Let's look at it in this article.
Website design trends 2017:
- Single page sites
This trend is becoming more common thanks to mobile devices. All information is placed on one page, which is convenient to scroll through on your phone or tablet without using clicks.
- Scrolling
Still perfect solution for sites with the same type of content. But do not forget that it adds weight to the page and complicates the search among already covered material, so it is not recommended for creating online stores. To optimize work, you can use a combination of classic navigation and scrolling.
- Minimalist design
- Bright colors
The popularity of bright colors is growing. Use more palettes and shades if you want to keep up with fashion. To create freedom of space and a feeling of air, you can use contrasting shades. Different shades and gradients of colors will help you better differentiate the content they highlight.
- Typography
Fonts are still strong graphic element and play one of the main roles in creating the aesthetics of a web page, displacing other elements. A good colorful headline also looks great on tablets and smartphones and helps convey Announcement up to the user.
- Animation
Small animation elements and interactive design attract attention, make the site more interesting and improve user interaction with it. And the development of JavaScript libraries makes it easier to create such pages.
- Video
Widescreen background photographs are being replaced by widescreen videos. Like animation, it not only creates interest on the part of the user, but also allows you to bring the page to life. The main thing here is to use high quality image, corresponding to the general style of the site. Video helps not only to attract the viewer’s attention, but also makes it possible to convey an informational message to him, for example, talk about the company.
Let's figure out what it means to be popular, fashionable and modern in web design in 2017. To do this, let's look at the main trends in web design. Most of them wander from year to year and have already become an integral part of modern website building. This is especially related to the development mobile technologies, communication channels and device improvements. For example, a trend such as website mobility has become mandatory. The commercialization of the Internet also dictates its strict conditions to designers and web developers. At the same time, some trends weaken and become less popular, but still remain quite active. Fashionable hobbies characteristic of a short period also appear. For example, last year these were icons with a long shadow of the objects depicted. This year geometric patterns have become popular, we will also look at them. So, let's take it in order.
1. Mobile, responsive design
Today, perhaps, the most important and mandatory trend. The site should look equally good on all resolutions of monitors, laptops, mobile smartphones and tablets. Search engines, by the way, very closely monitor how well a site is adapted to various devices, and based on this they determine its place in search results. 
2. Active typography
For several years now one of the most popular trends. Large fonts and typography on the site have two components. Firstly, aesthetic - beautiful lines, curves and lettering in themselves are an decoration and decorative element. And secondly, this is functionality - with the help of large font you can unambiguously and clearly convey the main idea to the visitor. 
3. Widescreen video
The full-screen video on the background of the site undoubtedly immediately captures our attention. This good welcome to interest the visitor. Modern developments in technology make it easy to embed videos on a website, which means designers will increasingly use this technique. However, there is one caveat: watching the video is interesting only the first time, the second and third time it gets boring. Therefore, this technique is only effective for new visitors.
5. Cinemagraphs
A good alternative to widescreen video and great photos on the background. Cinemagraphs are photographs in which small, repetitive movements occur. They are usually presented in gif format and give the viewer the illusion of watching a video. More about cinemagraphs with big amount examples can be found in the selection 
6. Flat design
Another powerful trend recent years. Websites designed in flat color tend to be neat and clear. But, in Lately, a new type of flat design has appeared - Semi flat. This is when the entire design is done in flat color and only one element has shadow, gradient or texture. As a rule, this element is a button, which is given volume or prominence to attract the attention of visitors.
7. Microinteraction on the site
Nowadays, much attention in web design is paid to the micro-interaction of the functionality and design of the site with the visitor. The essence of which is that the visitor can clearly see the result of his action on the site, be it an adjustment custom settings, following a link, confirming an operation, interacting with active icons, buttons, switches, counters and other elements.
8. Animation of objects
The capabilities of modern html5 and css3 allow you to use a large arsenal of visual effects on the site. This makes interaction with the page more interesting and exciting for the visitor. So in the new year we will also see the most unexpected interactive micro-movements of objects, usually reacting to mouse movement. Perhaps we'll see examples of more complex animation.
9. Vibrant color schemes
Popular fashionable colors of 2017 favor brightness and saturation. Interesting original shades of scarlet, mustard, yellow, emerald, deep blue, as well as red, lilac and chocolate will help your site stand out and acquire its own unique style. 
10. Site scrolling
Because site scrolling is ideal for mobile devices, then his presence will be significant in 2017. The only thing is that scrolling does not leave room for user interaction, and therefore, there is a certain fatigue from endlessly loading content. Perhaps the trend will turn towards a combination of simple control elements with scrolling.
11. Parallax effect
Parallax is a change in the apparent position of an object relative to a distant background. In web design, this effect is used when scrolling a site, when objects and background scroll at different speeds, resulting in the illusion of three-dimensionality. The trend is quite stable, so we will see sites with parallax more than once.
12. Modular design
Modular design, or a card interface consisting of self-contained blocks of meaning, has been popular for some time. This trend is very good for mobile devices, since the blocks line up well for any screen resolution. But on large sites they look quite the same and are difficult to hierarchy and structuring.
13. One-pagers
One-page sites, landing pages, landing pages have become an integral part of the modern Internet. You can read more about what a landing page is in the article and. In 2017, landing pages will have an increased emphasis on a button calling to action - order, call, sign up, etc. Everything else that distracts the attention of a potential visitor will be cut off.
14. Graphic advertising
I would also like to note one thing that I remember about the past year, and most likely the trend will continue in 2017. Due to the commercialization of the Runet and the growth of online commerce, the demand for graphic promotional materials for advertising and promotion has increased significantly - banners, teasers, cards, flyers. 
15. Automation of typical processes
All standard solutions and procedures on the website are gradually being replaced by automated processes, which eliminates the need to communicate with support service or online consultants. In this regard, the popularity of various applications and extensions is growing. Now you can buy a product or service, place an order, make an appointment, reserve seats, transfer money, fill out a form or take a test - all this can be done online in a few mouse clicks.
16. Infographics
Graphic representation in the form of infographics is still popular and in demand. Text accompaniment beautiful picture or an icon together with stylish design elements make the infographic aesthetically attractive. Comparative infographics are especially visually clear and interesting - such as what happened, what happened, yes, no, pros and cons, dos and don’ts, etc. You can also use infographics to tell a step-by-step story or vividly present boring statistics. 
17. Hamburger menu
Hamburger menu is a visual icon of three horizontal stripes, usually at the top in the corner of the site, when clicked it opens or slides out from the side full menu. Many experts predict that this trend will fade, due to the fact that most inexperienced users simply do not understand the purpose of this icon. Therefore, web designers tend to favor simplified navigation. But, nevertheless, we will see the hamburger menu more than once on newly created sites.
18. Icons
Icons, as a way of presenting information and a visualization tool, have been and remain one of the most popular and favorite trends among designers. It is enough to place the corresponding thematic icons near the blocks with text - and now the entire text acquires logical and visual orderliness and structure. So, in the coming year we continue to actively use icons.
19. Letterstacking
Letter stacking is text in a square. Essentially, this is an example of a complex creative solution - you need to imagine long text in the volume of a tiny space. At the same time, it should look beautiful and original. This year it is also fashionable. 
20. Blank button
To save space and space on mobile devices, some time ago a blank button appeared - a large inscription with a square outline around the word. Such a button gives an overview of the background behind the button and at the same time retains its functionality as a full-fledged button. Plus, as a design element, such a button looks stylish and neat.
21. Avoid stock photos
Some experts have noticed that designers are starting to abandon stock photos. Since modern devices allow you to quickly and efficiently take a photo yourself, you can avoid stock impersonality and uniformity and take your own unique photo and create your own unique design.
22. Unusual angles in the photo
Finding interesting angles in photos has become available to any owner of a smartphone with a camera. In this regard, creativity when creating photos is off the charts and we can decorate the site unique picture with an unusual viewing angle or perspective. 
23. Carousel
The carousel slider, which came into design life several years ago, is still popular and relevant when designing websites. Using a wide slider, it is convenient to rotate the main news, as well as present current promotions, collections and other relevant information that the visitor sees immediately upon entering the site.
24. Self-playing audio and video
But this trend is hello from the 2000s. I remember back then it was fashionable to play a sound when you hit a website. And this one for many. I can’t say that the audio accompaniment pleases me, but perhaps moderate use will be unobtrusive. Well, self-playing video is more of a tribute to advertising, as for me. Well, plus the desire to keep the visitor’s attention in the feed. Not the most pleasant trend, but commercially necessary.
25. Geometric patterns
Well, we’ll end our review with a short-term fashion trend in the form of various geometric designs and patterns. They became unexpectedly popular at the end of last year. Well, another way to make your website design stand out and unique. 
Infographic “Web design trends 2017”
I offer you an infographic that clearly presents all the trends and trends in web design. Download the picture in large size You can follow this link on DeviantArt. A page on DeviantArt will open in a new window. There, click on the word Download to the right of the picture and save the picture to your computer.
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 with Google's Material Design, with minor changes.
What trends in web design await us in 2017
01. Semi Flat Design
The last few years have been flat flat design was 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. The 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, which 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 color palette, presented 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 made 12 various examples in the plugin guide to make your first acquaintance with 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 responsive web design need to update 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 site split screen will show the viewer several equally important messages in one site block. 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 high quality video. 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. Focus on small details will make the job 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 logo presentation.
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 - good way make a unique and individual 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 designs. 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 must also remember that you can achieve an understandable visual hierarchy using 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 trendy in 2017.
———————————
” by John Moore Williams, Head of Content Strategy at Webflow.
The end of the current year is just around the corner, and every web designer has at least once asked an important question: what will define web design in the coming 2017? I decided to find the answer to this question and asked WebFlow designers what trends they thought would dominate the next 365 days. I also gave my own comments to their thoughts.
First of all, let's get the opinion of Webflow's lead designer Sergie Magdalin.
1. Content-Driven Design
“The arrangement of design elements within a given structure should be such that the reader can easily grasp the main idea without reducing his normal reading speed” -Hermann Zapf
The past few years have seen a dramatic shift in thinking about the role of design in business. Previously, design was seen as the final step in the process of creating an object: the designer-magician comes at the end and sprinkles magic dust on our product to make it better than the competition.
It was very interesting to watch the metamorphoses occurring with development priorities.
And the most beautiful thing about these metamorphoses was the transition to a model where content again stands at the head of the table. Designers around the world have realized that users visit websites primarily for the content, be it short tweets, long-form specialized articles, or the latest Internet memes. The ultimate role of design is to present content in the most attractive, understandable way and get the best results from it.
This is one of the reasons for the shift from “skeuomorphic” design (where elements are depicted as similar as possible to their counterparts in the real world) to flat, minimalist design. From these considerations, Google created Material Design.
Of course, as Newton's third law states, for every action there is an equally strong reaction. Many designers believe that the fashion for flat design has “killed” the very spirit of design. We expect this debate to continue in the coming year, but the focus will remain on content - the basis of any design work.
2. High-quality interaction between designers and developers and designers among themselves
Design's importance in shaping business is increasing, so more and more emphasis is placed on designers working together with their fellow designers and their fellow developers.
This concern for interaction with designers has arisen in part due to the massive volume of mobile and web applications that are being developed today. In addition to the fact that such giant corporations as Google, Facebook, Twitter and LinkedIn require the titanic work of a design team with absolutely different sides, designers need to always be on the same page with each other. This means greater communication about the project and how to work together most effectively is required.
To make this task easier, many tools have been created, from collaborative templates and boards in Webflow's Team to Figma, a graphical interface editor that shows changes in real time. I am sure that in 2017 these platforms will be improved and supplemented.
When it comes to collaboration between designers and developers, a lot of attention is paid to the all-important process of handing off work. For example, instead of sending heavy and bulky static images Designers can now share live rendered mockups with tools like InVision, Marvel, UXPin.
Carson Miller weighed in on this in his recent article “The Future of Front-End Design” on TechCrunch:
“Sooner or later, tools for creating designs and design patterns will completely replace front-end development. You can easily create a high-quality base for any of your frameworks without having to write code by hand.”
3. Simplified designer-to-developer process
The design and prototyping tools mentioned above allow you to visualize the various stages of collaboration through visualizations that range from animated Keynote files to fully functional websites. This method of sharing work material reduces response time within the project, thereby increasing the quality of the design, increasing the speed of the development team and reducing the possibility of disappointment with the result. It also improves customer interaction. For example, for many WebFlow users, client meetings have turned into full-fledged work meetings where designers can quickly implement ideas and everyone can test their ideas almost immediately.
Web design trends in the coming year according to product designer Gadzhi Kharkharov:
4. Large, loud headline
As the world of web design begins to focus on content, it's increasingly common to see inspirational headlines on websites with matching fonts that are as large and bold as their content.
The #MadeInWebflow Heco Partners
As you can see from the examples, “large” and “bold” do not only refer to the description of the font. Rather, it is about dedicating a significant portion of the home screen to a simple, but strong and self-contained statement about the product or service. Such a headline should contain the essence and be understandable for any visitor, avoiding unnecessary pomposity (okay, the phrase “Design the impossible” may sound too loud).
In today's busy, information-overloaded environment, short, powerful statements like these work well for any brand.
5. Complex markup that comes from the basics of graphic design
If we want to predict the development of web design (by at least, its visual side), we need to turn to the history of the development of graphic design.
Over the past few years, web page layout has been limited CSS capabilities, but new modules like Flexbox and CSS Grid (coming in March 2017) will allow you to realize your wildest web markup ideas.
Our the main task now - to understand how the new grid layout of blocks should work within the framework of adaptive design.
Here are some examples of what to expect (assuming you have a browser that supports CSS Grid, such as Firefox Nightly, Safari Technical Preview, or Chrome Canary):
Experimental Layout Lab Jen Simmons
Pay attention to the style of the main block - a clear reference to the history of graphic design.
Grid by Example
You can see more examples on the website.
6. More SVGs
SVG (scalable vector graphics) Vector graphics) has more benefits for web designers and developers than traditional image formats such as JPG, PNG or GIF.
Basic pros of SVG are described in the very name of the format - these are scalability and vector. Unlike raster and pixel based formats, SVG images are made up of vectors - mathematical descriptions object shapes. This means that SVG is resolution independent and images in this format will look great on any screen and device. There is no need to worry about images being blurry on the retina.
But that is not all. SVG is also famous for not requiring HTTP requests to be sent. If you've ever checked your website's loading speed, you may have noticed that these HTTP requests can really slow down your site. There is no such problem with SVG.
7. Tools for Rule-Based Responsive Design
Responsive design has completely changed the way we look at web applications and create them.
But, oddly enough, the principle of operation of design programs has not changed at all. Most of these tools work like this: you need to create a similar page again and again to various devices and permissions. In an industry that requires rapid idea generation, fast development and quick launch, such waste of time is simply unacceptable.
A new wave of design tools (such as Figma) is expected to be based on “rules” that adjust the appearance of sites on different screens and devices, thereby reducing the number of repeated designer steps. Such tools are based on the spatial relationships of elements and, as we change screen size or device, they strive to maintain these relationships by changing the sizes of elements and the padding between them.
By the way, today there are similar tools for website layout not only for designers, but also for ordinary users. For example, TruVisibility.com - the platform adapts the created design precisely according to certain rules, according to which the layout and sizes of elements are adjusted to the screen size. All that remains is to make a few adjustments to ensure that the web page looks the way it should on devices. The user does not need to re-create the version for mobile devices, and this significantly saves his time.
Design trends for 2017 according to Ryan Morrison, senior graphic designer.
8. More bright colors
When the era of minimalism and brutalism began in web design in 2016, designers tried to add more personality to their work without going beyond fashionable styles. And there are at least a few cases where bright and bold colors have been used very successfully.
Take a look at the new Asana site with a splash of color:
New icon Instagram apps received a lot of criticism, but this redesign undoubtedly refreshed the brand:
Everything Stripe does does not require a separate view:
As you can see, it's not just bright and bold colors. Gradients are also back in style, blending and blurring colors in shades reminiscent of a midday sky or a flaming sunset. It's something of a renaissance of naturalism with vibrant colors and bold gradients, and I personally look forward to seeing more of this kind of work in 2017.
Although, maybe it’s worth reducing the brightness a little? We're watching you, Asana.
9. More emphasis on animation
Animated elements have been playing for a long time key role in the web interface, and this trend will continue in 2017. In fact, as long as designers have access to tools to develop compelling animations, we will see these effects become more visible and more sophisticated.
This topic is especially important because animation creation is becoming easier every day. At the 2016 Design & Content Conference, animation guru Val Head emphasized that when designing animated elements, designers should keep the brand's goals and needs in mind to achieve the effect content creators expect. If this advice is heeded, the animation will perform tasks that are meaningful to the brand, and not just give the user a migraine.
10. Unusual markings
2016, like the previous few years, is famous for the endless discussions that web design is either dying or losing its spirit.
Those who are trying to convince everyone that web design is dead are clearly exaggerating. Many continue to look for ways to present content to users in new ways. One of the most tempting ways is to break the system and ignore the usual grid layout dictated by the rules of responsive design.
The “broken” marking method involves elements going beyond the meticulously aligned grid. Such techniques may sometimes even seem unpleasant to the eye. For example:
Texts and images colliding with each other:
Texts and images scattered (seemingly) randomly across the page:
This was the first part of the translation of the article “18 web design trends in 2017”. Do you agree with the opinions of Webflow experts? What kind of web design do you think will be in vogue in the coming year?
Under New Year someone tells fortunes on the 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 modern user The Internet is ready to consume and smack its lips. 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 how decorative element web design, not performing useful function, the 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. Cute and appears free space, which can be tailored 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 - that’s why the approach Mobile First every year it is more easily accepted by clients. 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
Sites will absorb more chips 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 :)