Although understanding the fundamentals of building great interactive interfaces is important, it is (equally?) as important to capture the essence of what makes a design emotionally stimulating to behold. It’s important to design interfaces that inspire.
As of late, the UI Design course I’m taking this semester has focused on the relationship between art and design. We all intuitively understand that art can inspire us, so it makes sense that we as designers should study it to understand how to capture that sense of inspiration among those who use our products.
I recently spent a Saturday afternoon perusing the local Sheldon Museum of Art. Admittedly, my goal was to internalize that elusive combination of wonder and awe sprinkled with conviction; that feeling of inspiration. And I found it.
I recall turning a corner in the “Person of Interest” exhibit and stopping in place to behold… this…
… hardly an obvious “person of interest” piece, at first glance, but I was so captivated by the size and “punch” (for lack of a better word) of that golden streak flanked by a deep red backdrop that I had to learn more.
Origins in Abstract Expressionism
“Yellow Band” was painted by Mark Rothko in 1956. Rothko, born Markus Yakovlevich Rotkovich on September 25, 1903, was a Russian-born American abstract expressionist painter and among the most famous and influential American painters of the 20th century.
As I later learned, Rothko’s primary artistic inspiration around the time he produced Yellow Band was his internal emotional strife. According to Rothko, his primary goal in his mid 1950’s work was to convey “basic human emotions – tragedy, ecstasy, doom…” also noting that “the people who weep before my pictures are having the same religious experience I had when I painted them” (Biography, n.d.).
Not much else is known about the history of Yellow Band before it found a home at the Sheldon Museum of Art. One thing that is known, however, is that the motivation Rothko described is certainly present.
Captivation by Convention
Yellow Band most noticeably follows the paradigm called “Rule of Thirds.” Fundamental to photography but ever present in the world of art, the Rule of Thirds suggests a certain visual satisfaction that us humans derive from images which fit nicely within a 3×3 grid (The rule of thirds, n.d.). This visual satisfaction emerges because such an immediately processable structure permits our eyes to be drawn into the image rather than simply glance over the center of it. It also permits our eyes to make better sense of the background, which is, in the case of Yellow Band, a burnt red which contrasts so sharply with its central golden streak.
In addition to enhancing visual processing by following such an established artistic paradigm, Yellow Band garners attention through its use of contrast. At a basic level, the golden-yellowish-orange streak on which the eyes first settle truly flies off the canvas. But the presence of such a bold color does not immediately create contrast. The streak is accompanied by dull, “bloodied” reds streaks to its north and south, all of which padded by a nearly as dull red border.
Rothko was part of a movement in the 40’s and 50’s called “Color Field Painting,” which “exploited the expressive power of color by deploying it in large fields that might envelope the viewer when seen at close quarters” (Color field painting overview, n.d.). The contrasting yellow and red, when viewed in close quarters at its immense scale, is breathtaking.
Not only does the color contrast of Yellow Band engulf your senses, but so does its use of particularly emotive colors. Red and yellow are both warm colors, which according to color theory evoke feelings of “happiness, optimism and energy” while also being high-energy colors that demand attention due to their association with danger (Gremillion 2020).
The contrast between red and yellow in particular, as colors in the same general area of the color wheel, evokes a sort of “calm in the storm” sensation. That deep, overwhelming, and chaotically energetic red is sliced through by a yellow-orange that is often associated with sunshine, happiness, and vitality.
Applying Artistic Convention to UI Design
These artistic decisions should reasonably explain my favor towards the painting. Still there is something inexplicable about why Yellow Band caught my eye. I, as a layman art observer, would normally cast aside such a piece as “lazy” strokes of paint on canvas as a mere desire to catch an exorbitant price tag with minimal effort. Yet, I couldn’t help but glue my vision to Yellow Band among the company of so many more visually “interesting” piece of art.
Why? Perhaps I was inspired by what the art told me about my own work of designing user interfaces: what is simple can still inspire.
Although I wish I could spit out a simple interface on-the-fly that was sure to inspire you, the reader, in order to prove this hypothesis, I can at least prove it to myself by sketching an interface which captures the essence of why I was inspired by Yellow Band.
My friends and I have been working on a side project in our spare time called ReadMeThis (shameless plug: readmethis.site) which has a value proposition that actually lends itself to the particular inspiration I experienced from Yellow Band. ReadMeThis is about distilling the chaotic and endless supply of articles, newsletters, and other Internet content into a joyful listening experience in your podcast player of choice. You tell ReadMeThis which content you want to listen to, and real humans will narrate it and send it to an RSS feed in your podcast player within 24 hours.
As I think about Yellow Band, I am first inspired by its adherence to Rule of Thirds to solidify the sensation of “calm in the storm” that I described earlier. With a simple three row structure as sketched above, I can portray ReadMeThis as something that “cuts through the noise” of existing Internet content (content which is made out to be nothing more than noise due to its random placement in the sketch) through a simplified and passive listening experience.
In terms of contrast, the whitespace afforded by the central row serves as a source of calm that counteracts the chaotic imagery above and below. Although the Rule of Thirds typically enhances background understanding, the viewer quickly scans the background and recognizes by contrast that it is something they want to avoid, thereby solidifying their attention on the center copy.
Although my simple sketch is not in color, the imagery that characterizes the top and bottom rows is closely aligned with the emotive weight behind the Yellow Band’s upper and bottom red bars. Red is a stimulating, resonant, passionate color. The mess of text, paper, articles, and other content is certainly stimulating and energetic, and it flanks the calmer center “call-to-action” row, just as it does in Yellow Band.
It’s a very basic sketch of a new landing page for ReadMeThis, but the inspirations from Yellow Band are noticeable. In fact, I’m going to replace the current (boring) landing page with this new design, ASAP.
I’ve learned from this process that inspiration is everywhere, even in the simplest of artistic expressions. Sometimes it only takes three basic lines, red, yellow, then red, to amaze your audience.
You don’t have be an animation wizard, 3D visual artist, motion graphic creator, or typography professional to design create user interfaces.
Keep it simple, intentional, and aim to inspire.
Biography. (n.d.). Retrieved March 02, 2021, from http://www.markrothko.org/biography/
Color field painting movement overview. (n.d.). Retrieved March 01, 2021, from https://www.theartstory.org/movement/color-field-painting/
Gremillion, A. S. (2020, June 30). How color impacts emotions and behaviors. Retrieved March 01, 2021, from https://99designs.com/blog/tips/how-color-impacts-emotions-and-behaviors/
Rothko, Mark, Yellow Band, Oil on canvas, 1956, Nebraska Art Association, Thomas C. Woods Memorial, N-130.1961 https://sheldonartmuseum.org/work/rothko-yellow-band
The rule of thirds: What is it? How do you use it in photography? (n.d.). Retrieved March 01, 2021, from https://www.shawacademy.com/blog/the-rule-of-thirds/#:~:text=The%20rule%20of%20thirds%20is%20the%20most%20well%2Dknown%20composition,percent%20of%20the%20time%20though.