A Look Ahead: Web Design Predictions for 2018

This year I wanted to give you time to settle in, to get January under your belts before peering ahead at what 2018 will hold for web design. Take a look at these seven predictions and see if your thoughts match mine!

A Look Ahead: Web Design Predictions for 2018

Tradition Dictates

I’ve written quite a few of these prediction posts now–so if you’re feeling nostalgic you might want to see how my predictions from previous years stack up:

  • A Look Ahead: Web Design Predictions for 2018
    Industry
    Web Design 2014: What to Watch Out For
    Jonathan Cutrell

     

  • A Look Ahead: Web Design Predictions for 2018
    Industry
    What to Expect in Web Design in 2015
    Jonathan Cutrell

     

  • A Look Ahead: Web Design Predictions for 2018
    Industry
    What to Expect From Web Design in 2016
    Jonathan Cutrell

     

  • A Look Ahead: Web Design Predictions for 2018
    Industry
    Web Design Predictions for 2017
    Jonathan Cutrell

     

1. Grids, Everywhere

With the adoption of CSS Grid, we’ll see new and interesting ways to organize content with grids. This is a great example of the innovation of a technology that pushes forward the implications in the media itself.

CSS Grid will allow, for example, the rearrangment of content in ways that are much more dynamic than what we’ve been able to accomplish with Flexbox and certainly much more dynamic than traditional float-oriented grid systems.

As a result, designing content flows for mobile and other device sizes will be much easier to accomplish.

For companies that invest in following trends, we will likely see the traditional grid usage broken, making the grid itself a design device.

Learn CSS Grid Layout

  • A Look Ahead: Web Design Predictions for 2018
    CSS
    Solving Problems With CSS Grid and Flexbox: The Card UI
    Ian Yates

     

  • A Look Ahead: Web Design Predictions for 2018
    CSS
    How to Build an Off-Canvas Navigation With CSS Grid
    Ian Yates

     

2. World of Web Apps

The popularity of React and other component systems have made app oriented web development the new standard. Quickly expiring are the days of page design and templating; arriving are the days of components and composition.

This will also usher in a larger number of native applications, as these concepts are transferrable to the native application environment using tools like React Native.

“arriving are the days of components and composition”

More designers will use component building as a medium for expression. For a few years, we’ve seen these micro-designs growing in popularity, and they aren’t slowing down.

What you won’t see:

Complex app functionality replacing content-driven components.

While component design and composition is the future, most content-oriented sites don’t necessarily need interactivity that spans beyond dynamic display of content.

What this means is that the power of component design is more about creating flexible and reusable modules and consistent design language, and less about creating an “app-like experience”.

3. More Complex Animations and Compositions

Animation is continuing to mature on the web. While much of the animation seen thus far has either been used as flourish effects in interfaces or as flashy large transitions, as animation matures it will become a more integrated part of the media itself.

This will blur the lines of the elements we use, allowing for much more fluid transformations of content.

4. Images as Design

Web design has generally separated images from design elements. For the most part, images have been treated as a separate part of the content; a window into the real world.

In 2018 and beyond, images will be used in a more integrated way, making up part of the design. The deconstruction of images into layers and the intermingling of other element types like particles or dynamic text will bridge the gap between images and other design elements, creating new demands on web-conscious photographer positions.

  • A Look Ahead: Web Design Predictions for 2018
    Typography
    Tips to Help You Properly Mix Text With Imagery
    Jonathan Cutrell

     

  • A Look Ahead: Web Design Predictions for 2018
    Careers
    How to Become an Art Director
    Mary Winkler

     

5. More Illustration

Now more than ever, organizations must communicate transparency and trustworthiness. While genuine transparency is of course the basis of all trust, it is also important for online communications and design style to portray that trustworthy image.

One way to accomplish this is to establish a sense of environment and a branding “world”. This is what Geico does with their spokesperson Gecko—an alternative world where a kindly, talking Gecko is selling you insurance.

A Look Ahead: Web Design Predictions for 2018

Other examples of this include Regions Bank’s green bicycle, the anti-hero Mayhem used by AllState, and Voya’s colored rabbits. You’ll notice these examples are two sectors where trust has always been key (insurance and finance).

Now, as trust becomes a much more important selling factor, these parallel worlds provide us a picture of the ethical makeup and culture a company has adopted as their own.

A Look Ahead: Web Design Predictions for 2018

Most companies don’t have a format or resources to support a spokesperson. However, illustrative design allows for this same symbology, constructing a world to explain the company’s values.

Practically speaking, this will mean more illustrations and illustration-laden photos will show up as primary elements in design. Whether to explain a story, or to build a visual landscape of branding elements, illustrations will serve as a way for companies to break down the barriers between themselves and the people they serve.

6. Hello Fluid Shaped Gradients

As design tools and web capabilities evolve, the borders that have confined web design for so long will be broken down. Vibrant colored gradients and morphous curved shapes will make their way into designs stronger than ever before. Say “goodbye” to solid colored boxes.

Spotify has been instrumental in pushing these trends forward, and we can see this in Apple’s redesign of the App Store released in 2017.

A Look Ahead: Web Design Predictions for 2018

Some gradient resources and inspiration you may find useful:

  • A Look Ahead: Web Design Predictions for 2018
    CSS
    How to Use CSS Gradients on the Web
    Adi Purdila

     

  • A Look Ahead: Web Design Predictions for 2018
    CSS
    Revisiting the CSS Background Property
    Thoriq Firdaus

     

7. Interactive and Conversation-Oriented Experiences

Message apps are bigger than ever, and they aren’t going anywhere. In many ways, every application can be modeled through the concept of messaging, and now it has become even more explicit. Message bots are growing in popularity, and of course 1-to-1 human messaging is a massive industry.

More and more companies and services will adopt this same interaction model, building experiences that rely on free-form messages sent from a user. AI will assist in making these interfaces more powerful, especially as AI becomes more sophisticated and widely available as a service model.

We’ve already seen conversational interfaces become mega-companies in their own right; WhatsApp, of course, but more recently the launch of ProductHunt’s product launch landing page service, Instagram’s messaging app, and plenty more.

Expect to see super-powered customer service interfaces, ordering via chatbots, and even small customizations in your user experience in response to chat messaging interchanges.

Onwards!

Enough talk–go out there into the wide world of web design, and see what 2018 brings!

More on What Lies Ahead in 2018

  • A Look Ahead: Web Design Predictions for 2018
    Browser Apps
    State of Browser-Based Web Design Applications: 2018
    Kezz Bracey

     

  • A Look Ahead: Web Design Predictions for 2018
    CSS
    Learn Something New: Master These Trending Topics for 2018
    Joel Bankhead