Models, Prototypes, and CodePen
September 21, 2022
Dave Rupert shared the above video in one of his recent posts, 30 Minute Study Model. The architect, Eric Reinholdt, explains how he uses models to work out design ideas in the video. He uses hot glue because it dries quickly and allows him to focus on the main activity of using the model as a tool to test out ideas and improve upon them. I have two things I want to share in response to watching this video.
Architectural Modeling
I really enjoyed watching this video on one level because I studied architecture in college and earned my bachelor of architecture degree. I made quite a few models in my six years in school (a five-year degree that I stretched out, but that is another story).
I enjoyed the video because it reconnected me with those experiences. I miss the feel of cutting balsa wood or cutting lines into a bigger piece of balsa to make it look like vertical siding. I really enjoyed building wooden models, so much so that I built a model of one of my earlier projects and glued it onto my mortar board when I graduated from college.
What I found really interesting in the video is the architect’s use of modeling within his design process. I can only think of one project where I did something very similar. I was designing an artist’s house. The brief explained that the artist was inspired by Piet Mondrian. So I tried to incorporate Mondrian’s conceptual ideas into the design of my house. I focused on Mondrian’s work which had a lot of dimensionality to it. Objects in the painting “weave” with other objects in the painting and I wanted to try to capture that in my design.
The project was one of the most abstract and conceptual ideas that I had. And because I was working with dimensions and planes, I made several models out of poster board to explore different relationships between the elements. These prototypes helped me to refine my ideas and spark new ones.
I probably did more exploration like this with models than I remember. But most of the models that I remember were models of my final solution. These were much more refined than the models Eric built and describes in this video.
It makes me wonder why I did not build more models in the process as Eric describes. I think I was too dependent on my tools as a student. And my tools were pencils, a t-square, and a roll of tracing paper (I did not even take a CAD class when I was in school). I was not happy with my sketching skills so I tried to get out my ideas in more formal drawings. It makes sense to make 3-D models because the designs were of 3-dimensional space.
Prototyping
The point of Dave’s article was to talk about prototyping. Prototyping is the coding equivalent to making a model. It is fast and sometimes dirty. But it allows you to quickly explore ideas and refine the idea a bit more.
I often do prototyping using my CodePen account. I focus on one aspect of what I am trying to build on a page. CodePen provides me with the hot glue to quickly build something and test it out.
It provides me with an environment where I don’t have to set up a build tool or write the HTML framework to display the page. I can just focus on building on the little bit of the code I need and then add CSS and JavaScript to test out a layout or play around with some functionality.
One of the guests on a ShopTalk Show episode I listened to recently mentioned this idea. It is much easier to try to build something out and play with it in a sandbox environment like CodePen than to try to build it in my WordPress project where I will need to do a lot of work just to get to the point of playing around with an idea.
Many of the things I build in CodePen are rough and not very refined. But it doesn’t have to be. I build just enough to test my idea or get it out and then I copy the code into my project and refine it from there.
Epilogue
Even though I got my degree in architecture, I never practiced it. But I have found a lot of parallels between that field and the one that I fell into 7 years later.
Modeling and prototyping are just one of those parallels. I loved building models during my school days and I love building CodePens or other prototypes in my work as a front-end developer.
Thinking back to those model-making days, I realized that what I enjoyed most about the process is being able to bring a design to life. And that realization helped me to take the step toward embracing being a front-end developer. Early in my career, I designed and built projects. But I came to realize that I could enjoy building other people’s designs. And as the Web grew and became more complex, I was glad to let go of design and just focus on making someone else’s vision come to life.
When we had the jury for the artist house assignment, one of the professors mentioned the Schroder House. The design of that house was based on the same concept (of a Mondrian painting). He could not believe that I had not studied it or known about it (This was back before the Internet). He thought for sure that I had based my solution on the Schroder House. I took that as I high compliment that I came up with a solution similar to another architect when I was just working on a conceptual level.