Fashionable colors in web design. Return to the roots of minimalism. Avoiding "typical" stock photos

In the era of developing IT technologies, you simply cannot stand aside and watch what is happening. You need to be this happening. In order not to be an outsider, you need to draw knowledge from all possible and impossible sources and keep abreast of all events. 2016 is coming to an end, which means that 2017 is already around the corner and will bring something new to the field of web development. And what exactly, you will read in this article!

Don't be an outsider, keep up with the times.

Bots

Simple web pages are no longer so popular, they are becoming more and more interactive, moreover, after a while our online life will be so simplified by various interactive prompts that we will not have to strain our brains at all. Bots are now widely used and this is just the beginning. Everyone knows the Slack application for corporate communication, and there you can also find a bot that greets you, asks for your name and immediately inserts it into your profile. Bots are popping up in many other tools and applications, ushering in the era of online assistants.

Motion UI

Animation, video, GIFs have long become our everyday life, everything is so lively and attractive, what else does the user need? They are widely used to quickly create CSS transitions and animations to ensure ease of use. The latest version of Motion UI is equipped with an animation batch system, flexible CSS templates with advanced capabilities for full transition and is able to work with all kinds of JavaScript animation libraries. We are more than confident that mobility will completely replace the use of static images.

Adaptability

Mobile first is the slogan of our time, every day every person, at least once (not to mention those addicts who actually live in their hands with a phone) search for information on the Internet, send messages or make calls, so their use should be as convenient as possible. If you are a website owner and still haven’t heard about responsiveness, it’s time to grab your feet and implement it , in order to provide your potential client with comfort in using your website. As you may have already noticed, this is a real must-have in the world of web design and development; in addition, it will help you save on mobile application development.

One page site

Are you confused by sites with a bunch of pages, where there is so much of everything and everything is so incomprehensible? Don't worry, the era of one-page websites is just around the corner. This type of site is very popular among large companies, they are more convenient to use, and it is easier to find the information needed by a user who has visited the site for a specific purpose.

Javascript is on the rise now

Javascript is the future, despite rumors that it has shortcomings and weaknesses. No one disputes that they are indeed present, but what is ideal in this world? Even Mac OS uses JS in its hardware. Moreover, its front-end libraries such as Angular, Node, React are quickly gaining popularity, as well as other smaller libraries.

It's no surprise that Javascript has become an integral part of the standard web development stack, along with HTML and CSS. And this fact speaks for itself.

Parallax effect

This effect is most often used, but not many people know for sure exactly what it is called. To clarify: this is the best way to add 3D layers to your website , it can also be used to add stunning 3D effect.

Trends that will change the world

In this article, we have collected all the promising web development trends that will immediately change the world. But we don’t yet know what trends 2017 has in store for us. Stay up to date with modern technologies and maybe one day you will be so inspired by what is happening that you will come up with something revolutionary yourself?

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 site. The habit of shopping and ordering services via the Internet increases the demand for convenient sites.

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

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

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

2. Long texts will disappear

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

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

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

Add animation to your website wisely. It must 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

” 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 being 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 a Herculean design team from completely 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 thanks to 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, websites are increasingly seeing inspiring headlines 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 (at least its visual side), we need to look at the history of graphic design.

For the past few years, web page layout has been limited to CSS, but new modules like Flexbox and CSS Grid (coming in March 2017) will allow you to realize your wildest web layout ideas.

Our main task now is to understand how the new grid layout of blocks should work within the framework of responsive 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 SVG

SVG (scalable vector graphics) has more benefits for web designers and developers than traditional image formats such as JPG, PNG or GIF.

The main advantages of SVG are described in the very name of the format - scalability and vector. Unlike raster- and pixel-based formats, SVG images are made up of vectors—mathematical descriptions of an object's shape. 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 over and over again for different devices and resolutions. In an industry that demands fast idea generation, fast development, and fast launch, this 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:

Instagram's new app icon has received a lot of criticism, but this redesign has certainly 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 blazing 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 long played a 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?

Given the active development of technology, our communication with the computer is becoming more and more natural, and the possibility of interactive communication using voice appears. Therefore, the future belongs to 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, simple animation will be increasingly used; it is not so annoying, but it perfectly fulfills 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 the header of the site for 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 is a 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 in your video should create a feeling of authenticity, sincerity, and authenticity. Be sure to use a variety of tactics: customer reviews, reasoned responses to potential 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 call back button, is fixed and always available without additional actions.

Scrolling helps to smoothly tell an interesting story, show a lot of photos, and thereby overcome user doubts and encourage conversion.

A well-designed 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 checkout process to increase the average check. 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 get creative with these notifications and don't ask for anything in return, such as offering free shipping, writing down a coupon code, or downloading a free trial, the approach becomes less than irritating.

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 to 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. The result is a better web browsing experience.

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

1. Pop-out navigation

Today, when mobile audiences are 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 menus, created specifically for smartphones, improve UX on large 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 first screen appearance
• More flexible design structure

Read also: 20 best examples of website home page design

Best practics:

Color design to match the website pages. The maximum effect when simplifying a web page in this way 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, clear 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: the top menu and the sidebar. With responsive design came the hamburger menu, which is now widely criticized for making it harder to engage the user/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 a navigation menu - you are asked to scroll to find 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

Just as mobile users have changed the design of modern websites, 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. As expected, wearable technology will breathe 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 are now going back to basics. 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 consistency across different formats, some “air” is added 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

Google's Material Design Lightweight (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 for the better 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

Over the last couple of years, the web has been dominated by gray tones: 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)