Back in March, we released Gilect Play, a website offering plenty of games available to play instantly online. Here’s how we chose a design language, created the user interface, sourced our games, and launched our website.
Creating a Design
The first step was choosing a design language. We opted to go for navy blue as a background color, with green and orange being the secondary and tertiary colors. A subtle gradient applied to the buttons and navigation bar gives some depth and adds a “shiny metallic” aesthetic.
Next up was choosing a typeface. Some game titles can be very long and have to fit under a tiny thumbnail. For this, as well as captions, headings, and titles, the condensed font Oswald was chosen. There were no such limitations to the body text, so we chose Montserrat. This is a wide font that’s easy to read. It matches our logo’s font as well.
Making the Interface
After determining the design language, it was time to start designing the user interface. First off, we wanted to use as much space as possible to show lots of games. As such, the margins were made as small as possible to fit up to eight game thumbnails in one row.
Thumbnails are placed inside boxes, which help to separate different categories of games. In each row, there are two category boxes each displaying four games. The games are placed in a carousel so they can be scrolled through to reveal more.
When playing a game, the player is in a translucent box separate from all other UI elements, including titles, buttons, and text. This brings focus to the game itself, allowing the player to tune out other distracting elements (such as those ads we put there!)
Also inside the translucent box, there is a 5 by 2 grid of similar games. These can also be scrolled through to reveal more suggestions. Outside of the box are all the other UI elements, including the description, instructions, buttons, and advertisements.
The key takeaway for our UI is that we separate visual elements by putting them in boxes, making it easier to differentiate what is what.
Sourcing Games
Once we had our interface sorted out, it was time to start adding games to our website! Since we don’t (currently) make games ourselves, we choose to publish them from distributors such as Gamepix. When searching for games, we want to make sure that:
- It is appropriate for all ages
- It is of high (or reasonable) quality
- It is actually fun
- It isn’t a low-quality spam game
- It isn’t based on trends (such as Skibidi Toilet or Barbie games)
- It doesn’t encourage gender stereotypes (such as “girly” games or beauty games)
- It doesn’t infringe on other’s copyright or IP
It turns out that this is no easy task! While there are tens of thousands of games available to be distributed, most of them were the same game recycled under a new skin each time. Filtering out games takes a while, but it’s worth it when we only publish high-quality premium games!
The Backend
Each game’s information is stored in a MySQL database, and they are loaded and presented to the user upon request. Information includes the game ID, the game name, the embed code, the description, and everything else. Gilect Play itself was programmed in PHP and SQL.
For our Flash games, we store the SWF files directly on our servers. The games are emulated via Ruffle and are loaded in via Ruffle’s official CDN. This way, Flash games that would no longer work are preserved and can be played once again!
The Future of Gilect Play
As of the end of 2023, Gilect Play has 125 games in its library and 15,000 monthly user sessions. Over 95 new games have been added since the site’s launch in March 2023. We plan on growing this number to 250 games by 2025 and eventually begin developing Gilect Play-exclusive games!
Gilect Play is part of our mission to provide freely accessible services to the world. Our primary service is offering free web hosting, so it may seem like gaming is irrelevant to us. However, we always are looking to expand into other industries such as entertainment, and gaming was the first step into the industry.
Furthermore, we plan on closely integrating Gilect Play into our web host. This will allow users to easily publish games onto their website without the need for coding. There is no timeline for this, but it’s coming soon!
And that’s it! This is how we created Gilect Play, everything from the user interface to the backend. You too can create a similar website for free using Gilect’s own web host! Hope you enjoy playing our games!