Design Review Special Halloween Post: Spirit Halloween

October 31, 2020
Designers
LinkedInTwitterFacebookEmail
This post is part of a post series called Design Series
  1. Design Review: Autozone
  2. Design Review: Low Carb USA
  3. Design Review Special Halloween Post: Spirit Halloween
  4. Design Review: Patreon

Happy Halloween!

Welcome to our special halloween design post. This year, we’re doing the “Spirit Halloween” website, labelled by themselves as the “World’s #1 Halloween Costume Store”.

Being as their focus is on costumes being sold primarily once a year, it’s incredibly important that their website is well-organized and easy to use.

Overall Design

At first glance, their website is clean and simple. Using just black and white, with a tiny bit of orange, they’ve stuck to the basic colors of Halloween. Instead of making their design complicated and artistic, they’ve simplified everything so that the user focuses on the images not the design. For a business like this, it comes across well.

Header Design: Some Unusual Aspects

At first glance, the header looks pretty basic – logo, links, top image, etc. But some items are actually in unusual places. Spirit Halloween Header Design

The primary navigation and logo are where you’d expect. There’s another top bar navigation as well – the account login, order status, jobs, etc. But there are a few more unusual placements:

Sign in. This really should be on the right, instead of “My Account” if they aren’t signed in. I’m not sure why you would add it on the left by the logo; it’s unusual and poor design.

“So Much Fun It’s Scary”. The tagline is also next to the logo, which is weird as well. I’m guessing they didn’t have a good place to put this since the logo overlaps on the navigation. Perhaps some more advanced designers could help with this. Would it be better on the right where the search is? Better in a bar underneath the logo, but above the nav? If you have an idea, leave it in the comments!

Search & Shopping Cart. While the placement makes these very obvious, they are technically filling a space where navigation usually goes. Perhaps they highlighted the search section because so many people use search to find what they’re looking for.

Finally, they finish up the header with a large focus image. The link leads people to the Halloween Costumes page, but I do like the “Shop Costumes” clarification under the main image. The more standard way of doing this is adding the button CTA (Call to Action) to the image itself, but this way is acceptable.

Featured Categories

Our next section has the featured categories, and I think they nailed this.

spirit featured categories

I’m a bit of a sucker for the images slightly extruding from a design. It provides an easy 3D effect that I love. Each image chosen seems to represent the category pretty well in this simple design. If I were to change anything, it would be a little more spacing between the title  and images, tighten up the image and image title, and add a tiny bit more spacing between the rows. They may seem like tiny edits, but it matters! See the updated spacing below:
(Also note the over effect on the Toddler Costume below)

revised category features

Large Images Section

large images section on Spirit Halloween

The next sections are all large images. I love the large images with prominent CTAs and nicely lined up edges, but there are aspects that aren’t great design-wise. For example, they have the title of each section above the images in text – and sometimes a little too close to the images. They also include a title for each image below if there’s more than one.

While this is unusual in a design like this, I’d guess that this is for screen readers. Because their content is so large image heavy here, they had to add in text that everyone could read.

If that is the reason, I applaud it! Making websites more accessible to more people is always a good idea – not just financially, but also to make sure everyone can utilize the internet fully.

However, the next section of images is just that – only large banner images. Each image does have an “alt” tag, which is required for screen readers. This section covers some of the less important items: the lookbook, safety procedures, sweepstakes, their nonprofit, and the blog.

Each images includes a large headline to help you know exactly what you’re looking at.

Large images on the Spirit Halloween Site

Footer

Like most websites, the footer is fairly basic and has a pretty standard setup. The grey on top and bottom set it apart from the rest of the page, and they do have some fun social media links. There are some padding issues (on the sign up button, in the first grey bar, etc.), but overall it’s a simple effective footer. The only item that really looks bad is the “Visit our blog” link.

footer for spirit halloween

Summary of the Website Design of Spirit Halloween

This website has a straight-forward design. They don’t take a lot of risks, and the majority of the interest on the page is actually inside of the images. While it works, I would have loved to see more integrated design in the website design as opposed to just the images on the website.

It does, however, make it easy for users to find and buy products – which is the whole point!

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>