Website Design Trends to Be on the Lookout for in 2016

Website Design Trends to Be on the Lookout for in 2016

While many companies are still racing to catch up to the responsive design trend, trying to determine if the investment is worth the return, the early adopters of the industry just kept pushing ahead with exciting new website technology evolutions that will continue to delight users and raise the bar on the average consumer’s expectation of the website capabilities, user experience, and features.

Some of the top trends you’re likely to continue to see gaining pace as we head into 2016 include:

Ghost Buttons
With the rich, colorful, and vibrant full-bleed images that responsive design is able to support, you have to be careful that dropping a button right on that image doesn’t compete or weaken the impact of the image. Enter: Ghost Buttons. A simple outlined box as a button lets the image still do the work of telling the story and grabbing the attention, while a well-contrasted button outline is just enough to attract the eye and lead the user to click without screaming at them (oftentimes seen smack-dab in the middle of a header image). We’ve all been browsing the web to know what a button is asking of us, and well-placed ghost buttons respect that. Them and their higher-contrasting counterpart: solid, flat color buttons (which just doesn’t sound as cool, but are equally as popular).

ghost-button-volvohttp://www.volvocars.com/us

freelancer-ghost-buttonhttps://www.freelancer.com/

 

Parallax Effects
From the subtle to the “Wow!”, parallax offers the opportunity to create dimension and elevate the impact of elements on a page by allowing layers of text and/or images to move at different rates of speed and along different paths on a page. It is still new enough to be unexpected and can really enhance the opportunity to guide a user through a story if the choreography is well executed.

Examples:
http://serveseattle.org/
http://www.sony.com/be-moved/

 

Navigation Rethought
What used to be a no-brainer has become just one more opportunity to think outside the box. Navigation menus are popping up with logos centered in the middle of the page, floating down the middle of a page, or not even present until a user engages with the website in a particular way. As long as the user experience is the journey that dictates the shake-up — and not just change for change sake — a unique navigation menu can be a clever first impression to leave your customer with.

bryan-cave-navigationhttps://www.bryancave.com/

mensjournal-navigationhttp://www.mensjournal.com/adventure-races

ivory-navigation http://www.lastdaysofivory.com/

 

Fly-Out Menus
Introduced via mobile as a necessity to enable user flow through a website without taking away from the limited space on a mobile screen with a navigation menu, fly-out menus are now making their way into desktop website executions as well. We are learning a lot from mobile-first design, primarily in regards to a focus on simplicity and minimizing over-designed executions that don’t benefit the end user, and much of that is finding its way back into desktop design. The more that people can easily find what they need, the more likely they are to browse longer and have a more positive user experience.

VisitCalifornia-navigationhttp://www.visitcalifornia.com/

DesignMuseum-Navigationdesignmuseum-navigation-2
http://designmuseum.org/

 

Background Motion
Animated GIFs went gangbusters a few years ago when support across social channels became commonplace, follow shortly thereafter by websites like imgflip and gifmaker, which began to streamline the creation of animated gifs so any Joe Schmo can knock one out with ease. So, of course those in the industry quickly moved on from the short-lived allure of animated gif play, seeking a sexier alternative to leverage. Cinemagraphs have retained their magic thus far, in that it still takes a savvy designer or producer to know how to knock one out, and they can produce some really intriguing effects in which the overall image is static, but with a small segment of the image offering some isolated repeating motion. A major benefit being the quality of a movie file, with the file size of an animated GIF.

Examples:
http://photodoto.com/cinemagraph/
http://winderful.diascreative.net/

 

Death of “The Fold”
Not so many years ago, a common dilemma was “How do we get it above the fold?” Naturally, with this term being borrowed from the newspaper days, it was only a matter of time before it was phased out with the rest of the print world (Just kidding! I think I saw someone reading a newspaper on BART one time…). But with tablets and smartphones offering limited screen height, the finger flip of navigating websites on such devices has become much more convenient than clicking to wait for another page to load. And so with it comes long scrolling homepages, single-scroll websites, and nobody really paying attention to what’s “above the fold” anymore. Of course, if you have a primary call-to-action, offer, or engagement you are specifically optimizing for, by all means get that on your website immediately, but it’s less about cramming everything in above the fold and more about the overall information hierarchy being well arranged.

Examples:
http://www.apple.com/mac-pro/
http://www.theaspire.com/ 

 

What trends are you seeing that we didn’t discuss here?

Spread the Word:
Facebook
Twitter
LinkedIn
Google+
Pinterest
Instagram
RSS
Follow by Email
SHARE
April Geer
April Geer
ageer@jstokes.com

April is the Digital Services Director at JStokes Agency and a sports-loving, mother of two from surftown Pacifica, CA. She leads a team of digital stars with a well-rounded mix of technology, strategy and design chops; along with the ol' fashioned common sense and problem-solving determination necessary to tackle the digital challenges that come her way.

No Comments

Post A Comment