How to Emulate Street Art in Web Design

Don’t you agree there’s something captivating about street art?

Even if bright, abstract murals and quirky designs aren’t something you’d hang in your home, there’s still a lot to be said for the mechanics of creating a captivating piece on the side of a brick wall.

Not only do street artists develop personal styles and gravitate toward recurring motifs, but they also follow basic design principles—just like web designers. Of course, the tools couldn’t be more different. Wielding a paint brush (or spray can) requires a different kind of finessing than manipulating code to spit out the end result.

However, taking a few design cues from independent street artists could elevate the visual aspects of your branding. If you’re the lead designer for a company, breaking away for industry trends without sacrificing a clean user experience could be exactly what’s needed to attract an audience of its own—even if the the oohs and ahhs come from an online community or potential customer instead of a passerby.

What’s the difference between graffiti and street art?

Before I lay into how your web designs could benefit from street-artist-like qualities, I want to clear something up.

According to street-artist guru Lois Stavsky, there’s a real difference between the two. Graffiti came first and is word-based, but street art draws inspiration from those words. As the curator of the StreetArtNYC blog, Stavksky also knows that the visual differences go deeper than art.

In an interview with Quartz, she said, “The art form emerged from inner-city neighborhoods as a type of self-expression for urban youth. It’s egoistic because its “tags” are acts of personal branding by the writers. Graffiti is illegal, but it is precisely this illegal risk that gives it its counter-cultural edge. Street art, on the other hand, is most often done by artists who have received formal training.”

Because of that formal training—and lots of experience making the most of a blank canvas—street artists offer a wealth of inspiration for web designers. Here are a few web design ideas worth trying:

1. Weave images into the background

banksy_chalk_farm_maid

Even if you don’t follow the street artist scene, you’ve heard the name Banksy. That’s  because this captivating artist shrouds himself in mystery and uses the natural features of his canvas to complement art. The result? Clever masterpieces that draw in crowds and copycats alike.

In web design, a more layered approach prevails. Because of this standard, you may be missing out on opportunities to add depth to the page. Not only does ironing an image into the site’s makeup make branded elements jive better, but it also looks pretty awesome.

Screen Shot 2016-10-11 at 2.06.32 PMBreather, a network of modern, private workspaces that people can instantly book,  uses a similar approach to make the site’s copy part of a real room.

2. Let words do the talking

Screen Shot 2016-10-11 at 2.26.21 PM
As mentioned, street art takes inspiration from the chunky, bold lettering that characterizes graffiti tags. Instead of sticking with typography pairs thought to boost readability, then fit that pair into an otherwise separate design scheme, use original lettering to stand for both.

Screen Shot 2016-10-11 at 2.16.50 PMG’Nosh, a gourmet line of no-fuss dips, centralizes all other aspects of the page design around a brush-lettered logo. If you compare it to the image above by street artist MrDheo, the mix of lettering and imagery is almost identical.

3. Go abstract

Screen Shot 2016-10-11 at 2.54.00 PM
Street artists are undoubtedly talented enough to cover a building in what looks like a photograph. Yet, this realistic style isn’t as common as abstractions. Stavsky noted that when graffiti began to take shape, the inspiration was self-expression. Based on this fact, it makes sense that representations of tangible things in life would take on different visual qualities than they actual do in person.

This mural, by Okuda, is a perfect example. We can tell the images are people, but there’s much more behind their composition and color than just a face on a building. It’s also possible to mimic this double-meaning in web design.
Screen Shot 2016-10-11 at 1.46.26 PM
This abstract representation of an endangered red panda comes from In Pieces. The interactive website very cleverly ties its core message to design. As a result, the site needs very little copy to explain what’s going on—and it still leaves a big impact.

4. Include human imperfection  

Screen Shot 2016-10-11 at 3.15.27 PM

Studio artists slave away to blend the perfect hues or add the right amount of shading to a piece. Street artists, though often commissioned, rarely have the same kind of timeline a studio artist does. As a result, the human touch is much more evident. Some imperfections get to fly, but in today’s world, that craftsman-like touch is desirable.

Screen Shot 2016-10-11 at 1.48.21 PMDirenduvar uses this imperfect hand-drawn style. When you zoom in, those human touches are even more evident. Doodles and various signatures show the community behind the page, which matches the brand better than computer-generated perfection.

Web design practices exist for a reason, but that doesn’t mean going against the grain is wrong. The very point of the internet began with the idea to bring information to everyone, equally. Though decentralization focused information, building designs that are reminiscent of things in the world people live in connects viewers to the page. And that’s what will continue to make web design just as captivating as the borough’s latest mural.

For More Design Inspiration, Check out These Posts:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.