8 web design trends for 2018

8 web design trends for 2018

With each new year come new web design trends we see across platforms and designers alike. There are some types of design that hit home with audiences, bring a sense of nostalgia, and simply look striking on all kinds of sites. These 8 design trends for 2018 do all of that (and more)!

To kickstart your inspiration, we’re giving you an introduction to common design trends that have been popping up all over the web in 2018 (and even some examples of cool brands that are using them). Then we’ll go one step further and look into how to create each design trend on your very own site!

The 2018 design trends we’re going to cover:

  1. 90s tech
  2. Double exposure effect
  3. Duotone images
  4. Intertwined typography
  5. Neon sign treatment
  6. New retro wave
  7. Simple cinemagraphs
  8. Glitch effect

PS – These trends are all part of our free Design Trends email course! By signing up, you’ll get 8 days of design inspiration, Photoshop resources, and step-by-step tutorials delivered straight to your inbox. Check it out here!


90s Tech

layout by flywheel web design trends 2018 90s technology old computer tv and video game on blue background

Remember when computers were big and clunky? Or when TVs were square and boxy? While this trend might be a bit of a play on technology trends, it’s becoming increasingly popular to show off your new, innovative tech and designs on — you guessed it —old technology.

One group on the 90s tech trend is the Swedish agency, Station. On their pages, they feature some white, monochromatic old technology from chunky laptops to bulky keyboards. It’s all pulled off in a modern and sleek design that perfectly accents their webpage.

Clearly this trend is a great way to show just how far technology has come over the last couple decades. That’s what leaves this trend so unique — it sparks some awe and reminiscent feelings in us all.

Looking for your own retro design elements? Check out these 16 awesome freebies!


Double exposure effect

layout by flywheel web design trends 2018 double exposure effect man outline with misty field showing through

Double exposure (also known as multiple exposure) originated in film photography. Nowadays with image editing software, it’s essentially two images layered and masked on top of each other. This design trend is a play on light and can give the image subjects a more connected feel. In fact, double exposure is so popular it has become the inspiration for other work like this dance duet, this website template, or this book cover.

While this is a neat camera trick, not all of us are professional photographers or have access to a DSLR camera. That’s why this simple Photoshop tutorial gives us the perfect step-by-step how-to!


Duotone images

layout by flywheel web design trends 2018

This 2018 design trend is perfect for branding! If you’re looking for a new way to make your photos pop or give them an on-brand look, you can incorporate new colors into your design! Holm Marcher & Co. is a great example of how duotone can give a website such a beautiful aesthetic.

Perhaps one of the most well-known duotone campaigns was the 2016 Spotify ads. And believe it or not, this look is super simple to create yourself using just a few steps in Photoshop. You can follow this tutorial to do it yourself!


Intertwined typography

layout by flywheel web design trends 2018 intertwined typography mums the word calligraphy text weaving in and out of photo of mums

If you’re looking for a more 3D look to your work, intertwined typography is just what you need! This design trend layers various elements of the text and graphics to really pull out certain details and trick the eye into seeing it more realistically.

While this trend is increasingly popular with other types of design like calligraphy, wedding invitations, and floral patterns, there are so many ways to incorporate this look into your web design work and add some extra dimension to your designs!

Need an awesome font to go with your new intertwined typography design? We have the perfect solution to fit every style from calligraphy to retro!


Neon sign treatment

layout by flywheel web design trends 2018 neon sign treatment word hustle glowing pink neon sign on dark bring wall

Neon signs traditionally attract attention from their bright glow and brighter colors. While you might think it’s hard to incorporate something so vibrant in a digital design, neon sign treatments are blowing up campaigns everywhere. Why? It makes a perfect, stand-out call to action!

Most recently, it’s been popularly used in sales campaigns, like our Flywheel Black Friday campaign. And you can create it for yourself as well with this Photoshop tutorial!


New retro wave

layout by flywheel web design trends 2018 new retro wave super techno beats in retro modern font on sunset over mountains with grid floor like video game

Similar to the 90s tech trend, new retro designs bring back a fresh, video-game vibe with pre-21st century flair! While many examples are bright and colorful, this look can be incorporated with countless color schemes and fonts.

Just like the record label, this look combines bright neon lights and 80s music nostalgia. While new retro wave might not fit everyone’s style, it’s a great design trend to have some fun and try something new!


Simple cinemagraph

layout by flywheel web design trends 2018 simple cinemagraph jenga tower wobbling wih steady not moving hand removing bottom piece

It’s not just a gif or a video, but that might be the best way to make one! Cinemagraphs are little motion clips that can give you a sense of suspense or add a little life to your photos!

Some of our favorite cinemagraphs come from Sagmeister and Walsh and Octavo Designs. They bring their graphics to life in the most interesting, creative ways. You can catch the trend for yourself with this easy-to-follow how-to.


Glitch effect

layout by flywheel web design trends 2018 glitch effect robot on green background with glitch lines and color blurring

While there are so many ways to create motion (like cinemagraphs), you can also create a sense of motion with a glitch effect! Depending on how you use it, this can give your designs that old-tech feel or a futuristic curiosity. Much like our robot, a glitch effect has become popular with designers for it’s versatile use.

By following this tutorial, you can create this false sense of motion for yourself! And if you’re looking for inspiration on how you could incorporate the effect, check out Vintage and their unique use of the glitch effect design trend on their homepage.


Get the look


Want to know the best part? You can get all the resources to create all these trends for free just by signing up for Flywheel’s Design Trends email course! It’ll help you take a further look into each trend and give you everything you need to make it yourself. Sweet, right?


Join the discussion

Get more great content in your inbox

More articles

Delightful managed WordPress hosting

The #1 choice of over 70,000 digital creatives

Tour the platform
[if lte IE 8]
[if lte IE 8]