Be warned: I’ve packed this one with big photos and long gifs; expect some load times until I get around to implementing lazy loading on the site. Plus, it’s better than the alternative of arbitrarily chopping up content to increase my pageviews.
As soon as one year ends, another begins. It’s like the calendar is set up like that. If you work on the web, design trends and knowing what’s “on-trend” for 2015 is important for keeping your skills and your clients happy.
In the spirit of conjecture and general end-of-year regrets, I decided to take a crack at predicting some future web design trends you can expect for 2015. Plus, if I’m wrong I can always go back and edit this post.
1. The Web Operating System
2014 was the year of the dramatic. Edge-to-edge background images, videos, and interactive graphics dominated the landscape, which pushed designers into creating what I call “The Web Operating System.”
This “system” pushed web designers to create deep, coherent user interface patterns that solved how users interact with sites. Further, these systems delved into reinforcing and supporting the user experience and page content.
When it comes to post-apocalyptic young adult literature with female protagonists, I choose the Hunger Games. The Capital.pn is a great example – fixed elements, fast transition, facets, and geometry come together to reinforce the cold, modern content focus.
This trend will exist, in part, due to the increase pressure for interactivity and off-canvas elements on sites; designers using these UI systems to help users navigate through sites that don’t feel as linear or as hierarchical.
Sites like BMW’s Motorrad Special shop show how even commonplace UI elements like hamburger menus and rounded corners make sites feel more like a tablet app — expansive, pushed-to-edge, and slightly off center.
2. Off-Canvas Site Navigation
Along with the focus on big, screen edge-to-screen edge elements, designers are placing a bigger focus on interesting, and sometimes bizarre, site navigation.
At one end, you’ll see simple combinations of hamburger menus and off-canvas slide out panels, which has become a common pattern for many web designers.
At the other end of the extreme, you’ll see navigation patterns that are practically separate pages and treated like a modal in terms of flow.
The portfolio of Moeko Abe is a great example of a pattern that’s certainly unconventional, even jarring, but usable and logical.
This style works even better when used as type with lots of white space.
3. Custom Iconography
Iconography isn’t new, but it certainly has a home in a sea of websites with landscape photography as backgrounds. Designers are effectively using icons in the same way that they use type: as a method for breaking up content without sacrificing whitespace.
Serious Studio features some beautiful animated sprites that trigger on hover, and give the site a smooth, 60 frames-per-second feel. The use of icons here also breaks up the focus of what the agency does vs. examples of work below.
Secret Resolutions combines off-canvas navigation (#2) with iconography to quickly orient visitors to the focus of each link.
4. Subtle Animations
Animations continue to work their way into web design, partly as a function of the excellent libraries and tools that exist for making animations easy (see this great post on Awwwards).
Site preloaders have always featured some type of animation, even if it was nothing more than a simple AJAX style spinny gif. Today, however, preloader animations have become a design focus and expected part of UX design.
Smooth animations for loading on page elements as well. In some cases, these animations are actually loading on the fly (e.g. lazy loading). In other cases, it’s because it looks cool. I actually use this effect on the front page of my site by adding a CSS animation to elements once the page has loaded.
5.Animated Page Transitions
In the Internet of yesteryear, users would click a link to be treated to a flash on page load as the browser waited on data. Today, however, designers are packing transitions into the pageloads.
I’m a big fan of these transitions because they allow for an interesting flair without interrupting the expressed user action. These transitions are often used in conjunction with preloaders between internal links (see Wild) on assets. Plus, when used in conjunction with load animations, page transitions can give a site a svelte feel.
Like all these trends, there are some exceptionally bad implementations (e.g. this tilt-o-whirl of a site). Animsition is excellent to use if you’re after this effect (I use it on my Portfolio pages).
6. Adaptive Headers
I struggled to come up with a name for this trend, but I’m going with “adaptive” headers, which are, you guessed it, headers that adapt to various scroll situations.
A simple example is a non-fixed header that transitions to fixed once the user scrolls past it.
Headers like this effectively give you the best of both worlds — the aesthetic of a content-focused header that moves out of the way on page load, but one that’s still accessible after the user scrolls past it. Headhesive.js is a plugin that offers a similar take on the concept.
Another variation of an adaptive header is a header that remains relative and outside of the viewport until the user begins to scroll up.
Other adaptive headers reduce in size after scroll
7. Video Backgrounds
Unlike my site, many agencies are using video backgrounds as a preview of sorts to a larger video that you can watch from their front page.
There’s too many examples to list of video backgrounds, but the folks at Adaptable look cool.
8. 3D Backgrounds
This year more sites, especially from agencies, will be using 3d animation libraries (Three.js) to render interactive elements. Usually, you’ll see these rendered as backgrounds secondary to any on page content.
What? You want more examples ripped from young adult lit? Done. The District 13 promotional site has a flickering 1990s “The Net” background that supports the content and even links to different portions of the site.
Unless you have significant development resources at your disposal, many of these sites are reserved for agencies that specialize in interaction.
Panels, sometimes called slides, aren’t new to 2015, but you are seeing some variations on this element.
I define a panel as any pattern that segments content and prevents a user from scrolling naturally. Traditionally, panels are segmented by the viewport, which gives the flow a PowerPoint feel.
Charles Kalpakian’s is a classic example of the pattern I’m talking about: viewport-sized sections that trigger scrolling on keyboard or mouse gestures.
Some people are putting a twist on this pattern. Wild is another good example. The page and navigation are seamlessly integrated as a series of horizontal panels.
Each panel can be swiped to with a mouse. A hamburger menu zooms out to reveal all the panels and, again, is itself swipeable.
The Wrap Up
This year’s trends are a continuation of what we saw in 2014: big, full screen, and minimal designs that are pushing the idea of both traditional page-to-page flows.
Like any good designer, however, knowing about these trends doesn’t mean you need to implement them all, and there are absolutely bad implementations of all the examples provided here.