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.

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.

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

._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;

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.

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.

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

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,

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,

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.

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 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.

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.”

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?

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.

starting your own textural trend

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’.