Indie Game Landing Page Template – Super Simple But Super Effective!
Today I want to go over a series of landing pages that I think are really good. If you don’t know what a landing page is, a landing page is essentially a one-page website that is designed specifically to sell your game. I’m going to discuss with you a lot of landing pages that I think look really good and you guys can basically just copy these pages. Don’t copy the actual code in the pages but copy the layout because the ones that I’ll discuss with you are perfect. Even though I don’t have an actual physical template to give you and link to download, I’m going to show you a template that a lot of different companies use.
They use the same kind of methodology and the same kind of assets to actually build out their landing pages. They end up looking, layout-wise, very similar even though graphic-wise very different.
First, I want to show you Hay Day which is a game made by Supercell and this game has made a shit ton of money. The landing page is not super fancy—it’s is not a page that has 10,000 widgets, with a bunch of shit at the top, and some fancy text thing-a-ma-jig and all that. This is super simple page has made millions of dollars. I want you to understand that.
What is the secret behind the success of Hay Day’s landing page?
These are the key points:
- Complex is not better in a landing page, simple is better.
- Everything important is ABOVE THE FOLD.
The top part of a landing page is known as above the fold, everything below that is called below the fold. This is a concept that originates from Direct Mail advertising. The concept is that when you first open your envelope, you’re going to see everything above the fold and you have to catch their attention above the fold. On the Internet, not only do you want to catch their attention above the fold, but you also want them to understand what they’re supposed to do on that page above the fold.
The install free on your mobile device link is right above the fold. When I go to that page, I don’t even have to scroll down to instantly I know what they want me to do. When I scroll down, I see a video, which, I think, is a fantastic place for a video. The only better place for a video on this page would be on the header. In this case they have a really cool image that I think works perfect because it explains what the game is.
This is similar to what I meant in in the press kit when I set header image, a big wide image like the one they have on Hay Day, really shows off your game is perfect.
After the download buttons is the video trailer, and then just below that is a list of features with a brief description of what the game is about. They have 5 features, that’s it.
Right below that are a series of screenshots. That’s it. That’s the whole page. They have some social links and links to other games they created at the bottom, but that is seriously their whole page.
- There is no navigation across the top.
That is a hallmark of a good landing page because when you have navigation at the top, one of the things that people do is they click through. They click through the About, they click through Contact, they look at these other pages. If you have a link to your social media above the fold, that’s even worse! Because when they click through Facebook and they get notifications from their friend, and if it’s a YouTube video, they may end up on YouTube and they start watching videos—when they really should be looking at your page.
When you are sending ads to a page, you want to make sure it’s a landing page that has no navigation. If you pay money per ad and the landing page has a navigation at the top, people are going to click through and they’re not going to do what you want them to do which is to, for example, install your game.
For Hay Day, I would give a solid A- or B+ rating for their landing page.
The next one I’d like to discuss is a game called Threes. You’ve probably seen it before. What I love about this landing page is that it has an animated gif. I mentioned earlier that Hay Day could use some movement or a trailer in the header. What Threes did was even better, so it’s like the best of both worlds to have animated gif where it is on the page.
Right below that gif they have some of the awards that they’ve won, which is really cool. They have a design and game of the year awards. When you scroll down there’s a parallax. They have quotes from different people with the parallax scrolling, and then they have the download buttons right below that. Then they have merchandise right after that.
I love the movement at the top. I do not love that I have to scroll all the way down to download the game. That is a major mistake, and I think they are losing downloads specifically because of that. If I want to download this game, I don’t know what to do or where to go. The parallax effects is cool but the download links are easy to miss as I’m scrolling down.
So I would give Threes a B or B-. I definitely think that the download buttons need to be right above the fold, like I discussed earlier.
It doesn’t have navigation at the top which is great, and it has the press kit at the bottom which I think is really important. Overall, I think it’s a really elegant, really simple looking landing page, so I think it’s good. But above the fold buttons are really important so remember that.
Next, we have a game called Butcher. The developer is actually a fellow recruit in the Underground so I believe his game is on Game Dev Underground as well, so check that out. The reason I want to discuss this is because he showed me the landing page on our Discord chat and I thought it was fantastic. I love the title and tagline, it’s right at the top, he’s got the Buy It Now right above the fold, and then he’s got 4 animated gifs of carnage and gameplay just below.
I can look at the top of this landing page and I know exactly what the game is. I know its theme, how much chaos is involved in it, and I know it’s on Steam and I can buy it in one click. That’s the primary purpose of a landing page. You want them to take action and in this case, it is to buy on Steam. He also has the soundtrack just below which is okay; I don’t think it’s needed but I understand why he did it because he’s selling the soundtrack as well. But I love what he put above the fold.
And then he has a Steam Workshop link which is really cool and important too because of the way he’s using the landing page. If people are searching this game on Google and they find his game, they may become players of his game in which case they want to join a group, which may which makes sense.
I would definitely give Butcher an A- or B+ because of the top part which is perfect. Even if he hired me to do marketing, I could not have made a better version of it.
The fourth one we’re going to go over is Ridiculous Fishing’s landing page. Again, right off the bat, they have the above-the-fold download buttons, which is good. They have a trailer inside a header image—this was what I was talking about with Hay Day. The header image doesn’t show a whole lot which can be improved on but the position of the trailer right nside the header image is pretty cool.
Social proof is powerful. Right below the download buttons, they have a bunch of quotes from people all over the web that have given praise to the game.
The page could have used a few more screenshots.
I would give Ridiculous Fishing a B- or C+ overall because I think the top part is great but I think it could use a little more stuff here and there as well as some screenshots.
For example, let’s say I’m at work or something and I can’t watch the trailer, I won’t know what the game is, so you have to prepare for that stuff. The social proof is great. They have a ton of quotes from a lot of different people so I think that’s awesome.
The next one we’re going talk about is Broforce. I really like this page thematically. They have action right up front on their header image, which is really good. It captures my attention and makes me want to know more about this game. Right below that they have a trailer and 3 screenshots. You will notice that they showed 3 different settings in the screenshots: one is a jungle, one is at dusk, and one is of a building. You want to make sure that they’re not 3 images from the same setting. This is really important because it’s visually cool to see 3 different settings on screenshots.
Right below that they have the About followed by some features for the game. Then they have the Steam and Humble buttons, they have the link to play the free prototype and then they have some awards that they’ve won below that and some quotes from Eurogamer, etc. And then they have a little blurb about the team.
I love their top image; I just wish their download links were placed in the spot where the trailer is located. I think that would make the page close to a perfect landing page if their download links were placed above the fold.
It’s insane how many people get this wrong. I realize it’s a design choice but this makes such a difference in conversion, it is ridiculous. I have tested this with thousands of A B split tests, and you want your download buttons above the fold, ALWAYS.
Finally, we’re going to talk about Monument Valley. This is a fairly popular iOS game. I love the top part, they have movement and a video in the header image and they did it. I love this it shows you what the game is without you actually doing anything.
They have their App Store link slightly below the fold. Below that they have a trailer and their social links. Then they have a description of the game, they got some screenshots, and they have fan creations press kit etc. So number one, I would definitely get rid of the the navigation. I understand why they did it and if it were just the website maybe that’s okay, but it’s a landing page. Next, I would move the App Store link slightly above the fold— even though it looks less design design-wise, it’s necessary. It would increase the conversion so much, it’s crazy.
I give Monument Valley a B+ or B.
So that’s a basic landing page. You’ll notice that everything that I said about a landing page is consistent across all the different landing pages. There’s only really one great format to do it right.
The order doesn’t really matter. The only thing that matters is the download buttons with the call to action are above the fold and there’s no navigation. That’s your landing page template right there. So if you’re thinking about doing a landing page, look at all of the pages I mentioned. I want you to look at them and copy some of their layouts if you’re making a landing page for your game.
I am debating whether to create a generator for these kind of landing pages for Game Dev Underground. If that’s something that you want, please leave me a comment below because I’m really thinking about it. I think it’s so critical especially with paid advertising. It’s also critical in getting people to download your game.
Setting up a landing page like this is super simple. This is the one location where you send everybody because this where they can always get your game, they always know that whatever device they’re on.
Leave me a comment on what you think. If you have any landing pages that you love, please leave them below, I’d love to see them.