itch.io Community » General » General Discussion

Examples of Great Game Pages

A topic by NightBlade created May 11, 2018 Views: 3,059 Replies: 10

Viewing posts 1 to 4

I just discovered that itch.io allows you to write pretty much arbitrary HTML in the game description pages. This could be a good thing!

While looking at top games in several categories, I noticed that most people don't really do much, other than change the default colours that you get to pick when editing. But, I did see one Android game (can't recall which, now) that used images for headers and bullet points and stuff, similar to what you see on Steam.

What are some examples of game description pages that you really like? (Doesn't have to be for your own game!)

Like Reply

Tartle Games6 years ago(+1)

A little while back the itch staff put out a whole list of customized game pages that they liked. I can't find the link to that collection, but it had some great examples.

I've put a lot of work into most of mine: https://tartlegames.itch.io/

Like Reply

NightBlade6 years ago(+1)

That looks really great. Do you mind sharing some of your methodology to get it to look like this (or maybe your CSS)?

Like Reply

Tartle Games6 years ago (1 edit) (+1)

.game_grid_widget .game_cell .game_thumb .gif_overlay {
background-color: transparent !important;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0s;
-ms-transition: opacity 0s;
transition: opacity 0s;
animation: wobble 1s;   display: none;
}
@-webkit-keyframes wobble  {
  0%  { -webkit-transform:  rotate(0deg); }
  20%  { -webkit-transform:  rotate(2deg); }
  50%  { -webkit-transform:  rotate(-2deg); }
  100%  { -webkit-transform:  rotate(0deg); }
}
@keyframes wobble  {
  0%  { transform:  rotate(0deg); }
  20%  {transform:  rotate(2deg); }
  50%  { transform:  rotate(-2deg); }
  100%  { transform:  rotate(0deg); }
}
.image_header :hover {
animation: wobble 1s;   }
.game_cell_data :hover {
animation: wobble 1s;   }
.game_grid_widget .game_cell .game_thumb {
   box-shadow: 0 0 0 3px white;
}
.game_grid_widget .game_cell .game_thumb :hover  {
   box-shadow: 1px 0px 5px 6px white;
}
.game_grid_widget .game_cell {
    text-align: center;
}

Like Reply

Tartle Games6 years ago(+1)

the gif images on the page are gif captures using Licecap. The first frame I place in with gimp so that it has some cover art before you hover over the image.

Like Reply

NightBlade6 years ago

Thanks for sharing this! I also use LICEcap for gifs. The GIMP trick is a good one. I didn't notice any of the effects, but I really like the grid layout (I have something identical on my site home page right now).

That gives me an idea -- I can generate the CSS/images for the home page automatically like I do for my static site today ...

Thanks for this, it really helps.

Like Reply

NextZenMechanics6 years ago(+1)

https://alienmelon.itch.io/everything-is-going-to-be-ok

That one is nuts.

Like Reply

NightBlade6 years ago

I saw this when it was featured. I think it took lots and lots and lots of work ... I'm hoping to find something "good" that I can use, that's not quite as much work.

Like Reply

Hyperlink Your Heart6 years ago(+1)

Daniel Linssen's pages are generally very elegant and impressive: https://managore.itch.io/

Highlights for me: Outline, Reap, Path of the Rabbit, Hopslide (for how the screenshots are done), Haemo. But really, most of them, especially the recent ones, have some impressive touch.

Like Reply

NightBlade6 years ago(+1)

You're right, thanks for this. His pages are very artistic... I will have to sit down and deconstruct them to figure out how they work. It looks like a combination of:

A simple (but long) background that matches the style of the game
A font that matches the game font
Lots of images that match the game style

This is definitely something time-consuming to make. But it looks really awesome.

Like Reply

Hyperlink Your Heart6 years ago(+1)

Yes, good assessment. I would say also that he often dispenses with screenshots in favour of gameplay gifs, or even just art gifs, and really stretches things out vertically. I think a lot of the appeal for me is how much less cluttered they feel compared to most pages on itch. They really are works of art in themselves as you say. Actually one I forgot to point out was Sandstorm, and maybe it is the best one - the page itself is telling a story as much as the game is.

Like Reply