Star Wars Galaxy: Exploring a galaxy far, far away in a fully interactive three-dimensional experience.

Platform Web
Role Design / Code
Year 2015
Agency nclud

All work was designed with Sketch and Illustrator. The fully responsive static site was built using JavaScript, Three.js, WebGL, Howler.js, GreenSock, Gulp, Sass, and integrated the Star Wars API.

Star Wars Galaxy is a fully immersive 3D experience built using the Star Wars API, featuring cinematic visuals, dynamic motion, and iconic sound design. Launched alongside “Force Friday,” the site attracted over 100,000 visitors, earned media coverage from major outlets, and received multiple design awards.

Visit site
Design was inspired by the original Star Wars logo and Hildebrandt concept work, incorporating rich gold colors and serif typefaces to elevate the experience.
Browser controls in the top left Browser controls in the top right

Introduction

I have a bad feeling about this.

nclud was made up of some of the biggest Star Wars geeks around — from posters on the office walls (Darth Vader and stormtroopers, of course) to roaming LEGO R2-D2 droids. When the trailer for Episode VII: The Force Awakens came out, we all huddled around the office television to watch it over and over (and over). We immediately thought: what can we build to share our love of this with the world? With so many epic stories being told in a galaxy far, far away, we decided only something that truly immersed the visitor in the cinematic universe would do.

Using Three.js allowed us to build a fully three-dimensional galactic playground, full of swooping camera motions and dramatic effects when transitioning between views and planets.
Browser controls in the top left Browser controls in the top right

Design & Build

Do. Or do not. There is no try.

Starting with the Star Wars API, a comprehensive reference point for basically every planet, starship, and character from the movies (and extended universe), we started fleshing out the concept: a fully three-dimensional galactic playground, full of swooping camera motions and dramatic effects.

For design, we avoided the cliché of sterile colors and techno fonts, instead turning to rich golds, beautiful serif typefaces, and the original 1977 slanted Star Wars logo and Hildebrandt concept paintings.

At the same time, we also tackled something totally new for us: sound design. John Williams’s score for Star Wars is as iconic as Luke's lightsaber, so it only seemed right to incorporate that into the experience (as well as R2-D2’s lovable blips, beeps, and bloops).

Filters allow visitors to show planets tied to their favorite Star Wars movie. Throughout the experience, John William's legendary score plays and R2-D2 beeps with every interaction. Explore the right planet and a Death Star easter egg might even make an appearance.
Browser controls in the top left Browser controls in the top right

Results

May the force be with you.

Launching the same week as “Force Friday” (a marketing push from Disney and Lucasfilm), Star Wars Galaxy quickly saw over 100,000 visitors in addition to media coverage from Wired, io9, Gizmodo, The Mary Sue, ScreenCrush, and a slew of international newspapers and blogs. The site was an honoree for a 2016 Webby Award in the Advertising & Media category, was awarded CSS Design Awards Website of the Day, and landed on the front page of Product Hunt.

Related Work