Web design trends 2018

Web design trends 2018

Like fashion, web design has its trends. Some of them are only short-lived, while others remain current for longer. The year 2018 is already 3 months old. So it is high time to show this year's trends.

Colors – preferably bright and gradient

In the last years the websites should be as simple, professional and not too colorful as possible. For this reason, a lot of grey and a flat design was often used. But new trends include special and unusual color schemes that attract attention and are remembered. The redesign of Dropbox is the best example.

Beispiel «spezielle Farbschemen» | © Dropbox | www.dropbox.com
© Dropbox | www.dropbox.com

In addition to special color combinations, bright and friendly colors are also trendy, which are often represented in the form of a gradient. On the start page of Spotify, such a course is placed in the background over a large area.

Beispiel «grossflächige Farbverläufe» | © Spotify | www.spotify.com
© Spotify | www.spotify.com

Algolia also relies on friendly color gradients. These serve however rather as accents with different elements on the web page (for example Buttons). With the example of "Algolia", I can also go into another trend at the same time: Dropshadow. After the cast shadows of the flat design have completely disappeared, they now come back again, but in a very soft and bright version. This gives a certain depth to the entire website. Algolia uses them repeatedly on the complete page - but see for yourself.

Beispiel «Farbverläufe in Elementen» | © Algolia | www.algolia.com
© Algolia | www.algolia.com

Animations – preferably everywhere

"Seriously?" That's what some of you might think after this title. This is because many animations were hated for a long time, for example because of the following example:

© Karl Fritsch | www.karl-fritsch.de

No, that's not what we're talking about, of course. This means rather simple animations that fit in well with the overall design and complement it well. As in the following example of Symodd, this can also be done in combination with gradients from the first trend.

© symodd | www.symodd.com

Apple's Mac Pro is presented on a one-pager (all information on a single page). With scrolling you get the different information, which is faded in with great animations. Such animations guide through the website and draw attention to important things without overtaxing the user. They perfectly complement the design and user experience.

© Apple | www.apple.com

A logo can also be animated. A very well-known example is the Google logo. Today, in the age of digitization, many companies rely on an animated version of their logo – on the website, in a commercial or in online advertising, this can be used optimally and attract even more attention.

© Google | www.google.com

Not only animations are trendy – time and again complete videos are also integrated. Adobe used this skill to create a landing page for the marketing cloud. With short video sequences, interesting scrolling effects, bright colors and great typography, the design is a very appealing and successful combination of various current web trends.

Especially in software presentations, videos are often used to show different work steps and functions directly. InVision, for example, presents its new screen design tool "Studio" in a very appealing way and with many informative video clips.

© InVision | www.invisionapp.com

Today, because photo databases like Adobe Stock make it relatively easy for everyone to access high-quality images, it has become harder to stand out from the competition with good photos. This is one of the reasons why illustrations are currently very popular. They are often created individually for a customer. This results in a whole range of representations that exactly meet the customer's needs and can thus deliberately get to the heart of the matter.

A good example of this is Pimcore. With the release of Pimcore 5, the company presents itself in a completely new design. In addition to the redesign of the logo, elaborate illustrations were created, which are additionally animated on the website. This creates an enormously high recognition value. Without having to lose a logo or a word about Pimcore, you know which company it is when you see the astronaut.

© Pimcore GmbH | www.pimcore.com

Typography – preferably large, bold and with serifs

Anyone who thinks typography belongs only in the print sector is completely wrong. Fonts are also becoming increasingly important on the web. Just choosing the right typeface is a big step towards "good design". Likewise, the wrong typeface can "destroy" a good design in itself.

Serif headlines are currently in vogue. With a sans-serif basic font as a contrast, these have a positive effect on user-friendliness and encourage visitors to continue reading. Nurture Digital has implemented this very appropriately.

© Nurture Digital | www.nurturedigital.com

One advantage of typographic design is the fast loading time of the website. While large amounts of data have to be loaded for an image, fonts are loaded in fractions of a second. Especially Google Fonts (with which we mostly work) offer a big "loading time advantage", because these are stored in the browser cache across websites and once.

"Pictures say more than 1000 words" – what may sound like an advantage for photos is actually a hidden advantage of designs with a lot of writing. Because no search engine can read the statements that an image makes without these "1000 words". SEO-technically typography is certainly a good and very important thing.

Asymmetry – preferably unmistakable and as experimental as possible

Two trends are hidden in this title. One is asymmetry: this began last year with the trend towards vertically divided designs. Airbnb has opted for a split-screen design for the website of its "Until we all belong" campaign.

Beispiel «Split-Screen-Design» | © Airbnb | www.untilweallbelong.com
© Airbnb | www.untilweallbelong.com

This year the whole thing goes even further: objects are arranged seemingly randomly, with no grid at all. Whether this is now very user-friendly remains to be seen. The example of Dada-Data shows this trend very well.

Beispiel «Asymmetrie» | © Dada-Data | www.dada-data.net
© Dada-Data | www.dada-data.net

The "Brutalism" trend goes even further. He's throwing all the design rules out of the window, so to speak. And this on purpose. The aim is to attract attention - with a website that is as "ugly" as possible. Want an example? Gucci's Gift Shop is the perfect place to showcase this trend.

Beispiel «Brutalism» | © Gucci | gift.gucci.com
© Gucci | gift.gucci.com

My Conclusion

Of course, these were far from all current web design trends, but in my opinion they are the most important. I would like to say that a screen design without these trends does not have to be "old-fashioned". Likewise, the use of a color gradient is no guarantee for a good and modern design. It takes a lot more than that.

As in fashion, trends are a matter of taste. Please let us know which trends you like and we will take them into account when creating your screen design.

Your Comment

Whether constructive criticism, questions due to ambiguities or simply a few words of praise – we thank you already for your comment. After a short check we will publish it.


Back to all blog posts

Get off to a flying start with Pimcore X!