BonFX

Typography & Graphic Design Blog

  • Facebook
  • RSS
  • Twitter
  • Blog
  • Books
    • The Preposterously Huge Book of Google Font Combinations
    • The Big Book of Font Combinations (Classic Fonts Edition)
  • About
  • Gallery
    • Monster Alphabet
    • Pen and Ink Cartoons
    • The Algorithm FX
  • Contact
You are here: Home / Web Design / 10 Emerging Web Design Trends for 2016

10 Emerging Web Design Trends for 2016

February 16, 2016 by Douglas Bonneville

Web design is always on the flux, the shape of the web changing as leading companies have major redesigns or new toolsets like Bootstrap make web development more accessible.

In 2016, we’ve got faster connections and more variety in screen sizes than ever before. More users are browsing on the go, but still expecting media-rich, tailored experiences.

The following ten web design trends are all either making an explosive rise to popularity, or the technology has finally solidified and become advanced enough for them to be in full swing this year. You probably will recognize a number of these features from the websites you use every day.

1. Background Video

How many times have you found yourself scrolling through your Facebook newsfeed just to stop at a quick video?

Video draws attention. This is important in today’s Internet of short attention spans. Having a background video playing on your home page draws the attention of the user and makes them stay on your website.

Background video is also very effective at quickly establishing a mood. For example, a background video going through shots of your employees collaborating, hard at work, and then relaxing after work over a couple beers gives off the vibe of a fun office that works hard and plays hard.

trends-1-video-bg

When you go to IUQO’s website, you are immediately greeted with an enchanting background video of the sky. The video is high quality, interesting and immediately establishes a peaceful atmosphere.

2. Highly Saturated Design

Much like the video background, a logo with saturated colors can make you stand out and draw attention to your website.

trends-2-saturation

Neon colors seem to be the latest way to make your website stand out. WhatsApp’s logo has neon green in it, popping it out from the black background. Companies like Spotify and Medium have also recently changed their logos to a neon color.

3. Storytelling as Design

Your story is important, to you and to the user. You should use your website design to help tell your story.

There are a lot of ways to do this. Sometimes, a single image can tell the user everything that they need to know about you and your website. You can also make it interactive and have the user play out your story like a video game.

trends-3-personalization

IGN did just that with The Museum of Mario. This interactive web page takes you on a journey through time by scrolling through the different eras of Mario games. The user feels like they are involved with Mario’s evolution, and they become a part of the story.

4. Card-Based Design

Card-based design seems to be a growing trend that will really take off in 2016.

“Card-based” means that the content on the website is organized into squares or rectangles that fall into structured rows or patterns. This design is neat and orderly, and it looks great on a mobile device. Although Pinterest made this design popular, many other websites are starting to use it as well.

trends-4-card-based-design-theverge

Cards are a great way of packing information into a small, organized and compact space. The Verge uses cards with bright and colorful gradient filters to pull together the headlines into an attractive front page. If you have a lot of content on your website, packing them into cards is the way to go.

5. Stylish Loading Bars

One of the main web design challenge in 2016 will be fighting users’ short attention spans. A poorly designed loading page will quickly drive users from your page. At the same time, web design has evolved so that rich media is more important than ever before.

If your website takes time to load, then you can take advantage of a loading page to keep the users’ interest. Much like the web page itself, the loading page can add to your story. If you sell cars, make your loading bar look like a car driving to the finish line. Here’s a nice one that would work great for a golf course:

trends-5-stylish-loading

Be creative and make sure that your user is engaged while they wait. Otherwise, you can say goodbye.

6. Material Design

Material design has taken off since Google introduced it in 2014. This design style layers elements on top of each other, much like in flat design. However, material design includes shadows and a sense of space to add depth to the web page.

trends-6-material-design-wallet

Many of Google’s various projects use material design in their web design. One example is Google Wallet, which features subtle shadows and interactive elements, along with an arrow button to urge users down the page that seems to sit on top of everything else. Like several other sites by Google, the Google Wallet website uses the Material Design Lite Framework.

7. Emphasis on Unique Typography

The typeface that you use is incredibly important. A quick Google search shows that there is an abundance of free typefaces available to you, so there’s no reason to use Times New Roman on your website. Font Squirrel, Google Fonts, and Adobe Edge Web Fonts all have free web fonts you can easily use on your website.

trends-7-typography

The typography that you choose gives your website a unique look. This is important for branding because the user will recognize your company as soon as they see the typeface. You want users to have a special experience on your website, and there’s no better way to do that then with a distinctive typeface, like the portfolio above.

8. Infinite Scrolling

Infinite scrolling is already a popular design trend that will continue to grow in 2016.

This is a popular feature on any website that has a lot of content, like social media or news sites. Infinite scrolling means that the user can keep scrolling down and more content will load and appear. It makes for a truly immersive experience; there is no pagination getting in the way of the user continuing to discover interesting content.

trends-8-infinite-scrolling

The image above shows Pinterest a split second before more content is loaded. If your website has a lot of content, this might be the feature for you. Users will stay on your site for a long time because new content will keep appearing.

9. Mobile-First Design

Your website has to be equipped for mobile use. There is no way around it: 80 percent of internet users own a smartphone and use it to surf the web.

Mobile-first design as a principle takes the idea of mobile-friendly design one step further: not only is it smartphone compatible; it was designed first and foremost for small screens.

trends-9-mobile-first-design

As you can see, Evernote’s logo is clearly displayed on the top, a hamburger menu sits in the corner, and the CTA fits perfectly above the fold despite the small screen.

10. Personalized Content

One of the biggest emerging web design trends is the ability to personalize your homepage or other landing pages to make them more engaging to your users.

You probably have great content on your website, but your users’ attention span is too short for them to go through hundreds of articles to get to the one they want. In 2016 you’ll have to figure out what your visitor wants and give it to them as soon as they are on the homepage. This is possible by using cookies, geolocation, and ad-clicks.

trends-10-amazon-personalization

Some companies are already doing this. Netflix recommends shows based on what you’ve already watched. Google News recommends articles that fit your interests and web history. And Amazon uses past purchases and recent search history to suggest more items you might want to add to your cart. Your website should be designed so that it can adapt to better suit the user’s needs and emotions.

This year, consider whether one or more of these emerging web design trends would be right for your website or your users. Maybe this is the year you will incorporate a background video or enchanting typographic elements into your site, or start personalizing your homepage for your users.

Filed Under: Web Design

About Douglas Bonneville

Douglas has been a graphic designer since 1992, in addition to software developer and author. He is a member of Smashing Magazine's "Panel of Experts" and has contributed to over 100 articles. He is the author of "The Big Book of Font Combinations", loves cats, and plays guitar.

Comments

  1. Mobiloitte says

    June 1, 2016 at 3:00 am

    Really a great post Adrienne.
    As we know our brains are built to deal with a moving world and are naturally drawn to video. We all understand the majesty and power of cinema. Video gives us editing, timing and framing tools that can help us convey our sense of style or brand identity. In product/service focused websites, the video can be used to give a sense of the product in action. So it is like “Video Background” is attracting a lots of attention.

HOW TO MAKE INSPIRED FONT COMBINATIONS (without spending all day clicking things).


Font Combinations Book  

On Sale Now at
Amazon / Barnes & Noble

Or get the PDF eBook version, INSTANT ACCESS, 40% off Retail, now at the BonFX Store

Fantasticaly faster than fiddling with finicky font file formats


Font Combinations Book  

Get the PDF eBook INSTANT ACCESS, now at the BonFX Store

Recent Inspirations

  • The, ahem, “League of AI Artists”, 2022 edition October 12, 2022
  • How To Use DreamStudio / StableDiffusion To Create A Traditional Illustration August 31, 2022
  • DALL-E, pixel art, and a silly story August 9, 2022
  • A Bunnies Tale August 8, 2022
  • The Great Watermelon Conflagration of Watermelonville August 8, 2022
  • Edward Gorey’s…Cat? July 13, 2021
  • Grid Use In Graphic Design March 27, 2021
  • The Preposterously Huge Book of Font Combinations January 13, 2021
  • Three secrets to ignite inspiration December 22, 2020
  • How to “Draw Out” Your Creativity November 27, 2020
  • Finding Your Voice as an Artist: The Paradox of Originality October 18, 2020
  • Artist Frederick Franck on Seeing September 15, 2020
  • How to Move Beyond Creative Blocks August 10, 2020
  • Claude Bernard: The Only Way to Learn July 25, 2020
  • Ornate Leaf Sculpture and Crochet Art by Susanna Bauer June 18, 2020

Copyright © 2023 · BonFX

  • Blog
  • Books
    • The Preposterously Huge Book of Google Font Combinations
    • The Big Book of Font Combinations (Classic Fonts Edition)
  • About
  • Gallery
    • Monster Alphabet
    • Pen and Ink Cartoons
    • The Algorithm FX
  • Contact