Online gaming

Studying the graphics, pictures, and atmosphere of World Chess tournaments to keep the style.

World Chess graphics are black and white and high contrast.

A flashy interface like this would quickly tire you out. In addition, two colors will be difficult to convey the significance, interactivity, and state of the elements with. It is necessary to preserve the feel of the World Chess’s style, but in an elegant way.

Throwing in the first variants of online gaming: here, we direct our eyes to the position, colors, board size, shape style, menu, and players. For squares, we select a palette that is contrasting, but at the same time easy on the eyes:

The pieces turn out to be too black. We try to make them three‑dimensional, wooden. We add highlights to make them more visible.

World Chess has its own pieces for the screen, which they use on the website in tournament broadcasts. We try to create design using both them and our own pieces from the Auerbach font, which is used in our book ‘Journey to the Chess Kingdom’. At first, the pawns in the mock‑ups were temporarily different from the Auerbach font, then they were abandoned:

We ask the client for 3D models of the official pieces used in over‑the‑board tournaments and try to put them on the board:

This we don’t like.

Here, we are trying to convey the colors of the fields with a hatching, like in the book (at first, the pawns were temporarily not from the Auerbach font, then later we abandoned them):

We like the way this looks, but there’s not enough contrast at all. Let’s leave that for the future.

Options:

It’s time to show the initial results to the client, and it is necessary to somehow delicately bring up the question of the pieces’ design. We know that World Chess once designed their own pieces specially for the website, so if we quietly put our pieces in the layouts, it may cause rejection. But if we show everything with the World Chess pieces, we may miss out on the opportunity to use our pieces, which are more beautiful (in our opinion).

We decide to show both options. At the presentation, we carefully say that we really wanted to try out our pieces, and that we liked it. We show all the layouts in parallel with both sets of pieces (in our layouts we still use “non‑native” pawns):

A few hours after the presentation, the client sends a nice message:

At the same time, the client notes that the pieces are small. We make them bigger:

We come up with the idea that for official FIDE rating games, another design style will be used. There will be a long search for color and outlines for the pieces to make everything look good.

We worked on the mobile version in parallel:

First, we tried to put the notation in a line, but then we find a place on top.

We make the menu appear when hovering over the left side of the screen. Time is not wasted while making the click:

Here we think over the ending screen of the game, what the final step looks like when you checkmate. This adds a feeling of victory. We study how the game of chess ends in popular applications and websites, what funny mechanics can take over and how we can give the player a sense of joy of victory. We try lettering, illustrations, and animation:

But ultimately, we reject any unnecessary special effects and make the conclusion more informative:

Now, for the lobby. We think that the lobby and the interface of the game itself should “live in the same world”. First, we want to make sure that there is a board with pieces in the center, ready for the game. Then you can use the middle of the board for the interface:

But it turned out that there are too many buttons and controls in the lobby, and they do not fit on the board. We still want the board on this screen though. So, we move it to the right and put the lobby interface on the left. In this layout, after selecting the game parameters and the opponent, the board moves to the center and the game begins.

Here we add a red dot with a number to the opponent’s rating selector. It represents “my” rating:

Lobby has three buttons to select the rating classification of the game. Any combination of buttons may be selected, including none and all at once. To play with any rating without restrictions, you need to create an account and become a paid World Chess subscriber. To explain this, we have introduced captions that motivate players to sign up and subscribe:

For the same purpose, we add motivational “cards” at the end of the game. They explain what benefits a player will get if they register and pay for a subscription.

Now we continue to work on additional details of the game interface. We add an anti‑cheating camera and buttons to resign and offer a draw:

We show identical captured pieces with special twin icons rather than with a number:

Once a pawn reaches the opponent’s side of the board, it becomes a piece. In many computer chess games, the piece selection interface partially overlaps the board, which prevents assessment of position. There is no overlapping in our interface:

One of the tasks that made us scratch our heads was the mobile menu. On the desktop, we have two menus: the main menu of the website, which appears when you hover over the top of the page, and now the game menu to the left of the board. Moreover, the first item on the website menu is the World Chess logo that takes the user to the front page. The game menu to the left of the board also hides behind World Chess logo and in FIDE rated games it hides behind two logos:

How is this supposed to work on a mobile screen, where everything barely fits the screen? We had the logo on the top left of the mobile screen. We thought that it should lead to the front page like on the desktop and in the mobile version we would add flick‑controlled paging between the game menu, the game itself, and a detailed notation:

But that’s too complicated and modal. And then where would we put the main menu of the website? Perhaps, after all, the logo in the corner should open up in the top menu and then be able to be closed with the X icon? Also, on desktop, the buttons to resign and offer a draw are in the notation; how would that translate to mobile?

We also tried to hide the game menu behind a hexagonal dots icon at the bottom of the screen:

We were racking our brains behind the scenes for a couple of weeks while we were working, but in the end we found a solution⁠—the logo in the corner had to open a unified menu of everything:

The scrollable website menu opens on top and in the middle the game menu is the same as on the desktop. At the bottom of this screen are the resign and draw buttons. The X closes it all and returns to the game.

Hiding everything in one menu was clever. But people might not have guessed to click the logo to, say, offer a draw or go into the settings. Usually on websites, when you click on a logo, you get to the front page. So we added a three‑dot menu icon as well. It takes you to the same menu as the World Chess logo, but the menu opens up right to the end.

We contemplate how to adapt the interface for windows of different widths and heights:

Here are drawings of detailed diagrams for developers:

We manage development, write comments, and track the results.