Free PHPFree PHP scripts classes and info

Using ‘Spotty’ Backgrounds in Web Design to Grab Attention

A good website is all about the little things. Every detail counts, even though it may seem that the only role it should serve is to stay in the shadows. Today, our spotlight shines on the background.

It has been a while since we spoke about backgrounds in terms of trends. Creatives are obsessed with things that occupy the foreground, since they help to make the first impression. However, the core elements of the interface are always important. They remind us about themselves every time we build something new. And it is only a matter of time until they become a focus of attention again.

So, the time has finally come to do something interesting with the one and only background. The major sticking point is that it provides a solid foundation for the entire project, so it is challenging to take drastic measures. You need to balance between the pragmatic and entertaining parts to create something extravagant and, at the same time, not ruin everything.

And it seems that the designers below have found a perfect solution – spotty backgrounds. They meet both requirements and look like a breath of fresh air in declaring themselves as a small trend. Let’s take a closer look.

Patientory

This is a standard promotional website for a mobile application. In essence, there is nothing extraordinary here. You will find a standard pack of tricks to present the product, such as an iPhone mockup that shows the application in its natural environment. Plus, several vivid call-to-action buttons, and a basic structure.

However, what instantly catches attention is the background. It looks like a big spot that naturally pushes the eye towards the app. And, at the same time, it gives the overall aesthetic a lovely zest. Thanks to smooth curves and soft coloring it feels elegant and refined, saving the standard website from looking trivial.

Note, it is just a tiny detail, yet it certainly makes the difference here. It is static and takes up only a third of the screen, yet it is enough to stand out from the crowd.

Ecomly

Much like the previous example, this is a simple website. Yet this time it represents a digital agency. The structure of the website is conventional and the same goes for the design. There are no fanciful details nor dramatic illustrations.

The only extravaganza here is the background. It features two white drops of medium size that smoothly move from top to bottom. They are located on the sides, so they do not distract attention from the main tagline and CTA. But they still add some spice to the interface.

What’s more, you can see the same approach applied in the section right before the footer and on some inner pages. In such a way, everything is tied together, creating a harmonious design.

The dynamic spotty background perfectly blends into the businesslike atmosphere of the website. It matches the tone of the project and echoes with the logotype, supporting the brand identity as well.

The Digital Panda

While the two previously mentioned examples use several spots, the creative team of The Digital Panda prefers to use just one (but quite a big one). The beautiful purple blob supports the foreground elements and, at the same time, saves the clean white interface from looking too oversimplified. It goes perfectly well with illustrations, CTAs, and typography.

You might notice that this trick is traced throughout the entire website. Various sections benefit from the spotty background, bringing about a coherent user experience.

Art4Web

The team behind Art4Web strongly relies on a parallax approach to impress online visitors. Here it lies in the core of the hero area, gluing the mockups together. The spotty background features several blobs that slowly move in order to imitate the liquid surface. It also goes in tune with the logotype, bringing brand identity into the overall design.

The solution fits like a glove. It highlights the composition on the foreground and adds a touch of dynamics to the project, giving the overused parallax approach a nice twist.

Bodymovin Solutions

Bodymovin Solutions bets on an illustrated approach that forces the hero area to live up to its name. Much like in the previous example, the spotty background is partially animated. And since these spots have a blob-like shape, their behavior predictably reminds of the gentle movement of liquid. It serves as a solid base for small human illustrations – perfectly complementing them.

Notice that, here the spotty background is used as a part of a splash screen that opens the website in an alluring manner. It creates a consistent experience from the get-go.

Grow Your Circle

As you may have guessed from the nameplate, here a circle is the heart and soul of the project. So it comes as no surprise that this shape is seen on the home page. The background is no exception.

Several big, heavily blurred circles with beautiful coloring form the canvas on the back. Much like in the previous examples, they are also set in motion. They contribute to the visual identity and reinforce the brand identity, to say nothing of making the page look outstanding.

Griflan Design

While we’ve generally considered spotty backgrounds where blobs run the show, in fact, no one stops you from adopting other shapes like the team behind Griflan Design did.

An original spotty background marks the hero area of their official website. Two geometric shapes (a rectangle and half of a ring), along with tiny, outlined icons create the base for the content. As befits, everything is moving. While the big shapes move slowly, little ones move very quickly, giving the canvas quite an exciting look.

Spot On

When it comes to spotty backgrounds, the preferred shape appears to be a blob. There are several reasons for this.

First, the smooth curves are less distracting, which makes for a perfect background. On the one hand, such a backdrop enriches the design. On the other, it does not compete with the content in the foreground. Secondly, blobs are perfect for applying a liquid behavior that is quite popular these days.

Then, they are also great for experiments. You can force them to move in various directions or, on the contrary, merge them together and still look visually intriguing.

Finally, they look great even in a static mode, giving the clean white surface a special flavor.

The post Using ‘Spotty’ Backgrounds in Web Design to Grab Attention appeared first on Speckyboy Design Magazine.