With more than 1.5 billion websites across the internet, it’s more important than ever to have one that not only stands out, but one that speaks to its end user. How will a person react to the site that they are viewing? What about the message the brand is trying to share? A brand and its website go hand-in-hand. The moment the end user visits their site, they need to be able to feel the brand’s entire essence.
Designers, however, can’t influence a person’s perception without first grasping what drives the motivations behind a brand. With the goal of exploring how perception influences the way we interpret a design and interact with it, I found a website that spoke to me and created a mood board for it. And because it’s usually done the other way around, we can call this experiment a “Reverse Mood Board” since the website already exists.
Before jumping into the fun and creative part, I knew I had to look through the website and absorb as many details as I could. In doing so, I was discovering several of the basic principles of Gestalt. In an article on Thoughtbot by Carolann Bonner called “Using Gestalt Principles for Natural Interactions,” she describes the principles as the way our minds interpret visual elements.
The Brand
I discovered bouldering as a form of high-intensity exercise about a month ago and was hooked instantly. The place I was first taken to by a friend of mine is full of vibrant colors, high ceilings, huge windows that allow for natural light and an overall friendly environment. Knowing this about the physical place, I hoped their website would share a similar vibe and to my assumption, it was. So the website I chose for this analysis was the Austin Bouldering Project (ABP).
At 50,000 square feet and 250 rotating configurations, ABP has been named the world’s largest bouldering gym. In addition to being a climbing enthusiast’s paradise, it also houses a yoga studio and more than 5,000 square feet of open fitness space.
Their website, like the location, is bright and extremely appealing. Different shades of green pop out at the user on nearly every click and overall, it feels inviting. Every photo used looks like they featured real-life people, not fake, unrealistic models or extremely buff athletes. They are people who look like I could be friends with or work alongside— and they get bonus points from me for the diversity!
The Gestalt Principles
Examples of the Gestalt Principles that are most found in day-to-day design are similarity, enclosure, continuation, closure, proximity and figure-ground. In looking through ABP’s website, I quickly found several of them.
Enclosure
Enclosures occur when site elements look like they have a boundary surrounding them. This occurrence happens on each portion of the website as each new “scroll” of the mouse leads to a new rectangle, or grouping. Each scroll leads to another photo, which contains new information and links, and indicates to the user that there is an end to a section and the start of another.
Figure-ground
In that same article by Bonner, she says that the figure-ground principle is when a “figure” is the element in focus and the “ground” is the background behind the figure. This can be seen throughout the website where photographs are used, in which either the person is in focus and the climbing wall is out of focus, or vise-versa.
Similarity
In an article on the website Canva by Laura Busche, the “principle of similarity can be triggered using color, size, orientation, texture and even fonts.” The ABP website features different shades of green and uses only two fonts, which makes the user able to differentiate between elements.
Emotions, Color & Typography
Because designs are able to appeal to a user’s emotions, they are also able to offer a greater level of user experience. A way to better understand how to offer better experiences for users, we can look at Plutchik’s Wheel of Emotions. In the article on Interaction Design Foundation titled “Putting Some Emotion into Your Design – Plutchik’s Wheel of Emotions,” the author argues that “the cornerstone of emotional design is the idea that if you can elicit strong emotions in your users – you can use those emotions to either create loyalty or to drive a customer to take action.”
Of the eight basic emotions that Plutchik devised, the two that can be felt on the ABP website are joy and trust. The happy photos of the gym-goers can make the user feel intrigued and make one want to visit. They look like they’re having a genuinely good time, which brings joy. And seeing both their COVID-19 protocols as well as their safe gym precautions, it helps bring a feeling of safety and trust to the end-user. According to the emotions on Plutchik’s wheel, combining both feelings is equivalent to love.
Colors can also invoke emotions. The ABP website is bright and has several different shades of green. Green can mean growth, optimism, nature, relaxation and youthfulness. Bouldering is a way to bring outdoor exercise inside, so the earthy feel of green can also express renewal and life.
The website uses two fonts, both of which give it a modern look. In trying to figure out the exact type, I think I was able to get pretty close with both. The majority of the website looks like it uses Domotika, which is very easy to read and the bold letters make it stand out in contrast to its background. It also uses an interesting sans serif font for the text “Westgate.” After several tries, I was able to find a similar font called Roundabout. While distinctive, that type is a little less legible than Domotika.
Mood Board
With all this in mind, I attempted to re-create the website’s vibe for my mood board by using similar colors, images and typography. I used the colors on the main page to create the perfect color scheme and used WhatTheFont to figure out what fonts were used. I found two extremely similar versions, which I then downloaded on Dafont. I also wanted to incorporate the company’s slogan, “Real people. Real Movement. Real Connection.” to offer a sense of authenticity.
Photo-wise, I used six images that I believe matched the website’s overall persona. When bouldering, a person will use chalk to get a better grip of the climbing holds. I used a vibrant version of it to accentuate how bright the website is while still highlighting a key element of the sport. I also used an image image of climbing holds for reference and one of sandpaper to show its texture.
One of the goals of bouldering is to use it as a stepping stone to try it outdoors. I wanted to use a photo of a man actually taking that step by being out in nature as inspiration. The final image was an orangutan, which was used as a visual metaphor. Often, a common comparison is “as agile as a monkey” so I used this photo of an orangutan (I know, I know, it’s not the same as a monkey) to parallel how they too swing and jump from one place to another, very much like bouldering.
From typography to colors to images, every aspect of design can make users feel something. The goal is to get them to feel how you want them to feel. Every element used in design vital to the overall message and therefore feeling. Utilizing the Gestalt Principles and Plutchik’s Wheel of Emotions, I was able to create a mood board for the Austin Bouldering Project that was very much in line with their aesthetic.
References:
Austin, V. (2016). Austin Bouldering Project: Austin, TX. Visit Austin. https://www.austintexas.org/listings/austin-bouldering-project/8153/.
Bonner, C. (2014, September 15). Using Gestalt Principles for Natural Interactions. thoughtbot. https://thoughtbot.com/blog/gestalt-principles#enclosure.
Busche, L. (2020). Simplicity, symmetry and more: Gestalt theory and the design principles it gave birth toLaura Busche. Canva. https://www.canva.com/learn/gestalt-theory/.
Foundation, I. D. (2021). Putting Some Emotion into Your Design – Plutchik’s Wheel of Emotions. The Interaction Design Foundation. https://www.interaction-design.org/literature/article/putting-some-emotion-into-your-design-plutchik-s-wheel-of-emotions.
Star, M. (2016, October 11). The Meaning of Color in Graphic Design: MorningStar Media Group Blog. MorningStar Media Group. https://morningstarmediagroup.com/the-meaning-of-color-in-graphic-design/#:~:text=Green%E2%80%94growth%2C%20optimism%2C%20nature%2C%20relaxation%2C%20and%20youth&text=In%20design%2C%20green%20can%20have,greens%20represent%20stability%20and%20wealth.