Finding Inspiration

I’d like to do a bit of a venture into the relationship between art and design. Something might be designed with all of the best interaction, usability, or functionality on the world, but it will mean little unless paired with aesthetics that users are drawn toward. Anything that can evoke emotions in a user’s perception will be that much more powerful of a design than something that cannot, and aesthetics have the power to evoke emotions where functionality often doesn’t.

Take a look at the piece of art below. I’ll follow it with an analysis on some key areas I think are important and relevant to the types of design and aesthetics that I’m interested, but I encourage you to think and do some analysis of your own first.

Mary Say Lawrence is a pastel on paper artwork included in the collection at the Sheldon Museum of Art on the University of Nebraska-Lincoln campus, though I first viewed and accessed it through the Sheldon’s online collection available here. It was created by American artist Mary Cassatt, who, though born near Philadelphia, lived in France for much of her life and got involved in the Impressionist movement. This artwork, according to the Sheldon’s website, depicts Mary Say Lawrence, the daughter of a New York financier who became a patron of Cassatt’s for the remainder of his life. Cassatt’s pastels of the Lawrence family are credited with kickstarting Cassatt’s portrait career and popularity in the states. Cassatt is considered one of the greatest women of the Impressionist movement of the late 1800’s, and is often compared to Edgar Degas, one of the founders of the Impressionist movement.

A Brief Analysis

There are three important aspects of this art that I’d like to discuss before I move onto how this can inspire UI design.

1. The focus of this artwork is extremely important to touch on. It’s obviously an impressionistic work, which makes it less than ideal for a direct application to modern web design principles, but it has one thing in common with any well-designed webpage: the most important part of the image, the focus, has the most detail and most information for the viewer. In the case of Cassatt’s work, it is Mary’s face. Though it isn’t photo-clear, there’s an extreme amount of detail on the subject’s face in comparison to the rest of the image. You can clearly see blush, detail in the eye, and expression. Some of this detail extends into the subject’s hair, which depicts strands and waves of hair. The face and hair is clearly the focus of the piece just in terms of detail. On the other side of the spectrum, the backdrop is made entirely from loosely scribbled dark colors in the impressionist style, and the clothing quickly deteriorates into something that appears as a child’s work the further from the face it gets. In summary, in-depth detail easily directs the user’s gaze to the important parts of the image/screen.
2. The focus discussion segues into another important aspect of the art: the subject’s directional gaze. The eyes are easily the most detailed part of the depiction, and they are looking to something out of sight to the viewer’s left side. Artistically, this adds to the user’s perception and self-generated story of the subject. Maybe she’s annoyed with something or distracted watching something. Regardless of why Mary is looking away from the point of view of the viewer, there is clearly something offscreen that adds to the story. It makes the user want to see what the subject is looking at. This concept of directing the user’s gaze is extremely popular in media today (especially in advertising). It’s worth noting that in UI design, any images of people can and will direct the user’s gaze to different parts of the page. Heatmap studies show that advertisers and designers can use the location of people’s eyes to certain parts of the page, such as images of products, more information, or even links to purchase products. This obviously isn’t the intention in this image, but it’s one more thing to talk about.
3. One additional thing to talk about in this piece of art is the contrast that the artist uses in distinguishing the face from the background. Sure, there’s a color distinction, which is rather apparent. Beyond colors, however, is the differentiation in texture between the face and the background. Much of the background is comprised of large, broad, unblended strokes that gradually curve and move toward the top-right of the image. However, the face appears to be made up of a multitude of smaller vertical lines that aim to show far more detail than the background could ever hope to achieve. I assume this is in part due to the blending used as part of the pastel art process, but there’s a clear difference in the texture of the art between the two sections of the image. Additionally, though the hair is made up of a similar blended texture to the face, the direction of the lines is horizontal, further distinguishing itself as another texture or part of the image. Though texture isn’t a common component to UI design, the size and orientation of visual components makes up a certain “virtual texture” that I think is important to keep in mind when designing.

So, forgive the impressionistic, borderline nightmare-fuel rendition of people in this sketch (I am a terrible artist by hand), but this is an attempt to capture some of the essence of my analysis in a UI setting. Firstly, this is a sketch of a clothing site homepage that has some advertisements meant to capture the attention of a viewer. The greatest detail should be in the images of the cards in the middle of the page, which should begin the process of capturing the user’s attention. The people in this detail are looking at the words for the sales, which directs the user’s attention, and the cards themselves have variance in layout and size, which further attract attention. This isn’t perfect by any means, but it is one way that a UI can take artistic ideals and translate them to have value in even a business or advertising environment.

I think this experiment of finding inspiration from art is an interesting one and is something that I think designers have intentionally and unintentionally been doing since internet design has become a popular and profitable business. Again, my apologies for the scarring visual imagery in my above sketch, but this has been a neat adventure.