Web design trends. Icons are the main decorative element. Large and bold fonts
Initially, it was planned to post a translation of an English-language article about web design trends in 2017, but after studying different sources, decided to slightly change the concept of this note. It's all about what last month Quite a lot of thematic materials about modern ones have been published on the Internet, and opinions, as they say, differ. On the one hand, this is logical, because Different authors have their own assumptions about what will be relevant for websites this year. On the other hand, these forecasts are very subjective.
In general, we have collected all the options and compiled something like a digest of web design trends 2017. Let's start with the most popular trends, which are noted by many experts, and gradually move on to more “unique” ideas. By the way, if you have additions and thoughts on the topic, feel free to share them in the comments. Plus we recommend reading about - also a useful post.
1. Non-standard “abstract” design
The grid for websites is considered somewhat established basic concept, which helps to properly organize the space of a web page. At the same time, she pushed particularly creative designers into certain limits. However, there have always been daredevils who create original solutions that are not controlled by any rigid boundaries. Such works, as a rule, are found in image and creative topics, but in 2017 this website design trend will spread to strict corporate projects.
Non-standard arrangement of elements gives more interesting opportunities: Allows you to use the entire page space, adding layers of objects and a sense of depth to your layout. You will be able to implement a design that will impress users even without colorful full screen video or animation. With hundreds of thousands of classic layouts on the web, abstract, unique designs will almost always stand out and attract the attention of site visitors (like the WOW factor). And you need to use this!
2. New navigation options
For a non-standard project - an advanced menu. Today you don't have to place a horizontal one in the header. Due to increasing popularity adaptive layouts Many users have already become accustomed to the Hamburger menu icon (consists of three horizontal stripes), which is increasingly appearing on regular versions sites. The line between mobile and desktop design is gradually blurring. This year we will see a lot of experiments with the placement and shape of menus - this could become one of the main web design trends of 2017.
Such solutions allow you to use page space in a different way. In addition to intuitive scrolling down and to the side, as well as pinned vertical block Various hidden sliding elements will be popular in navigation. With their help, you can place all the necessary submenu items on one screen. In a way, this makes site navigation more detailed and useful for users. The only important thing is that they are able to deal with your non-standard solution. Be sure to test its effectiveness in practice.
3. Cards in design
Cards are far from new trend in website design, but in 2017 it will continue to be relevant. This decision effectively presents information to different platforms: beginning with mobile applications and ending with viewing on large TV screens. This format for organizing data will make it as convenient as possible for users to focus all information on objects.
This approach is used by many popular projects on the network: Facebook, Pinterest, Netflix. The last option is generally an excellent example. successful implementation cards in a design that combines minimalism, navigation and efficiency.
4. Split layouts with the screen divided into 2 parts
This year we will see more layouts with bifurcated display of information on the screen. This web design trend will be especially active in 2017 on home pages and. Visually, the implementation looks great in minimalist designs with contrasting backgrounds or images.
The designer will be able to use various visual design techniques in adjacent blocks within one web project. And the result will look natural. By the way, split layouts work well for Call to Action in landing pages. More details about the method.
5. Large and original typography
I remember back in 2009, we published where the use of huge fonts was one of the promising website design trends. The same thing will probably happen in 2017 (at least most designers mention it). The main reason is, of course, to attract attention: someone needs to highlight certain objects on the page, someone wants to explain how to use navigation correctly, etc. Regardless, typography is getting thicker and bigger. When implementing, you may find blog posts about and useful.
At the same time, many sites are getting rid of standard system fonts, which allows you to significantly diversify their appearance. With the growing number of free original web font services (Google Fonts, Typekit), their popularity will increase even more. It seems that in 2017 we will also see experiments in the field of website typography. The main thing in this matter is not to overdo it - remember that the text should be well readable. By the way, if you work with WordPress, then the article How to connect a font in WordPress (including Google Fonts) may be useful to you.
6. Gradients and bright colors
Another web design trend of 2017 is the use of bright color palettes for gradients (and more). The start of the era of flat design brought online interesting features, but you need to work in this style very carefully, because it can contribute to the depersonalization of the site. To solve the problem, some experts began experimenting with bright flowers and gradient solutions. This year, the trend will continue to develop, and not only on the Web (surely everyone has already noticed the recent update of Instagram).
This trend can be used not only for the background. One popular technique is to create a transition between two colors and overlay them on the picture. This allows you to make the photo more interesting, and in general the effect looks unusual. Bright colors add depth, dynamism and pleasant energy to the design. They can highlight a page and the elements on it well.
7. Animation and micro-interactions
Animation on a website itself is not new, but designers are learning every year to implement it more beautifully and efficiently. Minor visual effects for images/objects/content can not only bring your project to life, but also add additional tool feedback with the user. In modern UI/UX interfaces, various micro-interactions turn routine processes into more fun ways to obtain information + allow the user to see and understand how this or that page element works (menu, navigation, buttons).
8. Parallax effect
Another previously familiar website design trend in 2017 should open up from a new side. Parallax itself is implemented due to different speeds of movement of the background and foreground when scrolling, which creates the impression of depth and dynamism of the picture. This year we can expect much more complex work using multiple layers, different directions of movement and applying effects. Use this technique carefully so as not to distract users from the content of the web page. Below you will find pictures with links to source sites.
9. Almost virtual reality
VR is one of the most relevant topics today, despite the fact that the real situation in this area is less optimistic than many forecasts. Of course, this feature could not but influence the designers. In some layouts you can find different techniques, which would create a “presence effect” for the user: 360-degree videos and panoramas, video inserts “like in a movie,” games, etc.
10. Tactile, natural design
This trend combines two directions at once - natural colors and tactile design. Excessive enthusiasm flat solutions turned many web projects into monotonous, faceless Bootstrap layouts. Now some designers are trying to move towards more natural solutions, for example, they post photos and realistic 3D models so that the user has the feeling of being able to touch and touch objects on the site. They also use natural materials as textures, illustrations and backgrounds + natural shades (greens, browns, grays, neutral metallics).
11. Other web design trends 2017
In the process of studying the main website design trends of 2017, we came across different opinions. With the most meaningful options You’ve already read it, and now let’s briefly talk about a couple of assumptions that turned out to be less popular. Some of them, by the way, were actively used earlier, but this year the trend will continue.
You can make the background even more impressive by adding animation or video. Thanks to YouTube and similar projects, video content is now very popular, you can use this feature on your website. If you add sound, do not turn it on by default, the user must want to do it himself.
Geometric shapes
If you look closely at the screenshots of the web projects above, you will notice the use of different geometric shapes in many of them. These are often square/rectangular shapes, but curves, triangles and circles are also found. Such blocks can contain content or be used to highlight the background.
Unique illustrations
We didn’t find many original works in the selection, but this web design trend will still be relevant in 2017. First, illustrations add a personal touch to your project (which is a big plus in the era of flat layouts). Secondly, the method works well with custom typography, allowing you to create even more unique layouts. You can also include usage trends here. real photos in design/content instead of pictures from stock photos - originality is always in demand.
Total
We reviewed the top 10 trends in web design for 2017, which will now be most actively used by designers in their work. In fact, there weren’t that many original techniques; a significant part of the trends are repeated from previous years: cards, bright backgrounds, parallax, large typography, etc. In terms of fonts and navigation, we will probably see original options this year. Apart from the virtual reality issue, we can say that the general trend is towards simplification appearance online projects persists, designers only continue to search for the most effective and interesting ways its implementation.
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 an excellent 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 an informational message 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.
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 won’t 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. Last Motion version The UI is equipped with an animated group service system, flexible CSS templates, which have expanded capabilities for a full transition and are able to work with all types of animation JavaScript 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 ensure your potential client comfort of using your site. 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 information there, necessary for the user who visited the site for a specific purpose.
Javascript is on the rise now
Javascript is the future, despite rumors that it has shortcomings and weak sides. 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 The best way add volumetric layers to the site , 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 informed modern technologies and maybe one day you will be so inspired by what is happening that you will come up with something revolutionary yourself?
” 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 asked himself at least once important issue: What will define web design in the coming 2017? I decided to find the answer to this question and asked the 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 or her normal speed reading” -Hermann Zapf
The last 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 transition from “skeuomorphic” design (when elements are depicted as similar as possible to their counterparts in real world) to a 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 fashion is flat design“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 there is a need for greater communication on the project and how to most effectively collaboration.
To make this task easier, many tools have been created, from team templates and boards in Webflow's Team to graphic editor Figma interfaces showing changes in real time. I am sure that in 2017 these platforms will be improved and supplemented.
If we talk about the interaction between designers and developers, a lot of attention is paid to important process transfer of 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 foundation 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 (at least its visual side), we need to look at the history of graphic design.
Over the past few years, web page layout has been limited CSS capabilities, but new modules like Flexbox and CSS Grid(which will be released in March 2017), will allow you to implement the most daring ideas in web markup.
Our the main task now - to understand how the new grid layout capabilities of blocks should work within the framework 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) It 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 again and again to various devices and permissions. In an industry that requires rapid idea generation, rapid development and quick start, 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 various screens and devices, thereby reducing the number of repeated designer actions. 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 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 saves him a lot of 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 bright colors and bold gradients, and I personally look forward to seeing more similar works 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?
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 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 trends graphic design 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”
Small and convenient menu icon in the form of three The strip, nicknamed the “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 arrangement 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. Custom layouts and new approaches to graphic design Western designers have already tried it. 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 several days now. The trend will only strengthen in the new year. The trend is handwritten inscriptions and icons stylized as handmade.
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. Any statistics on the site with the help of infographics turns 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 can make a site lose its personality. In 2017, the web gives preference to unique images.
12. Scrolling +
Scrolling has gained popularity thanks to mobile gadgets, from which it is more convenient to “scroll through”. 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 on different speeds background and foreground) will gain a new breath - the development of more complex multi-layered techniques. Experiment with parallax, captivate the person who visits the site 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.
.jpg)
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!
