Design Tips

10 Web Design Lessons You Can Learn From StarWars.com

3D rendering of a lightsaber over dark background
Written by Guest Author

 

3D rendering of a lightsaber over dark background

By Celia Shatzman

Learning to wield a lightsaber. Building the Death Star. Destroying the Death Star. These are all very technical, difficult things. But a few lessons that we can learn from a galaxy far, far away that aren’t so tough? How to design a website, courtesy of StarWars.com.

With the official fan site picking up four Webbys this year, it’s obvious there’s plenty to emulate regardless of your star system. And while we don’t all have Disney’s pile of Imperial Credits, StarWars.com provides design takeaways for website owners on every budget. Here are the top 10.

1. Clean Navigation

StarWars.com is packed with tons of options. You can read up on the latest news, watch clips, and find games, to name a few. The amazing part isn’t the wealth of choices and information — it’s how easy it is to find it all.

No matter what your site is about, having smooth and simple navigation is crucial. Design your site so that everything is categorized into logical groups, with straightforward navigation that allows visitors to jump from one section to another fluidly. And while there’s a lot on StarWars.com, the number of items in the top nav is limited, which prevents guests from feeling overwhelmed.

2. Bold Graphics

Can you imagine Star Wars without the opening crawl credits? And where would the flicks be without the Millennium Falcon going into hyper speed or Luke Skywalker facing off against Darth Vader? The striking, iconic images from the Star Wars films are a huge part of the series’ success. StarWars.com captures that bold, recognizable aesthetic on every page.

StarWars.com Homepage

The StarWars.com homepage

Your site needs bold graphics to capture visitors’ attention. And although your logo probably doesn’t have global recognition, that doesn’t mean you shouldn’t play it up. Make that front and center on your home page so that clients know they’ve come to the right place.

Using custom imagery that is a fit for your site is also crucial, since you want to use these photos to convey what your website is all about. If you rely on too many stock photos, it could make your site feel generic, and that’s never a good thing.

Need more design how-tos? Check out these 5 tips from a DreamHost designer.

3. A Smart Search

One could spend days scrolling through all the content on StarWars.com — but an efficient search tool means visitors can find exactly what they’re looking for with just a few keystrokes.

There’s no point in having great content if visitors can’t easily find it, and a strong search engine is the simple answer. Don’t think too hard about the design for this one — the standard magnifying glass icon works every time. The top right corner is the most popular location, so stick to that to make it easy to spot.

StarWars.com Call to Action and Search Bar header

4. A Call to Action

In most cases, this is getting people to sign up for your newsletter or updates from your site. On StarWars.com, that button is at the top right corner of the page, and the site makes it a cinch to register for an account.

Make sure the call to action on your site is equally strong and clear to find, with a design that naturally draws the eye toward it. After all, one of the main reasons to have a website is to make a sale or gather contact information from clients, and this is often the best way to do so. The form should be quick and easy to fill out. Finally, make the language of the call-to-action button clear, such as “Buy Now,” “Join,” “Sign Up” or “Download.”

5. Informational Footer

When visitors come to your site on a mission looking for something in particular, it should be quick and easy to find. A footer is the ideal solution — visitors expect to scroll down and find a wealth of information, and by putting it at the bottom of the page, it won’t disrupt your design.

This is where you should include contact information, background on your company, and a lot more — here are 27 footer ideas.

Informational footer on StarWars.com Home Page

But aside from all those helpful links, your footer’s design should be simple, clean, and easy to use, visually playing off the rest of the site. For example, StarWars.com features a subtle image of Darth Vader with a gray font. Simple touches like that tie the site together.

6. Community Forum

What’s the key to any successful film franchise? Their fans, of course. And StarWars.com gives them a place to virtually meet and mingle — they’ve got a “Community” tab, which has tons of information on how people can get involved, plus all things created by fans: organizations, blogs, news sites, podcasts, collecting sites, and fan film awards. StarWars.com also allows comments on blog posts; by allowing visitors to interact with each other, they’ve created another avenue for engagement.

To get your audience engaged — with you and other visitors — create specific places on your website for interaction. This could even be as simple as a monitored message board, just to get the conversation going.

7. Good Fonts

These should play off your logo and general aesthetic. However, don’t go overboard on a font that looks great but is hard to read. StarWars.com sticks to an easy-to-read font in white, which makes it pop from the dark background, and color is only used as an accent so it never feels overwhelming.

StarWars.com News/Blog Page

Make sure that the font you choose looks good across browsers and devices and that you have the rights to use it. If you need help narrowing down your options, check out this list of the 40 best Google web fonts. They’re all open source and completely free for commercial use.

8. A Social Media Toolbar

StarWars.com displays how to find their galaxy on Instagram, Facebook, Twitter, YouTube, Tumblr, and Google+ not once, but twice — with a toolbar at the top left of the home page and again with a “follow us” bar at the very bottom. They know the importance of building a following not just on their site, but across all social media.

StarWars.com Social Navigation Toolbar

There are more social platforms than ever before. Which ones should you use to promote your website?

9. Engaging Videos

From behind-the-scenes clips to a teaser trailer of Star Wars: The Last Jedi, StarWars.com has mastered the art of using videos to engage visitors. Luckily, you don’t need George Lucas to create footage of your very own.

With all the easy-to-use programs out there, it’s easy enough to play director. Videos are a fun way to get your message across, such as explaining what your site or business is all about — and it tells the story in a faster and more engaging way than a ton of text can. Just make sure that you optimize your videos so they don’t slow down your site.

10. A Mobile Site

More and more people are surfing the net on their phones and tablets, so your site has to be equipped for more than desktop perusing. On top of that, Google now penalizes sites that don’t offer a mobile option for users.

StarWars.com is designed to look just as good on a tiny screen as a big one. Make sure that your site translates across devices as well.

You don’t need to use the Force to create a great website. Let our click-to-edit site builder do the heavy lifting for you.

About the author

Guest Author

The Guest Author profile is for all content coming from our amazing external contributors!