Essential design trends, December 2016

Carrie Cousins.
November 28, 2016
Essential design trends, December 2016.
Do you ever find yourself noticing that a certain design element just keeps popping up? Even those tiny details that look somewhat insignificant can be indicators of design trends. That is particularly true with the elements in this month’s roundup. Each of these trends—white edges framing a web design, cinemagraphs and tiny loading animations—are seemingly simple details that enhance the visual experience for users. Here’s what’s trending in design this month:

1) White edges

More web designs are using white edges or framing around the perimeter of the design in the web browser. It’s a new twist on an old idea when more websites were built to certain sizes and framing was used for odd browser widths. It’s something that faded as more designers opted for responsive, full-width designs. The new twist with framing is interesting and is a nice way to create a canvas for the design. Most of the sites using this trend include a white—common, but not mandatory—edge around the design. It’s a few pixels wide and is commonly placed around three or four sides of the design. (Some are opting to leave the frame off the bottom of the design to encourage scrolling.) The nice thing about the white edge is that the design is clean with white lines that can help bring focus to strong color choices, draw the eye from the edge of the screen to other light elements (such as text boxes or calls to action) and edging can help create a background canvas for parallax scrolling or other animated effects. Camden Town Brewery does this exceptionally well. The white framing fills in between elements of the design to create depth and focus for the user. White separation sets apart each new content section on the screen and contributes to overall organization of the design. (Plus, white accents really bring out the strong red and black color palette to keep the combination from feeling too overwhelming.) brewery hillside claraluna

2) Cinemagraphs

Cinemagraphs are photos with an element of motion in them. It can be anything from a photo of a person that blinks their eyes to the subtle cloud movement in the sky where nothing else moves. While the most common uses of the design trend still seem to be in advertisements and social media, web designers are beginning to incorporate this “live photo” technique as well. It works because users are intrigued by movement. It’s effective for many of the same reasons video is a good option to grab a user’s attention. Movement and action is engaging. It’s interesting. It feels real. When it comes to working with cinemagraphs, the bonus is that you can create a design with motion but without some of the high production that comes with a video project. The trick to making cinemagraphs work is to root the motion in reality. Even if the scene is more imagined, such as Monochrome Paris, the laws of physics should apply to movement on the screen. Water should flow downstream, for example, gravity should be a force in how movement occurs. The motion also needs to be simple and subtle. Too much movement, and a video might be a better option. What draws users into a cinemagraph is that element of surprise. What looks like a still photo in a hero image actually has something happening in it. That little divot will help draw people in, keep them engaged with the design longer and hopefully result in a website conversion. cinemagraphs monoparis glendevon

3) Tiny Loading Animations

Load times are a big deal. But you can’t always account for the speed of the network a user is on; that’s where tiny loading animations can become a big deal. What’s different about the tiny loading animation trend is that it’s a sometimes you see it, sometimes you don’t design element. Either way the design team has taken special care to ensure that every user comes to the website with a positive experience. These tiny animations are identifiable by the fact that they aren’t really a part of the user experience that counts toward the overall website goal. They are a simple, small element that catches your attention for a quick second while the primary site design is served up. The cool thing about the trend is that these tiny loading animations really are tiny, from the size of the visual itself to the action on the screen, there’s not a lot to see, but what is there is absolutely delightful. Here are three great examples:
  1. Hannah Purmort’s loading animation is a single moving stroke in the opposite color combination of the main screen. The stroke is carried through the design in the scroll effect as well.
  2. Susa Ventures features a small icon with a tiny load bar. This one grabs your attention because the tiny gorilla is visually interesting and makes you curious about the website’s content.
  3. FPG uses a sketch that appears to be drawn on the screen as the rest of the homepage loads. The only cue that it’s actually a loading animation is that the rest of the screen is much more elaborate once loaded with running video and even more sketches. The effect is seamless and is over almost before the user realizes that it has started.
hannah susa fpg

Conclusion

Details are at the heart of every good design. It’s important to remember that designing (and accounting for) things that not every user will notice is important. That’s how each of these trends connect—through small design elements that aren’t an obvious part of the overall aesthetic. Those tiny elements might be the thing that really sets your website apart for a user. It might be the element of delight that brings someone back to your design. Details can be the differentiator between success and failure. 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…