UI Design Inspiration: Do You Think About Your Textures?

It’s been a little over ten years since ‘flat design’ became the default and dominant design style – and with good reason. After all the glossy surfaces and shadows of ‘Web 2.0’, all we needed was design elements that stayed crisp and legible in our new responsive layout.

However there is a danger that this all flat color design may end up looking a bit ‘alike’. But instead of adding a new color or font, sometimes mixing in a few extra textures can give your UI design the lift it needs. Let’s look at some killer examples.

adding paper grain

In 2019, Google released a “cool side project” named “AI. of AZ”, which was designed to explain the basic concepts of Artificial Intelligence. The styling is modern and friendly, using broad panels of color, simple children’s book illustrations, and large, expressive serif typography.

But look closely at the flat colored areas and you will see a grain of paper. I enlarged a small area in the image below, but you may need check 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 totally supports the children’s book genre.

The designers at Google’s AZ of AI project gave this essentially flat design a warm, tactile twist

So, how did they get this effect?

I have to admit, I searched through some time background-image Looking for tiling graphic css properties of all large flat panel areas – but found nothing, It was astonishing.

The very next day I had a small revelation. What if, instead of adding grain to each panel, they created a barely visible “grainy lens layer” that overlaid the entire site? Think of it like a Snapchat filter for rash.

Bingo! I was looking in the wrong place.

This is the 'noise' graphic they use to get the grain texture (noise.jpg)

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

    background: url(/static/noise.jpg);
    content: "";
    height: 100%;
    left: 0;
    opacity: .05;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 201;

a :after pseudo-element is attached to one of the main app containers
A: Having the pseudo element makes the texture layer almost transparent.

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

As we suspected, the opacity is set to almost transparent (opacity: .05), so that all that is left is a sign of uneven grain. The only possible gotcha with this “lens layer” covering the screen (even if it is transparent) is that it will block the cursor’s access to all links, input, and other user interactions beneath it.

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

i think it’s one really useful technology. It provides site-wide visual effects using more than one tiny graphic and a dozen lines of CSS. This is great bang for the buck.

Paints, pencils and other traditional media

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

AirBNB China's More of Less campaign brings Chinese watercolors to the digital world
The More of Less campaign for AirBNB China brings Chinese watercolors to the digital world.

Although the application deadline shown above has expired, the New Zealand Agency resno Gave us a perfect recent example, authentically reproducing the traditional Chinese watercolor style to promote AirBNB experiences in rural China.

This watercolor style soaked up every pixel of the application, from the drooling animation sequence to the full-screen background, making it a huge undertaking.

faded memories

When follow up agency Paying a digital tribute to Formula One ace Niki Lauda, ​​his design approach leans heavily into mountains of stunning collection photos and footage from Niki’s career.

Screenshot of the Obis tribute to Niki Lauda
Obis tribute to Niki Lauda.

Red-sepia photos from the gravel give the site a warm, slightly cheery feel. It can be tempting to go too far with a retro theme and perhaps copy an old book or newspaper. Happily, Obis avoided this cliché by being able to display archive imagery within a dynamic web layout that isn’t possible in a traditional book.

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. hypbeast With its super-80s retro themed displays. Their spinning swirls, two-color linework and glowing scanlines added to the visuals of tron light cycle, war games command center, and blade Runner,

Hypebeast adds a great deal of 1982 to its mix of music and streetwear.
Hypebeast adds a great deal of 1982 to its mix of music and streetwear.

Although Hypebeast uses HTML5 canvas to render its animations, it will be perfectly suited for the “Luminous TV Scanline Effect” lens layer technique that we covered in an earlier chapter.

Halftone and Ben Day Dots

If you’ve ever looked closely at an old comic book, newspaper, or magazine, you’ve probably noticed the pattern of dots that make up the tone in the images.

Technically, there are two types of dot patterns in print. halftone screen Use plastic grids of small lenses that burn black dots on the photographic film beneath them. More light creates bigger dots.

The first panel of the figure below is a . Shows a halftone sample from 1964 Andy Warhol Murals,

Halftones and Ben de Dots in Warhol's pop art, newspaper commercials and comic books
Halftones and Ben de Dots in Warhol’s pop art, newspaper commercials and comic books.

ben day dots are a little different. Comic books – like the Superman example shown above – typically take black linework art and leave in areas of flat, similarly sized Ben Day dots to simulate the extra ink colors. A grid of little red dots on a white paper base is an inexpensive way to get pink.

Although the sharp, choppy look of these techniques began as an unavoidable byproduct of the print process, it eventually became an artistic statement in its own right—and continues to be used as such today.

small japanese village of Misato, Shimane Gives us my favorite recent example of this technique. Their site presents it as an illustrated map that lets you take a virtual tour of the village. The images are fun and mostly flat in color but some wonderful halftone flourishes add depth and texture.

Misato, Shimane, uses chunky halftones to add depth and bite to flat color illustrations
Misato, Shimane, uses chunky halftones to add depth and bite to flat color illustrations.

DIY Halftones

There are dozens of Photoshop filters that will mimic the halftone process on your images. Those… are fine, but if we’re going to flush the image details from a picture by converting it to a halftone, it makes sense to convert it to a vector graphic – ideally an SVG. For this, I can happily 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 raft of halftone settings, including:

  • grid scale
  • Grid pattern (circle, square, triangle, etc.)
  • Dot shape (circle, square, triangle, etc.)
  • gap
  • color output

Here are my quick tips for creating good SVG halftones:

  1. Not all images fit this style. Bold, high-contrast images are usually more successful.
  2. If you select a very fine grid the file size can become large and uncontrollable. Embrace the annoyance.
  3. Use the presets to help you get a feel for what works.
  4. use something like this Jake Archibald’s SVG Optimizer To squeeze your file down.
Four Different Halftone Treatments Applied to The Velvet Underground's Andy Warhol
Four different halftone treatments were applied to the Velvet Underground’s Andy Warhol cover.

bear in mind that halftonepro is not free. This currently has an outlay of $15, but note that this is a one time pay for lifetime membership — in a world full of monthly or annual subscription plans. I paid for it and still think it is good value.

hidden grain

Probably the Most Secret Use of Texture I’ve Seen Lately Harvard Film Archive, Open the site and you might be thinking, “What’s the texture? This site is just as flat as it comes.”

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

Pay close attention to the images, however, and you’ll start to notice a humming energy in there—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 absent from the mobile view on my phone.) I suspect very few users notice it intentionally, but I’d argue that it certainly makes up for these static photos. feel Like movie stills.

how do they do it?

A close-up picture of the film Grain Effect.
A close-up picture of the film Grain Effect.

For those interested in the technical details, developers can use JavaScript as a HTML5 Canvas layer on top of each image. Each canvas plays a nearly transparent random noise animation. As simple as it is, the complexity of the idea only makes me admire the simplicity of the earlier Google AI paper textures more.

As we saw above, texture can have a big impact on how people see your design. Creating effective contemporary designs requires staying on top of current web design trends, but having knowledge of past methods that took place outside the ethereal history of the Internet will help you establish your own style and original design.

Ultimately, the image your customers are trying to establish, and the communication goals they set, should be the determining factors in how much and what type of texture you apply.

Excerpt from ‘The Principles of Beautiful Web Design, Fourth Edition’.

Leave a Reply