Selenite: Lost Contact - The Website

Introduction

The website for Selenite: Lost Contact plays a key role in our project. It is not just a simple showcase site but a full-fledged platform that enhances and complements the game experience.

The primary objective is to highlight Selenite: Lost Contact, inform players about its universe, and, most importantly, encourage them to download the game. Therefore, we designed an immersive, dynamic, and interactive website that reflects the game’s visual identity and offers comprehensive content.

In this article, we will detail the design choices, the technologies used, the development process, and how the website integrates into the overall strategy of the project.

Creating an Engaging and Immersive Experience

Homepage and Building Anticipation

From the moment visitors arrive, they are greeted by a large countdown timer displaying the game’s release date. This central element creates anticipation and a sense of urgency, encouraging players to follow the project closely.

Progressive Immersion into the Game’s Universe

The site offers an interactive 3D animation created using Three.js, displaying the Moon and Alex Carter’s spaceship in the background. This scene reacts to scrolling and user interactions, providing a more engaging experience than a static website.

Presenting the Game

The website highlights the key elements of the game:

1. A captivating storyline
2. Intense gameplay
3. Innovative mechanics

The ultimate goal is clear: to direct visitors toward downloading the game through prominent and platform-adapted download links.

SEO Strategy for Maximum Visibility

To ensure the website’s visibility on search engines, several SEO strategies were implemented:

1. Optimized title and meta description tags to enhance search result display.
2. Open Graph tags configuration for optimized display when shared on social media.
3. Integration of strategic keywords (e.g., Selenite, space combat, alien shield).
4. Backlinking strategy to obtain links from forums and specialized platforms.
5. Monitoring via Google Search Console to analyze performance and adjust strategies accordingly.

Development Process

Planning and Prototyping

The development of the Selenite: Lost Contact website began with a meticulous planning and prototyping phase. Before writing a single line of code, we focused on:

1. Defining user experience (UX) principles to ensure intuitive navigation.
2. Creating wireframes and mockups to establish a clear structure.
3. Iterating on designs with feedback from team members and potential users.

Agile Development Approach

We adopted an agile methodology, breaking development into several sprints. Each sprint focused on implementing key features:

1. Basic Structure & Navigation - Setting up Next.js and Tailwind CSS.
2. 3D Interactivity & Animations - Integrating React Three Fiber for immersive elements.
3. Dynamic Content & Backend - Connecting MongoDB with Prisma.
4. Performance Optimization & SEO - Improving loading times and accessibility.
5. Final Testing & Deployment - Ensuring smooth operation across all devices.

Accessibility and Multi-Device Adaptation

A Responsive Design

The website is designed to be fluid and accessible across all screen sizes, thanks to Tailwind CSS.

1. Elements dynamically adjust to various resolutions.
2. The download link adapts based on the user’s platform (PC, Mac, or mobile).

Ensuring Accessibility

Accessibility was a priority, with features such as:

1. Optimized contrast for better readability.
2. Proper text sizing to reduce visual strain.
3. Keyboard navigation support for users with disabilities.

Technologies Used

We utilized a modern and high-performance tech stack:

Next.js

1. Manages dynamic pages with Server-Side Rendering (SSR) and Static Site Generation (SSG).
2. Optimized performance and SEO due to efficient page rendering.

Tailwind CSS

1. Provides a flexible and quick styling system.
2. Utility-first approach for efficient design customization.
3. Simplifies responsive design implementation.

React Three Fiber / Three.js

1. Enables immersive 3D animations of the Moon and spaceship.
2. Integrates seamlessly within the React ecosystem.

MongoDB and Prisma

1. Flexible and scalable database.
2. Prisma used as ORM for efficient database interactions.
3. Dynamic wiki and game-related content management.

Supporting Websites: A Complete Ecosystem

To provide a seamless experience for players and enhance the visibility of Selenite: Lost Contact, we developed multiple interconnected websites, each serving a specific purpose.

Download Portal

The download portal is designed to simplify access to the game. It automatically detects the user’s platform (Windows, macOS, or mobile) and provides a direct download link tailored to their device. This ensures a frictionless experience, eliminating unnecessary steps and guiding players straight to the action.

The Wiki: A Living Knowledge Base

The Selenite: Lost Contact wiki is a comprehensive knowledge base powered by MongoDB and Prisma. It allows players to explore in-depth lore, mechanics, and strategies related to the game. The database-driven structure ensures that new content can be added dynamically without requiring manual updates to the site’s code.

Studio Website: A Showcase of Our Visual Identity

The studio’s official website serves as a branding hub, showcasing the team’s work, design philosophy, and the visual identity of the game. It features:

1. A dedicated section on Selenite: Lost Contact, with concept art, development insights, and team interviews.
2. A breakdown of the studio’s design choices, including typography, color schemes, and UI inspirations.
3. Other projects and upcoming developments, ensuring long-term engagement with the studio’s community.

Deployment and Maintenance

VPS Hosting

The website is hosted on a VPS (Virtual Private Server), providing:

1. Full control over resources.
2. Scalability based on traffic demands.
3. Better performance compared to shared hosting.

Automated Deployment

Integration of GitHub and Webhooks allows for automated deployment:

1. Each push to GitHub triggers a pull and redeploy on the server.
2. Ensures fast and secure updates without manual intervention.

Code Quality Monitoring with SonarQube

1. Detects bugs, security vulnerabilities, and bad practices.
2. Ensures clean, stable, and optimized code.

> We continue to monitor and maintain the website to ensure optimal performance and user experience.

Conclusion

The Selenite: Lost Contact website is more than just a showcase; it is an immersive extension of the game, designed to captivate players and streamline access to the game download. With a carefully crafted design, interactive experience, and a high-performance tech stack, we have built a crucial tool for the project’s success.

This journey doesn’t end here: we will continue to enhance the site based on player feedback and game evolution.

Check the links below to explore the website, download the game, and learn more about the Selenite universe!