Date:
20th Nov 2024
by:
Breon Snowdon
We have had a few people ask us about some of the designs we have on the website and our social media, “How do you create some of your unique design aesthetic?”
As a design agency we usually stick to a client’s brief or brand guidelines when working up artwork but sometimes if the project permits it we will inject our own ‘unique’ design aesthetic into it, this artwork or assets design is created randomly with code.
For a complete picture we need to go back. Back in the early 90’s I attended the National School of the Arts in South Africa, and in one history of art lesson we were discussing the Bauhaus movement - a German art school operational from 1919 to 1933 that combined crafts and the fine arts. The school became famous for its approach to design, which attempted to unify individual artistic vision with the principles of mass production and emphasis on function (Wikipedia) - and one of the artist’s techniques really struck a chord with me. They would cut shapes, letters, coloured pieces of paper out and then drop them from a height onto a blank canvas, this random art really sparked my imagination.
Roll forward to the 2000’s and we were smack bang in a design movement now called Y2K - characterised by crude interfaces, low poly CGI, bold typography, bubblegum pinks, blues and iridescent colours reminiscent of the backs of CDs. In many ways, it approaches cyberpunk, but it is much brighter - which again inspired a lot of the design work we were doing.
At this point in time, I stumbled across a designer called Joshua Davis (the OG) which blew my mind, his artwork was created with code. Loading assets into Macromedia Flash and then using code to randomly position, scale, rotate (and even colour the assets) and then place them on a stage, which is then repeated x amount of times to create a unique piece of artwork. Which instantly transported me back to my history of Art lesson on the Bauhaus movement. I was hooked.
We created our own code in Flash (based on Joshua Davis information) which changed the way we design, loading our own assets into the application and then hitting refresh to create a completely different layout, never being able to create the same layout again. It can be super time consuming but once every so often a section of the design just jumps out and because the assets are all vector (link) we can then save it out and open it in our print software Adobe Illustrator to further edit.
At REAL DESIGN we still use the Flash application we wrote in the 2000’s today but have to run it on an old Windows XP computer which we remote into at the studio. We have written some new code in HTML5 and JavaScript to replicate the Flash Application - it’s close but not as varied. You can run the code below with some of our assets (use the reload button will reset the size, can take a few seconds to work).
We have also recently written some code in 3DS MAX to create random 3D elements in 3D space, along with After Effects code to randomise elements in video.
Once we have all the assets we need, we then vectorize everything so we can just work in Illustrator - trace photos and cell shade colours - which allows us to scale the artwork as big or small as we like and keeping it clean and crisp edges, along with being able to output the graphic as a SVG file for online and print.
Here are a few examples of these types of assets in some clients’ work.
What do you think of this design aesthetic? Would love to hear your thoughts.