Today, I’m going to talk to you about Web design trends. I know, the word “trends” sounds so wishy-washy and a little taboo. But keep reading, I have a point, I promise.
First let’s address the elephant in the room: the term’s bad reputation. Web trends aren’t the online equivalent of big 1980s hair – they’re a great indicator of what users want to see, as well as where Web standards are headed. So staying on top of Web trends will give your site an edge that will set the design and usability apart from your competition.
So, who decides what’s trending?
There isn’t a cloak-and-dagger board of Web designers (complete with secret handshakes) that make all the decisions around what rules everyone is supposed to follow. Instead those trends are set by changes in technology, users and other creative fields. Advancements in technology and tools largely determine what designers and developers are able to achieve on the Web. The way users access and utilize a website shapes the way designers and developers make decisions to enhance usability. And finally, other creative fields like traditional graphic design heavily influence design on the Web.
To design is to visually problem-solve.
It’s this type of thinking that breaks boundaries, and what may work in one discipline often times is translated across others. This mixing and matching of methodologies propose new and creative solutions, eventually setting trends.
What’s in store for 2016?
More of the same, and that’s a good thing, it’s all about familiar UI patterns.
It’s 2016, and while I have been saying for years at this point, some of you still don’t have a responsive website. Get it together. It’s not acceptable. Since last April, Google has been slapping you on the wrist with a hit to your search rankings for this serious faux pas.
With responsive websites at the forefront of the new standard of Web, the Internet is starting to look awfully uniform. This isn’t a bad thing – in fact, it’s pretty brilliant.
We’ve changed the way we consume content on the Web, and we expect things to work a certain way, no matter what site we’re on. Think about it: When you purchase a product from an online retailer, you expect it to work just like Amazon. It needs to save all your info and not hold you up over shipping options. You expect it to be that way for all retailers. That experience has to be hiccup free or you abandon your cart, regardless of whether you are on your desktop or your mobile phone. Your tolerance for an experience outside of what you are used to is nil. This doesn’t just apply to shopping carts, but navigation and page layout.
These striking similarities in the way you access and use a website are called UI (user interface) patterns. These very specific patterns have matured to a point where there is little to change or improve upon. They deliver a consistent experience to your user. The minute you require your user to think about how to use your website, you have lost them. Don’t get cute with impactful elements like your navigation, be predictable.
So what “universal” design elements are working?
1. Hamburger Menus
Yes, that little icon to access a menu on a mobile phone has a name. It’s called a hamburger. (Cue the giggling.)
I’m not a fan of messing with what works when it comes to navigation, but the hamburger menu is an exception. It’s not exactly recent news that more searches are performed on mobile than on desktop, so experiment with your navigation by using this to your advantage. Users are familiar with the hamburger icon, so why not add it to your desktop site? Just because a user is accessing your site from a desktop doesn’t mean they suddenly stop identifying with the hamburger.
This shift in thinking can provide you with additional options for your navigation. The best practice has always been to keep a main navigation at around five options, more and it’s just overwhelming to not only the user but the page. The hamburger menu let’s you move outside this “rule.” With a hamburger, the menu stays hidden until a user makes the conscious decision to access it. From here, you can incorporate as many options as necessary to deliver a user with the best experience possible as opposed to a contrived and condensed menu.
2. Long Scroll
This is your one warning, readers. Don’t ever insert the words “above the fold” into a conversation with me unless you are referring to the latest issue of the New York Times. Here me now: There is no “fold” on a website – it’s a hierarchy tactic to sell newspapers on a stand, not a Web design standard. So get over it and move it; it doesn’t exist.
With that moment of necessary tough love out of the way, let’s talk about why this is the case.
Thanks to mobile apps like Facebook, Pinterest and Twitter, we are used to a long, continuous scroll. We use apps like these so often that scrolling when accessing a website is second nature. So don’t be afraid of a long homepage layout.
When a site utilizes a long scroll homepage, they allow themselves an opportunity to tell their story in a clear, concise and well-planned manner. When you aren’t cramming everything about yourself in the first 600 pixels of your website, you allow the users to take in your messaging, understand your differentiators, and be able to actually read the information on the page. Whitespace, similarly to the “less is more” concept, isn’t finished having it’s moment.
I really enjoy designing long homepages; they are super versatile and support an agile methodology. As an added bonus, I find that it gives users an extra avenue to browse your site. Yes, they can move through your site through the main navigation, but what if they blow past your navigation because they anticipate a long scroll? Use this to your advantage by providing relevant links to the next logical step through your site in specifically planned “bands”.
3. Card Layouts
Shoutout to Pinterest for this one.
Card layouts present information in small, scannable, bite-sized chunks that are perfect for users needing to digest loads of information quickly.
From a usability perspective, each card becomes it’s own singular content container. This is perfect for responsive organization and delivers a super consistent experience no matter the device.
4. Hero Images
Yes, hero images still make this list. But before your eyes start to glaze over, listen up. Hero images are being utilized in new ways, keeping them a very relevant part of the web trends conversation.
Vision is the strongest human sense, so the quickest way to grab a user’s attention is with a bold, relevant, high-quality image. Seriously, don’t skimp on quality. It’s 2016, so we live in a world where bandwidth and data compression are at an all time high. Don’t diminish the quality, because you don’t have to.
If you aren’t feeling the ambiguous homepage photo, you can still utilize a hero image. Illustration is becoming more and more relevant in contrast to the HD photo route. There is something about illustration that is tactile, timeless and personal. It can translate a concept in a less literal way allowing the user to interpret what you are trying to say as opposed to forcing them to listen. An illustration can connect with a user much more seamlessly than a photo that features horribly posed stock models.
5. Flat Design
This isn’t a new concept, and it’s something we have seen make this list over the last two years. But if a concept has matured to the height of relevancy, who are we to ignore it?
Flat design has become and will continue to be the dominant design aesthetic. Why? Responsive design. Flat design produces not only a cleaner design, but cleaner code and reduced load times. Mobile browsing has risen to total power and every design decision has to cater toward it. Hell, even Google caved to flat design.
Expect to see more minimalist designs, vibrant color schemes, simple and bold typography, as well as thumb-sized buttons.
Jump, But Don’t Me Ask How High
If I’ve prompted you to send an email to your designer at this very moment, pump the brakes.
Just because these items are trending doesn’t mean you need to implement every single one right now. Keeping up with the latest in Web trends is incredible important, but the implementation of any of these trends needs to be in the best interest of your users.
Set up a meeting with your designer, review your audience personas and do some user testing. Could any of these trends enhance the usability and overall experience of your website? If they will, implement them slowly and test the results. A growth-driven design strategy is the best possible approach to introducing and implementing design trends to and for your users.
Remember, despite what the design world may be feverishly tweeting about, every decision to change your website has to be influenced by your users.