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
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:
IndustryWeb Design 2014: What to Watch Out ForJonathan Cutrell
IndustryWhat to Expect in Web Design in 2015Jonathan Cutrell
IndustryWhat to Expect From Web Design in 2016Jonathan Cutrell
IndustryWeb Design Predictions for 2017Jonathan 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
CSSSolving Problems With CSS Grid and Flexbox: The Card UIIan Yates
CSSHow to Build an Off-Canvas Navigation With CSS GridIan 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.
TypographyTips to Help You Properly Mix Text With ImageryJonathan Cutrell
CareersHow to Become an Art DirectorMary 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.
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.
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.
Some gradient resources and inspiration you may find useful:
CSSHow to Use CSS Gradients on the WebAdi Purdila
CSSRevisiting the CSS Background PropertyThoriq 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.
Enough talk–go out there into the wide world of web design, and see what 2018 brings!