Dining in New Bedford, Massachusetts includes many excellent options. When it comes to a virtual experiences, one restaurant stands out amongst the rest.
Moby Dick Brewing Co.
On the corner of Union Street and Water Street lives an excellent restaurant, Moby Dick Brewing Co. Asides from their perfect original beer and tasty morsels, the gastropub’s website exemplifies solid visual storytelling.
Since the COVID-19 pandemic, I found myself visiting many restaurant websites, and many included poor experiences. Of all the websites I visited, Moby Dick Brewing Co. consistently over-performed my expectations and provided me with an excellent experience.
What makes the website so excellent?
- Simple Layout
- Easy Navigation
- Simple Online Ordering
- Readable and scanable
- Clean design
Aside from the functionality of the site, the website also does an excellent job telling a unique visual story. In this post, I’d like to explore the visual elements of the site, and how it adds to the Moby Dick Brewing Co. story.
The Website
When visiting www.mobydickbrewing.com, a video header presents 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 constructed site, viewers can find menus, locations, points of beer 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 provides users with a powerful visual story.
We’re Brewing History.
Moby Dick Brewing Co.
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.’s inspiration. Each crafted beer includes references in Moby Dick. “Ish-male,” for example, is named after the iconic opening line in Moby Dick, “Call me Ishmael.”
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 Visual Storytelling Matters
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’d like to analyze Moby Dick’s Website with five crucial Gestalt Principles.
Gestalt Principle: Simplicity/ Similarity
People will always look at the simple nature of things. This principle dictates that elements in similar size, shape, or color create structure and predictivity for users. When we look at Moby Dick Brewing Co’s home page, we can instantly see the website’s simple layout. 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, including simple graphics and simple text. I’ve added a blue box below to highlight the simple design.
As a bonus Gestalt Principle, these buttons also include Figure Ground, a technique to identify shapes within other spaces. For example, what looks like simple beer taps on the links above, actually have different forms, including a whisk and microphone. I think this is a clever design!
Gestalt Principle: 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 a model and added blue boxes below to highlight this principle.
Gestalt Principle: 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 currently available. The placement 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 my eyes’ path when viewing this page.
Gestalt Principle: Connectedness
Simply put, users will connect groups of elements based on their proximity. On Moby Dick’s home page, 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 consist of three separate elements (In blue.) Since the pieces are grouped, it creates a connective illusion.
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 user’s emotions. Some of those strategies might produce a love emotion from users.
Designers explicitly target users’ emotions to engage users and improve their visual storytelling practices. Scientist Robert Plutchik developed an emotion wheel, analyzing people’s various feelings. Storytellers can then use this wheel to design elements that elicit those emotions.
Moby Dick’s website features fonts and colors that promote an emotional connection with its users. You may not realize this, but fonts have a plethora of emotional psychologies. Fonts break down into many categories, including serifs, san serif, modern, and script. Moby Dick’s website includes Berkeley Bold, Rockwell, and Helvetica font.
Font Psychology
Berkeley Bold is a serif font. The fonts have small accents 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 products.
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 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 what they will be consuming, and the beers are a no-nonsense product.
Color Theory
Color selection can also impact the psychology of a product. Designers need to be careful when selecting a color palette and think about the mood or emotion they want the colors to convey. For example, 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.
A Moby Dick Mood Board
After analyzing the website, I wondered 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.
Case Study: Mood Board
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 prosperous whaling and Moby Dick-inspired images.
It was also crucial for me to find images that directly implied the type of customer Moby Dick Brewing Co seeks. I included the statute of The Whaleman as he is symbolically representative of 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.
Design your next project with Emotional Storytelling
Suppose you’re struggling to connect with your audience with your project. Try using Gestalt Psychology, Plutchik’s Wheel of Emotions, analyze your color and font psychology and develop a mood board to help you flush out your emotional message to your audience.
