How trendy is your website design? Does your interface include some of the most visual and user-friendly tools of the year?
It’s not too late to jump on some of the hottest design trends of 2016. (Most of these concepts are rather timeless and will carry into next year.) Here, we’re going to take a look at five trends that have been going strong all year and look ahead to a few things that will likely shape the 2017 design landscape.
2016 Trends Going Strong
Return of the Scroll
The scroll made a triumphant return in 2016 and we can credit it to mobile user patterns. Small screens make scrolling a necessity, and user returned to it when interacting with desktop websites as well.
And that’s a good thing.
The return of the scroll as an accepted user pattern provides more flexibility in the design and gives you more chances to interact with each visitor. Think of all the opportunities to play games, include scrolling features (parallax!) and develop other creative ways to tell your story.
There are a few tricks that you’ll want to consider when going back to the scroll:
- Tell users what to do. With interactive elements, give users a visual cue so they know how to proceed; a scroll arrow or “Scroll” instruction is adequate.
- Use the scroll purposefully. Don’t add effects just because you can. Users will only scroll if you give them good reason to.
- Use that extra above-the-scroll space to take a risk or do something bold visually. Delight users with a strong image, video or messaging.
- Don’t make it too difficult. Fancy scroll actions (such as left to right scrolling rather than up and down) can seem cool, but often confused users.
- Think about the complete experience when it comes to scrolling. Is it better than clicking for your content? (The answer should be yes if you are planning a long-scroll website design.)
Container-Style User Interface Elements
Thank you, material design for re-introducing web designers everywhere to the container element concept. These container elements, mostly employed in the form of cards, are popping up everywhere and they make a lot of sense for responsive design.
Cards are a helpful way to organize information, based on the one element per container theory. Each box asks the user to do one thing, whether it is to click on a video, enter an email address or buy an item.
One of the most usable features of cards – and likely why they are so popular – is that they can work with any visual plan. You don’t need to design for the element. It can match any interface, allowing users to integrate cards into a design without having to change the visual concept.
It would be hard to call 2016 anything other than the “year of the video.” Moving content has become an integral part of web design strategies for designers all over the globe.
A lot of it has to do more with access to high-speed internet and technology than video itself. Video content has always been popular outside the web, but high-resolution screens and fast connections have opened the door for widespread growth. (Just think: Even a year ago downloading or viewing a video on your phone was still somewhat tricky.)
But not just any old video will do. Users demand high-quality action that tells a story. From short snippets to more cinematographic-scale production, users will only pause to watch a video that’s good. It has to be interesting and relevant to your content.
Website video tends to be most popular when used in one of two ways:
- Short loop without sound that shows a product or service.
- Large scale production that provides entertainment value (such as a movie trailer). These videos often include optional sound or closed captioning so all users can experience the story in a couple of minutes.
Hidden Navigation Patterns
Designers have been arguing over the hamburger icon almost since its debut. Like it or not, one thing is certain it was the first step toward hidden and pop-out navigation patterns for all device types.
Now here’s why there is an argument over this tiny icon: Does hidden navigation make a website difficult for users? Do they not know where to go or what to click? (The answer probably depends on your side of the argument.)
There are some distinct design pros with hidden navigation:
- Lack of traditional can streamline the visuals, making it cleaner.
- Interesting navigation patterns are one more way to engage and delight users.
- People don’t really use the navigation anyway and prefer robust search.
- The hamburger icon (and other similar treatments) have been along long enough that users understand how to interact with them.
And a few cons as well:
- Navigation can get completely lost.
- While the pop-out pattern works and is commonly accepted on mobile devices, desktop users prefer standard navigation.
- The navigation is always hidden, resulting in a new click every time you want the menu.
- There is less opportunity for people to “discover” content through navigation.
While the hamburger icon is not the only option for hidden menus, it is still one of the most popular. If you are thinking about using this trend, consider your audience and their web-savviness before making the change. Some of the best examples of hidden nav now come with instructions or a mash up of traditional and pop-out menus, with a few main options and a full menu that’s hidden.
Bright Color Schemes
The bold, flashy color schemes associated with flat and material design have crept into design patterns of all styles. (And that’s a good thing.)
Bright color schemes are engaging and can help users feel a certain way when they interact with the design. (Typically bright, saturated hues are connected with happiness and desire much more than darker counterparts.) Color can help bring focus to your message and make users want to emotionally connect with the brand.
Here’s the big part of the trend: Bright color is fun! Many users visit websites for their entertainment value, whether it is to waste a few minutes while waiting in line or to share something with a friend, bright color schemes encourage those behaviors.
What’s nice about the trend is that in addition to the blues and greens that are commonplace, the trend has encouraged more designers to take changes with pinks, oranges, and purples. The result is a fun, bold, eye-catching visual presence that draws users in.
2017 Trends Preview
So what’s in store for 2017? Some of the things that we are already starting to see in design projects are likely to lead the way. While it can be rather tricky to predict trends – some fade as rapidly as they appear – there are a few that are poised to make an impact in a big way.
More Layered Elements
From three-dimensional concepts to elements that overlap in some way, layering is not just a fall fashion trend. It’s a big part of graphic design as well. The trick to making it work is that layers need to look realistic and intentional. (So much so that you might not even see them if you aren’t looking.)
Thank goodness for this: Gradients are back! Shunned in the era of flat design, soft gradients began to re-emerge with flat 2.0 and designers have a newfound respect for this technique. Bright color, two-tone gradients are a popular image overlay effect, as well as gradients for background usage. Much of the reason for all the gradients is actually a part of layering; the color effect helps create a level of depth for other elements when used appropriately.
Big lettering is a big deal. Designers are using larger than life typography to help sell the design message. And it works. Attention spans are shorter than ever and you have to communicate with a bang to entice users. Some of the best uses of this trend include typefaces that have added visual flair, such as an easy to read novelty option or one with more of a vintage look.
Tiny Design Influences
From itty-bitty logos in the corner of home pages to micro-designs that “steal” from watch design, a focus on small details is a huge part of the design landscape. A few years back the design philosophy was mobile first, so that you designed for the smallest device and scaled the visuals up. Now that smallest device might be a watch. The best part of this concept is that every design element must be created with intent and purpose. There’s no place for elements that don’t help the user reach a goal.
Mixing Images and Illustrations
For most designers, the first thought when it comes to a dominant image is whether to use a photo (video) or illustration. Not anymore. A mix of visual techniques can be an interesting option. You need a solid overall plan to ensure that the mash-up of visual styles work together and that they convey the appropriate message.
Are you scared to use a trendy element because of worries that it will date your design? The best, and most timeless, trends are those that aren’t full-scale overhauls. They can work within a number of different design patterns. You can add a bright accent color to almost any website, for example. Oversized typography can replace smaller text in almost any framework.
Start small when working with trends and add one element that works with your existing design. See how users respond and how you feel about the change before moving on to wider-scale changes. Good luck!