From the Street to the Screen: Street Art’s Influence on Digital Design

Street art lives in public spaces and is a traditional culture analogue for digital media. While physical street art is geographically constrained, it is often ephemeral. If images of graffiti are spread via the internet they’re no longer constrained, but they’re only ephemeral if they’re superseded by our attention on the next new thing. Graffiti can mark a landscape for a long time, or can quickly be washed off, but it’s said that what’s on the internet is on the internet forever.

In the past, graffiti was the art of outlaws and scofflaws. Art that was made clandestinely in the dark of night only to be seen for a few seconds by those standing on a subway platform. Today, street art is part of our urban landscape. The color and flavor of our cities and culture.

Street Art Make it to the Screen

The subcultures of skateboarding and hip-hop have co-opted and combined urban art to create video game experiences like Jet Grind Radio (Dreamcast), Revoltin’ Youth (PSP) or Sideway: New York (PS3). Each game incorporates creating or interacting with street art to propel the gameplay forward.

Exploring Physical Spaces

In order to promote tourism to the Rio Summer Olympics and to encourage visitors to explore the the Olympic Boulevard and Lapa District, Instagram created InstawalkRio, a self-guided urban art tour that highlighted the best murals and graffiti walls of Rio. The art tour encouraged Individuals to share their experiences on Instagram using the hashtag #InstawalkRio.

InstawalkRio mural image via InstawalkRio

Some artists post their work online to encourage people to explore out of the way places. The video game pixel art of Toronto’s GameBoyOne can be found in less traveled alleys and abandoned buildings, where our favorite 8-bit video game characters live in tucked away spaces.

Pokemon Hunter pixel graffiti art by GameboyOne

Graffiti and sculptor Peeta (a.k.a Manuel Di Rita) uses Photoshop, Illustrator and CAD software to create digital graffiti that is used to build 3D sculptures and murals that create depth and hyper realism to traditional street art. Exaggerated curves and angles are digitally modeled from sketches which are then constructed and integrated into physical locations. Traditional spray painting techniques for line work, light volume and shadows are used to give the installations a surreal, industrial look that challenges the viewer’s perception of depth and space.

3D grafitti image via peeta.com

Augmenting Reality and Projection Mapping

Mixing murals and augmented reality has been a primary way for street art to merge with technology and extend visual experiences online, and this has influenced trends in advertising and digital media.

Gif-iti are animated online paintings that exist ephemerally in the real world. Murals are painted, photographed and repainted. Visitors to his installations can download the GIF-ITI Viewer App to experience what the artist INSA calls “slices of infinite un-reality.” The augmented reality interactive murals can be viewed online or in various locations around the world including Toronto, Paris, Miami and Los Angeles.

Drake Hotel Gif-iti image via Tumblr

The Light Painting WiFi reveals the invisible landscapes of WiFi networks that weave through the our neighborhoods and cities. Using a measuring rod with 80 LED lights that visualize signal strength and long exposure photography to capture the “immaterial terrain” of the internet around the city of Oslo. The images show the invisible information in our urban landscapes.

Light Painting image via Flickr

Graffiti artist Sofles has used traditional graffiti techniques with motion graphics and video mapping on a large scale mural to create Graffiti Mapped, an immersive layered multimedia experience for the White Night Melbourne cultural festival. The image illustrates the scale and physicality of the mural. A parking lot wall is the new cultural canvas.

Graffiti Mapped image via Selina Miles

The V-Motion Projection/Kinects Project is an interactive DJ performance merging gesture based interaction, music and video visualization. As part of an energy drink promotion, V-Motion was part dance performance and part music video that created music through motion capture. Two Kinect cameras captured the movements of hip-hop dancer Josh Cesan and form the vectorized green man avatar that was part of an energy drink promotion and advertising campaign.

V-Motion image via Assembly

Using a portable camera, VJ Sauve brings projection mapping and storytelling into a group bicycling experience. Riders follow Sauve through the streets of Sao Paulo as animations are played on buildings and alleyways. The urban space becomes the canvas on which digital stories are told, enabling a shared experience of exploring and following the story while biking through the city streets.

VJ Sauve projection bike

Additional work involving the merger of pixels and graffiti is being done by the Graffiti Research Lab. They are building open source tools to help artists grow digital street art and foster a social dialog in urban settings. Their Eyewriter Project empowered graffiti artist Tony Quan a.k.a. Tempt One, who is paralyzed due to ALS, to create unique projection graffiti art through eye tracking technology. The pieces are then visualized with lasers in gallery and urban settings.

Tempt One Projection Image

Hit the Streets for Inspiration

Street art and technology continue to evolve and intertwine, extending into different areas of design and creating new creative outlets and audiences. The next time you pass a piece of graffiti, consider whether it is simply street art or whether it has a digital component yet to be experienced and discovered. Technology is empowering street artists to find new venues for their creativity mixing analog and digital within cityscapes and fostering community experiences. It’s goes beyond designing for not just any screen size, but for any canvas!


Andrew Smyk is a dad, educator and UX designer with a focus on Mobile Design. He is also a coffee aficionado, avid cyclist, all-round pirate and HTML5 Evangelist. Andrew coordinates a postgraduate program in Interactive Media Management at Sheridan College and writes about how kids adapt and use technology on his blog. Follow him on Twitter: @andrewsmyk

Originally published at blogs.adobe.com.


Learn about Adobe XD, our all-in-one design and prototyping tool:

Thinking Design by Adobe

Stories and insights from the design community.

Adobe Creative Cloud

Written by

New Tools for New Creatives. Get all the latest creative apps plus seamless ways to share and collaborate. All right on your desktop.

Thinking Design by Adobe

Stories and insights from the design community.