Emotional Connections in Visual Storytelling

Moby Dick Brewing Co.

Moby Dick Brewing Co. is a brewpub located on lower Union Street in New Bedford, Massachusetts. Asides from their excellent original beer, and tasty morsels, the gastropub’s website exemplifies solid visual storytelling. I just love this website, and since the COVID-19 pandemic, I found myself visiting the website frequently, treating ourselves to a take out date night twice a month.

When visiting www.mobydickbrewing.com, you’re first introduced to a video header featuring scenes from the popular Whaling City restaurant. The friendly staff assists a packed restaurant, and the details of beer pouring into pint glasses make your mouth start to water. As you scroll through the simply constructed site, viewers can find menus, locations, details of beers and learn about how New Bedford’s History informs their business choices. 

The website provides an excellent user experience, and the simple design paired with rich images and video gives users a robust visual story. I particularly enjoy the restaurant’s slogan “We’re Brewing History,” a play on being the only brewery in downtown New Bedford and developing products with historical relevances of New Bedford.

Inspired by Literature

You may not know this, but Herman Melville, Author of Moby Dick, spent a great deal of time in New Bedford, Massachusetts, working on the whaling boat “Acushnet.” His whaling adventures inspired him to write Moby Dick, and many chapters prominently feature areas of New Bedford.

It’s easy to see where Moby Dick Brewing Co. got their inspiration from. Each crafted beer includes references in Moby Dick. “Ishm-ale,” for example, named after the iconic opening line in Moby Dick, “Call me Ishmael.” The website features excellent storytelling devices. Each originally crafted beer also has its page, including photos, a brief story, and a wholly engaging video.  The site also does a great job creating artwork that resembles scrimshaw, a form of whalebone engraving once popular in the 1800s.

Why this is Effective

While visual storytelling is not an exact science, some guiding principles ensure visual storytelling is most effective.

First, I’d like to introduce you to Gestalt, a German word for patterns. Gestalt Psychology analyzes how the human brain views visual images. Gestalt also breaks down visual perceptions by the following principles. While there are many different Gestalt principles, I’ve like to analyze Moby DIck’s Website with five crucial Gestalt Principles.

Simplicity/ Similarity

People will always look at the simple nature of things. This principle dictates that elements in similar size, shape, or color creates structure and predictivity for users. When we look at Moby Dick Brewing Co’s home page, we can instantly see the website’s simple structure. Displayed prominently are five quick links: Make a Reservation, Order Online, Brew on Tap, Food Menus, Music, and Events. 

Each button includes the same shape, color, include simple graphics, and simple text. I’ve added a blue box below to highlight the simple design.

Moby Dick Brewing, Co’s website features a simple design.

As a bonus Gestalt Principle, these buttons also include Figure Ground, a technique to indentify shapes within other spaces. For example, what looks like simple beer taps on the links above, actually include other shapes including a whisk and microphone. I think this is a clever design!

Proximity

This principle allows users to assume elements connect when grouped next to each other. For example, on Moby Dick’s Website, navigational buttons connect based on the spacing of the details. I’ve included an example and added blue boxes below to highlight this principle.

You can see these three elements use Gestalt’s proximity to allow users to perceive the elements are connected together, and interact separately.

Continuity

This principle suggests that content can create a path or line for an audience’s eyes to travel. Moby Dick’s website does an excellent job of creating ways for viewers to travel organically. On the ‘What’s On Tap” page, you can view the different craft beers that are currently available. The placements of these images creates many different paths that one’s eyes could take when viewing the page.

I’ve added a blue arrow below to demonstrate the path that my eyes took when viewing this page.

Connectedness

Simply put, users will connect groups of elements based on their proximity. On Moby Dick’s home page, there are illustrations reminiscent of early 1800 engravings. The grouping of these illustrations creates a sense of connectedness across the website. 

In the image below, we can see three illustrations that appear connected. However, the elements actually consist of three separate elements (In blue.) Since the elements grouped together, it creates a connective illustion.

A break down of elements provides evidence that this section is not actually connected, but created with three different units.

Emotional Connection

If you love craft beer and New Bedford, it’s not hard to fall in love with this website. However, the designers of this website employed some psychological strategies to engage their users emotions. Some of those strategies might produce a love emotion from users.

Designers explicitly target users’ emotions to engage users, and to improve their visual storytelling practices. Scientist Robert Plutchik developed an emotion wheel, analyzing the various emotions people have. Storytellers can then use this wheel to design elements that illicit those emotions.

Pultchik’s Wheel of Emotions Source: Radoslaw Nielek

Moby Dick’s website features fonts and colors that promote an emotional connection form its users. You may not realize this, but fonts have a plethora of emotional psychologies. Fonts break down into many different categories, including serifs, san serif, modern, and script. Moby Dick’s website includes Berkeley Bold, Rockwell, and Helvetica fonts throughout the website.

Font Selection Matters

Berkeley Bold is a serif font. This means that the fonts have small ligatures on the ends of letters that make them easier to read. This font creates large headlines for Moby Dick Brewing Co’s website. Serif fonts produce a traditional feeling for users, and often communicate reliability. It makes sense for Moby Dick Brewing Co. to use this font to play with their history inspired proudcts.

Rockwell is a slab serif font. Many experts suggest slab serif fonts demonstrate innovation or produce something new. Moby Dick Brewing Co. chose to use Rockwell as their main font. The usage of Rockwell supports the bold nature of Moby Dick Brewing Co., a restaurant creating their innovative product, and exclusively in Whaling City.

When paired with Helvetica, a sans serif font, the psychological effect becomes elevates. Helvetica is a clean and elegant font that also reminds users of a sense of genuineness or honesty. Using this font on their website, Moby Dick tells people precisely what they will be consuming, and the beers are a no-nonsense type of product. 

Berkeley Bold and Rockwell fonts featured in Moby Dick’s Brewing Co’s About Us page.

Color Theory

Color selection can also impact the psychology of a product. Designers need to be careful when selecting a color palette and should think about the mood or emotion they want the colors to convey. For example, the color red can represent power, anger, or passion. There’s a reason why President Donald Trump wears an iconic red tie.

The color palette of Moby Dick’s website features colors that fully support the storytelling endeavors of the restaurant. The website includes a tertiary color scheme, yellow, red, and blue. Colors. The color yellow represents fun, happiness, and cheerfulness. Red can represent passion, fierceness, and excitement. Blue represents a relaxed and calm deposition. 

This color scheme works tremendously well for Moby Dick Brewing, Co. The restaurant is a fun place to be, brings lots of happiness to people, the brewers are highly passionate about their product, the environment is calm and hip, and the restaurant is steps away from the ocean.

Sample Color Palette found on Moby Dick Brewing Co.’s website.

A Moby Dick Mood Board

After analyzing the website, I started to wonder how designers could masterfully create this visual storytelling website. I decided to craft a mood board to explore what might have gone into their development process. 

Suppose you’ve never created a mood board. In that case, the User Experience (UX) industry usually uses mood boards to help determine the mood and psychological effects designers would like to have on their audience. They include color schemes, font choices, images of inspiration, textures, and more.

I wanted to explore what a mood board for Moby Dick’s website might’ve looked like.

I created this mood board to explore the emotional connection designers would have wanted with their website.

Many people identify New Bedford, Massachusetts as a gritty city. I wanted to include images that represented that image of the city, and sought a photo of someone pouring a beer with tattoos.  When walking around the city, I wanted to see if I could find pictures from the city that reflect the website’s color palette and find rich whaling and Moby Dick inspired images.

It was also important for me to find some images that directly implied the type of customer Moby Dick Brewing Co seeks. I included the statute of The Whaleman as he symbolically representat that gritty, intense, sea kissed person that hits the bar after a long journey on the open ocean. I also included images to promote the nightlife aspect of bars and restaurants. 

Using Emotion for your Next Project

If you’re struggling to connect with your audience with your project. Try using Gestalt Psychology, Plutchik’s Wheel of Emotions, analayze your color and font psychology, and develop a mood board to help you flush out your emotional message to your audience.

1 Comment

Leave a Reply