13 Bold Web Design Predictions You Should Explore in 2017 [SlideShare]

As we shed the hardships and mishaps of 2016 and attempt to step our best foot forward into 2017, many of us look forward to the new year as a chance for big changes and fresh beginnings.

Some people get expensive new gym memberships, others set a budget, some even set aside daily time for meditation.

New Year’s resolutions are really just a great excuse to put some solid thought into how to create a better yourself over the next 12 months, but it can also be a perfect time to examine the possibilities to come and areas to improve your marketing, design, and business overall!

Throughout 2016, we saw a focus on clean, minimal designs with flat colors and simple forms.

We’ll see this dissolve (just a little bit) in 2017 with the incorporation of some warmer, more personal touches like unique typography, original photography or illustrations, and subtle movement.

We can expect to see some new things in the realm of calls-to-action (CTAs) as well, like more ghost buttons (don’t worry, they’re not that scary), microinteractions, and hidden CTAs.

All of these changes are hyper-focused on the user and how to create the best, most natural experience for them while also increasing conversion rates.

2017 will also break with some of the more basic designs trends of 2016 by bringing back vivid colors and designs that bend the limits of the traditional grid.

So, as you recover from your holiday-induced sugar high, let me walk you through 13 exciting web design changes you may see in 2017 in this slide deck (and some really awesome sites that are ahead of the curve).

f you’re an overachiever you might want to get ahead of the curve as well and start thinking of some ways to implement these predictions for yourself. We can help you out with that! 

1. Longer Pages:  

According to Chartbeat, 66% of the average media page visitor’s attention is spent below the fold.

So, stop trying to cram everything above the fold!

In 2017, people know to scroll for what they’re looking for. Consider creating a longer, scrolling experience on your website and landing pages. Tell a story that builds to the ultimate message/goal.

Example: Softserveinc

2. Prominent Typography

With the new year we can expect to see a shift in thinking to focus on highlighting a brands’ personality, and typography will definitely be one of the key players.

Choosing a non-conventional typeface (combination of typefaces) is an easy way to show how your brand is different.

Example: Behance

3. Hidden CTAs:

In the spirit of Conversion Rate Optimization, marketers should always be looking for a new way to present calls-to-action and get people to click.

In 2017, hidden calls-to-action (like this one on ConversionXL’s feature image) are likely to become more common as people become blind to conventional bottom-of-the-blog and pop-up alternatives.

Example: ConversionXL

4. Material Design:

There will be a continued focus on Google’s Material Design in not only mobile design, but desktop as well.

Designs utilizing flat, clean design elements (like the card) will be extremely popular and create an ease of use and familiarity between pages for desktop and mobile.

Example: Google

5. Ghost Buttons:

Ghost buttons are buttons that usually just a colored outline rather than a solid, contrasting with the background of a page.

They are a subtle, yet beautiful way of working a secondary call-to-action or directional button onto a page, but should be used cautiously for more bottom-of-the-funnel offers.

Note: Make sure to test its effect on conversion rates before using it on consultations, demo requests, or other important offers!

Example: Novum Collection

6. Vivid Colors

While the popularity of minimalist design continues, one way brands are making a bold impression is through color.

Enhance your branding and website by using vivid colors to not only catch a visitor’s eye, but guide it to your most important elements (i.e. a value proposition, form, button, etc.)

Example: Deskpass

7. Silent Videos

In 2016, Facebook found that 85% of video is watched without audio.

Don’t slap your user in the face with blaring sound from an auto-playing video. Try putting the video on mute or incorporating a silent video into your hero image.

Example: Plantflags

8. Cinemagraphs

Another “muted” way of harnessing the power of video on your website is through cinemagraphs.

A cinemagraph is “a still photograph that contains an element of movement looped seamlessly to i create a never-ending moment.” (source: cinemagraphs.com)

Try using one in your hero image for a striking visual impact and effective storytelling aid -- but make sure it works with your message or value proposition; not against it as a distraction.

Example: SaltedStone

9. Microinteractions

Microinteractions are small effects that occur when people perform different actions on your site (i.e. hover over a link, click a button, completing a task.)

They are a highly effective way of making your web experience feel more tangible and engaging your audience. They can also be extremely helpful in confirming actions or guiding people through your site.

Example: MindMobility

10. Animated/Interactive CTAs:

Banner blindness is alive and well. One way to combat it and maintain or even improve your call-to-action conversion rates is to make your designs more dynamic.

Try adding animations or interactive elements to your CTA banners like Neil Patel. Instead of sitting cold at the bottom of this article, Neil adds an effect that changes the color of the banner when you hover over it.

Example: Neil Patel

11. Original Photography and Illustrations

Stock photos and videos are efficient no doubt, but they’re a dime a dozen.

They’ve played a large part in the lack of differentiation in many industries. That’s why the brands that break out of this mold, grab our attention.

In 2017, brands will make more of an effort to use original photography and illustrations (in addition to typography) on their websites.

These custom elements show personality, authenticity, and also help complete the unique experience every brand should strive to be.

Real photos of your team, offices, etc. also create a realistic image of your culture and what it will be like to work with you.

Example: IMPACT

12. Full-Screen Forms

Now, this prediction is exactly what it sounds like. Instead of secluding your forms to the side or bottom of a page, this year, we’ll open them up to the whole page.

Doing this increases conversions by eliminating distractions and also creates a better mobile experience with its large elements.

Example: Workstack

13. Breaking the Grid

This last one is not industry universal, but we can expect to see designs with less rigid structure.

This will apply mostly to sites with younger target audiences, that lend themselves to more modern or eclectic design aesthetics

Example: Zero Financial