Mood-boarding a Website Identity

Picture the sun-drenched allure of Italian summers, the pulsating energy of New York City streets, and the timeless charm of Parisian cafes. Now, visualize yourself in those settings. Are you perusing the culture and art of the city? Relaxing and taking in the unique beauty of your surroundings? What are you eating or drinking there? Finally, what are you wearing?

The mood board above is a reflection of the Lisa Says Gah brand and website identity. I searched for images that felt transportive, nostaligic, and romantic. Images that come into play throughout the design choices of the website and clothing were vintage signs, fruit stands, and diners. The brand also has a way of mixing elegance with the eccentric. Images of mismatched styles like gingham pants and shiny formal shoes, thrift store jewels, and ribbon tears were selected to represent that.

The website uses a palette that consists of mostly pastels with a bold red that stands out among the others, which is their signature color. They add touches to the site like emojis and icons which is fun and very modern in contrast with their classic style.

About Lisa Says Gah in their own words and their signature red

By using design and psychology principles, brands like Lisa Says Gah are able to transcend the confines of the screen of an online shop and take them away. Let’s dive into a few of these uses of psychology like Gestalt Principles, Color Theory, and Fonts.

The Lisa Says Gah homepage

Design Choices through Gestalt Principles

Let’s look at Lisa Says Gah’s branding and website through a common psychological lens used in design for decades: Gestalt theory. Canva explains this theory and practice well:

“The word Gestalt is German, and literally stands for a pattern, figure, form or structure that is unified. Gestalt Psychology, a movement that took off in Berlin back in the 1920s, seeks to make sense of how our minds perceive things in whole forms, rather than their individual elements,” (Simplicity, symmetry and more: Gestalt theory and the design ... - CANVA).

The main priority for designers, especially those specialized in digital and brands, is connecting the user’s experience to the brand’s goals. From ease of use and functionality to communication and visual harmony, there are many aspects that ensure these standards. In Gestalt theory, the principles serve as a guide to achieving overall unity. There are several of those principles, which include: simplicity, figure-ground, proximity, similarity, common fate, symmetry, parallelism, continuity, closure, common region, and element connectedness.

Here we can see a row of products on the Lisa Says Gah Best Sellers page. Numerous Gestalt principles are utilized here.

One principle is closure. In the image above, each image is bound by the same rounded box, which is an example of closure. This highlights the visual of each item clearly, which ensures their priority of displaying the clothing. Other information that is necessary such as preorders, discounts, or low stock are also enclosed in smaller color-blocked boxes over the image. This communicates the important information to shoppers without distracting from or cluttering the unbound white space around the images.

In Gestalt, it is suggested that when people see objects in close proximity with one another, they are part of a group. This is vital in website design as categories or similar items are often placed in groups. These best sellers are all placed equally in rows of four rectangles in a scrollable grid. Their product labels and prices are stacked below each image, within the lines set by each box. These details are applicable to the principle of common region, in which the items are all grouped in one area.

We see proximity in the site navigation as well, shown above. We also see other principles, like similarity and parallelism. The text in the navigation as well as throughout the site is red and items grouped together are spaced evenly in the same line. I also want to point out there are instances where similarity is broken, which is purposeful and subtle. The website uses emojis to emphasize certain categories and different fonts for the same purpose. This creates intrigue, and because the colors are still the same, it’s not too distracting. Elements like emojis and contrasting fonts are also kept at a minimum throughout the site, but still used consistently enough to feel unified.

Continuity is another principle in Gestalt that shows people where they are going. Carolann Bonner writes of continuity, in an article for thoughtbot:

“The eye creates momentum as it is compelled to move through one object and continue to another,” (Bonner, Using gestalt principles for natural interactions 2019).

Continuity is found throughout the Lisa Says Gah website, but my favorite little touch of this principle of this is the trail of yellow flowers that follow the mouse. It’s a minor detail that adds to the whimsy of the shopping experience that reflects the emotions and aesthetic of the brand itself.

Evoking Emotion through Color and Font

Lisa Says Gah uses a bold red across their site and branding from logo to navigation, titles, and symbols like page numbers and arrows. Red is a color associated with energy, passion, and romance. It’s a powerful and emotive color–in Plutchnik’s wheel of emotions, it symbolizes anger, rage, and even annoyance–this is not the emotion I would associate with Lisa Says Gah, however. 

Lisa Says Gah flagship store in Los Angeles, CA

The brand utilizes red against whites and creams, with soft yellows, and even pastel shades of baby blue and spring green depending on the season or collection. Together, these colors achieve harmony mixed with a striking contrast. This choice is reflected in the aesthetic choices of their clothing. Each piece has elements of softness and eccentricism, evoking those shades of blue and green. The brand leans toward an aspirational and escapist aesthetic as well, colors like yellow (which symbolizes joy) and white (associated white purity), encapsulate these ideals. 

Their font choices tie in with these concepts as well. That same bold red is used in the logo, with an elegant display script font chosen for their logo called Ridinger Pro. This font is an updated version of a font called Riedingerschrift created by Franz Riedinger in 1903. 

Fonts have a way of drawing out emotions as well, as explained by Envato:

“Human beings have an innate instinct to anthropomorphise non-human entities, applying human characteristics and emotions to things that are distinctly non-human—such as logos, for example.”

Lisa Says Gah’s logo reflects the nostalgic and romantic feel of the brand’s identity. It’s the centerpiece of the brand. The phrase doesn’t take itself too seriously and is often modified to Gah! in many cases. This reinforces the carefree attitude at play when people browse their website.

As a clothing brand, Lisa Says Gah goes beyond mere apparel; it serves as a way for transporting people into a world where fashion becomes a narrative, and each item of clothing and accessory tells a story. Their brand identity is a unified mix of whimsy, femininity, and romance. Their website is designed to reflect the beauty of life, the places we go, and what we love. 

Reference

Bonner, C. (2019, March 23). Using gestalt principles for natural interactions. thoughtbot. https://thoughtbot.com/blog/gestalt-principles

Cao, J. (2018, June 11). Web design color theory: How to create the right emotions with color in web design. TNW | Tnw. https://thenextweb.com/news/how-to-create-the-right-emotions-with-color-in-web-design

Greenier, S. (2011, May 19). Optimizing emotional engagement in web design through metrics. Smashing Magazine. https://www.smashingmagazine.com/2011/05/optimizing-emotional-engagement-in-web-design-through-metrics/

Interaction Design Foundation - IxDF. (2021, January 25). Putting Some Emotion into Your Design – Plutchik’s Wheel of Emotions. Interaction Design Foundation - IxDF. https://www.interaction-design.org/literature/article/putting-some-emotion-into-your-design-plutchik-s-wheel-of-emotions

Ridinger Pro Font. YouWorkForThem. (2014, November 4). https://www.youworkforthem.com/font/T4188/ridinger-pro

Simplicity, symmetry and more: Gestalt theory and the design ... - CANVA. (n.d.). https://www.canva.com/learn/gestalt-theory/

The psychology of fonts (fonts that evoke emotion). Envato. (2023, November 13). https://elements.envato.com/learn/the-psychology-of-fonts-fonts-that-evoke-emotion