ALL ARTICLES

6 Web Design Trends We’d Be Stoked to See More of in 2017

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.

Web design microinteraction example
Source: www.dribbble.com/leozakour

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

Web design Pinterest card based design
Source: www.pinterest.com

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.

Web design Kenny powers card based design
Source: www.cardboardconnection.com

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.

Web design UpTrending custom designs for shiphawk.com
Source: www.shiphawk.com

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

Web design Vibrant colors at Mossterstudio.com
Source: www.mossterstudio.com

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.

Web design Spotify vibrant colors
Source: www.spotify.com

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.

Web design Pantone color of the year
Source: www.pantone.com

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.

Web design Typography example
source: www.typewolf.com

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.

ALL ARTICLES

Rapid Prototyping for Outside the Box Web Design

Prototyping has been used in engineering and industrial design to validate concepts and build better products for decades. Today’s web designers are using prototypes to create better user experiences and it’s pushing the envelope of how we use the internet in exciting new ways.

Whenever we set out to create something, we tend to have a pretty specific idea of what that thing is going to look like, how it’s going to work and how it will be used. If you’re designing a chair for example, you can rely on some basic assumptions as to the general form it should take and how someone is going to sit in it. While this approach works well for established conventions like furniture, it doesn’t always work out as neatly in the digital realm. Intuitive as it may seem, rarely does our own, personal perspective do a very thorough job of considering how others will instinctively interact with such a product.

Anytime you design something for others to use, your decisions along the way are likely based off of certain assumptions you make about how your users will interact with it. These assumptions aren’t bad or wrong but they can be based on limited information and in some cases, personal bias. The natural tendency is to think about how a product will be used based primarily on the way you, yourself would use it. It’s not wrong, it’s just not necessarily right for everyone.

What’s missing here is the user. Who else can better speak to how they will interact than the very one doing the interacting? This idea isn’t new. We as designers have always sought feedback on how to improve and optimize what we create and often go to great lengths to do just that. It’s just that before, we weren’t seeking that feedback until after we’d finished building. Conceive, analyze, design, construct, test, maintain – this was the way things were done for a long, looooooong time.

Anyone can see that this approach is slow, frustrating, and expensive. Valuable time and money are spent in the laborious pursuit of incrementally improving upon completed products that are difficult to evolve. If the key to improving on the conventional wisdom is faster access to feedback, how then can one tap into those powerful insights earlier in the process? The answer is prototyping and it’s changing the way designers and developers alike approach building digital products.

The better way.

Prototyping allows new features and elements to be quickly validated or abandoned by creating simulated versions that can be put in front of users before they are completely developed. This iterative process ultimately shortens the feedback loop, allowing products to evolve faster and be more refined.

Prototyping allows you to test the assumptions you make about your users by putting low fidelity versions of your product in front of those very users to observe their behavior and elicit feedback. The prevailing wisdom is to do so early and often, building prototypes that merely resemble what you ultimately hope to release and discovering how users actually interact with it. What results is a continual loop of design, user testing and refining until something very near perfection is reached.

In rapid prototyping this process is performed quickly with little concern for the level of detail involved. The faster an idea can be tested and either proven or disproven, the faster the ideal version will be revealed. Anything from simple HTML mock-ups to downright prehistoric paper models will suffice as long as it is testable. At UpTrending, we use programs like InVision and UXPin to create fully interactive, high fidelity prototypes that give us early insight into how users are interacting with our sites and apps.

UXPin menu prototyping example
Source: UXPin.com

The bennies.

So why go through all the trouble of creating simulations of a final product only to throw them out at the end of the day? So glad you asked.

1. Prototyping is efficient.

Errors or usability issues can be detected far earlier in the process saving time and money in the long run. Why wait until you’ve finished building something to see if users respond the way you expect them to when you can find out sooner and make adjustments along the way? Rejecting false assumptions and eliminating features that don’t work earlier in the process minimizes waste.

2. Prototyping improves user experience.

When the end product is designed for (and in some ways, by) users with their direct input rather than expecting them to conform to a designer or developer’s idea of how things should work, a more intuitive experience arises organically. Since it focuses primarily on the user, guess what? The user experience is just plain better! You are, after all, building this almost exclusively for them, so why not let them tell you how best to get them to do what you want them to do?

UX illustratration
Source: Shutterstock.com
3. Prototyping is the future.

Rapid prototyping allows designers to take risks they might not otherwise take if doing so means committing time and resources to building something out completely. Because prototypes are merely simulations, their cost is low but the reward can be significant. What results may be quite different from that which you initially sought to create, but it could be all the better for it. By throwing out personal bias and preconception, we can design outside the box to create better digital products that achieve their intended goals.

Yay, prototyping!

Many traditional approaches to web design fail to give due consideration to the most important element in the design process – the end user. But as you can see, there is a better way. Through prototyping, designers are able to glean valuable insights directly from users which they can then use to adapt and evolve products into their most fully realized selves. And through rapid prototyping, we can shed the conventions and traditions that hold us back to discover new and better ways to improve user experience.