2016 Web Predictions: Notes from a Designer on Web Design Trends

By Chloe Mark | December 2015

Much of the way we interact with the web depends on visual cues, causing design to have a huge impact on any business. As you approach your marketing and website plans for the new year, you'll want to be aware of what's trending in web design now and what's to come.

web-design-trends.png

Luckily we have access to our very own web designer, Kathryn, who pointed us to ideas on several aspects of web design trends of 2016. Read on to understand some of her 2016 web predictions. 

1. Using Hamburger Icon Design:

For an example, take a look at possiblehealth.org's site. The "hamburger icon" is the small white icon in the upper left corner next to "menu." When clicked on, it opens a larger side menu with site navigation options.  

hamburger-icon-web-design-trends.png

  • When to use: 
    • This icon started as a great tool for mobile sites and apps where space is limited. Now we see it on desktop sites as well as a way to keep a homepage looking simple. 
  • Tip to keep in mind:
    • As Kathryn observed, people often use the burger as a crutch: The purpose of your site navigation is to prioritize high level content, but when the navigation is hidden behind a burger icon, "It can be an easy to default to 'just throw everything in there' mindset, since there's less of a space restriction."
    • She warned against using it this way. Instead, "Make sure you've done a thoughtful audit of your information architecture and content and really prioritized it so you don’t overwhelm the user."

2. Webpage Layout - Cards

One of the first widespread uses of card-based web design was seen on Pinterest, but other industries benefit from it as well such as the Real Estate example below: 

cards-web-design-trends.png

  • When to use: 
    • For pulling together lots of information like images, headlines and copy. 
    • Mobile-driven sites: scales well for mobile so if your users are more likely to be using their phone than desktop, this could be a good way to cater to their needs. 
  • Tip to keep in mind:
    • Kathryn emphasized that "This works well for image-driven content," so make sure you have quality images for each card.
    • Each card should have it's own unique information, so make if your content is very distinct by category, this is a great layout option. 

3. The Hero Image

Often used for homepage backgrounds, the hero image spans the entire width of the page, commanding attention. It often feels dramatic yet engaging. Take a look at some websites that use it well here and the one below:

hero-image-web-design-trends.jpg

When to use:

  • As Kathryn points out, one large hero image can often be more effective than multiple slider images. "While sliders can work if your showcasing different products, most people will not stay on your homepage long enough to see past the first, maybe second, slide."
  • A hero image is a great tool for setting a specific mood or emotion for your site. They are often used very effectively on nonprofit websites where a large image can capture the story and feel of the organization.
Tips to keep in mind: 

  • Instead of sliders, Kathryn suggests you "Try to hone your message so you can select one beautiful image." Often, sliders are used when a company or organization is indecisive or unsure of their messaging. "Commit to one photo, and then test and refine from there!" 
  • If budget is a concern, we recommend investing in one strong image, rather than a bunch of slider images. 

4. From Flat Design to Material Design

Flat design relies heavily on illustration and icons, and that lose any effects that would make them look realistic. It relies on simplicity, use of color, and precision. Kathryn predicts there will be a greater move towards Material Design - which uses layering and subtle shadows to help create depth and hierarchy.

 

Material_Design.png

When to use:

  • Material design takes all the aspects of flat design that we love (clean typography, plenty of white space, crisp colors) and adds subtle shadows and seams to help users understand how they can interact with the interface. It's a great design pattern for more complicated interfaces that involve many interactions.

5. Typeface

The font you chose is common throughout your entire website - take time to determine the best fit for your organization. With free font databases like Google Fonts, Kathryn predicts a greater variety of fonts for 2016 web design. aloha-website-web-design-trends.png

  • How to use: 
  • Tips to keep in mind: 
    • Use a typeface with a large "family," meaning there are many variations like bold, thin and italic. Other font variations will give you good options to create hieararcy within your site help maintain consistency throughout.
    • At ArcStone, our go-to font libraries are Google Fonts, Fontsquirrel and Adobe Typekit

What are Kathryn's go-to resources for the latest in web design?

"Well nothing beats just being very aware and receptive to all the UX design you use everyday - anytime you browse the internet, use an app or even scroll through Netflix." However, she also uses Smashing Magazine, SiteInspire and Pttrns.com

If you want to take a look at last year's trends check out "Five Web Design Trends You Will See in 2015." For monthly updates on design and marketing, sign up for our newsletter on the bottom of our homepage

Topics: Web Design

New Call-to-action