19 Trends in Web design for 2019!

In the creative industry, we can easily profit from the trend, after all, focusing on hot spots do not require creativity or innovation-unless you are trying to constantly change the trend.

But creativity is a conversation.

This conversation has been going on since the first time we learned to record the world with the ochre on the walls of the cave with charcoal. We have also learned to turn the abstract symbol, which is simply engraved on clay with a stick, into a carrier with full meaning-language.

Trends are just the main voice in a complex and chaotic multiparty conversation, and our creations coexist with these trends, whether or not they apply trends.

Trend provides us with a big background, after all, if there is no norm, what is the definition of innovation? If there is no hot trend last year, where to look for norms?

So as I did last year, I predicted 2018 years of design trends with Webflow's excellent design team.

The following are from Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff, and me.

1. Broken Grid Layout

Designers are always the endless pursuit of more creative, more engaging layout, but in this process, grid layout has been widely used, grid layout can bring a sense of harmony and norms, but the grid itself has constraints.

Sometimes we all want to escape the standardization of the grid, right?

But this does not mean that the broken grid layout completely ignores the concept of the grid, on the contrary, the fragmentation pattern allows image and text elements to appear more freely, while in a more canonical layout, the arrangement of elements often needs to be on track. Here, the position of images and text begins to overlap and converge, and the collocation of bitmaps and fonts often comes with beautiful surprises.

2. Place the illustration in a central location

One of the more interesting challenges I've seen in the area of digital product marketing is choosing the right image. I've seen the entire design team discuss this topic and usually end up at one of two points:

Product UI (user interface) screenshots and motion diagrams
Designed or living photography.

The former emphasizes the experience, characteristics, and functions of the product itself, while the latter attempts to emphasize the human dimension of the product: its impact on life.

After entering 2018, we can see and will continue to see that the work of illustrators is getting more and more attention in the design and marketing of products.

I was fascinated by those of the matter, and even I was not sure what it was. Perhaps this is the same cyclical as we have seen in the fashion world, after all, illustrations have dominated the advertising industry throughout the late 60.

Alternatively, Dropbox's design team can solve the problem by explaining their new illustration style:

We build sketches with pencils, then fill them with colorful, abstract shapes to make ideas a reality. Our style is inspired by the moment you have an idea for the first time, a style that also reminds us that unless you do something, there is only a blank on the canvas.

I think that is to say, they have to redesign something, right?

As you can see in Shopify's Polaris website, illustrations can concretize many abstract concepts into life. Just a painting, Shopify the concept of Polaris-just like the Polaris, pointing the way for every member of the team.

Finally, it is worth noting that illustrations can also be ingenious in solving some of the representative problems brought about by photography.

We offer digital products to the public, but when we put a live photography in a prominent place on the site, the real protagonist in the picture defines your users but then omits other users who are not defined.

By contrast, Shopify Polaris's illustrator image is merely a human being and does not identify attributes such as race, gender, and international, which makes it easier for us to substitute ourselves for such scenes as ourselves as an independent thinker, thinking about the possibilities of creation illuminated by this Polaris.

3. The mainstreaming of barbarism

In early 2017, we published an article about the rise of barbarism and trying to answer the reasons for emerging styles:

Barbarism .... is opening up space where designers can do what they want, which is even beyond what should be done. Barbarian works tend to avoid all the best suggestions and best practices on the list of things to support shocking looks and effects, sometimes even with some aggression.

So you can imagine how surprised we were when both e-commerce sites were on this rugged, trendy train.

4. More organic and tilted shapes

Nature hates straight lines. --william Kent

In recent years, both on the web end and on the mobile side of the design have been dominated by a card-style user interface. Until now, these cards have been almost sharp edges, right angles, and can be seen with their most basic geometry, allowing everyone to focus on the basic materials of web design.

That changed a lot in 2017, and now, from Google to Twitter to Facebook, almost every app's card has a fillet, such as an input box, an avatar frame, and so on.

If these boxes are rounded, they will be oval.

But this is not the main constituent element of organic shape. Now the background design often has a lot of different colors of deformation spots, slightly exaggerated diagonal, even if we usually use the dash will be a cartoon.

But in endless exploration, designers can not just use flexible curves, many people will rotate the card some angles, the use of angles to design, just like Stripe's homepage.

But that doesn't mean right angles will disappear in the design. In the figure below, we can see the use of straight lines and right angles, but they combine them organically with more curves and spheres.

On many websites, we can see the color of flashes or vibrations. While the combination of these colors can impress-including leaving a shadow in the eye-it's worth noting that there may be some problems with the use of color combinations at the accessibility level.

Often we use accessibility as a user-friendly behavior for people with disabilities, but don't forget that even people who don't have a color perception disorder may encounter a dazzling combination of colors.

No kidding, when these shapes roll up, you'll see all these things on your screen.

According to LinkedIn's Accessibility engineering manager, Jennison Asuncion, accessibility can be defined as:

Design and develop a user interface that everyone, including disabled people, can use and interact with independently.

5. More general interactions and animations

The medium is information. –marshall McLuhan

Web pages are not a static medium. Although Justin Jackson's is a webpage has a lasting sense of beauty and authenticity, there can be more flexibility on the page. The medium is information, and McLuhan's famous saying, at least, means that there is some web information about the change and interaction of the Web page: The Web page cannot simply provide us with information, but should be to bring the information to life, and more importantly, let us interact with and have an impact on this information.

Some of the information is moving, but that doesn't affect concentration.

Gradually, as you scroll through the Web slider, a piece of information is not just accepted by you, it will also affect your perception, and try to get more attention from you.

Obviously, we can't abuse this vividness, it will make the Web page look like animation, be careful it will affect your user experience, especially those who have cognitive impairment or are sensitive to exercise.

But it cannot be denied that the right little animations can guide users to the right content at the right time so that they don't miss important information or visit other pages.

In the case of Black Sheep's echo partners, when scrolling down, the black current line helps the user focus, and then a series of bold tools begin to compete for the user's attention, calling for a stop to read and click on the next page. This is a creative solution for creating an inline navigation system, but it can also create unnecessary tension for users.

We can also see that there are many tools that simplify the creation of complex animations and interactions-this is a gap in the toolkit-and can be seen from our own Interaction2.0 to Airbnb's Lottie.

Specifically, we look forward to the emergence of two specific animation modes: unusual sliding rates and page conversions.

6.Unexpected sliding rate

Parallax may be a bit out of date now, but that doesn't mean designers don't design slides in interesting ways.

For example, the website Anna Ashwood, each photo on the site is a normal display at the beginning, until the user slides down the slider, the photo will rise quickly, faster than the slider sliding speed, creating an interesting sense of ethereal, can be a good display of simple black and white photos and serious models.

As interactions and animations stand out in the online experience, we also expect to see more designers design more groundbreaking works.

Parallax may be a bit out of date now, but that doesn't mean designers don't design slides in interesting ways.

As interactions and animations stand out in the online experience, we also expect to see more designers design more groundbreaking works.

Parallax may be a bit out of date now, but that doesn't mean designers don't design slides in interesting ways.

As interactions and animations stand out in the online experience, we also expect to see more designers design more groundbreaking works.

Parallax may be a bit out of date now, but that doesn't mean designers don't design slides in interesting ways.

As interactions and animations stand out in the online experience, we also expect to see more designers design more groundbreaking works.

All of this is trying to put everything into your world at the moment you see it.

You could call it savagery, and I did find all of the above sites on the Brutalist website. But we think we're looking forward to more of the emergence of more than one website, and until then you probably don't think this site is going to turn out that way. With the development of digital technology, some websites will be very natural to users have higher expectations.

7. Lining fonts can perform better

In the backward technology, the font is not much bad past, in the Web interface to use unlined fonts is a good way. But as screen and font rendering technology progresses, we can see more and more sophisticated fonts taking the center of the stage, or at least becoming a more important role.

Taking Kickstarter's latest design, for example, he used a soft lining:

Or a bold headline:

On certain days, Typewolf will show the use of some linings:

Lining line can provide an elegant, exquisite literary modification effect, as a long-term fan of lining, I welcome you to use a lot of lining.

8. Floating navigation Menu

Fixed navigation has become the mainstream of sites that are transformed into central or have large menus, as core navigation can be aligned with the user as it slides. However, floating navigation makes it easy for users to use when sliding browsing, directly optimizing the website experience.

Recently, we noticed that some designers separated navigation from his design and moved it below the browser, further determining that users could be exposed to navigation at any time. This enhances the sense that navigation is a broad object of the site, not necessarily a part of a page, but a place at your fingertips, reassuring.

The most intuitive way to do this is to add shadows to the navigation bar and move them to the top of the page, taking Reseau as an example. But it is also feasible in the design of the plane, taking anchor orbit as an example.

Similar to the off-line design, floating navigation allows designers to use ingenious collocation naturally or purposefully in their designs, which in turn brings more space to the design.

9. Video elements

Static images are often difficult to achieve when you want to convey complex information in a visual format. After all, complexity takes time to perform, and a static image on a user interface will only tell you what's on the picture, not how to use it.
Here are a few important reasons:

· Video elements can be seamlessly cut into the design without embedding YouTube or Vimeo plug-ins.

· Even if there are many colors, gradients and details, the quality of the video are still high, but it is difficult to do so if the GIF motion chart does not zoom in by size to refer to several times.

· The video can be recycled to ensure that the details of the replica and the details of the image are consistent and repeated for those who need it.

So from our own website to stripe Sigma, we're not surprised when video elements are popular across the network.

In short, this is a variable font, a single font file that can be blackened without the need to invoke other fonts.

10. More immersive "multimedia" long formats

When we want to publish content in a long format, just place a long text field on the page, especially if our long format content has CMS support. Among them, the content length of a single layout is about 200 words to the length of a more detailed short tutorial.

But now some designers and writers don't use this approach, combining layouts with tailor-made replicas to storytelling the content of stories through rich carriers such as videos, sounds, charts and graphics, maps, and more.

To be honest, this is not a "new" trend, and I prefer to call it the cornerstone of a long-term dialogue that the web generates. But now all the online publishing tools have emerged, and 2018 seems to be the best time, including us.

Take CNN's account of the impact of global warming on Greenland and other parts of the world.

The story is as engaging as possible, which is crucial for many issues that are still more abstract. It cleverly turns a complex topic into a series of easy-to-understand paragraphs. You will never feel that the content is too jumbled, on the contrary, you always unknowingly accept, you find yourself reading every word, it is easy to understand.

Note that I am not critical of CMS, in fact, we can benefit CMS to provide this experience. Here's just a little trick: Use background pictures and videos to deliver all the visual effects and carefully check the consistency of each story as you write and design. This is not the same format as the "blog".

If you're looking for a more attractive long shape, I wouldn't recommend the "Lost Children" filmed by Tuam in the New York Times.

It is worth mentioning that such a more diverse long format can be combined with broken grids or standard layouts, as shown in the New York Times clip above.

11. Variable Fonts!
In today's view, it is hard to believe that just a few years ago we had to rely on rare fonts to present all our text content.
Today, the network is full of all kinds of gorgeous fonts, which has aroused people's interest in font printing, font design, and selection, consumer fonts.
This trend has intensified since the advent of variable fonts. Technology and printing technology giants-Apple, Google, Microsoft, and Adobe have a variable font joint project, which allows variable fonts to implement a new form of font design, formally adding OpenType format, which means that Allows designers to insert the entire thesaurus of a font or a single glyph with up to 64000axe (pound, font size, and so on), and define a specific location in the design space as a named entity (bold, condensed, and so on).
To tell you the truth, the above text is a bit difficult to understand, so please look directly at John Hudson's explanation, he thinks the variable font is:
A font file behaves like multiple fonts.
But when discussing visual art such as font design, it is best to stick to the visual aspect.
In short, this is a variable font, a single font file that can be blackened without the need to invoke other fonts.
12. Content Center – or Webhook? Try to be cool!
(Note: The content has always been cool)
As a geek of the king, I am pleased to see that so much insightful and helpful content has been generated in 2017. I believe we will see more in 2018, after all, 2017 has laid a good foundation.
We can also see that there are many leading brands that use PDF format in the field of e-books and fully exploit the potential of long Web publishing content, which I like to call "Webhooks", which is very attractive.
Specifically, I am referring to:
Stripe Atlas Guides

Airtableuniverse

Designbetter.co
Intercom Books
Our own e-book site
I don't think I need to say much!
13.CSS Mesh
Robin Rendle's CSS grid demo, from CSS-tricks.
As Robin Rendle the most expressive place on the CSS-tricks:
The CSS grid, then, is the first truly Web layout system that is designed to organize content into columns and rows, and ultimately to give developers the highest permissions.
There should be a successful laugh here.
Note: Webflow will support CSS grids, but no official date has been provided.

14. The pursuit of perfect digital design tools

2018 is an important year, especially for an in-depth discussion of the nature of the design tools and how applicable they are to our work.
Spectrum's Bryn Jackson shared his views:
Designing intermediate formats between finished products and design tools can provide more efficient and powerful tools for product teams and designers.
In an article called "interface," he continued to assume: "Every popular design tool today is designed to optimize illustrations." ”
(Note that Bryn Jackson's definition of illustrations is any design work that causes images, icons, illustrations, fonts, advertisements, print media, or other visual communication media that have no local interactivity, but this is a controversial definition that does not mention the reading and interaction situations.) ）
In addition to the definition of illustration and interactivity, it is easy to see Bryn Jackson's view that, in the most basic places, most modern design tools focus on image production rather than interfaces.
Designer and engineer Adam Michela at "I'm Designer at Facebook, and this is WhatsApp Missing in Design Tools Today." Some of the same points were made. He thinks most designers spend most of their time creating small amounts of artifacts that are not of much practical value. These artifacts represent only the final product-digital interface, which runs counter to the above scenario.
At the end of the article, he actively believes that there is an opportunity to create tools for fusion (rather than bridging) design and implementation.
That's exactly what we're trying to build on Webflow. Like Michela, we want a design to deliver not a schematic of the site, but the site itself, not the document of the interface, but the interface itself. In this process, the site can be constantly modified, perfected, but also can save different versions of the timeline, you can check, or even click a key to recovery.

15. Diversity and inclusiveness make the design more challenging

Webflow is a fair opportunity employer and we are committed to building a team that is not only diverse in concept and identity but also encouraged. –our Job Listings
In the United States, where Webflow is located, the increasingly intense political environment is driving a strong focus on the role of diversity and inclusiveness in design.
We have to admit that the choice of design, the small to gender drop-down list contains which options, can affect some of our compatriots. We can clearly see how serious the error message and the wording affect, and how powerful the data validation mechanism is in the dynamic mechanism of human-computer interaction. We are aware that the filter that makes race an advertisement has a downright racist effect, thus preserving the existing system of rights that many of us would like to see subverted.
We are also well aware that if our team is not diverse and inclusive, we have no way to come up with a design.
At the very least, some of us can't.
On the other hand, we have also seen sexism lift ugly heads after apparent contradiction and marginalization, and even incarnate in seemingly moral everyday conversations. Gender discrimination is a clear example of double standards.
Ultimately, as a user experience professional, our job is to provide everyone with an available and enjoyable experience, regardless of their race, nationality, beliefs, and other personal circumstances.
In other words, our job is to be inclusive, let's be together in 2018, accommodate more and get more.

16. Wide application of video

Although few of us preach that the video will become a Web publishing medium, publishers are still very bullish on the broadcast.
The video has long been everywhere: news sites that have insisted on using video instead of short stories from the start, to Snapchat, to Instagram, and finally to Facebook. There is no doubt that Excel will soon catch up with the trend!
Of course, that's not going to happen.

In the face of all this, keep in mind the advantages of words like creative and information media:

· Relatively fast production speed

· Cheap

· Remains the main form of most communications on the network

The last point may be puzzling, but I hope you can go to various social networking sites to see it. Unless you're Instagram, Pinterest or Snapchat, you'll still see a lot of text. Even on these visual effects station the first platform, the text still plays an important supporting role.
Because a picture may be worth saying a few more words when capturing a scene, it is difficult for pictures to capture specific content, characters, times, places, causes, and ways.
This makes it natural for us to talk about the next point:

17. The continued rise of user experience writers

Anyone who affects design is a designer, which includes developers, CFOs, and even corporate law. All of this can be designers. –jarred Spool
I talked about this in last year's design trends, but today I want to focus more on what is known as the user experience writer.
In short, UX writers focus on the content in the user interface, which is primarily used for large digital products and Web applications. Now, I say I'm producing content for Webflow, and in the past, it was for linkedln, and people would ask, "What is this? ”
But rest assured that the user interface has a writer's trace. And these things often play a key role in the process of your understanding:

· What you can do in the user interface

· How to do these things

· What limitations and difficulties you may encounter

But it's not just these that UX writers can do. Vocabulary in the user interface is also a powerful tool for shaping the brand awareness behind the good user interface. Imagine if all the tweets you see, in all apps, have a series of funny articles, or have highlighted in a 404-page display, all to urge you to act at the least desirable time.
This is particularly evident in the UI format known as Chatbot. In general, these user interfaces contain only words, and words make up the entire user interface. Chatbot's personality and brand can only be expressed through language, but there are also some carefully selected emoticons to seasoning.
As an experienced UX writer, I am pleased to see that this key role has received more recognition than it deserves.
We're designers, too, but we're working on syllables and alphabet, and we can't wait to work with you.

18. systematization

Now, the design has won an important place. The dialogue of design has shifted from value proposition to more mature analysis, that is, how to make the success of a design work more systematic, more scalable, and cohesive in many of the brand's outputs and different environments.

The design system focuses on transforming brand aesthetics and functional approaches into modular components that can be blended and paired to meet the unique needs of any UI (ideally). When design languages are systematized, design decisions are simplified, development time is reduced, and designers are able to work better on projects that have not yet established design patterns.

Typically, brands are on top of this trend. Uxpin launched systems, a tool for creating and maintaining design systems. Shopify launched Polaris and was highly acclaimed for its unique content, design, and development guidance program. UX Power Tools has launched a library that you want to call sketch a viable design system tool (we're about to see it!). ）

I think there will be more such news in 2019 years.

19. The principles-the first priority of design

The design community has been grappling with the question of chicken or egg: the content to the top or design first.

I've always supported content-oriented in the past, and it's not just because I'm a geek of content. For me, it is most logical to determine the information that is packaged before determining how to wrap it.

But recently, as I have been dedicated to more systematic work on a content design for specific deliverables, brand content strategies, I have softened our work on whether to comply with content or design.

It should start with principles.

No matter how everything else works, we should be clear about the principles and rely on them.

When Amy Thibodeau, Shopify's senior UX executive, mentioned in her article "Locating Polaris":

If the system was created to achieve real work, it should reflect the rules of conduct of an organization and its value. This is also to say that a design system that does not contain any principles or value orientation cannot take into account these issues in everyday practice.

Principles provide a framework for all other decisions, ranging from how long the main content is to the background of the content. After all, the brand is built on its principle first: The brand's mission, vision, and goals. These nouns all require an entry and exit belief to be supported so that it is established without falling.

In other words, the principle answers why.

On Webflow, for example, our mission is to encourage designers, entrepreneurs, and creators to bring their ideas to the web. This mission incorporates everything I've done, from the aesthetics Ryan has created for us to the phonetic and tone standards I've designed.

These standards know that we create sketches, communicate our opinions, and hope that each article, email, and ad page will be richer. So far, it's a warm cradle.

Visit our Site here for more...

19 Trends in Web design for 2019!