{"id":386,"date":"2023-12-23T00:55:49","date_gmt":"2023-12-23T00:55:49","guid":{"rendered":"https:\/\/gilect.com\/blog\/?p=386"},"modified":"2024-10-20T20:18:36","modified_gmt":"2024-10-20T20:18:36","slug":"how-we-made-gilect-play-a-free-online-gaming-website","status":"publish","type":"post","link":"https:\/\/gilect.com\/blog\/2023\/12\/23\/how-we-made-gilect-play-a-free-online-gaming-website\/","title":{"rendered":"How We Made Gilect Play, a Free Online Gaming Website"},"content":{"rendered":"\n

Back in March, we released Gilect Play<\/a>, a website offering plenty of games available to play instantly online. Here\u2019s how we chose a design language, created the user interface, sourced our games, and launched our website.<\/p>\n\n\n\n

Creating a Design<\/h2>\n\n\n\n

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 \u201cshiny metallic\u201d aesthetic.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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\u2019s easy to read. It matches our logo\u2019s font as well.<\/p>\n\n\n\n

Making the Interface<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Sourcing Games<\/h2>\n\n\n\n

Once we had our interface sorted out, it was time to start adding games to our website! Since we don\u2019t (currently) make games ourselves, we choose to publish them from distributors such as Gamepix<\/a>. When searching for games, we want to make sure that:<\/p>\n\n\n\n

    \n
  1. It is appropriate for all ages<\/li>\n\n\n\n
  2. It is of high (or reasonable) quality<\/li>\n\n\n\n
  3. It is actually fun<\/li>\n\n\n\n
  4. It isn\u2019t a low-quality spam game<\/li>\n\n\n\n
  5. It isn\u2019t based on trends (such as Skibidi Toilet or Barbie games)<\/li>\n\n\n\n
  6. It doesn\u2019t encourage gender stereotypes (such as \u201cgirly\u201d games or beauty games)<\/li>\n\n\n\n
  7. It doesn\u2019t infringe on other\u2019s copyright or IP<\/li>\n<\/ol>\n\n\n\n

    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\u2019s worth it when we only publish high-quality premium games!<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The Backend<\/h2>\n\n\n\n

    Each game\u2019s 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.<\/p>\n\n\n\n

    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\u2019s official CDN. This way, Flash games that would no longer work are preserved and can be played once again!<\/p>\n\n\n\n

    The Future of Gilect Play<\/h2>\n\n\n\n

    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!<\/p>\n\n\n\n

    Gilect Play is part of our mission to provide freely accessible services to the world. Our primary service is offering free web hosting<\/a>, 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.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    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\u2019s coming soon!<\/p>\n\n\n\n

    And that\u2019s 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\u2019s own web host! Hope you enjoy playing our games!<\/p>\n","protected":false},"excerpt":{"rendered":"

    Back in March, we released Gilect Play, a website offering plenty of games available to play instantly online. Here\u2019s how we chose a design language, created the user interface, sourced our games, and launched our website.<\/p>\n","protected":false},"author":1,"featured_media":387,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8,32],"tags":[4,60,61],"class_list":["post-386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements","category-websites","tag-gilect","tag-gilect-play","tag-how-to"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/gilect.com\/blog\/wp-content\/uploads\/2023\/12\/how-we-made-gilect-play-06.png","_links":{"self":[{"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/posts\/386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/comments?post=386"}],"version-history":[{"count":7,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/posts\/386\/revisions"}],"predecessor-version":[{"id":464,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/posts\/386\/revisions\/464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/media\/387"}],"wp:attachment":[{"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/media?parent=386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/categories?post=386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gilect.com\/blog\/wp-json\/wp\/v2\/tags?post=386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}