Web Design Trends to Look For in 2018

Recently studying the new trends in web design to expect in the coming year, many ingenuitive, and sensible ideas arose. Though some have been around at least a little while, others just seem like progress. Nevertheless, here’s a list of things I’ve picked up on that you might see in 2018.

Bold Typography & Colors

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.

99 designs

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.

99 designs

Asymetrical 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.

99 designs

Particle Backgrounds & Custom Illustration

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 a 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. 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.

99 designs

Scalable Vector Graphics (SVG)

Scalable Vector Graphics are becoming more common as the de factor image type for websites. SVGs are lightweight vector images that ensure graphics, icons and logos look pixel perfect regardless of screen size or resolution.

All the high-resolution displays are contributing to the rise of this file format.

SVGs also work well with still and multimedia image experiences, including 3D images, cinemagraphs, logo animations and 360-degree photography.

hk.saowen.com

Split Screen & Homepage

Split-screen design patterns are only growing in popularity. Even the more perfectly split styles.

These designs are so popular because they provide great experiences on both desktop screens and mobile devices because the split content displays side-by-side and stacked equally well. (That way there’s a consistent, but device-specific experience for users.)

While many early split-screen designs were truly split, many designers are opting for a split screen, plus an additional top layer with text or branding to provide an effect that has more depth.

Design Shack

The “Brutal” Design Approach

Brutalism … is ripping open a space where designers can do what they want, rather than what they should. The works created here eschew all the optimization advice and best practices lists in favor of looks and effects that live in the jarring, and sometimes border on the offensive (to expectations, anyway).

Web Flow

No More Pop-up or Interstitial Ads

Google tends to be the main driver behind web trends, and there’s no doubt that it will be the driving force behind sites wanting to drop their pop-ups and interstitials. Google recently announced that it will start punishing sites that use these annoying tactics in search results — for instance blocking most of the content on a page until you click the “X” button.

In 2018 we will be seeing less of these, as sites become worried that they could take an SEO hit when it comes to Google. However, not all interstitials will disappear — websites that require age verification or signing in before seeing content will still need them.

The Next Web

Diagonal Section Breaks

Whoever said that horizontal breaks had to be… horizontal? More recently, designers have been playing around with how horizontal a line break or section break has to be by putting it on edge, literally. By separating sections of a website using a sharp diagonal, it helps add visual interest and unique website layouts that can help separate it from most sites who are still using the very horizontal break of circa 2014.

Stripe’s website shows how this trend, when done well, can produce great results. Not only do they use sharp gradients as mentioned above but they also visually break up sections of their homepage using a sharp 10-degree angle. This results in nicely delineated visual areas and offers a unique way to present content.

The Next Web

Interactive Story-telling

As publishers find new ways to deliver content in unique ways to their audience, I anticipate seeing storytelling on the web going more interactive using animations and videos to help illustrate various parts of the story.

A great example of this is CNN’s most recent story about global warming and Greenland’s melting glaciers. As you scroll, it tells the story with different paragraphs that appear and disappear at times, along with the video in the background changing. Parts of the story are illustrated using maps or other graphics, which readers “pass” when they scroll down.

The Next Web

Voice & Natural Language Search

The future of web design isn’t 100 percent visual. Some of it will be audible.

From designing interfaces that can “hear” and understand voice commands to incorporate search terms that mimic natural language, integrating a world of voice and language will be imperative for website design projects.

And while some of these other trends might not be even more popular at the end of 2018, voice and natural language search is only going to grow in usage and popularity. You should start planning for it now so you’ll be able to incorporate it into future projects with ease.

Design Shack

Animations & Scrolling Effects

Animations were among the trends last year (read our article to find out all the trends of 2017). Perhaps, we can safely say that the animation is already becoming a classic which never goes out of fashion. Interactive elements capture attention as much as possible and allow avoiding the extra description in order to explain to a user what the company or brand offers him.

However, animations have developed and improved. Now websites are not just dynamic, they react to user actions and give the impression of “living” resources.

Agilie

Scrolled animation triggers encourage users to keep scrolling down your website pages with specifically triggered interactive elements that increase engagement. Here’s one great example of scroll triggered animation from Apple. These animation triggers are nothing new, but they have begun to be used in a new way. The best scroll triggered animations are minimalist, educational and strategic, designed to increase conversions.

Scroll triggered animations can also clean up the look and feel of your website. Instead of having a collection of buttons and menus, your site will convey a true, interactive experience for your users.

World Web Advantage

AI

Artificial Intelligence digital concept

They may still sound like terms from a sci-fi film, but artificial intelligence (AI) and machine learning have hit the mainstream. In 2016, Google’s AlphaGo AI beat a skilled human Go player for the first time, a defeat that had long been sought after, and AI assistants like Siri are available on millions of devices. So it comes as no surprise that Adobe’s Sensei promises to make AI tools easily available to web developers around the world, while TheGrid has been offering AI-based web designs since 2014. As AI and machine learning continue to advance, we’ll start to see them make their way into webdesign in other, more advanced ways.

World Web Advantage

The Internet of Things (IoT)

Connecting web services to the Internet of Things has been a huge trend in 2017, and it will continue on this path in 2018. IoT devices can include objects as simple as a refrigerator to as complicated as a tidal turbine. These “things” use sensor arrays and server-side processing to receive and act on their environments. APIs that allow web developers to connect and communicate with these devices are currently being created, leading to even more interconnectivity of the next several years.

Web World Advantage

Dynamic & Sharp Gradients

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.

99 Designs

Sharp gradients are starting to be used to help add some visual interest to gradients beyond just a gradual change in color. Seeing the color change on a sharp line helps take an ordinary gradient of 2015 and make it more modern for 2018.

The Next Web

HTTPS

It seems like every time you read your favorite news site, there’s a story about a malicious hacker, a serious data breach, or a malware attack. Security is at the forefront of our minds and it’s taking center stage when it comes to web design and development. Google has already taken steps to notify users of potentially harmful websites. As you think about your web design, be sure to consider the security of your customer’s information. Make sure your security certificate is updated on all pages. People will only interact with your website, download your content, and share their information if they trust you.

@blvckdivmond on Medium

In Summary

In essence, some of the look and feel trends are reversing from those of a year or two ago, such as “flat” images (influenced by Windows 8 and Surface), text shadows, etc.. It makes sense to me that some of these trends are finally adopted, as I once pointed out, why not take advantage of the increased ability of CSS3?

What’s my take on the new trends? Although they can be inspirational, I’m not big on trends. If designers follow them, it steals away from their creative instincts. Every site serves it’s own purpose and has its own unique personality, and with the power now available to easily achieve practically any effect, let the site take on its own character. I say, it’s okay to use design trends as a guideline but not as the ultimate basis of a design!

Like this?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.