Loading ...

Responses by Moth Studio; Studio Parallel, design firm; and Michael Pumo, developer

Background: “After moving into a larger studio this year and investing in a nicer environment for our team—plants, blinds and better chairs for our broken animating bodies—we thought we might as well spruce up our website, too,” says Moth Studio. “We knocked on the door of our neighbors, Studio Parallel, a branding and design agency who took our existing visual identity and elevated it to something that better reflects who we are and what we do.

“The site targets a mixed audience from clients to fellow animation studios to freelance artists that could potentially work with us. It needed to feel professional but also keep the friendly feel that our studio maintains. We also saw this new site as an opportunity to rethink the work we feature. We took some older projects out that didn’t feel so relevant anymore and gave space to some recent projects that we’d previously kept hidden and were excited to launch.”

Design core: “We wanted Moth’s projects to be at the forefront of its site,” says Studio Parallel. “We kept the site clean without clutter so its work can stand out. With this simplicity in style, we injected some subtle fun and friendly elements into the design to reflect Moth’s values, creating bespoke cursors that point the user to navigate, click and rollover certain elements.”

Favorite details: “One design feature we really wanted to push is the eye-catching animation Moth produces,” says Studio Parallel. “Rollovers on its projects feature a loop of the content. There are also subtle movements in loading, transitions and fades across the site.”

Navigation design: “We wanted users to be able to navigate simply and smoothly throughout the site,” says Studio Parallel. “So we condensed the number of main sections to five and put primary focus on its projects, which feature right from users landing on the homepage.”

Technology: “The website is built entirely in JavaScript using Nuxt.js, a framework built on top of Vue.js that enables us to write universal JavaScript applications—or code that is executed on both the server and the client side,” says Pumo. “The site’s hosted using Now by Zeit, which brings a serverless architecture for Node.js applications and makes deployment a simple yet reliable process.

“We wrote the code using Vue.js single-file components. This way, we could create components that have their JavaScript, CSS and HTML together as a neatly couple file of related concerns. We used Babel for transpilation, and to ensure our CSS never bleeds into other components, we utilized BEM and Vue’s ‘scoped’ styles. For state management, we’re using Vuex; routing is handled with Nuxt’s folder- and file-based implementation of Vue router.

“Underneath all this technology is a headless CMS called Prismic—a third-party, JSON-based API—that enables us to update images, video and any other content with ease. Unlike WordPress, Prismic’s separation of data and code will make it easier in the future to migrate away or build an entirely new front end without having to change a single thing in the CMS itself.”

Anything else? “We’re using the new Graph-based API from Facebook to fetch Instagram posts,” says Pumo. “An in order to support a wide range of browsers, our JavaScript is polyfilled using the Financial Times’s polyfill service. It feature detects for us automatically and only delivers code that’s actually required. This technique means that our bundles are not cluttered with unnecessary polyfills that modern browsers won’t ever need.”

moth.studio

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In