9 cutting-edge web design trends for 2018 - 99designs


Als een digitaal medium is webdesign veel meer onderhevig aan verschuivingen in technologie dan de traditionele gedrukte voordragers. Maar we zijn nu 18 jaar bezig met het nieuwe millennium, dus dat is geen verrassing, toch? Wat verrassend is, is de manier waarop webontwerpers zijn blijven omgaan met toenemende technische uitdagingen en nog steeds in staat zijn om sites te maken die gebruikersvriendelijk, duidelijk en innovatief zijn, consistent met de huisstijl, aanpasbaar aan elk denkbaar apparaat en gewoonweg heel mooi tegelijk .

In 2017 zagen we veel vooruitgang, waaronder het mobiele gebruik dat eindelijk het browsen op de desktop voorbijstreefde. Dit betekent dat 2018 mobiele functionaliteit volledig zal moeten gebruiken op manieren die we nog nooit eerder hebben gezien, terwijl desktops moeten blijven evolueren om relevant te blijven. Met dat in gedachten, laten we een paar opmerkelijke webontwerptrends bekijken die in 2018 klaar komen om over te nemen.

Hier zijn 9 webdesigntrends die u moet kennen in 2018
-

  1. Laat schaduwen en diepte vallen
  2. Kleurenschema's
  3. Deeltjes achtergronden
  4. Mobiel eerst
  5. Aangepaste illustraties
  6. Grote, krachtige typografie
  7. Netlay-outs
  8. Geïntegreerde animaties
  9. Dynamische gradiënten

1. Laat schaduwen en diepte vallen

The use of shadows is not new, so why mention it? Although shadows have been a staple of web design for quite a while, thanks to the progress of web browsers, we now see some exciting variations. With grids and parallax layouts, web designers are playing with shadows more than ever to create depth and the illusion of a world beyond the screen. This is a direct reaction to the flat design trend that was popular in years past.

Een afbeelding van de startpagina van clearbrit.com
Een afbeelding van de startpagina van scaleapi.com

Shadowplay creates a surprisingly versatile effect that increases not only the aesthetics of a web page, but also helps User Experience (UX) by providing emphasis. For example, using soft, subtle shadows as hover states to designate a link is not a new idea, but combining them with vibrant color gradients (more on that later) like the examples above enhances the three dimensional effect of the old shadows.

2. Vibrant, saturated color schemes

Een afbeelding van de landingspagina van adobe.com
Via Adobe
Een afbeelding van Spotify's webpagina
Een afbeelding van Eg Wine Co's webpagina
Een landingspagina voor Arielle Careers
Colorful landing page design by Adam Bagus for Arielle Careers

2018 is definitely the year for super excess colors online. While in the past many brands and designers were stuck with web-safe colors, more designers are becoming courageous in their approach to color—including supersaturation and vibrant shades combined with headers that are no longer just horizontal but reimagined with slashes and hard angles.

This is partly helped by technological advances in monitors and devices with screens that are more suitable for reproducing richer colors. Vibrant and even clashing colors can be useful for newer brands hoping to instantly attract their visitors’ attention, but it is also perfect for brands who want to set themselves apart the ‘web-safe’ and the traditional.

3. Particle backgrounds

An animated header for Heco's home page
Via Heco

Particle backgrounds are a great solution to performance issues websites run into with a video background. These animations are lightweight javascript that allow movement to be created as a natural part of the background, all without taking too long to load.

They say that an image says more than thousand words, and a moving one certainly does. Similarly, particle backgrounds immediately attract the user’s attention, so brands can create a memorable impression of themselves in only a few seconds. Additionally, motion graphics like these are becoming more and more popular on social media, providing eye-popping leads back to landing pages.

4. Mobile first

A mobile nutrition app design
Nutrition app design by Masum R.
An image of the mobile version of G-Star's web page
Via G-Star
An image of the mobile version of IGK Hair's web page
An animated mobile app for home growing
Home growing app design by Typelab D

As mentioned earlier, mobile browsing has now officially surpassed desktop. Almost everyone these days shops and orders on their smartphone. In the past, this was a clunky process that users were not as quick to adopt. Designers puzzled: how do we get a decent menu, submenu and subsubmenu on a small screen?

But now mobile design has matured. The roll-out burger has become established, minimizing the menu for the small screen. You might have to ditch large, beautiful photos your client sends you in the mobile version, but icons are much more economical in terms of space and have become so common that the user has no trouble understanding them. And UX issues have become easier to identify and fix with micro-interactions getting you immediate feedback on your users actions.

5. Custom illustrations

An image of Stride.com's illustrated header
Via Stride
An image of a cartoon style web page
Web page illustrated and designed by SixDesign
An image of zingle.com's illustrated header
Via Zingle

Illustrations are great, versatile media for creating images that are playful, friendly and add an element of fun to a site. Experienced artists can make illustrations that are full of personality and tailored to a brand’s tone—what all brands strive for in markets that get more crowded each year.

While this trend is perfect for businesses that are fun and energetic, it can help make brands that are typically perceived as serious and right-brained more approachable to their customers. Whatever your brand identity is, there’s likely an illustration style to match it.

6. Big, bold typography

Typography has always been a powerful visual tool, able to create personality, evoke emotion and set tone on a website all while conveying important information. And now, because device resolutions are getting sharper and easier to read, I expect a huge increase in the use of custom fonts. Excluding Internet Explorer, many browsers can support hand-made typefaces that are enabled by CSS for web browsers. The trend of large letters, contrasting sans serif and serif headings help create dynamic parallels, improve UX and best of all, keep the visitor reading your website.

For web pages in particular, headers are key SEO elements and help to order information for the scanning eyes of readers. Looking ahead to 2018, designers will take full advantage of this with web pages featuring large and impactful headers spun out of creative typefaces.

7. Asymmetry and broken grid layouts

One big change in 2017 was the introduction of asymmetrical and unconventional ‘broken’ layouts, and this web trend will still be going strong in 2018. The appeal of the asymmetrical layout is that it is unique, distinctive and sometimes experimental.

Although large-scale brands with a lot of content still use traditional grid-based structures, I expect an increase in the use of unconventional layouts across the web, as brands create unique experiences to set themselves apart. Traditional companies generally might not be interested in this aesthetic, but bigger brands that can afford to be a little risky will expect out-of-the-box ideas from their web designer.

8. Integrated animations

The animated header of InTurn's web page
Via InTurn

As browser technology advances, more websites are moving from static images and finding new ways, like animations, to engage users in their communication approach. Unlike the particle animations mentioned earlier (which are generally large backgrounds), smaller animations are helpful for engaging the visitor throughout their entire experience on the page. For example, graphics can animate the user while the page is loading, or show the user an interesting hover state from a link. They can also be integrated to work with scrolling, navigation or as the focal point of the entire site.

Animation is great tool for including users in the story of a website, allowing them to see themselves (and their potential future as customers) in the characters. Even if you are only interested in animations for fun abstract visuals, they work well to create meaningful interactions for your visitors.

9. Dynamic gradients

De headerafbeelding van de startpagina van symodd
Via symodd
Een app-scherm voor Fire Works
Fire Works mobile app by Samuel.Z for Fish on Fire
App-schermen voor een islamitische gebedsapp
Mobile app by M. Tony for Elmurz

Over the last few years, flat design has been a much preferred web design trend over dimensional colors, but gradients are making a big comeback in 2018. Last time gradients were around, they were seen mainly in the form of subtle shading to suggest 3D (Apple’s iOS icons were a great example).

Now, gradients are big, loud and full of color. The most popular recent incarnation is a gradient filter over photos—a great way to make a less interesting image look intriguing. A simple gradient background can also be the perfect on-trend solution if you don’t have any other images to work with.

Looking forward to the 2018 web design trends

Between the bright colors, bold gradients and integrated animations, 2018 is gearing up to be one of the most fun years in recent memory around the web. We can’t wait to see what designers are going to come up with and how they’re going to push the limits.

Need an on-trend website for your organization? Check out our awesome web designers!

The author

Lennart de Ridder
Lennart de Ridder
Lennart is a Web Designer based in the Netherlands. He is the founder of Studio Ubique, which creates web experiences and helps businesses communicate with customers across digital platforms. You can find Lennart on 99designs as Studio Ubique.

Tags

Any comments?

    Luci
    3 months ago

    Awesome websites!

    Bob
    2 months ago

    Every link that I’ve tried on this page just seems to open this page again in a new tab.

    Jamahl
    2 months ago

    Thanks for the heads up. Should be fixed now.

Design tips & business trends in your inbox?

Subscribers to our newsletter have been scientifically proven to be smarter, better looking and at least 50% more awesome than average.
by Tamara

Current design contests

Designers, check out these contests so you can start building your career.
small