As we enter the year 2017, we here at UpTrending are looking forward to embracing some of the latest and most effective trends in web design that are pushing new boundaries in the area of user experience.
While there are a few web design trends we have no problem turning our back on, there are so many more that represent everything that makes us excited to do what we do. The great thing about working in an industry such as this one is that there’s always someone pushing the envelope and something new to look forward to. 2017 is right around the corner and with a new year comes a new motivation to create, an optimism in what’s possible, and an excitement to be a part of it all.
Here are just a few of the emerging trends we are looking forward to seeing more of in the coming year. While they aren’t necessarily new, they are proving to be the future of web design.
Web design trend #1: Long scrolling single page design
Multi-page hierarchical website architecture makes a lot of sense to our organization-obsessed brains. Like an Ikea closet system, everything has its place, and as long as the hierarchy makes logical sense, the pages on sites designed this way are relatively easy to navigate. But this is a website people, not a book or newspaper. Why are we even talking about pages at all? This ain’t print!
The future of sales and persuasion is storytelling. As new platforms and devices emerge, new methods of presenting information emerge and methods like long scrolling single page sites open up new ways of telling visual stories on the web. When you’re presenting information in a sequential format, it is essential that your users make it to the end where the story they’ve been told comes together and they are compelled to act. Clicking from page to page can be tiresome and boring causing many users to drop off before they’ve gotten the full story, but long scrolling provides opportunities to encourage continued engagement with the story through subtle animations Look no further than The Boat for a devastatingly amazing use of single page storytelling, ripe with rich animation that will keep you scrolling just to see what happens next!
SEO nerds can put your hands down, we all recognize the inherent problems that single page design has with search rankings. Shame on you for assuming we haven’t thought of that and come across solutions and workarounds. We are professionals after all!
Some will even decry the user experience of a single-pager based on navigability. Again, puh-leese! Look no further than this beautifully designed page for a prime example of how to do something as simple as anchoring stops along the way to allow users to quickly access information anywhere on the site.
“But wait!” You cry. Remember this post where you denounced scroll jacking? Yes. However, the thoughtful and intentional structure of this site is worth calling out. While scroll jacking can be inherently annoying, this site’s workarounds are impressive. For example, clicking on any of the section titles in the top navigation renders an immediate response. The site also keeps the footer navigation at the bottom of every section, as opposed to just the bottom of the last section.
Granted, the single page approach doesn’t work in every instance but if nothing else, a long scrolling approach to storytelling can be implemented even into multi-page sites with great effect.
Web design trend #2: Animation-rich microinteractions
They say the devil is in the details. This idiom particularly holds true when it comes to user experience. Sure we put a lot of stock on driving that one, or those few, big interactions that lead to conversions, but lately a great deal of emphasis has been placed on microinteractions, the everyday ways that users engage with a site or app.
Actions like saving, syncing, liking, swiping or even just clicking a button qualify as microinteractions and they happen a lot. But let’s not forget that these experiences are taking place within a digital (read non-physical) world and as tactile creatures we require feedback from our environment. Interacting with digital elements without some visual or audible signal that our input has been received can be vexing and many cases, capable of ruining user experience.
Simple yet rich animations can go a long way in providing the necessary feedback that satisfies a user’s need for validation. It can even prevent problems. Think of payment processing situations in eCommerce over a slow or interrupted internet connection. Especially in situations where a monetary transaction is taking place, users want to feel secure that they’ve “done it right.” Clever or cute microinteractions can even delight users when they aren’t expecting it. Why concern yourself with delighting someone over something so trivial? Because it turns an otherwise boring activity into something exciting and perhaps fun, something they might consider doing again. That sounds like a win to us!
Web design trend #3: Card-based design
One of the more exciting trends we are seeing across the web is card-based design or card layouts. Humans have used cards to encapsulate and disseminate information for hundreds of years. From playing cards to business cards to baseball cards, these rectangular objects have appeared in every culture and time period from here to Ming Dynasty China. In short, cards are a recognizable and familiar concept and when it comes to web design, familiar means intuitive, and intuitive makes for a great user experience.
Cards are incredibly useful for content-heavy sites because they provide neat little containers to hold and display information just as they do a pitcher’s stats on the back of a baseball card. In fact, they actually work much in the same way as baseball cards do. On the front you have a great image with some context like a name or a title, and on the back, a lot of really granular information, statistics, maybe even a story. In this way, the card layout is more than just a neat-looking design element, it represents an entire framework for how digital products can (and should) be structured. In this way, they are ripe for aggregating content from basically anywhere and capable of displaying it in a consistent fashion.
Perhaps one of the most endearing qualities of cards is how well they lend themselves to responsiveness. Pick up your phone. Remind you of anything? Kinda has the same shape a card doesn’t it? Cards stack with ease and can be expanded to reveal more information. That’s the beauty of them! And while we’re on the topic of mobile applications, can we briefly talk about how brilliantly they work with gestures? Since they’re based on physical, real-world objects, they practically beg to be flipped, tapped, and swiped with little to no instruction required.
Web design trend #4: Authentic imagery and illustrations
“Cool stock photo bro!” Said nobody EVER. As concepts mature, so do their users and mature internet users are hip to lazy tactics like using stock photos to fill space. People gravitate towards stock photos because they are easy but since when did taking the easy route result in something extraordinary? The whole idea of a web page is to communicate value and it’s really hard to do that when you are designing around stock photos that don’t really say much of anything or represent your product or brand.
If you want to stand out, you’ll need to use authentic imagery that speaks to your brand. Granted that does mean adding photography to your budget and good photographers certainly aren’t cheap but why would you spend money on great web design only to fill it with cheesy photos of suits pointing at charts or random college kids laughing about nothing?
When high quality photographs are out of the budget or simply not all that relevant, look to illustrations as an effective tool to get your point across. Even simple illustrations can make a world of difference in communicating more authentically when they are on-brand and part of a larger, unified system of related illustrations.
Web design trend #5: Vibrant colors
Color conveys so much more than we probably realize. There’s a whole psychology to it that is endlessly fascinating, all the more so because it works on such a primal, subconscious level. Computer screens are capable of displaying literally millions of different colors and as of late, designers have gotten pretty bold with their choices.
Perhaps as the designs themselves become more minimal, designers look to color palettes for expression. Compare a more recently built website to those from several years ago and observe soft blues and bright whites give way to vibrant, powerful colors that make bold statements. These fierce, impactful colors allow even the most minimal design to scream.
Designers talk a lot about whitespace but that space doesn’t have to actually be white, does it? Brightly colored backgrounds can have the same effect of drawing attention towards important elements like calls to action while also setting a tone or conveying emotion.
Vibrancy doesn’t have to be loud and abrasive though. In fact, if anything it requires even more restraint and thoughtfulness to really nail it. Spotify’s tendency towards the duotone effect is a prime example of how to use vibrant colors in a subtle and impactful way without being garish or flamboyant.
Oh and by the way, Pantone’s 2017 Color of the Year is Greenery which takes its cues from nature. It’s pretty vibrant.
Web design trend #6: Serif typography
Don’t call it a comeback! Despite years of a sans-serif dominated web, those quaint little tails are popping up more and more as some designers blend classic styles into their contemporary designs.
The earliest typefaces had serifs as they imitated brushstrokes and allowed those carving the characters into stone to neaten up the ends of letterforms. In the early days of print, they proved more readable in body copy having something to do with typesetting but they proved less so with the advent of the computer screen. Low resolution made it difficult to display the tinier details especially as the letters scale down, but as screen definition improves and technology and trend push web design further towards an image and animation-driven medium, serifs make for great contrast in titles and headlines that stand out from body copy. Sans-serif fonts may work great for comprehension but serifs have impact!
If nothing else, serifs speak to a retro aesthetic and a throwback to print. In that way, they certainly stand out as a relic or an artifact from a simpler time, nostalgic and not to be forgotten. Here are some pretty cool ones.
Again, these trends aren’t all new and they aren’t the standard… yet. They all however, represent the evolution of user-focused design to this point in time while being informed by popular trends and the movement towards mobile computing. Choosing one or some combination of these elements certainly won’t guarantee results; that requires strategy. That being said, we hope to see more of this in the coming year but at the end of the day, we’re just happy to make great websites for great clients.
