Figma Design
![V Rising Map Figma Design]()
Final Design
![Unite-DB Abilities Tab Final Design]()
Overview
V Rising, developed by Stunlock Studios, is an open-world survival game where players assume the role of a newly resurrected vampire. Gather resources, craft advanced materials, and construct a personal castle while facing enemies to unlock abilities and technologies. Maintain your vampire's blood level by feeding on victims and choose to either form a clan with allies or explore the vast world alone, facing dark horrors and the deadly sunlight, all while building your mighty castle and transforming humans into loyal thralls. Embrace your vampire dream and become the ultimate predator in this immersive experience.
Key Objective
With a passion for video games, I embarked on the mission of creating vrising-map.com, a responsive website exclusively dedicated to the vast world map of Vardoran in V Rising. Recognizing the significance of locating essential crafting materials, powerful abilities, and noteworthy landmarks within a survival game, my collaborator, a fellow game enthusiast, and I joined forces. Our shared goal was to provide players with an invaluable resource that facilitates seamless navigation and exploration of the immersive world of V Rising.
Challenge
Designing a single-page interface that could support diverse filtering options for resource types, powers, bosses, teleportation pads, and caves, while also presenting crafting recipes for weapons, armor, structures, and advanced materials, posed a major hurdle in this project. Furthermore, the challenge of sourcing and incorporating in-game assets to ensure players' familiarity with the visual elements of V Rising added complexity. Extensive manual exploration and documentation of each location in the game were required, along with the task of accurately displaying these locations on a custom leaflet map. Overcoming these challenges was instrumental in creating a comprehensive and user-friendly experience for the website's visitors.
Solution
The initial phase involved collecting all in-game assets and extensively documenting the necessary data, establishing a clear understanding of what elements should be incorporated into the website. Leveraging Figma, we crafted both Lo-Fidelity wireframes and Hi-Fidelity mockups, ensuring a solid foundation for optimizing the user experience and interface.
In terms of technical implementation, I opted for Vue.js and Nuxt.js to enhance SEO performance and achieve swift page loading speeds. Vercel emerged as the ideal Git-based Jamstack deployment platform, streamlining the deployment process seamlessly. To effectively manage and store the website's content in a user-friendly, editable format, we utilized Google Sheets as a versatile "database" solution. By utilizing a plugin, we seamlessly exported the sheet data as JSON to integrate with the site's backend.
This amalgamation of cutting-edge technologies and tools empowered us to create a dynamic website for vrising-map, providing players with an invaluable resource to plan their journeys as newly resurrected vampires.
Visit Site
