All Elite Wrestling web design mockup

Unless you’ve been living under a rock, you’ll know the hottest wrestling promotion in the world right now is the newly-formed All Elite Wrestling (AEW). Although AEW have been making waves on social media, they’ve yet to launch an official home page.

Whilst we wait for the launch of the official AEW website, we decided to mock up what we thought an official AEW website could look like!

All Elite Wrestling web design mock-up
All Elite Wrestling web design mock-up. Full-sized version (387kb)

Breaking the website design down

The colour palette is quite simply sampled from the All Elite Wrestling logo. We used the background colour (a very dark grey) as the website background colour and then lighter shades for container elements. The gold colour is then sampled from the “E” in the AEW logo and used as the website’s primary accent colour — so elements such as buttons, hyperlinks etc.

The almost-black and gold colour combination gives an air of prestige, valuable for a brand new company.

We selected a font that best matched the “All Elite Wrestling” wordmark from the logo to use for headings. In an ideal world, we’d use the exact same font for consistency. The heading font was then complimented with Roboto for body text.

Join an Elite Club

All Elite Wrestling web design mock-up

Part of All Elite Wrestling’s success has been its ability to connect with fans. It’s natural AEW would therefore want to foster that connection into an “exclusive” club. Enter: the Elite Club.

We modelled this component based on the Sign in or register CTA design pattern from the BBC’s GEL framework. The “Sign in” link is emphasised by being styled as a button as it is the primary focus — sign in if you already have an account, and if you don’t have any account then why not?!

Highlighting social media

All Elite Wrestling web design mock-up

All Elite Wrestling’s primary social media channels are prominently highlighted in the main navigation menu. The navigation menu itself links to the website’s top-level pages including “TV” (for information on a television programme, how to watch, listings etc); “Tickets & Events” for AEW’s Pay Per View events; as well as “Roster”, “News”, “Media”, “Shop”, and any other sections the website may carry.

Main feature

All Elite Wrestling web design mock-up

Top-left occupying the website’s prime real estate is a main feature. This could be the latet news story, a carousel containing a number of featured news stories, a video, or other highlighted item. AEW’s single, main focus can be placed here to focus eyeballs and maximise engagement.

Next Event

All Elite Wrestling web design mock-up

All Elite Wrestling’s next event is prominently displayed. Whilst AEW may be promoting multiple events at once, their very next event will have the most focus. Similar to traditional sports sites such as football, basketball etc. displaying their next fixture on their home page.

The panel includes the core information about the event: when and where, as well as calls to action to convert visitors into customers. A visitor is given the opportunity to buy tickets if they wish to attend the event in person, or order the event on PPV if attending is not possible.

Social Media

All Elite Wrestling web design mock-up

To help foster a relationship with fans, social media engagement is made a large part of AEW’s home page. AEW’s latest social media activity is displayed in a “masonry”-style layout, collating posts from AEW’s main social networks: Twitter, Facebook, Instagram, and YouTube. Social networks can be added or removed from this collection.

It’s here we also first see the introduction of the “card” layout component. A card can contain either a text, an image, either, or both. For cards with images, an icon on the bottom-left shows what type of content the card holds (i.e. Larry the Bird for Twitter).

By representing content as cards throughout the website, it makes it easier to compose pages and present content in interesting ways such as this masonry grid.

News

All Elite Wrestling web design mock-up

The card component is also used to represent news articles. The latest news articles are surfaced on the home page, allowing All Elite Wrestling to publish traditional articles about new signings, event updates, and general company news and updates that may or may not be pushed to AEW’s social media channels, or too long to post to channels with limits (i.e. Twitter and its current 240-character limit for Tweets).


What do you think? How does it compare to what you had in mind for All Elite Wrestling’s website? We’d love to hear in the comments below!

Are you a professional wrestling promoter? Want a website like this for your promotion? Then get in touch and see how we can help!

Comments