UI Design Inspiration: Do you think about your textures?

0

It’s been just over a decade since flat design became the default and dominant design style – and for good reason. After all the shiny surfaces and shadows of “Web 2.0”, we all needed design elements that remained crisp and readable in our newly responsive layouts.

However, there is a danger that all this flat color design could start to look a little “samey”. But rather than adding a new color or font, sometimes mixing in some extra texture can give your UI design the lift it needs. Let’s look at some killer examples.

Add paper grain

In 2019, Google released a cool side project called “The AZ of AI”, which was designed to explain the basic concepts of artificial intelligence. The style is modern and friendly, using large color panels, simple children’s book illustrations, and large, expressive serif typeface.

But look closely at the flat color areas and you’ll notice some paper grain. I enlarged a small area in the image below, but you may need to look at the real thing to fully appreciate this texture. It’s so subtle that I suspect most users don’t consciously notice it, but I think it supports the simple style of children’s books perfectly.

Google’s Project AZ of AI designers gave this mostly flat design a warm, tactile feel

So how did they achieve this effect?

I have to admit I spent some time combing through background-image CSS properties of all large flatscreen areas looking for tiled graphic – but found nothing. It was confusing.

It was only the next day that I had a small revelation. What if, rather than adding grain to each panel, they created a barely visible “grainy lens layer” that covered the entire site? Think of it like a Snapchat filter for grit.

Bingo! I had been looking in the wrong place.

This is the graph

If you inspect the HTML, you will find a :after pseudo-element with CSS attached:


._3rV4LQ0BePEq9V1dxEjhEF::after {
    background: url(/static/noise.jpg);
    content: "";
    height: 100%;
    left: 0;
    opacity: .05;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 201;
}
An :after pseudo-element is attached to one of the main application containers
An :after pseudo-element creates an almost transparent texture layer.

This layer uses image grain (noise.jpg) as a tiled background, and they positioned it to cover the entire screen (width:100%, height: 100%, top:0, left:0and z-index:201).

As expected, the opacity is set to almost transparent (opacity: .05), so that only a hint of uneven grain remains. The only potential pitfall of covering the screen with this “lens layer” (even if it is transparent) is that it will block the cursor’s access to all links, inputs, and other user interactions underneath.

Fortunately, this is easily solved by adding pointer-events: nonewhich makes this lens layer invisible to the user’s cursor.

I think it’s a really useful technique. It delivers site-wide visual impact using no more than a small graphic and a dozen lines of CSS. It is excellent value for money.

Paints, pencils and other traditional mediums

Computers are designed to be precise and clean, and unlike most traditional media, digital colors won’t accidentally run, smudge, bleed or smudge. This is great for keeping your desk clean, but it also means that real, loose, organic and natural media like paint and crayons really stand out when you can find the right setting for them.

More of Less Campaign for AirBNB China Brings Chinese Watercolor into the Digital World
The More of Less campaign for AirBNB China brings Chinese watercolor into the digital world.

Although the app featured above has since expired, New Zealand agency Resn gave us a perfect recent example, authentically replicating a traditional Chinese watercolor style to promote AirBNB experiences in rural China.

This watercolor style has soaked up every pixel in the app, from cart animation sequences to full-screen backgrounds, making it a massive undertaking.

faded memories

When agency Obys made a digital tribute to Formula 1 ace Niki Lauda, ​​their design approach relied heavily on mountains of fantastic archival photos and footage from Niki’s career.

Screenshot of Obys tribute to Niki Lauda
The Obys pays tribute to Niki Lauda.

The gritty red-sepia photos give the site a warm, slightly melancholic feel. It can be tempting to take the retro theme too far and perhaps emulate an old book or journal. Fortunately, Obys has avoided this cliché by being able to present stock footage in the form of a dynamic web layout that simply isn’t possible in a traditional book.

The digital retro look

Retro inspiration: Tron (1982), WarGames (1983) and Blade Runner (1982)
Retro inspiration: Tron (1982), WarGames (1983) and Blade Runner (1982).

Of course, “retro” is never a specific moment in time, so much as a perspective, as Hypebeast demonstrates with their retro-themed super 80s. Their spinning vortex, two-tone line art, and glowing sweep lines conjured up visions of Tron’s light cycles, WarGames’ command centers, and Blade Runner.


Hypebeast adds a big dollop of 1982 to their mix of music and streetwear.
Hypebeast adds a big dollop of 1982 to their mix of music and streetwear.

Although Hypebeast used the HTML5 canvas to render their animations, this “bright TV scanline effect” would be a perfect match for the lens layer technique we dissected earlier in the chapter.

Ben Day Halftones and Dots

If you’ve ever squinted closely at an old comic book, newspaper or magazine, you’ve probably noticed the dot pattern setting the tone of the images.

Technically, there are two types of printed dot patterns. Halftone screens use a plastic grid of tiny lenses that burn black dots onto the photographic film below. More light creates bigger dots.

The first panel in the figure below shows a halftone sample of a 1964 Andy Warhol mural.

Ben Day's halftones and dots in Warhol's pop art, newspaper advertisements and comics
Halftone dots and Ben Day in Warhol’s pop art, newspaper advertisements and comic strips.

Ben Day Points are slightly different. Comics – like the Superman example shown above – typically take black line art and lay down areas of flat, uniformly sized Ben Day dots to simulate additional ink colors. A grid of small red dots on a white paper base is an inexpensive way to achieve pink.

Although the grungy, stippling look of these techniques began as an inevitable by-product of the printing process, it eventually became an artistic statement in its own right – and continues to be used that way today.

The small Japanese village of Misato, Shimane gives us my favorite recent example of this technique. Their site is in the form of an illustrated map that allows you to take a virtual tour of the village. The illustrations are fun and mostly flat in color, but with gorgeous halftone flourishes, adding depth and texture.


Misato, Shimane, uses thick halftones to give depth and bite to flat color illustrations
Misato, Shimane, uses thick halftones to give depth and bite to flat color illustrations.

DIY halftones

There are dozens of Photoshop filters that will mimic the halftone process on your images. They are… fine, but if we want to strip image detail from a photo by converting it to a halftone, it makes sense to convert it to a vector graphic – ideally an SVG. For this I can gladly recommend HalftonePro.

HalftonePro makes it relatively easy to convert any bitmap to SVG
HalftonePro makes it relatively easy to convert any bitmap to SVG.

HalftonePro lets you upload any bitmap and apply a range of halftone settings, including:

  • grid scale
  • grid (circle, square, triangle, etc.)
  • point shape (circle, square, triangle, etc.)
  • contrast
  • color output

My quick tips for producing good SVG halftones are:

  1. Not all images are suitable for this style. Bold, high-contrast images are generally more successful.
  2. File sizes can become large and unruly if you select a very fine grid. Embrace the grunginess.
  3. Use the presets to get started to help you get an idea of ​​what works.
  4. Use something like Jake Archibald’s SVG Optimizer to scale down your file.
Four different halftone treatments applied to Andy Warhol from The Velvet Underground
Four different halftone treatments applied to the cover of Andy Warhol from The Velvet Underground.

Keep in mind that HalftonePro is not free. This is currently a $15 spend, but note that this is a Once payment for lifetime membership – in a world full of monthly or yearly subscription plans. I paid for it and still think it’s good value for money.

hidden grain

Perhaps the sneakiest use of texture I’ve seen recently is displayed on the Harvard Film Archive. Open the site and you might think, “What texture? This site is as flat as possible.

Harvard Film Archive applies animation film grain to footage
Harvard Film Archive applies an animated film grain to images.

However, pay close attention to the images and you’ll start to notice a buzzing energy to them – something not unlike the shimmer of celluloid. Front-end designers have added a subtle animated film grain to the surface of all images. (Note, however, that the effect is missing from mobile view on my phone.) I suspect very few users consciously notice this, but I’d say it definitely makes those photographs still feel like stills from movies.

How do they do?

Close up film grain effect.
Close up film grain effect.

For those interested in the technical details, the developers use JavaScript to create an HTML5 canvas layer above each image. Each canvas plays a nearly seamless random noise animation. As ingenious as it is, the complexity of this idea only makes me admire more the simplicity of the earlier Google AI paper texture.

As we saw above, texture can have a big impact on how people perceive your design. Staying on top of current web design trends is key to creating effective contemporary designs, but having knowledge of past fads that have occurred outside of the internet’s ethereal history will help you establish your own unique style and original designs.

Ultimately, the image your clients are trying to establish and the communication goals they have set should be the determining factors in the amount and types of texture you apply.

Excerpt from ‘The Principles of Beautiful Web Design, 4th Ed’.

Share.

About Author

Comments are closed.