New trends in web design. Contrasting font combination

” 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 normal reading speed” -Hermann Zapf

The past few years have seen a dramatic shift in thinking about the role of design in business. Previously, design was seen as the final step in the process of creating an object: the designer-magician comes at the end and sprinkles magic dust on our product to make it better than the competition.

It was very interesting to watch the metamorphoses occurring with development priorities.

And the most beautiful thing about these metamorphoses was the transition to a model where content again stands at the head of the table. Designers around the world have realized that users visit websites primarily for the content, be it short tweets, long-form specialized articles, or the latest Internet memes. The ultimate role of design is to present content in the most attractive, understandable way and get the best results from it.

This is one of the reasons for the shift from “skeuomorphic” design (where elements are depicted as similar as possible to their counterparts in the real world) to flat, minimalist design. From these considerations, Google created Material Design.

Of course, as Newton's third law states, for every action there is an equally strong reaction. Many designers believe that the fashion for flat design has “killed” the very spirit of design. We expect this debate to continue in the coming year, but the focus will remain on content - the basis of any design work.

2. High-quality interaction between designers and developers and designers among themselves

Design's importance in shaping business is increasing, so more and more emphasis is placed on designers working together with their fellow designers and their fellow developers.

This concern for interaction with designers has arisen in part due to the massive volume of mobile and web applications that are being developed today. In addition to the fact that such giant corporations as Google, Facebook, Twitter and LinkedIn require the titanic work of a design team with absolutely different sides, designers need to always be on the same page with each other. This means 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 with tools like InVision, Marvel, UXPin.

Carson Miller weighed in on this in his recent article “The Future of Front-End Design” on TechCrunch:

“Sooner or later, tools for creating designs and design patterns will completely replace front-end development. You can easily create a high-quality base for any of your frameworks without having to write code by hand.”

3. Simplified designer-to-developer process

The design and prototyping tools mentioned above allow you to visualize the various stages of collaboration through visualizations that range from animated Keynote files to fully functional websites. This method of sharing work material reduces response time within the project, thereby increasing the quality of the design, increasing the speed of the development team and reducing the possibility of disappointment with the result. It also improves customer interaction. For example, for many WebFlow users, client meetings have turned into full-fledged work meetings where designers can quickly implement ideas and everyone can test their ideas almost immediately.

Web design trends in the coming year according to product designer Gadzhi Kharkharov:

4. Large, loud headline

As the world of web design begins to focus on content, it's increasingly common to see inspirational headlines on websites with matching fonts that are as large and bold as their content.

The #MadeInWebflow Heco Partners

As you can see from the examples, “large” and “bold” do not only refer to the description of the font. Rather, it is about dedicating a significant portion of the home screen to a simple, but strong and self-contained statement about the product or service. Such a headline should contain the essence and be understandable for any visitor, avoiding unnecessary pomposity (okay, the phrase “Design the impossible” may sound too loud).

In today's busy, information-overloaded environment, short, powerful statements like these work well for any brand.

5. Complex markup that comes from the basics of graphic design

If we want to predict the development of web design (by at least, its visual side), we need to turn to the history of the development of graphic design.

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

Our the main task now - to understand how the new grid layout of blocks should work within the framework of adaptive design.

Here are some examples of what to expect (assuming you have a browser that supports CSS Grid, such as Firefox Nightly, Safari Technical Preview, or Chrome Canary):

Experimental Layout Lab Jen Simmons

Pay attention to the style of the main block - a clear reference to the history of graphic design.

Grid by Example

You can see more examples on the website.

6. More SVGs

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

Basic pros of SVG are described in the very name of the format - these are scalability and vector. Unlike raster and pixel based formats, SVG images are made up of vectors - mathematical descriptions object shapes. This means that SVG is resolution independent and images in this format will look great on any screen and device. There is no need to worry about images being blurry on the retina.

But that is not all. SVG is also famous for not requiring HTTP requests to be sent. If you've ever checked your website's loading speed, you may have noticed that these HTTP requests can really slow down your site. There is no such problem with SVG.

7. Tools for Rule-Based Responsive Design

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, fast 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 flaming sunset. It's something of a renaissance of naturalism with vibrant colors and bold gradients, and I personally look forward to seeing more of this kind of work in 2017.

Although, maybe it’s worth reducing the brightness a little? We're watching you, Asana.

9. More emphasis on animation

Animated elements have been playing for a long time key role in the web interface, and this trend will continue in 2017. In fact, as long as designers have access to tools to develop compelling animations, we will see these effects become more visible and more sophisticated.

This topic is especially important because animation creation is becoming easier every day. At the 2016 Design & Content Conference, animation guru Val Head emphasized that when designing animated elements, designers should keep the brand's goals and needs in mind to achieve the effect content creators expect. If this advice is heeded, the animation will perform tasks that are meaningful to the brand, and not just give the user a migraine.

10. Unusual markings

2016, like the previous few years, is famous for the endless discussions that web design is either dying or losing its spirit.

Those who are trying to convince everyone that web design is dead are clearly exaggerating. Many continue to look for ways to present content to users in new ways. One of the most tempting ways is to break the system and ignore the usual grid layout dictated by the rules of responsive design.

The “broken” marking method involves elements going beyond the meticulously aligned grid. Such techniques may sometimes even seem unpleasant to the eye. For example:

Texts and images colliding with each other:

Texts and images scattered (seemingly) randomly across the page:

This was the first part of the translation of the article “18 web design trends in 2017”. Do you agree with the opinions of Webflow experts? What kind of web design do you think will be in vogue in the coming year?

” 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

It was very interesting to watch the metamorphoses occurring with development priorities.

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 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:

3. Simplified designer-to-developer process

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

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 SVGs

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.

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.

Design trends for 2017 according to Ryan Morrison, senior graphic designer.

8. More bright colors

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:

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.

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.

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:

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 principle Mobile First) is a very important component of creating a website in principle.

Bots

Probably the most interesting point in this article is bots. Now simple pages few people need it. Give everyone interactivity and liveliness 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.

Every year the number of sites that surprise and delight with new design features is growing. Two years ago we posted a translation about trends in web design 2015. What has changed since then? There is still an emphasis on high-quality graphics and minimalism, large fonts and interactive elements(For example, hidden menu). However, technology does not stand still, and web designers are experimenting with dynamics, animation, and the arrangement of objects on the screen without compromising the performance of the site. We bring to your attention an overview of the trends that, traditionally, are set by our Western colleagues.

1. Mobile-first principle

The name of the principle speaks for itself: the design is developed, first of all, taking into account the ease of viewing on mobile device screens. This principle is not new, but since more than 60% of users access the Internet from smartphones, it has become decisive this year. Since mobile device screens are small, designers provide the most informative, but at the same time effective display of content. The same goes for texts - water and empty phrases have no place in the “mobile-first” concept.

2. Freehand illustrations

This is a great way to convey an idea or mood in an original way. Hand-drawn illustrations are unique, add variety and a touch of informality to the user's interaction with the site, making the design warm and friendly.

Example illustration from dropbox.com

Talented illustrators can create images that the best way will correspond to the brand and corporate style, with their help you can achieve deep personalization.

3. Animation

Designers are moving away from using only static images and are looking for new ways to engage audiences to stand out from others. Brands need personalization, and animation, thanks in large part to the development of HTML5, CSS and jQuery, plays an important role here.

Animation can be implemented in different ways: from an unusual loading status bar that will brighten up the wait, to a change appearance object when hovering the cursor. There is also full-screen animation, which is the central element that focuses the user's attention.

But animation should be used in a balanced way to deepen the user’s interaction with the site, and not scare him away. After all, no one wants to wait to watch the main content while ridiculous and useless animation loads - everything should look natural, appropriate and not distracting.

4. Bold colors

Until recently, experts recommended using only “web-compatible” colors in design - those that do not cause irritation and do not strain the eyesight. Today everything is changing - when used correctly, bold colors work wonders, turning ordinary websites into bright, rich and memorable ones.

Example of using bold colors on spotify.com

Bright colors are a way of personalization in the global fashion for minimalism in design. It's likely that designers will continue to experiment with palettes, creating unique gradients and pops of color.

5. Unusual scrolling and parallax

In the past, designers tried their best important information place it in the part of the page that the user sees immediately after going to the site. Today it is difficult to determine which part of the page will be “visible”, because transitions are made from devices with different resolutions display. Therefore, a different approach is needed.

Scrolling, originally necessary to move up and down a page, is now being used creatively by designers. When implemented skillfully, it becomes a universal tool for presenting content. Thus, you can automatically configure the display and stop of video or animation when scrolling, the appearance of text and images, etc.

6. Asymmetrical patterns

2016 was influenced by mesh patterns, and in 2017 there was a trend towards the use of asymmetrical and “torn” patterns. Despite the fact that the vast majority of brands prefer traditional and clear card UI templates (after all, they are logical and easy to navigate), some are still starting to experiment in order to stand out and differentiate themselves from competitors.

Asymmetrical design example (isaidicanshout.com)

Asymmetrical design created with skillful hands, is great for drawing attention to certain parts of the page. Thanks to different sizes fonts and arrangement of elements can correctly place accents on the page and guide users in the right direction.

7. Shadows

Shadows themselves are far from an innovation in web design. At one time they were popular, then they were forgotten. What then is the trend? In the use of huge, sometimes even exaggerated shadows cast by images when hovering the cursor.

Deep shadows when hovering over images (abduzeedo.com)

This approach allows a flat template to focus attention on the active element and involve in interaction. This creates an effect of depth - it’s nice to just move the cursor over such images.

8. Large and bold fonts

Typography is another way of personalization. Distribution of devices with high resolution screens make fonts readable and clearly distinguishable, so designers are increasingly experimenting with them.

Usage example large font(bigyouth.fr)

9. Ultraminimalism

Minimalism has long been a defining trend in web design. But some go further, removing any hints of decor from sites, leaving only the elements that are most important to users.

Absolute minimalism (mathieuboulet.com)

In the example given, there is only the indication “Scroll”, a link to the “About Me” section and links to profiles on social networks. Next, when scrolling, there is a designer’s portfolio.

10. Mix horizontal and vertical text

Changing the usual horizontal arrangement of text “refreshes” the site and motivates you to read what is written there.

Example of unusual text direction (takewhatyoucancarry.com)

Please note that the mix is done well - there are no unnecessary confusing elements. The word “take” is written vertically - this is enough for a branded presentation of content.

11. "Modulation"

In this case, the text should contrast with background images so that they do not merge.

13. Two-color

The site design is based on 2 basic colors. It looks stylish and modern. For example, the Australian Design Radio website is designed in exactly this style:

14. Geometric fonts

In this case, fonts are combined with a variety of geometric shapes. Fonts like Futura, ITC Avant Garde and Proxima Nova are suitable for this purpose.

An example of using “geometric” fonts (hugeinc.com)

You can add expressiveness, assertiveness and even some aggressiveness to the site using very bold fonts the above families.

Let's sum it up

In 2017, designers will try to add touches of individuality to the usual minimalism. Some will do this with color, some with fonts, and some with unusual block placement.

When developing and approving a design, do not forget the main rule - it must be user-friendly and motivate to take the target action. Are you confident in the performance of your resource? The report of a site audit conducted by the “service” can tell you about this. Personal manager” SeoPult. In addition to the design and usability audit, you will receive a detailed analysis of the technical component, semantics, position in relation to competitors, etc. All this will help you improve your website and increase its effectiveness as a sales tool.

The article is divided into two main areas: graphics in web design and development itself, and each section has its own components.

WEB DESIGN TRENDS

So, we’ll start with the web design trends of 2017 and what awaits us in 2018. What changes have occurred in graphics, the use of fonts, animation and video, and so on.

Graphic design

The trend that is considered fashionable is flat design ( Flat Design). Vector graphics are used with the addition of raster graphics for emphasis; examples of such sites are given below. Minimalism and responsive design, simple and understandable for site users.

Vector images

The use of the vector on websites is increasing; it has a low weight, which means loading in progress faster. Since the vector can be stretched and compressed as desired, your graphics will always look great on any device screen at any resolution. For vector images use SVG (Scalable Vector Graphics) format. Majority vector editors allow you to save in this format and there is no need for specific software.

Colorless - ghost buttons

The move towards minimalism also influenced the design of the buttons. The use of this type of buttons in website design is increasing. Such buttons do not overload the site and look original. Our website also uses such buttons at the bottom of the articles block.

Click on the image to enlarge it

Stylish 3D graphics

3D graphics are also gaining momentum in the new year. 3D compositions go well with flat design and complement it, giving it more depth and emphasizing modernity.

Click on the image to enlarge it

Animation, video and interactive objects

Websites have started using live photos and backgrounds, this definitely attracts attention and gives the site some dynamics. There has also been an increase in the use of video and all kinds of animations for user interaction.

Complex meshes

Back in late 2016, a trend emerged for websites using dynamic, complex grids with cutting-edge design.

Geometry in different forms

Usage geometric shapes different types for text, informational highlighted blocks and backgrounds. Rectangles and squares are great for highlighting important things.

Click on the image to enlarge it

Fashionable colors

Here who likes what, and what, by definition, is suitable for each project. The only thing that can be said is that the colors are becoming more vibrant. In combination and good contrast, it is more convenient for the user to navigate the site and perceive information.

Unconditional adaptation

Now there is no need to say that sites should be made friendly to mobile devices. Adaptation is an absolute factor of a modern website. It is very important to think through the design in mobile version so that everything important elements were at the user's fingertips, and he intuitively understood the site navigation.

Disputes do not subside as to what is the best way to put an icon or inscription. Test results on 240,000 mobile device users.

Mobile Menu Alternatives

If there are not many sections on the site, then it is better to use tabs as a menu, or add a button to them at the end in a drop-down additional menu.

Flexible dynamic menu

The solution lies in a menu that adjusts to the width of the screen, showing as many tabs as possible, and hiding what is not included under “More”.

WEB DEVELOPMENT TRENDS

Thoughtful design

In the development of website design should be involved not only Graphic Designer, as well as promotion specialists and marketers. The location of each element has its own purpose, for a comfortable stay of the user.

Less text is better!

The text part of the site should be concise, as much as possible, and reveal the proposed topic. If possible, supplement it with technical details, such as prices, characteristics, etc.

CMS rating

You can always see the latest rating. Whatever option you choose, keep in mind that according to official statements from search engines, there is no fundamental difference in what your site is made on. Any engine or framework will have to be modified to best functionality your project.