There’s something fascinating about street art. Even the brightest, most abstract murals and intricate compositions can tell a lot about the mechanics of creating an exciting visual adventure on a brick or concrete wall. And no, you won’t hang something like that between kitchen cabinets or in the hallway at home. What’s more, street artists not only develop their own styles and have a passion for specific motifs, they also strictly adhere to key principles of street art, design, and even web design. Of course, the tools are different—holding a spray can or brush, they must move by hand, trace outlines. Fixing mistakes or tweaking layout elements isn’t as easy as rewriting code.

It’s important to note that street art and graffiti have a significant impact on fashion, print (posters, covers, etc.), typography, logos, and advertising overall. They’re also used in multimedia—film, video games (where street art is sometimes commissioned from renowned creators). As for web design, it’s not easy to find an entire website built in the style of street art these days. But what’s really interesting is that individual elements, principles, and nuances are still in use—background images, for instance.

Today we’ll look at how street art influences web design, how one might create something in that style, and how to work with graphics in Photoshop .

Graffiti or Street Art

If you ask what’s the difference between these two forms of street painting, in an interview, the editor of a popular blog and well-known street art guru Lois Stavsky said: "Street art is a form of graffiti, but as an art form it has moved beyond urban districts and is no longer just a form of youth self-expression. Now it serves as a mark of personal branding for the artist. Graffiti, however, is illegal—it’s a risk, and thus a part of counterculture. Street art, by contrast, is usually created by artists with formal training."

Moreover, comparing graffiti and street art quickly reveals a difference in quality and scale that anyone can recognize. But despite this somewhat formal division, street art has a lot to offer web designers.

Background Micro-Images

Even if you don’t live in the UK, you’ve likely heard the name Banksy . This captivating artist reveals new meanings and uses natural surroundings to create masterpieces that attract crowds of imitators and admirers.

In web design, Banksy’s work inspires a multilayered approach—adding depth to the page. Small elements in the Breather project (for space rentals) make full use of the page canvas. A tiny shelf appears, showing common human actions (reading, drawing, writing), turning the webpage into a miniature replica of a real room.

Typography Talk

Typography in street art often draws inspiration from bold, heavy fonts, more typical of graffiti. So when selecting font pairings for your website, why not pick something truly unconventional? It could boost readability and recognition.

A London-based food and beverage company called G’NOSH took exactly this approach. Their website design was built entirely around a hand-drawn logo. Compare that font and style to street art murals, and the similarity becomes obvious.

The Impact of Abstraction

Street artists are incredibly talented—some works decorate entire buildings and resemble high-quality photographs. Still, abstract styles are far more common. Stavsky explains that graffiti was originally about personal expression. But even then, artists aimed to depict material objects as they saw them, focusing on visual effects and associations triggered by real-life items.

A mural by Okuda (the alias of a Spanish art painter) is a prime example. While it shows human figures, the real story lies in the color scheme—something that can be cleverly replicated in web design.

The project In Pieces features abstract representations of endangered animals. Notice how precisely the site is designed—its interactivity supports the core message and draws users in, while the animal figures subtly fade away. With minimal content, the site manages to deliver a powerful environmental message.

Hand-Drawn Imperfection

Web designers and studio artists work until they find the perfect colors, brush strokes, and elements—and they can delay deadlines if needed. Street artists, even when working on commissions, rarely have the same luxury. As a result, imperfections in street art are easier to spot and appreciate. In contrast, web designers often polish things to perfection, sacrificing the freedom and spontaneity that define street art.

The Direnduvar project embraces this imperfect, sketchy style. Zoom in and you’ll see hand-drawn lines more clearly. Signatures and visuals reflect the community itself. It’s a great example of branding that feels more open and human than the polished output of AI generators.

Yes, web design has many best practices, styles, and rules. We’re not saying you should go against them. The internet was originally created to deliver information to remote locations. While our interpretation of information has evolved, one thing remains unchanged: when someone visits a website, they expect to gain information. How this information is presented affects user interest and the overall quality of the web design. The same goes for street art—it impacts our perception.

Try moving a mural from one building to another. In 99% of cases, it loses its meaning and essence. Why? Let’s compare traditional paintings and street art. Aivazovsky’s paintings can hang in any interior, but street art—portraits, peeking characters, narrative murals, even painted staircases—can’t just be placed on any street or wall. Street art often has more conceptual depth and gives us more reasons to reflect on the world around us.

That’s why using street art elements in web design is a complex art form . You need to notice subtleties, identify key elements, and see the design canvas from a new angle. It’s often easier to create street-art-style graphics, headings, icons, and so on.

We’ve gathered more examples of websites that incorporate street-art-inspired ideas, aesthetics, and interpretations of the surrounding world. Check out: OTTO Zeitgeschenke, JozefMetelka, Art Attackk, Discover Moscow, artifakt, Bistro Rambus, Subaru, Sons of Gallipoli, Karim Rashid, How I Fight.

But what about Photoshop?

A special Photoshop toolkit called Street Art was created by GraphicRiver . It includes brushes, patterns, and an Action script. You can find it on their website or elsewhere online. We’ll take a closer look at it, because there’s really no better way to replicate street-art style on a computer. You might wonder: “What’s so special about this set that it deserves a full article?” Read on—you won’t regret it.

The Action only works with the English version of Photoshop. Go to Preferences → Interface and switch the language to English. If English isn’t available, you’ll need to download a version that supports it.

Open the image you want to use—we chose this car to show speed and style, breaking through its everyday surroundings (walls, information as metaphors for routine), rushing forward at full speed. It's also important to preserve the unique features of the car model, so…

With the image open, load the brush, pattern, and action files one by one using File → Open to import them into your Photoshop library. No need to manually copy anything into system folders.

Let’s prep the image. Create a new layer and name it "area". Then go back to the main image layer, use any selection tool to outline your subject (the car).

Choose the Paint Bucket Tool, select a standard red RGB color, switch to the "area" layer, and fill your selection with it.

Now activate the Brush tool, open the Actions panel, and choose Street Art Photoshop Action. You’ll see many different action options—just hit Play and wait.

Here’s what we got:

Not bad for street art, but we want something more fitting for a website—a background or section design with a clearer concept.

Explore the folders, find the background layer group, duplicate the background, add a mask, and use a black brush to bring out the road.

Then go to the background fill layer, change the blending mode, and apply one of the wall textures from the included pattern set.

In the folder Your Object Elements → Colors and layers, duplicate the background again, add a mask, and brush in some details to keep the car’s original appearance. Then tweak the effects—just enough to make the object blend without losing clarity.

You’ll find text options in the 11 Graffiti Tags folder. You can’t write custom messages with these, but for art it works. Each text is on its own layer—use Ctrl+T to resize, adjust perspective, rotate, etc. Then add color, a stylistic outline, or even erase/mask certain areas.

And here’s the new image—as if the sketched car bursts into the real world. The effect changes depending on brush pressure and opacity.

You can overlay headlines, taglines, video popups, and more. It’s a simple way to create something original and visually appealing. You can even use a brick texture and apply it selectively. It all depends on your concept and how the image serves your web design.

You can disable certain elements entirely—like outlines, haze, and other effects.

Conclusion

The key to using street art in web design is independence and self-expression. But not the “I’ll do what I want, forget the client” kind. Instead, it's about understanding what makes a café unique, who it’s for, what the atmosphere is like—and whether street art elements will suit the site. Not the entire design, just parts of it. Subaru’s website, for example, incorporated street art themes quite effectively. It’s subtle, but you can see the influence.

Despite the dominance of today’s strict design standards, using art-inspired imagery is neither discouraged nor seen as unprofessional. You can build a flat or animated layout with a semi-transparent street art background. Say you’re building a fashion eCommerce site—why not use a graffiti-style banner if the collection is aimed at youth? These ideas are being used already. You just have to look closely at the websites you visit every day.