Opportunity to Create Moontrash

Nighthouse recently had the opportunity to create a website for a start-up apparel company called Moontrash. Moontrash has an aggressive approach to their graphic t-shirts and other apparel – think Spencer’s and Hot Topic. It was a unique opportunity for Nighthouse to show the wide range of website design that we are capable of and to really get weird and wild. We absolutely love projects like this because they highlight our very diverse skills. Our designs can be clean, corporate and very on trend. Or they can be as out-there as the client wants to get.

Visual Design Goals

When Nighthouse gets a potential client our very first step is to think about the brand as a whole. What is the overall identity? What are the goals of the brand? What kinds of visual information is most important for the website design or the design in general? And how can we integrate the brand’s goals with an overarching visual identity?

To find a visual brand identity we have to first start at the source of inspiration. Moontrash is very much rooted in the grunge, punk and skateboard culture aesthetic. Some of the major social hooks of these cultures are: irreverence to authority, strong ties to friends and social groups, music as a hub activity, bold indifference to the status quo, and attraction to the weird and different. For non-designers, it may seem strange to consider these very basic tenets of a culture. But to Nighthouse, there’s a necessary anthropological approach that will inform the rest of the design decision-making.

When we think about visual design or website design we need to first start with the non-visual things that eventually get filtered into the visual. Designing an identity for Moontrash was perhaps easier than other kinds of websites because it takes inspiration from an already well-defined visual language. But what if the brand is more abstract? It’s actually never a problem because we can still use the same starting point; we can look at the culture and overarching themes of a product or business to create a visually interesting identity.

Let’s take a random and far more abstract example: pool noodles. Pool noodles are cylinders of foam that allow a person to float on the surface of water. If we were tasked with creating a website design and visual identity for pool noodles we would start by thinking about the context and culture. When are pool noodles used? What kind of environments do we use pool noodles in? How would a person feel when using a pool noodle?

Answering these questions gives us contextual information that can then be formed into something seen. You’d probably be floating with a pool noodle in summer, so bright and light colors that are typical in sunlight and are associated with the season. Water, the sun, and a beach are also good launching points. The design should be breezy and chill to reflect the feeling you might have while floating on a noodle.

The website design of Moontrash and a fictitious pool noodle company are necessarily very different. Moontrash would fail to convey its brand goals if we had made it with flat, shadowed elements, heavy use of negative space, and overall minimalism. And a pool noodle brand would also not achieve its goals if we didn’t think about the culture that surrounds it and create a design that reflects it. The website design of both Moontrash and the pool noodle brand wouldn’t work if we swapped their designs. And current design trends are great for certain types of websites but when all you have is a hammer every problem is a nail.

With this in mind let’s dive into the actual process of creating the art for the Moontrash website.

The Process of Creating the Flat Art for Moontrash

As mentioned earlier, the Moontrash brand takes its cues from the punk, grunge and skateboard cultures. We can easily form a picture in our mind of at least something when we hear any one of those words. You might think of the iconic Misfits’ Crimson Ghost or a huge mohawk when you hear punk, the cover of Nirvana’s album Nevermind or oversized plaid button-ups when you hear grunge, and skateboard deck art and Tony Hawk (the most recognized unrecognizable famous person) when you hear skateboard culture. All three also take pop art and subvert it. A nebulous visual cloud begins to form.

After you figure out the general visuals associated with the brand you’re designing for you can begin to refine. For Moontrash, we thought that stickers were a good connection to all three cultures. The kind of random collection that you’d find in a dirty punk dive bar bathroom. The stickers would also allow us to have a lot of varied art that is, at the same time, one type of thing. A singular collection of a lot of different things.

The stickers are, of course, not actually stickers. They exist only on a computer screen. But they are reminiscent enough of the design of a sticker to be recognizable. And, potentially, Moontrash could sell them as stickers if they decided.

The dive bar bathroom and the ability, through the stickers, to create a lot of different pieces of art while staying unified was the basis of the design. It allowed us to design a website that has the dirty look of grunge, the irreverence of punk, and the chaos of skateboard culture.

Technical Considerations of the Sticker Art

Having a lot of different pieces of art created a problem. Good website design has a unified palette of colors that prevent a user from being overwhelmed with visual information. We initially created the stickers with either true to life colors or colors that looked good with the individual piece. It didn’t work in practice. The chaos was overwhelming and distracted from the more important elements of the site – the headings, the models and designs, and the links to actually purchasing a product.

We eventually settled on a palette of 9 colors. We were aware that this is a very large palette for a website design. Usually you’d want to stick to 5 or less. But we felt that for Moontrash it worked. 5 colors or less would not be enough to convey the brand identity and 9 felt like a sweet spot for what we wanted to achieve. The 9 we chose were picked because of their connection to the subcultures we wanted to emulate. Then, we took those colors and modified each sticker to use them exclusively.

The sticker art was either drawn by hand and then scanned and traced in Adobe Illustrator, or it was created in Illustrator from a reference. And it was good that we did it this way. We were able to easily change to the 9 color palette when we realized that the original colors were too overwhelming.

The Process of Creating the 3d Elements for Moontrash

The stickers were a great starting point but we wanted a bit more visual pop. Something to “wow” a user and help the website stand out from others in the brand category. For this, we landed on the idea of having 3d video game cartridges with the apparel design as the cover art. There’s a strong connection from retro video games to skate culture, and especially the 90s when grunge and punk were at the initial height of their popularity.

To form a link between the cartridge and the product we added an extra product image of a CRT TV that displays the design. Good visual and website design forms threads that connect pages. The user might not even consciously be aware of that connection if they’re focusing on something else, but subconsciously they will understand the direction.

Technical Considerations of the 3d Elements

The 3d models initially posed a problem. The file size as a gif was way too big for web use.

We originally had a looping animated gif of a cartridge entering into a console that would be displayed on every page. At 800x1200px the looping gif was over 18MB. At 400×600 it was 8MB. The cartridges themselves were around 5.5MB at 640×768px. This obviously doesn’t work for mobile, and is way too large for desktop as well.

Fortunately we can convert animated gifs to a more web friendly optimized format – webP. The same cartridge animated gif went from 5MB to 73KB, a huge performance saver. The looping console had to go, however, but mostly because there wasn’t a good place to display it on the page. The data saving of the webP format were large enough that we could’ve included it on the product pages if it had worked with the website design.

This is a free and easy to use webP conversion app for Google Chrome. It allows you to individually and bulk convert all the major image formats into the more lightweight webP format.

How It All Comes Together

The visual identity of a website design is hugely important for the overall experience of a user. Visual information is usually one of the first things a sighted person will use to understand where they are and what they’re supposed to do. The initial reaction to that visual data will also inform them of what kind of experience they are in for. Moontrash wanted to give the user a very specific and somewhat niche vibe without being too overwhelming. We achieved this through the limited (although somewhat expansive in the usual sense) use of color and by using cultural cues.

We see a lot of the same designs on websites today. The web design trends dominate the internet and create a kind of homogeneous experience that doesn’t differentiate one brand from the next. There’s no risk in making something with gradients and minimal elements, but there’s also very little reward. The design of Moontrash is a big risk but in the end it achieved its branding goals.