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

Conclusion

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

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…