Making the Mood

Superlist is a organization app made for collaboration. It takes the best parts of other apps like Notion, Jira, and Apple’s Notes and puts them together into the ultimate note-taking and to-do list app.

One of the most crucial aspects that stood out to me however was their website.

Throughout this page, we see amazing examples of animation on pages, unique and thoughtful layouts, and an overall excellent sense of design that brings the entire site together.

One of the first aspects that viewers see is the variety of colors used throughout the site, with a high vibrancy to get users’ attention and show them what is so great about Superlist.

It also mixes these colors well, using mainly primary colors to address various aspects of its product, allowing for each to feel unique in its way, without each aspect blending into a mush of tech specs.

Superlist also employs a strong, modern sans-serif font for their text throughout the site, combined with a light and playful hand-drawn script that brings some of the fun back into the callouts.

With all these aspects, they create a feeling of trust and understanding of the product, without much knowledge of what it actually is or ever using it. It feels futuristic, modern, and dynamic all at the same time, providing what feels like everything that a team needs to be successful.

They also utilize Gestalt’s Principles as well incorporating symmetry, element connectiveness and similarity to draw users down the page and have them explore more features of the product.

To gain a better understanding of the designer’s decision behind the website design and layout, I wanted to create a mood board that emphasizes the aspects found within this site and show what a potential board would look like for a site like this.

For a successful mood board, you need a few items to be useful for designers and developers as the project is being created. These include some typography, colors, images, textures, and patterns that you believe encapsulate the essence of your design and ideas.

And mood boards don’t just need these, you can add or subtract items to find a board that works best for your project, adding things like slogans or explanations as well for better understanding of your mood.

I created the following board for Superlist:

For my mood board, I aimed to address the feeling that Superlist’s site provides from the moment you load the page. That feeling of modernism combined with the free-flowing aspect of hand-drawn script and doodles.

I also wanted to emphasize that feeling of clean white space that Superlist does so well, which is why I added the pictures of the guy outside and the basketball hoop, which I feel both show the kind of white space I think of when seeing Superlist’s site.

I then brought forward the colors and typography that we see on the site, which I believe contrast each other perfectly to provide that bouncy fun feeling while still staying professional and modern at the same time.

Similarly, with the doodles, I wanted to capture that through some rough patterns and designs that could realistically be part of a project like this one, with the ideas given being simple ways to add small drawings to the site.

Lastly, I added some textures, as well as a slogan for what I felt was a main draw for Superlist as a product, being able to make your simple ideas come alive.

With all of these aspects, I feel like my mood board was able to capture that feeling of anticipation for the release of the product, along with the excitement and fun aspects that make the site an enjoyable and elegant experience for users.

Bernazzani, S. (2018, April 18). Fonts & Feelings: Does Typography Connote Emotions?. HubSpot Blog. https://blog.hubspot.com/marketing/typography-emotions

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

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

Interaction Design Foundation. (2023, November 5). 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

Previous
Previous

Using Visual Numbers

Next
Next

Images That Tell a Story