Web Design Trends We’re Pumped About
By Charlie Church, March 7, 2016
Websites are at the center of digital communication. The way your website looks and the way folks interact with it can determine whether you reach your communication goals—and sometimes even your program goals.
Web design is an ever-evolving field, so it’s hard to nail down trends (in the five minutes it takes me to publish this, there will probably be another innovation to add to this list). Nevertheless, here are some of the recent trends we’ve seen in web design. We’re pumped about them, and we hope you are, too!
Navigating a website is getting easier
The “hamburger menu” is becoming even more common
Whether you love it, hate it, or if you fall somewhere in between (like most people), the hamburger icon is becoming the go-to icon for mobile menus. Those three black lines are an increasingly recognizable way to say “click here for more navigation options,” so expect to see the icon’s usage expand. More websites are using the hamburger icon for all screen widths, not just on mobile.
Sidenavs are making a comeback (I hope!)
I am a fan of navigation bars on the side of a website (sidenav). It’s a creative approach to a fixed navigation because it allows users to access the full menu while also maximizing available space for content. (Check out this beautiful example from the Wildlife Conservation Society.) The sidenav comeback is the trend I’m probably most excited about, but it’s also the one I’m least sure is going to happen. While I’m starting to see sidenavs on more sites, I have also seen a few recent designs nix them from homepages.
Rollover menus are continuing to get phased out
As the mobile user base expands, so does the need for easier mobile navigation. Nothing is more frustrating than having a menu take you to the wrong page because you tapped instead of hovered, or disappear while you’re using it because you moved your cursor off by the slightest amount. Expect rollover menus to be replaced with dropdown menus that you tap or click to access (tap or click the hamburger icon in the top-left corner of Politico’s site to see what I mean).
Great typography isn’t just for print design
The list of awesome web fonts is growing
It feels like it was just yesterday that we designers were limited to a handful of fonts to use on the web. I don’t miss those days at all. Google fonts, Typekit and a handful of other options continue to add new fonts to their already vast libraries of web fonts. Fonts carry a lot of character and meaning. They can enhance an intended message or derail it. Having more fonts to choose from means that designers can find a font that is a perfect match for your message.
Type loads faster than images
Another great way to optimize web design for mobile users is to use typography in lieu of images, especially if it can help reduce the download size. Imagine you’re on Metro trying to read an article on your phone, but you’re thwarted by an image downloading at a glacial pace. We’ve all been there—it’s annoying! A lot of users are viewing websites via mobile phones while en route somewhere, so the faster you can serve content to them, the better. And with the growing number of great-looking type options mentioned above, you no longer have to sacrifice aesthetics for quicker download speeds.
Designs, they are a-changin’
The web is not flat anymore
The past few years have seen the flat design trend take over the web like wildfire. It’s beginning to be ushered out in favor of bringing some 3D elements back into the space.
Google’s Material Design has been a large inspiration for this trend, encouraging designers to use shadows to help guide the user towards things they can interact with. This section of Google’s style guidelines does a great job of explaining it. If I were a betting man, I’d predict that we’ll see a lot of flat websites be replaced with websites inspired by Material Design.
Subtle CSS animations are everywhere
The introduction of CSS3 a few years ago introduced the possibility of doing animation without using Javascript or Flash (thank goodness). This has been fantastic for creators and users alike because it allows animations to load faster and work on more browsers, offers more options for creativity in web design and development, and results in a more fun and intuitive web experience for the user. So now animations can make designs more exciting without eating up a lot of page load time.
CSS animations can spice up smaller design elements (click here to see some cool examples). A lot of websites already are using these to add finishing touches to the design. Expect to see a lot more of them in the future.
Websites will use the full width of your screen (even the 27-inchers!)
People are accessing the web from more devices than ever. You have to think about how your site is going to look from as small as a mobile device to as large as a television or 4k monitor. Some people are addressing this by designing flexible sites that extend the full length of a screen, no matter its size.
One thing to note is that you should take caution about how images look across all sizes while doing this. Jeb Bush’s campaign team forgot to do this, which made for some interesting headlines.
Design keeps getting better, and we love it
The one major takeaway from this should be that web design is always evolving, and we’re excited about it. Why? The changes benefit designers and developers (we have so much fun with new stuff!) and users (things are getting easier for anyone who visits websites…that is, all of us). This year should be an exciting one for web design, and I personally can’t wait to see what comes next.