How does the fresh and lasting web design look in 2018? The most influential modern trends in web design can be summarized in four short points:

  • Smart color,
  • Unconventional layouts,
  • Bold typography,
  • Animations everywhere.

But what exact elements are most likely to still be popular in the following years? And what will work best for your own brand? Find out in this article.

Colors That Tell Your Story

Web design circles were always concerned with the right choice of colors. This year was full of color trends that have basically dominated the design talk. Think about the overhauled Instagram logo, renovated iOS design or Spotify – that was just the beginning.

Brighter, bolder hues prevail, however, muted colors are still a strong choice for certain cases.

Vividness against the dark

Using rainbow style hues can be complicated due to the contrast issues. However, putting bright, richly saturated colors against a dark background definitely helps to make them pop out.

GitHub Universe Screenshot Featuring Vivid Colors on Dark Background

For example, Github is using rainbow accent hues against pitch black starry sky background to promote its next conference. Even though it’s a serious-looking, simple website, they added more eye-catching, small color elements to guide the user. Plus there is an additional modern move – using more flat rainbow aesthetics and less of the fancy gradients.

Savee Website Screenshot Featuring Vivid Photo Collage Against Dark Background

Savee, a portfolio hosting service, takes a different approach but also uses colors on a dark background. Their main page features tiles of mostly bright and saturated photos to create a unique feel.

Colorful Splash-Landing

Background full of contrasting (sometimes to extreme) colors can also be a great tool to give a strong first impression.

Lonsdale Website Screenshot Featuring Colorful Splash Video Background

Lonsdale, a branding and design agency, coins into a few trends at once: splash landing background, high-contrast color pallet, and a looped video. Notice the nature of the brand and its corresponding message – we are bold, progressive, creative.

Vintage colors

Also known as muted, those pallets are calmer and more relaxing to the eye. Unlike the screaming saturation, their pastel feel invites visitor’s attention and does not demand it.

Wolf & Son Website Screenshot Featuring Vintage Colors

For example, Wolf and Son, a balanced, traditional footwear brand for men, is all about subtle pallet colors. This works equally well for their website too. Again, the color choices for any of the web pages of your brand should stay consistent with the brand essence.

Mobile First & Optimized Cinematic Experience

Share of Web Traffic By Device Infographic By HootsuiteIn 2017 around 50% of worldwide traffic already comes from mobile devices. This number will only keep on growing and this sets a serious challenge for us as web designers. Although a short and wide website may look perfect on a Retina desktop display but be completely out of place in a vertical mobile browser.

Composition is, of course, the fundamental concept in design. So how can we effectively display the same powerful content within a huge amount of different screen sizes? To maintain design integrity, we have to get creative, because cropping is no longer acceptable in this brave new “responsive world”.

Instead of thinking about static images, now we have to think about the message itself that they tell. Layouts become adaptable to the stories the websites communicate and devices on which they are shown.

Cinematic experience on mobile

Big cinematic video backgrounds are trending since 2015, but only now they become widely adopted. Technology has significantly improved and now allows for faster load times. Advances in WebGL have also enabled video backgrounds to become interactive, allowing for new immersive cinematic experiences. A great example of this is the Visit Humboldt website.

On the other hand, mobile websites are still majorly avoiding cinematic backgrounds, mostly due to the limited mobile bandwidth reasoning. This, of course, is changing slowly, however, there is still one good way to get a similar experience without a heavy data consumption.

Example of a Cinemagram Media

Meet a cinemagram. It’s a well-looped, light-weight gif that has minor movements and mimics video experience. We are definitely going to see more of those on the web in 2018, including mobile websites like Kikk.be.

Unconventional Layouts

Asymmetry trend, richer backgrounds, patterns and decorative details have contributed to a rise of a true tsunami wave of “broken” websites. Common layout styles have been ditched as outdated by most of the respected agencies. But what differentiates a well-made unique design from a simply broken one?

Asymmetry with perspective

Piercing through the boundaries of generic layouts doesn’t always mean losing the balance all at once. In the following example, a landing page with its slides is fairly simple, featuring only a slight shaking of the symmetry to make UX more streamlined and easier.

Culture.pl Project Website Featuring Modern Asymmetry Trends

Multimedia Guides To Polish Culture by Culture.pl welcome us with a split-screen layout, creative typography and popping monochromatic pictures. However, getting deeper into the content of this website we become drawn to the whole new level of complexity. Radical animations, quickly changing layouts and lack of structure create a special, distinct style.

Smart menus

A good “broken” website may be confusing in everything except navigation. Careful guidance for users through the content is still the key. So think about creative yet functional ways to provide navigation without those cheap “hamburgers” stuck on your website.

Here are few examples of smart ways to implement a menu without sacrificing the style and feel of your website.

Menu as a frame – Hillside Rancho Church

Hillside Ranch Church Website Screenshot Featuring Menu as a frame

Pop up menu – Circles Conference

Circles Conference Website Screenshot Featuring Pop up menu

Full-screen menu (“Pop-over”) – Edelson

Edelson Website Screenshot Featuring Full-screen menu

No-menu navigation (when nothing else seems to match your rad brand) – Anonymous Burger

Anonymous Burger Website Screenshot Featuring No-menu navigation

Aspect ratios vs art direction

In the end, it’s always possible (although by far not always smart), to completely get rid of a unified layout structure. Notice that in the following example uses a whole bunch of trendy design moves for the sake of art direction, thus producing one unified statement instead of a chaos.

Lionel Durimel Website Screenshot Featuring Radical Layout

Lionel Durimel is a French designer with a long list of awards and diverse portfolio. His website combines radically different layout, bold typography, crazy aspect ratios, lack of structure, animations and custom scrolling.

Animations Everywhere

For a long time animations were treated as a ‘reward’ for a user’s action. For example, some elements moved on mouse hover or click. However, today technology allows for more powerful and quick ways to integrate animations into pages as a design element.

Subtle animation and micro-interactions

Although fast, sudden movements are proven to repel users, subtle animations are highly effective in drawing attention. In particular, events like simple scroll down a page may trigger movement of a button, picture, or a whole subscription form, meaning we can focus viewer’s attention exactly where we want it to be.

Micro-interactions and interesting animations enrich simple websites, thus working well even with minimalist layouts. They not only serve as a bonus for UX but also add personality to a website. For example – sketching animations on the Project Sunday’s website.

Project Sunday Website Animations

Bold animated typography

The text is no longer a necessarily static element and bold typography means more than large fonts. One of the strongest trends on the web today is integration between typography, images, video, and animations. The example used below – Zoomanity.

Zoomanity Website Animations

Animation as the killer feature

In certain cases, animations may become a signature design feature on their own. We see this exact trend used in the already mentioned Multimedia Guides To Polish Culture website. Look at the gif below and imagine seeing different animations or no animations at all.

Multimedia Guides To Polish Culture Website Featuring Animations

Almost any imaginable trigger-effect pairs and subsequent animations can be implemented with the modern JavaScript and CSS solutions. However, many diverse animations (especially ones with a full-blown layout metamorphosis) are not always purposeful. Sometimes this produces overly complex websites that look more like works of avant-garde art than anything else.

DaDa Data Website Animations

In the end, the most important becomes not the consistency of elements within the website, but rather the consistency of the overall design and the message it provides with the brand it represents. This is currently true and will become even more important in the coming years.

Not sure what's best for you?
Contact us , we are always here to help you! Our expert team of web developers and designers will make sure that your website suits your brand perfectly.