Project Overview

Knights and Knaves is an online platform dedicated to the strategic card-based board game of the same name. The website provides a comprehensive hub for players to explore the game’s mechanics, lore, and components. It features a medieval fantasy theme, aiming to deliver an engaging and user-friendly experience for players to delve deeper into the game’s universe.

Objective and Vision

The Knights and Knaves project was created to centralise and enhance the player’s experience by offering an interactive online resource. The vision was to present detailed information about the game’s elements, including rules, character biographies, and game lore, in an intuitive and engaging format. The site is designed to improve player immersion and provide valuable insights into the game.

Tools and Technologies

Knights and Knaves employs several technologies to achieve its goals:

• React: A JavaScript library for building interactive user interfaces.
• Vite: A modern build tool that offers fast development and optimised production builds.
• Bootstrap: A CSS framework for designing responsive and visually appealing layouts.

Key Features

Home Page

The Home Page introduces users to the game, featuring an overview of the game’s core elements and links to other sections of the site.

Characters

The Characters Page provides detailed profiles of the game’s factions and individual characters, allowing users to explore the game’s diverse roster.

Storyworld

The Storyworld Page offers an overview of the different regions in the game’s lore, providing users with a deeper understanding of the game’s setting.

Premise

The Premise Page features a visual timeline of significant events in the game’s story, helping users grasp the chronological development of the game’s narrative.

Description of Game

This section includes blog-style entries analysing the game’s dynamics, trade-offs, and strategic elements, providing players with deeper insights into gameplay.

Gallery

The Gallery Page showcases images related to the game, including setup views and prototype cards, allowing users to inspect details closely.

Team

The Team Page provides descriptions of each team member’s contributions to the project, with visual percent bars illustrating their involvement.

Cards

The Cards Page features Action, Special, and Identity cards from the game, with the ability to zoom in for detailed inspection.

PDF Links

The website includes links to essential PDF files related to the game, such as the Rulebook and various documentation.

Challenges Faced and Solutions

Knights and Knaves was my first project focused heavily on presenting visuals, text, and PDFs in an engaging way. One of the main challenges was designing a website that was both visually appealing and functional. I needed to ensure that animations, modals, and various visual elements were implemented effectively without overwhelming the user or causing performance issues. Learning to balance aesthetics with functionality required careful planning and experimentation.

To address these challenges, I invested time in mastering CSS animations and modal implementations. I used commonly overlooked CSS rules to create engaging shapes and improve the visual appeal of buttons and basic items. By focusing on using only essential libraries and optimising performance, I managed to create a smooth and visually pleasing user experience.

Takeaways and Insights

Working on Knights and Knaves taught me valuable lessons in web design and user experience. I learned how to use animations and modals effectively to enhance the visual presentation of a website, while ensuring that it remained functional and responsive. This project was a significant step in understanding how to choose appropriate fonts and design elements to create a cohesive and attractive layout.

I also gained insights into how to present content in an engaging manner without overloading the website with unnecessary libraries, which helped maintain smooth performance. Overall, this project improved my skills in creating aesthetically pleasing websites and provided me with a solid foundation for designing visually compelling user interfaces in future projects.