Will you create a bombastic website in 2020 with sliders, carousels, automatically playing videos and the most beautiful graphic elements? Or do you prefer ‘less is more’ with a lot of subtlety and elegance? One thing is certain: the world of web design is constantly changing. Even now that the internet has become a lot more mature, developments are still going very fast. Consider the rapid emergence of mobile-friendly websites, or even mobile-only design. Meet a whole load of trends in the wonderful world of web design in 2020. What will you do in the daily practice of brands? What works or doesn’t work anymore? In short, what should you really think about or respond to when you are working on web design? Which web design trends will really make a difference in 2020? Reason enough for us to ask user interface specialist and UX / UI designer Tim Beekhuis , together with web designer Melissa van den Bosch of Loyals about their vision on the most important web design trends of 2020. In collaboration with experts Jorg van de Ven , Joep Franssen , Niels Tukker , Annemarie ten Brinke and Giorgio Guldenaar, they name no less than 15 web design trends and you will receive many valuable tips in this blog. This way you will stay ahead of the competition in the coming year. Use it to your advantage! Content: Trend # 1: Dark mode Trend # 2: Gradients 2.0 Trend # 3: Neumorphism Trend # 4: 2D & 3D graphics / illustrations Trend # 5: Soft shadows, layers and floating elements Trend # 6: Oversized fonts Trend # 7: Imperfections, abstract illustrations and line drawings Trend # 8: Mixing photography with graphics Trend # 9: Frames of whitespace Trend # 10: Glowing, luminous colors (schemes): Neon & Duotone Trend # 11: Micro animations Trend # 12: Less is more! Trend # 13: Mobile first and mobile only design Trend # 14: No more videos in the header? Trend # 15: Asymmetrical designs Conclusion Trend # 1: Dark mode One of the main trends of 2020 is the ‘dark mode’: “Browsers such as Chrome have had the feature to take over the theme settings of the operating system for some time (for example, Windows, Android, or macOS). For example, macOS has the option to set the entire system to dark mode, which causes the majority of windows to be dark. A browser such as Chrome sees this setting and a website can now respond to this in the design. A dark background provides more contrast, but there are more benefits: Design elements stand out much more. It has a calming effect and makes eye strain less likely. On an OLED screen (popular on many smartphones), dark mode saves energy and you surf for hours on end. What exactly does dark mode do? The dark mode automatically displays white areas dark. And how do you turn it on? Many apps and browsers such as Chrome look at the settings of your phone (or computer). If your phone is in dark mode, then all sites and apps that support it are automatically. You do not need to turn on dark mode in most apps or sites. Dark mode can also be used on social media recently. Instagram and Facebook have updated their apps, with which you activate the dark background. The dark mode is also available for all Android phones with the latest Android 10 software update. Wondering if you already have dark mode on? Go to https://gomakethings.com/ . If your dark mode is active, the website is dark. If not? Then it has a white background. Trend # 2: Gradients 2.0 Do you still know them? Happy animations, special effects, shadows and 3D effects in letters and even more of these types of gimmicks that made a site look (too) busy. Slowly the trend towards flat design emerged: a design in which the images and colors look ‘flat’. Extensive use of sleek icons, simplified images, simple fonts and simple colors. Flat design quickly gained popularity because it: Looks tight Offers a lot of overview Is ideal for mobile use Responsive web design is much easier to do with flat design, thanks to a minimalist basis and working with surfaces. Another advantage is that flat design sites usually load faster. But, like everything, every advantage has its disadvantage. The rise of flat design had a side effect: the web became more and more a place where everything started to look alike. Distinguishing yourself from the rest, or more importantly: staying ahead of the competition, becomes more and more difficult if everyone does the same. Dare to let go of the flat design According to Melissa and me, we see in 2020 that web designers dare to let go of the sleek style of flat design: “Flat design is not completely a thing of the past, but it is 100% used in your design. The ‘good-old-gradients’ in particular are making a huge comeback. Already in 2018 and 2019 you saw that gradients replaced the place of flat colors. And that is not surprising, because gradients really add depth and therefore make your design visually more attractive. We believe that the gradient in 2020 has therefore completely disappeared for that reason and will increasingly appear on sites and in apps. You can already see it in the many gradient and duotone covers in Spotify. Other big names such as Instagram and Apple also want to clearly stand out against ‘the rest’ through the use of gradients. “The use of a gradient gives an energy that makes your brand different from others. It provides depth and stratification. ” Tim Beekhuis Do you still remember Apple’s app icons? Only a short time ago these were as simple and sleek as possible, really flat design. Nowadays you see many different colors, gradients and other details. The use of a gradient gives your site, app or general design an energy that makes your brand different from others. It provides depth and stratification. With gradients you also subtly draw attention to things that you want to emphasize. The end of “Helveticization”? Giorgio Guldenaar goes a step further and foresees that more and more companies and websites will go ‘outside the books’ in 2020: “In my opinion, the internet can be a bit more creative and surprising. I hope to see crazy, strange and creative websites that dare to offer me a special experience off the beaten track. I jokingly call it the end to “Helveticization.” In recent years, designs and logos have become noticeably cleaner, tighter and flatter. This trend emerged when businesses moved to mobile devices and the style of sites was incompatible with it. A number of major tech giants pack themselves into tight fonts without writing (sans), et voilà: the “Helveticization” was born. After this, a true user interface revolution ensured that most websites were perfectly structured and optimized in grids. Search engines nowadays label websites without these features as unreadable or unfriendly. “As far as I am concerned, the internet can be a bit more creative and surprising. I hope to see crazy, strange and creative websites in 2020. ” Giorgio Guldenaar Commerce Dashboard App by Ghani Pradita Trend # 3: Neumorphism Another trend that we really have to mention is ‘neumophism’. Neumo … what? It may sound like a disease, but it will become one of the most important design trends in 2020. Neumorphism is a fairly new trend. The name comes from “new” and “skeuomorphism”. The term “skeuomorphism” is a term that is widely used in the design world. It means that something on the screen is designed exactly as it looks in daily use. A practical example of this is the trash on your desktop, or Apple’s iBook application a few years ago. In this app you saw a bookcase on which you could see the covers of books. It was almost like choosing a book in your personal library. In the year 2020, neumorphism picks up a little bit again. Neumorphism makes interfaces a bit more ‘physical’ like the iBook app, but in a new, much cleaner, minimalist form. Example skeuomorphism: Example neumorphism: Trend # 4: 2D & 3D graphics / illustrations The use of 2D and 3D graphics was actually always popular, but what stopped it a bit was the (formerly) expensive price tag and the technology. Using various inexpensive software, creating graphic 3D designs is becoming easier and more accessible for most organizations. As a result, we already saw a sharp increase in the use of 3D illustrations and objects in 2019. I predict that this trend will continue and strengthen in 2020. 3D illustrations: Give more depth to the generally flat designs of modern and minimalist-looking websites. Its a good way for visual presentation and sending visitors. Give a more realistic picture compared to 2D illustrations. In addition, you often see that web designers mix the use of 2D or 3D illustrations with realism, for example by placing such illustrations in existing photos. In addition, many photos are replaced by 2D or 3D illustrations. With an illustration you give character to your organization in a unique way. That way you stand out and your visitors recognize your corporate identity. Moreover, a striking illustration can be used for many different types of media and devices. Trend # 5: Soft shadows, layers & floating elements Soft shadows, layers & floating elements are a trend that connects to the 3D trend, only a bit more subtle. This trend is primarily about creating depth. Not so much by working with 3D images, but by creating the impression of depth by adding soft shadows and floating elements. I also call it the “3D Lite” look. It’s also about more than just graphics, because you use the effect just as easily on text and photos. For even more in-depth effect, lay your website elements as if it were layers over each other. That gives your design the feeling that the elements are floating above each other. That is a big contrast with the classic flat design. Trend # 6: Oversized fonts The use of short, catchy texts is a good way to attract attention. Oversized fonts help very well with that. In the first instance, visitors to websites do not want to immediately read whole pieces of text, but first want to scan slowly. The trend to use large fonts has therefore been popular for a number of years and will continue to do so in 2020. The reason is simple: large fonts attract attention and immediately indicate what it’s all about. But there’s more. The use of large fonts also gives websites a modern look. Thanks to responsive websites, large letters can now also be used on tablets or smartphones. Large fonts are ideal for H1 and H2 tags. That gives an SEO advantage. The use of large fonts immediately contributes to the findability of your site. Jorg van de Ven also sees large letters and fonts increasingly becoming the norm, for a simple reason: “It gives a website or presentation a sleek look.” Trend # 7: Imperfections, abstract illustrations and line drawings 2020 will be the year in which it appears that after years of perfection, visitors long for imperfect (hand-drawn) design elements, such as abstract illustrations and line drawings. These provide emotion and bring humanity to a website. Even fashion house Gucci went there in extreme form earlier this year, by changing their logo to the brand name in a children’s handwriting . Line drawings became more and more popular in 2019 and become a real trend in 2020. Line drawings are based on clear sketches and typography, but develop online into fully illustrated and sometimes even animated patterns. Trend # 8: Mixing photography with graphics Do you want your site to have a personal look? You will achieve that in 2020 by combining photos with original graphics. Whether it is photos of products or people, combined images support your brand and help you distinguish your site from the rest. If you are original in this, then you create a visual that your visitors will certainly remember. So let your creativity run wild! Combining a photo with illustrations gives a collage effect and is very versatile. Use it for example to give a boring product photo a real look. Or use this technique to better communicate difficult technical or financial concepts. For maximum effectiveness, ensure that the style of the images matches your corporate identity. Trend # 9: Frames of whitespace Completely filling the space on your site has long been ‘the way of working’. The new way? That is a playful representation of elements, but with a lot of whitespace. We think that is a good way to ‘shine’ your visuals and other content. In 2020, therefore, dare to focus on white space instead of content. It may sound contradictory, but extra whitespace draws the eyes to a certain point where you want to draw attention. The added value of whitespace Plenty of white space also gives your site the feeling of a clean design. You see the effect coming back more and more with the newest websites. We expect this trend to continue in 2020, because the elements that are present on the site come into their own much better thanks to the whitespace. Rest is created, a kind of breathing space for the rest of the content. This has the added advantage of less distraction for your visitor and a higher conversion for you! Trend # 10: Glowing, luminous colors (schemes): neon & duotone Not only the use of oversized fonts will become a trend in 2020. Web design is also becoming more ‘Bold’ and daring. Duotone styles also make this trend popular. The strategic use of color combinations really makes web designs splash off the screen. Glow-in-the-dark neons and saturated colors in combination with dark, muted tones give the design a luminous feel. This trend is particularly evident with duotone designs. In 2020, surprising color schemes will play an important role. A minimalist design in dark fashion ensures that glowing and luminous colors stand out well! Trend # 11: Micro animations Are you looking for a way to subtly enhance your website? Then choose micro-animations. The use of small animations makes a web design attractive to watch. A micro-animation can be in the form of a transition, mouse-over or illustration. Think of changing the cursor when you hover over a certain element, a smoothly expanding menu. It not only makes visiting your site more enjoyable, but also offers a smoother and user-friendly experience. Another big advantage of micro-animations is the direct feedback it gives your visitors. For example, do you add a product to your shopping cart? Then the shopping cart icon briefly vibrates, fades or briefly lights up for confirmation. Another good example is the slide-in of the hamburger menu, when you click on the hamburger icon on your smartphone. For the user, the experience is much smoother when this menu clearly comes from somewhere, instead of suddenly appearing on your screen. A good micro-animation provides the right information and feedback in a subtle way that makes the experience smoother for the user. You can also use micro-animations to make transitions between different pages or parts thereof more enjoyable. This makes these animations the icing on the cake of a website in 2020. It ensures that an otherwise normal website really stands out. A micro-animation does not always have a specific goal. Sometimes it is just fun to surprise your visitor. Trend # 12: Less is more! According to our experts Joep Franssen and Annemarie ten Brinke , we clearly see that the motto ‘less is more’ will become important in 2020. Joep Franssen : “We are going to see fewer bombastic websites with sliders, carousels, automatically playing videos, but much more attention to subtlety and elegance.” As Annemarie ten Brinke already indicated with videos in the header, there will be less room to provide a website with flashy and heavy incentives. Joep Franssen continues: “This is partly because the loading speed is a more important factor for ranking websites in Google. Moreover, experiments in web design in recent years have shown that flashy elements often have a negative effect on the visitor. They even boost the bounce rates of a website . In short, 2020 will be the year in which websites use the ‘less is more’ strategy even more. ” Annemarie ten Brinke also agrees: “It used to be: the busier, the better. At the very beginning, fluorescent colors were very common. Fortunately, that era is long behind us and it has now even turned white (see also trend # 9). In 2020 counts: the calmer, the better. In the web design trends of 2020 I see ‘cleaner’ websites. Large white spaces with few color differences, except in the buttons. So quiet websites, which easily guide your visitors towards the goal of the page. ” Trend # 13: Mobile-first and mobile-only design Annemarie ten Brinke adds: “We live in a mobile society these days. This makes it a must to take phones into account in web design. We are becoming increasingly dependent on mobile designs. In fact, it is already mobile-first in certain industries, so keep this in mind. Also because phones are getting bigger, as a designer you have to think carefully about how to place certain CTAs and menus in such a design. Jorg van de Ven mainly looks at it from an SEO perspective: “I expect more mobile-first, lazy loading and even faster websites in 2020.” Niels Tukker makes it even broader and places user-friendliness at the center: “Continuously designs a design that is easy to use on any device and also looks sublime. The user flow on websites will play a major role in 2020. ” Burger menu at the bottom? Annemarie ten Brinke sees the burger menu on mobile devices increasingly being placed at the bottom of the screen: “As a mobile website user, you literally have the menu under your thumb. That is certainly in trend that you must keep an eye on. I notice that many people are not used to having the menu under control. Take a look at the Kruidvat website. That site has put the menu on the mobile website under the thumb. Does that immediately work pleasantly and intuitively for you, or do you have to get used to it? ” Trend # 14: No more videos in the header Annemarie ten Brinke thinks that the use of videos in the headers will become less popular in 2020: “Admittedly, videos look great in the design, but it is not user-friendly. In that area this is a very big distraction for the visitor. A video in the header is almost always at the expense of the speed of a website. I came across websites that took three or more seconds to load. Deadly for your conversions, but also deadly for your search engine results. Page speed is a must in 2020, both for Google and for the impatient users of today. And what do you think about the full-page header, Annemarie ? “In addition to videos, they are getting higher and higher. Both on mobile and on desktop, you increasingly see page-filling headers. You must first scroll down, before you end up with the content. It looks nice, but just like the video, this trend can be a conversion killer. Even if you have a button in the header, additional information is missing. They have to scroll for that. And with an eye on people becoming more and more lazy, scrolling is sometimes too much trouble and they prefer to leave the website rather than having to search for it themselves. So make a good decision before your design opts for a page-filling header or video. Design should never be chosen at the expense of the user-friendliness of a site. ” Trend # 15: Asymmetrical designs Jorg van de Ven concludes this trend series with his expectation of more asymmetrical designs. No longer thinking in linear blocks, but dealing creatively with the space you have on the screen. “This exudes professionalism and gives a website a more ‘Experience’ feeling.” This trend started a few years ago and is still gaining popularity. An asymmetrical design makes your website unique and above all gives it a playful and surprising character. That way you distinguish your site or organization from your competition. Dare to play with the location of buttons, blocks, overlaps and other elements on your site. Conclusion As a designer you can go wild in 2020 with the use of (micro) animations, 3D graphics, gradients, shadows, asymmetrical layouts, striking contrasts (neon) and applying lots of white space. The trends of 2020 are mainly the trends of 2019 or earlier, but then put in a striking new look. Giorgio Guldenaar summarizes it nicely: “Just like fashion, design is a trend sport. Compare it to pants with wide legs. 40 years ago it was hip, then 40 years backward and now (for a while) hip again. Also in the field of website design, I have the feeling that things are coming back that we used to do. You have seen this for some time with the return of the serif on websites. If applied properly, it exudes great class. I think we learned from the period when the internet was in its infancy (Comic Sans, anyone?). It is now up to us as designers to make these mistakes again, but then well. Do you remember them, those websites that used a moving gif as a button? Do you have the guts to do this again? We will see…” Have we missed a trend that you think should definitely be in this list? Let us know. Which web design trends do you see for 2020? Let’s block ads! (Why?)

Categories: News