Essential design trends, June 2016

Carrie Cousins.
June 27, 2016
Essential design trends, June 2016.

Designers are changing the rules for web design, thanks to creative problem solving. Auto-play sound, mixing real and illustrated images and even layering logos on top of photos are some of the hottest design techniques right now and all three concepts were considered taboo not that long ago. Here’s what’s trending in design this month:

1. Auto-play sound

Not that long ago, the rule was not to include sound on your website unless it was optional. And you definitely would not go the auto-play route. Those tables have turned! What used to be a bandwidth hogging, obtrusive design feature is becoming quite commonplace. Sound is being used particularly for a couple of different website types – for media-related content such as music, movies or news and for game or storyline type designs. The trick to using sound is that it needs to include a toggle on/​off button for users that still want to interact with a website in silence. Sound is that it shouldn’t come to a shock to users. Many sites, such as This Was Louise’s Phone, that use auto-play sound are using a buffer of sorts to show that sound content is loading. Combine this load action with a toggle switch and users can determine whether sound is for them or not before the site makes the first noise. Another trick when it comes to using sound is to start softly. You don’t want users to jump out of their chairs because your design opens with a heavy metal rift. All sound to crescendo from almost a whisper to full volume in the first few seconds. Finally, it is important that sound (particularly when it plays automatically) is a vital part of the content that contributes to overall user experience. Don’t use sound just because you want to try something new; use it with purpose. Also keep this in mind – even with sound as part of the design, many users will access the content without it. Design wisely. moods phone-loading phone xmen

2. Mixing photos and illustration

It can be a tough technique to pull off but the line between photography and illustration has been crossed. Mixing real and hand-drawn elements can add an air of whimsy to a project that’s both fun and visually intriguing. Do it without being cheesy to have a lasting impact on users. Here are a few suggestions:

  • Use illustrations for icons and buttons, and photography for dominant visual impact
  • Create a visual pattern that uses mostly illustration, but add in short video or image areas for emphasis
  • Add animated illustrated elements for a touch of something different near photos
  • Create a badge or logo that’s illustrated to use with brand photos or on packaging that will appear in brand imagery
  • Use illustration to help guide users through other visuals and tell a story
Taylor Made

is a great example of this mix-and-match approach to photography and illustration. A financial planning company is not a place where you might expect to find this technique in action, but it is effective. Animated illustrations in the background of photos of people add interest to what could otherwise be a boring headshot. The animated hover stats grab user attention and encourage scrolling. Even more illustrations are used in the sites iconography to encourage clicks and add visual flair to text-heavy parts of the design. taylor madeby rachels

3. Badges on top of hero images

Badges are everywhere you turn right now. From logo design to vintage retro typography styles that could be dubbed hipster favorites, these simple elements have become a staple part of minimal design styles. They are also a common option for designs that might be lacking in photography. That’s shifting though as more designers are using badges with stellar photography in hero images. The trend is exemplified by a single hero image (typically not a slider) with a white or semitransparent badge on top. Badges are often centered horizontally and vertically, although placements can vary. It’s a striking photo to logo (or text) contrast. What makes this work is that the big image draws users in. The badge serves as a focal point for what is often a somewhat weak or loose image. (That’s not to say the images used in this type of style are bad, but they do benefit from the help of a badge.) This trend is an evolution of something we’ve seen for a while with hero image headers. Oversized, bold typography choices were the craze last year. This is a natural shift because of the popularity of badge styles and similarity between how oversized type and badges are used. 

  • Both tend to be white or light type
  • Both tend to hammer home a single message to users
  • Both work in designs that don’t have a lot of competing visuals
  • Both are bold and daring because they only offer users one real point of entry
  • Both work exceptionally well with stock photography
  • Both styles offer a bold visual solution when you don’t have a lot of photo options
  • Both styles lend themselves to adding a touch of animation in other places (such as a hover state) to entice users because there are not a lot of other moving elements, such as video or an image slider

What’s nice about a great badge is that it can serve dual-duty as your brand mark as well. (This is a great option for small businesses or portfolio sites.) Create a badge with the idea in mind that it will be your logomark. Design color and white versions to mix and match depending on use. This added functionality is another reason why badges are so popular right now. pauline coffee blind


Are you brave enough to add auto-play music to your website design or mix real and illustrated imagery? Both of the trends come with an element of risk — and opportunity for payout. If you aren’t quite ready for these trends, incorporating a badge over a hero image is something that can work for almost any type of design outline. You can also make this adjustment on the fly and use it as needed. What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.

Read Next

Are Simple Websites Better For Business?

As web design technologies raise the bar on what it is possible to achieve on a realistic budget, there’s a rising deba…

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …