Behind the Design: How Images Were Given A Multi-Textured Design Kick for Bend The Arc

The Design Idea

As a web designer, the goal is to design a platform for a great user experience that aligns with the client goals and design best practices.

For Amy Stuart, cStreet Campaigns CEO and Creative Director, she was face with the task of designing a website that would help Bend the Arc, a Jewish advocacy group, "kick their local organizing into high gear leading into the midterms and beyond".

“Clients often find choosing images for their sites challenging,” continues Amy. “They want impactful images, but sometimes don’t have the resources to source them. Overlay stylistic treatments on images is a way of making their photos look great and cohesive throughout the site no matter what they choose.”

The Web Development

Layer upon layer upon layer! The key to translating this multi-layered (there’s that word again), multi-textured visual experience onto a website reality was to, well, layer.

A number of nested divs where used in order to ensure that each design element was applied to the image in the right order. Classes were used to target each div.

What the site visitor sees is a colour image that has been converted into a black and white image using filter: grayscale(100%);.

Next, an sheer ombre overlay is applied using linear-gradient with transparent RGBA colours.

Lastly, another overlay, this time with with diagonal lines, is applied to the image. This custom, pure CSS element was created using repeat-linear-gradient.

Firefox, however, doesn’t handle thin lines well so the lines of the linear-gradient were made thicker in Firefox by targeting with a vendor prefix.

The Web Development: Spotlight Images

“On Bend the Arc: A Jewish Partnership for Action, the spotlit images follow the overall concept of darkness lit by candles,” says Amy. “And on the Bend the Arc: Jewish Action, the vibrant gradient inspires action and lends excitement to the images.”

Layers.

Again.

In order to create these spotlit images, mask-image was used with grayscale and linear-gradient. Mask-image is a great property that creates a transparent edge around an image.

The downside to mask-image is that it is not yet supported on the Microsoft Edge browser. To keep the look of the image, @supports was used. @supports allows you to target a specific browser by specifying a CSS rule that only browser supports.

And that’s all she wrote! Textured images with depth using a little simple CSS and some more complex, newer properties.