Nightfall Nexus: A Campaign Manager for World of Darkness
Welcome to **Nightfall Nexus**, a campaign manager designed from the ground up as a new platform for World of Darkness enthusiasts. Inspired by the need for a comprehensive tool tailored specifically for Vampire: The Masquerade players, Nightfall Nexus aims to provide a seamless and immersive experience for both masters and players alike.
Inspiration:
The initial concept for Nightfall Nexus was born out of a request from one of my Vampire: The Masquerade players for a glossary. After researching existing campaign managers, I found that most were oriented towards Dungeons & Dragons or required high monthly subscriptions. This inspired me to create something unique for my players and to explore the capabilities of Mistral AI as my main helper.
Design Process:
The design process began with creating a wireframe and a giant mood board to capture the essence of the World of Darkness. I drew inspiration from platforms like Roll20 and VisionOS, as well as games like VTM Bloodlines and Vampire: The Masquerade, to create a high-end tech feel.
Visual Style:
The visual style focuses on depth and movement, with animated backgrounds and transparencies giving it a 3D feel. The typography and colors were chosen to align with the original VTM media but with a futuristic spin.
Challenges:
One of the main challenges was achieving sufficient contrast on elements using acrylic effects. I addressed this by using more background blur and light lines, ensuring a consistent experience with different backgrounds for each section, fixed with gradients, shadows, and elevation.
Key Features:
Main Dashboard:
The main dashboard is designed to be the central hub where users can access key features and navigate through the app. It includes a header with a character avatar, name, and quick stats, as well as collapsible sections for Overview, Character Sheet, Compendium, Map, and News.
Bottom Menu:
The bottom menu is integrated as a floating menu with an auto-hide function, giving it a unique look with neon colors and glow, without being confusing.
Character Creation:
The character creation screens are designed to handle a large number of skills and attributes, using a combination of dropdown menus and dot-based selection systems to keep the interface clean and intuitive.
Interactive Elements:
The design includes interactive elements such as hover light effects, animated backgrounds, and expandable widget-like sections to enhance the user experience.
UI Design
The user interface features big frosted elements that appear to float, with shadows and lights helping to establish a hierarchy. This design provides a concise and consistent feel across all screens. Interactive elements, hover light effects, and expandable widget-like sections enhance the user experience.
Tools and Techniques:
Design Tools:
I used Figma, Photoshop, Illustrator, and Mistral Le Chat for the design process. These tools helped me achieve my design goals and create a cohesive and visually appealing interface.
Prototyping:
I created prototypes and interactive mockups to refine the design and ensure a seamless user experience.
Collaboration:
Throughout the design process, I collaborated with my players to gather feedback and make necessary adjustments.
Development:
The project was developed using Visual Code, and I learned how to include AI as a helper in my process. I also explored handling the acrylic effect in different coding languages.
Project Management:
I used atomic design and agile methodologies for the project framework.
Reflection:
Learnings:
Throughout this project, I learned the importance of user-centered design and the value of collaboration. I also gained a deeper understanding of the capabilities of Mistral AI and how it can enhance the design process.
Future Plans:
Moving forward, I plan to continue developing Nightfall Nexus and exploring new features and improvements. I am also inspired to take on future projects that push the boundaries of design and technology. The next steps include finishing the iOS App Store approval and uploading the code to GitHub as open source.
