Flat design trends of the year. Simplified designer-to-developer process. Hand-drawn images and icons
” 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 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 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 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 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. Quicker, we're talking about that a significant portion of the home screen is dedicated 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 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 SVG
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
Adaptive design completely changed the way we look at web applications and how to 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 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 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 blazing 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?
Vivid infographics about the development paths of a modern web developer and the technologies he needs to learn to become a front-end, back-end or devops in 2017.
Introduction
The primary task is to determine the profile of further development. Try, study, try to understand what is closer to you - frontend, backend, devops, or maybe fullstack?
The Frontender Path
In any area of web development, mastering the basics is at the forefront. For a beginner, obviously the number one task is to learn HTML, CSS and JavaScript (+jQuery). As you develop basic skills and expand your theoretical background, you can move on to more specialized things.
There are many JavaScript frameworks and libraries that make life much easier for a web developer. Among them, you can choose the most convenient and suitable for a particular programmer. package manager, a testing and building tool, a task manager and much more for every taste and range of needs.
Today, the field of front-end development is developing like no other. Frameworks and tools are constantly emerging and improving, new methodologies and patterns are being born, the very ideology of the frontend has long gone far beyond the boundaries of layout. Therefore, one of the primary tasks of a web developer is to stay afloat, to be aware modern trends development of this area.
The Backender Path
Backend development has also seen big changes over the past few years. PHP has long been no longer a monopolist in the backend technology market, although it latest version, PHP 7 is more than worthy of attention. Node.js, Ruby and Go have burst onto the scene. Modern technologies make it possible to develop complex business logic and achieve high performance.
The devops way
Devops work is a very responsible one. Modern web application is a huge and complex organism, and the task of devops is to maintain its proper functioning. Process monitoring, work in the cloud, web containers, continuous integration - these are just a small part of the web technology stack that allows a web application to exist as a whole and perform its functions.
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. Select only those that are suitable for the solution current problems website and for business development.
Therefore, in this article we not only provided a list of web design trends, but also made recommendations for applying these trends to your website.
1. Usability will become a commodity.
An example of improving the usability of the site http://www.telemirspb.ru/
Following basic principles usability helps sites attract more clients and reduce the number of calls to support. More and more companies are offering website audits, as there is a demand for finding errors on the 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 is impossible to foresee everything, but pre-planned navigation will save time and money on improvements in the future. Also, carefully choose the engine for your site. You should not choose a blog engine (for example, WordPress) if you plan to sell something on the site or create product/service pages.
If you work in a highly competitive environment, you understand how important it is to differentiate yourself from your competitors.
That is why, when planning to create a website or improve an existing one, you first need to look at the interface through the eyes of the client and try to predict the problems that the user may encounter.
2. Long texts will disappear
Let's be honest with ourselves: long texts no one reads. Exceptions include books and articles. When a client wants to order some service or product, he is interested in specific information: price, main characteristics of the product/service content, delivery conditions/fulfillment time. Brief and structured information saves the client time and encourages him to order. Moreover, if the client compares several sites, then the most concise description will definitely win.
Also, long texts are inconvenient to view from mobile devices, which almost everyone uses. According to world statistics, in October 2016 the number mobile users there are more 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 should be as accurate and fast as possible. Enlarging an image when you click on it, progress indicators while waiting for results on the site, a pop-up window appearing when adding an item to the cart, changing the color of buttons and links after clicking are the most common microinteractions that will definitely help your users.
6. Use of cinemagraphs or “live” images
Widescreen videos have been replaced by cinemagraphs - images in which only one element moves. It is best to place them on the first screen of the page to attract the user's attention and create a wow effect.
If you choose such a gif to match the theme of the site, it will look very cool. For example, you can take a live photo of your main product and post it on Home page or on banners with promotions.
In Russia, cinemagraphs are mainly used in social networks, so we give examples of foreign sites - a site for water protection and car rental.
7. Avoid “typical” stock photos
We hope that all sorts of little people, girls in headphones and photographs of smiling families will disappear from the sites. Example of stock images:
9. Mobile First
The essence this approach The point is that when designing a website, you need to think about how it will be displayed on mobile devices. Many articles and books have been written on this topic, for example, we recommend reading “Mobile First” by Luke Wrobleski.
As mentioned above (see point 2), mobile traffic is growing and there are even users who do not have desktop experience. That is why, in order not to lose customers, we recommend optimizing your sites for mobile devices.
The article lists only the most basic trends. Let's see what awaits us this year. If you also notice some trends and are sure that they will develop, write in the comments, we will be happy to discuss. And if you doubt that the design of your website is relevant or you read the article and found obsolete elements- pay attention to the service
It's no secret that the IT industry is developing by leaps and bounds. New technologies, new hardware, new projects. All this has not spared web development either. Nowadays the sites are far from being the same as they were at least a couple of years ago. Quite a lot of things have changed, and now a little more detail.
Using a video background
It would seem that the background has been in use for a long time. But it became a truly significant fragment of the site’s interior only this year. For many users it creates a real “wow” effect.
An example of a good implementation of a video background - http://globalmonitoring.ru/
Parallax effect
Another seemingly prosperous concept, but it has only recently begun to be applied everywhere. If anyone doesn’t know, this is a way to add volumetric layers to a website and make them move as you need. In other words, add more interactivity.
Example - https://www.grabandgo.pt/
JavaScript and libraries
Speaking of interactivity. Have you seen at least one website without js in 2017? me not. And it’s not even about js itself, but about its libraries. Yes, jQuery is a cool thing, but all the top front-end developers have already switched to react.js, angular.js, vue.js and other libraries. I'm going to learn one of them myself in the future (probably vue.js).
Where did you want to go without js? All these jumping elements, blackouts, smooth transitions and so on - it’s all convenient to implement through scripts.
Adaptability
Something that is worth talking about separately, and we will definitely talk about it. Adaptive website design is not even a 2017 trend. This is a general trend recent years. As a user of one of the Runet freelance exchanges, I see requests every day like: “Create an adaptive website” or “We already have a website, we need an adaptive one” and so on. People understand that now humanity spends much more time on smartphones than on a computer, so creating an adaptive website (with the Mobile First principle) is a very important component of creating a website in principle.
Bots
Probably the most interesting point of this article - bots. Now simple pages few people need it. Give all the interactivity and life to the site. A bot is a kind of assistant that is already being actively used. Most simple examples— VKontakte and Telegram bots that themselves send you any information upon request or without it. This is very convenient for administrators of the community where the bot operates. Everything is fast, beautiful and automated.
Ryan McCready, content editor for infographics service Venngage, talks about what's trending in the world right now. graphic design, and what techniques had to be abandoned this year.
Bold and vibrant colors
Over the past few years, many technology leaders have used muted and easy-to-read colors. So they tried to create a very clear design scheme and show that the elegant and functional future, which is usually shown in science fiction films, has already arrived.
This method helped the company move to new stage development and unite all your applications under one color. As with Spotify, this bold use of bright colors made the brand stand out.
Fashion for the bold and bright colors The design follows the principles of Google's Material Design. The company chose flat, streamlined and intuitive design with the addition of "unexpected and energetic colors, as well as functional and eye-pleasing fonts and images."
In general, many current trends 2017 arose under the influence of the principles Material Design Google.
We also used them to make this advertising image. e-book. As a result, the image became incredibly popular.
If you can't choose best colors for your design, read on for some great examples of color palettes. And don't be afraid to use colors that contrast with each other.
Bold font
Bold font attracts readers' attention. You involuntarily pay attention to the large and eye-catching inscriptions.
My favorite example is Wired. It uses different fonts to highlight specific headings and maintain a hierarchical order of information on the page.
Just take a look:
Another good example using catchy fonts - HubSpot. The text is in the foreground and supported by graphics:
HubSpot understands that every year the amount of time it takes to absorb information from a tweet tends to zero. Therefore, to attract the reader’s attention, they use short and succinct inscriptions in bold letters.
In addition, now more and more people surf the Internet with mobile phones. Due to high-definition screens, there is an increasing need to use bold fonts. So, to retain readers, you need to deliver your content in the right way.
Buffer highlights headlines throughout the entire article, not just at the beginning - making articles easier to read on all devices. I recommend using this approach for long articles - this way you will help readers navigate them.
We applied this method when creating this infographic. Combination bold and interesting color solutions attracts attention:
Fonts from Google Fonts
I use Google Fonts for a very long time, because they are universal. If I need to come up with a design for an online publication and then add it to a presentation, I am sure that all the fonts will work well together. They all look great on any blogging platform or website.
By the way, all 810 fonts are absolutely free! Oh yes, people like free things. They also like things that are very easy to use. Here is one example of combining several popular fonts from Google:
On our website we use Roboto and Open Sans fonts.
Original photos
Every year the amount of content grows, as does the need high-quality images. So that the photos can last long term, the authors try to make them as universal as possible.
There's just one problem: the best generic images tend to become stale over time. If you follow news in the field of technology and marketing, then you are probably familiar with this photo:
It is used in landing pages, blogs, and even in Instagram posts. To be honest, I took it myself for a site I worked on a few years ago. Due to the popularity of such stock images, the originality of graphic content has dropped sharply.
And the need to use clear and perfect photos only made the situation worse.
When a reader sees the same picture for the hundredth time, he thinks that the author of the article did not try to be at least a little original. So why even read such an article?
This is why you should use original images. Stop taking popular pictures, start making your own.
I'm sure everyone on your team has a camera phone. Why don't you use them? Take photos of your office or logo and use those photos.
Find out if there is an aspiring photographer among your colleagues. Give him a couple of days to rent an office - and you will have enough photos for a whole year!
When we created our new website, we took photographs of our employees, and we were very pleased with the result.
Hand-drawn images and icons
Not only the photographs must be original, but also the icons and drawings. Some brands have already realized this and are trying to stand out from the crowd in this way. This approach adds an element of personal and fun to the design.
Some say the trend looks unprofessional and childish, but it's still definitely eye-catching. Like most trends of 2017, it acts as an alternative to the sterile clean design of recent years.
Dropbox uses hand-drawn illustrations throughout. They became part of the company's brand and made it recognizable.
Such illustrations create a relaxed mood and delight the child who lives in the soul of each of us. They make the product look more affordable. They're especially effective at large tech companies like Dropbox.
Another good example This approach is the mattress company Casper. Almost her entire site consists of hand-drawn drawings. Here is one of them:
The trend was also picked up by the MailChimp service. In the 2016 report, he also shows similar drawings.
Moz, a company that develops marketing software, inserts illustrations into the header of articles:
Sometimes our love for drawings manifests itself in other projects:
Return to the roots of minimalism
If you were asked to explain to a stranger, what is minimalism, you would probably answer that it is when you have to abandon decorativeness in favor of functionality. Most likely, you will immediately think of neutral color palette, consisting of shades of black, gray and white.
It seems that the true spirit of minimalism has been supplanted by the use of boring black and white color schemes. I think this was done on purpose to compensate small size screen and low power of mobile devices.
But in 2017 everything will change. Minimalism will return in its true form. Which means there will be more color. In our time mobile devices They are as powerful as computers, and some even have better screens.
My favorite example of minimalist design is the Medium platform logo. Its creators were able to combine several different colors and still maintain a minimalist style.
Google made another logo redesign in favor of minimalism and a combination of bright colors. It is noteworthy that it was this company that served as a catalyst for the emergence of many new trends. The designers slightly trimmed the font style and presented the new kind a G-shaped logo that I really like.
The spirit of minimalism is felt in all this, but the press did not write about it. People have forgotten what true minimalism is. The logo was not colorless and made in a single form, so no one thought that it was made in a minimalist style.
The new logo was bright and eye-catching - while maintaining a minimalist look. After the redesign, people around them began to imitate Google, as they had done before in other aspects.
We ourselves began to use a more minimalist style for the design of our blogs.
The simple image design easily conveys the necessary information.
Using GIFs
Everyone (well, almost everyone) loves GIFs. They help us in conversation because sometimes they can convey emotions better than text.
In addition, to play them you do not need any special programs. GIFs are usually small in size and can be embedded almost anywhere.
They are better than videos and images, especially when you want to reduce page load time and traffic. I believe that thanks to their versatility, GIFs will become even more useful element design.
I really like putting gifs in the header of an article. Instead of putting a boring stock image there, take a couple of minutes and make a GIF like this one.
To do this, you don’t have to make any special creative efforts, but this way you will definitely attract attention to your post in in social networks. Here is another good example of using GIFs in the header of an article.
Two-color images
This is a combination of two, usually very bright or contrasting colors in one image. To create such images you will have to turn on your design skills, but it is worth it.
Only a very skilled designer can make such beautiful two-color pictures. I'm sure I can't create something like this, but that doesn't mean you should cut this technique out of your design plans.
