Advertisement

How They Did It: StarWars.com

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

If you haven't watched Star Wars yet, as soon as you finish this article, go watch it. All of it. (Make sure you come back and let us know if you prefer IV-VI, or I-III.)

If you have seen Star Wars, perhaps you are somewhat in the loop on the most recent news about the film series. J.J. Abrams (producer of Lost and, more recently, the newest Star Trek series) is currently writing and producing the next Star Wars, Episode VII, to be released in 2015. What's more, Lucasfilm, the home studio of Star Wars, was bought by Disney.

Along with the news about the Star Wars saga, StarWars.com received a makeover from Bobby Solomon and the Disney Interactive Team. A lot of beautiful details have gone into this site, but we're going to focus on a few specifics that stand out to us.

The Header

The header of the Star Wars site is an example of a very simple interaction that has much richer meaning than the aesthetic execution. Specifically, the interaction reflects the opening title sequence of all of the Star Wars movies. As you scroll, the logo seems to move away from you, fading out along the way. This simple detail is aesthetically attractive, and provides an immediate cultural trigger for the fans of the movie.

Going..
Going..
Gone.

Here's how they did it.

First, the header image bar and all of its contained elements are actually set to position: fixed. A very simple technique is used to achieve both the parallax effect in the background and the logo sizing. We'll demonstrate with a simplified example.

<<header>
  <div class="nav-inner">
    <div class="nav-wrapper">
      <div class="bg"></div>
      <a class="logo"></a>
    </div>
  </div>
</header>
<main></main>

In this case, we would use the following CSS.

header {
    position: fixed;
	width: 100%;
	height: auto;
	background-color: #000;
}
.nav-inner {
	max-height: 300px;
	height: 300px;
	position: relative;
}
.nav-wrapper {
  max-width: 1400px;
  max-height: 300px;
  margin: 0 auto;
  padding: 1.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  height: inherit;
}
.nav-push {
  margin-top: -65px;
  position: relative;
}
.bg {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 1600px;
	height: 100%;
	z-index: -1;
	background-position: center;
	background-image: url(http://cdnvideo.dolimg.com/cdn_assets/82be7f552af3b9573427bcee1360b3c43d7fd5c8.jpg);
	background-size: cover;
	transform: translate3d(0, 0, 0);
	transform: translateX(-50%);
}
.logo {
	display: block;
  top: 50%;
  width: 100%;
  max-width: 350px;
  height: 100%;
  max-height: 130px;
  margin: -65px auto 0;
  box-sizing: border-box;
  background-image: url(//a.dilcdn.com/sw/navigation/sw_logo_stacked-92b3dc5967ed.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
main {
  position: relative;
  top: 300px;
  height: 600px;
  background-color: #000;
}

The logo is vertically centered using this method.

Now here comes the trick. When the user scrolls, we will change the height of .nav-inner, as well as the opacity of .nav-inner. This will cause the logo to shrink down, and the height of header will be determined by the height of its contained elements.

We can achieve this using a simple scroll-polling method.

Note: jQuery is used in this example.

var latestKnownScrollY = 0, ticking = false, $w = $(window), $navInner = $(".nav-inner");

function onScroll() {
    latestKnownScrollY = $w.scrollTop();
  console.log(latestKnownScrollY);
	requestTick();
}
$w.on('scroll', onScroll);

function requestTick() {
	if(!ticking) {
		requestAnimationFrame(update);
	}
	ticking = true;
}
function update() {
	ticking = false;
	var currentScrollY = latestKnownScrollY;
  $navInner.css({
    height: 300 - currentScrollY,
    opacity: (300 - currentScrollY) / 300
  });
}
requestTick();

This JavaScript, in combination with the CSS above, accomplishes the effect of the header scroll, and does so without having to rely on heavy DOM manipulation, which makes it a bit more performant.

Take a look at the final demo.

Icon Details

The desktop nav is relatively straightforward, so we won't talk about implementation details. But let's take a look at what makes this nav effective: the icons.

A section from the (retina) icon spritesheet

The icons are once again another feature built to directly speak to Star Wars fans. For instance, for the "Films" icon, instead of choosing a camera or tape reel, the designer chose an icon that represents the scrolling text that shows at the beginning of each Star Wars film. For the community icon, instead of showing an outline of two people, they chose to show a Storm Trooper helmet. The meaningfulness of each navigation item is enhanced by these decisions for Star Wars fans, and the experience isn't diluted for newcomers.

Another important icon to point out is the "Search" button. While it may seem like a magnifying glass (a common search icon), it is also an oversimplified version of a Death Star, one of the most important elements throughout the films. 

This brings up a very important point about all of the icons across the site: As a rule, the designer chose to retain familiar cues and basic shapes, such as a magnifying glass or the outline of a person, but adding elements to those basic shapes that have significance to those who understand them. This provides a sense of playfulness and a true sense of thematic integrity throughout the site.

Lightsaber Menu Icon

We're going to dive a bit further into what has become one of the most talked about parts of this site: the lightsaber navigation.

At lower breakpoints, the navigation is accessible through a button fixed to the top left of the browser window. At first, it may look like a regular menu button, but once you click on it, the lines shift into an X-shape, and resemble two lightsabers.

Every bit of this is done using simple CSS techniques and a tiny bit of JavaScript. Here's the markup of the menu:

<div id="nav-drawer-toggle">
  <div class="toggle-icon">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
</div>

The spans with the bar class become the lightsabers. Here is a recreation of the CSS used to accomplish the effects:

#nav-drawer-toggle {
  border-right: 1px solid #333333;
  width: 60px;
  height: 60px;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -30px;
}
.toggle-icon {
  display: block;
  position: relative;
  top: 50%;
  width: 100%;
  margin: -22px auto 0 2px;
  -webkit-transition: margin 600ms;
  -moz-transition: margin 600ms;
  transition: margin 600ms;
}
.bar {
  display: block;
  width: 38px;
  height: 2px;
  margin: 9px;
  border-right: 28px solid #fff;
  border-left: 6px solid #d6d6d6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow;
  -moz-transition-property: -moz-transform, margin, border-right-color, box-shadow;
  transition-property: transform, margin, border-right-color, box-shadow;
  -webkit-transition-duration: 600ms;
  -moz-transition-duration: 600ms;
  transition-duration: 600ms;
}

.bar:nth-of-type(2n) {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

/* Toggled states */
.toggled .toggle-icon {
  margin: -32px 0 0 7px;
}
.toggled .toggle-icon .bar:nth-of-type(3) {
  margin-left: 5px;
  -webkit-transform: rotate(-42deg);
  -moz-transform: rotate(-42deg);
  -ms-transform: rotate(-42deg);
  -o-transform: rotate(-42deg);
  transform: rotate(-42deg);
}
.toggled .toggle-icon .bar:nth-of-type(2) {
  margin-left: 14px;
  -webkit-transform: rotate(-137deg) translateY(-15px);
  -moz-transform: rotate(-137deg) translateY(-15px);
  -ms-transform: rotate(-137deg) translateY(-15px);
  -o-transform: rotate(-137deg) translateY(-15px);
  transform: rotate(-137deg) translateY(-15px);
}
.toggled .toggle-icon .bar:nth-of-type(1) {
  opacity: 0;
}

/* Lightsaber glow */
#nav-drawer-toggle.toggled:hover .bar:nth-of-type(3) {
  border-right-color: #ddf1da;
  box-shadow: 4px 0 6px 1px rgba(83,228,68,0.65);
}

#nav-drawer-toggle.toggled:hover .bar:nth-of-type(2) {
  border-right-color: #e9b8b9;
  box-shadow: 4px 0 6px 1px rgba(205,40,44,0.75);
}

Finally, a bit of JavaScript that toggles the nav state:

(function(){
  $("#nav-drawer-toggle").on("click", function(){
    $(this).toggleClass("toggled");
  });
}());

Note: some of the above code was taken directly from StarWars.com, while other pieces were recreated to achieve the same effect.

Take a look at the final demo.

While this is a seemingly simple technique, it speaks to the audience in a much more nuanced and rich way than a simple "X" or hamburger would.

The 404 Page

The designers of StarWars.com have thought about many seemingly minor details in their design process. One that I'd like to point out in this article is the 404 page.

404 pages are often forgotten by us as web developers or designers, because we can easily consider them an "edge case". We seem to forget about them because they are not what is supposed to happen, so we don't design heavily for them. However, 404 pages deserve much more attention than we might think. Users reach 404 pages when they are trying to access content that is no longer available, or perhaps that is linked to or typed in improperly. This moment in the user experience should be explored much more intentionally.

When a user doesn't arrive at a page they are trying to reach, it can be very frustrating and cause the user to immediately leave. However, if the design of the 404 page is such that it helps the user and delights them to some extent, their attention may be retained. In the case of StarWars.com, when a user visits a wrong address (such as http://www.starwars.com/nowhere), they are presented with a graphical "404", with an incomplete Death Star standing in place of the zero, and the message "This page is not fully armed and operational. Try something else?"

This page is effective for two reasons. First, it speaks once again to Star Wars fans directly; for much of the film series, the Death Star looks like the one on the 404 page and is in the process of being built. When it is finally complete in the final of the six films, The Emperor says to Luke: 

Now witness the firepower of this fully armed and operational battle station!

This is a pivotal point in the movie series. The designers of StarWars.com knew that any fan coming to the site and reaching the 404 page would likely remember this moment in the film, and instead of focusing on the frustration of not reaching what they were looking for, they might be delighted or distracted by the memory of the film.

While it seems as though it was a missed opportunity to use the infamous quote "these are not the droids you're looking for", the ubiquitousness of Star Wars has led to many 404 pages that already use this theme, including popular sites like GitHub.

github 404
GitHub got there first

Conclusion

That wraps up our investigation of the new StarWars.com. Are there any interesting pieces of the site you've uncovered? Perhaps you're interested in reading a "How They Did It" post about another site? Tell us in the comments!

Advertisement