The gravelly red-sepia photos give the site a warm, slightly wistful feel.
When Obys Agency paid digital tribute to Formula One ace Niki Lauda, their design approach leaned heavily into the mountains of fantastic archive photos and footage from Niki’s career. This water-color styling soaked every pixel of the application, from dollying animation sequences to full-screen backgrounds, making it a huge undertaking. The More of Less campaign for AirBNB China brings Chinese water-color into the digital world.Īlthough the application shown above has since expired, New Zealand agency Resn gave us a perfect recent example, authentically reproducing a traditional Chinese water-color style to promote AirBNB experiences in rural China. This is great for keeping your desk clean, but it also means real, loose, organic, natural media like paint and pencils really stand out when you can find the right setting for them. Paints, Pencils and Other Traditional MediaĬomputers are built to be precise and clean, and unlike most traditional media, digital colors don’t accidentally run or smudge or bleed or smear. It delivers site-wide visual impact using no more than one tiny graphic and a dozen lines of CSS. I think this is a really useful technique. Happily, this is easily solved by adding pointer-events: none, which makes this lens layer invisible to the user’s cursor. The only potential gotcha with covering the screen with this “lens layer” (even if it’s transparent) is that it will block cursor access to all the links, inputs, and other user interactions below it. 05), so that all that remains is a hint of uneven grain. This layer uses the grain image ( noise.jpg) as a tiling background, and they’ve positioned it to cover the entire screen ( width:100%, height: 100%, top:0, left:0, and z-index:201).Īs we suspected, the opacity is set to almost transparent ( opacity. If you inspect the HTML, you’ll find an :after pseudo element with the attached CSS:Īn :after pseudo element creates an almost transparent texture layer. What if, rather than adding grain to each and every panel, they created a barely visible “grainy lens layer” that overlaid the entire site? Think of it like a Snapchat filter for graininess.īingo! I’d been looking in the wrong place. It was only the next day that I had a little revelation. I have to admit, I spent some time combing through the background-image CSS properties of all the large flat panel areas looking for a tiling graphic – but found nothing. The designers of Google’s A-Z of AI project gave this essentially flat design a warm, tactile twist So, how did they get this effect? It’s so subtle I suspect most users don’t consciously notice it, but I think it supports the uncomplicated children’s book styling perfectly. I magnified a small area in the image below, but you may need to examine the real thing to fully appreciate this texture. The styling is modern and friendly, using broad panels of color, simple children’s book illustrations, and big, expressive serif typography.īut look closely at the flat color areas and you’ll notice a papery graininess. In 2019, Google released a cool side project called “ The A-Z of AI”, which was designed to explain the basic concepts of Artificial Intelligence. But rather than adding a new color or font, sometimes mixing in some extra texture can give your UI design the lift it needs. However there is a danger that all this flat color design can start to look a bit ‘samey’. After all the glossy surfaces and shadows of ‘web 2.0’, we all needed design elements that remained crisp and legible in our newly responsive layouts. Select the Image element you would like to use as a mask (in this case, the star mask element we created) from the list of current room elements by checking the box next to the element name.Įnsure that the main image and the masking image is overlaid on top of the background image and the opacity of the mask element is set to 0.It’s a little over ten years since ‘flat design’ became the default and dominant design style – and with good reason. Select the background Image element then click the icon next to Mask Element under the Advanced category in the Advanced Properties panel: Now, you'll need to set the mask Image element as the mask on your background image. Then create another Image element and upload your background image. To get started, create an Image element and upload your mask PNG. Any non-transparent pixels in that image will be used as the mask. Typically, you'll want to use a PNG file with a transparent background as your mask. To mask an element you will need two images a mask image and a background image.