updated front-end-spec with more details and examples

2025-08-24 08:54:52 -04:00
parent 359616ce76
commit 97dc6d27bf
15 changed files with 92 additions and 8 deletions
@@ -129,7 +129,21 @@ Since this is a solo passion project, we'll likely be working directly in the Go
 Players will primarily interact with the ship map through point-and-click. The Resource Panel and Crew Roster will provide persistent information and quick access to key game systems.

 **Design File Reference:**
-For implementation, we'll be creating this directly in Godot's UI system.
+The UI design is guided by a combination of references:
+
+1.  **Overall Layout:** `docs/asset-samples/Main UI Sample.png` establishes the core layout, including the central tactical display flanked by resource and crew panels.
+
+    ![Main UI Sample](asset-samples/Main%20UI%20Sample.png)
+
+2.  **Aesthetic & Feel:** The following images from the *Alien* franchise are the primary reference for the detailed aesthetic, the feel of the hardware, and the CRT display's texture and typography. The goal is to capture this authentic, low-fidelity, tactile, retro-tech feel.
+
+    ![Nostromo Control Panel 1](asset-samples/Nostromo%20Control%20Panel%201.jpg)
+    *Fig 1: Reference for CRT display color, glow, and font characteristics.*
+
+    ![Nostromo Control Panel 2](asset-samples/Nostromo%20Control%20Panel%202.jpg)
+    *Fig 2: Reference for the physical, chunky hardware and overall console design.*
+
+While implementation will be done in Godot, it should adhere to the layout of the Main UI Sample while capturing the aesthetic of the Nostromo references.

 ## 5. Component Library / Design System

@@ -207,7 +221,7 @@ The visual identity of Stasis Warden is heavily inspired by the retro-futurism o
 ### 6.3. Typography

 #### Font Families
- **Primary:** Pixelated font (e.g., "Press Start 2P" or similar)
+- **Primary:** `Eightgon-OGn6p.ttf`. This is the official font for all in-game diegetic UI text. The font file is located at `docs/asset-samples/Eightgon-OGn6p.ttf`.
 - **Secondary:** Sans-serif font for any non-diegetic text (if needed)
 - **Monospace:** For any code-like displays or technical readouts

@@ -389,12 +403,14 @@ With these next steps, we're well-positioned to move from specification to imple

 ## 12. Checklist Results

-No formal UI/UX checklist has been run against this document yet. It's recommended to:
+A formal UI/UX checklist has been created and can be found at [ui-ux-checklist.md](./ui-ux-checklist.md). This checklist should be used to review the implementation against the specification to ensure all critical elements have been addressed.

-1. Create a UI/UX checklist specific to game interfaces and diegetic UI design
-2. Review this specification against that checklist to ensure all critical elements have been addressed
-3. Document the results of that review here
+With this, we've completed our front-end specification for Stasis Warden, covering all the key aspects of the UI/UX design. The document provides a comprehensive guide for implementing the diegetic CRT monitor interface that will immerse players in the experience of being the ship's AI.

-This would be an important step before finalizing the specification and moving to implementation.
+## 13. Change Log

-With this, we've completed our front-end specification for Stasis Warden, covering all the key aspects of the UI/UX design. The document provides a comprehensive guide for implementing the diegetic CRT monitor interface that will immerse players in the experience of being the ship's AI.
+- **2025-08-24:**
+  - Updated `Section 4.2.1` to include new visual references for aesthetic and feel, clarifying the role of the primary layout mockup versus the inspirational images.
+- **2025-08-24:**
+  - Created and linked the formal [UI/UX Checklist](./ui-ux-checklist.md).
+  - Added this Change Log section for future updates.
@@ -0,0 +1,68 @@
+# Stasis Warden - UI/UX Checklist
+
+This checklist is designed to ensure the UI/UX implementation aligns with the goals and specifications outlined in the `front-end-spec.md`. It focuses on the unique aspects of a diegetic, retro-futuristic game interface.
+
+---
+
+## 1. Core UX & Vision
+
+- [ ] **UX Goals:** Does the UI feel immersive, intuitive, and provide clear feedback?
+- [ ] **Design Principles:** Does the implementation adhere to the core principles?
+  - [ ] **Diegetic Design:** Do all UI elements feel like part of the ship's systems?
+  - [ ] **Retro-Futurism:** Does the aesthetic match the *Alien*-inspired CRT look?
+  - [ ] **Tactile Interaction:** Do interactions feel physical and satisfying?
+  - [ ] **Progressive Complexity:** Is the initial experience simple, with depth revealed over time?
+  - [ ] **Narrative Integration:** Does the UI contribute to the story of the AI's rediscovery?
+- [ ] **Target Personas:** Does the experience resonate with strategy, narrative, and indie game players?
+
+## 2. Information Architecture & Navigation
+
+- [ ] **Screen Layout:** Is the main ship view layout consistent with the spec (Map center, Resource panel left, Crew roster right)?
+- [ ] **Clarity:** Is the interface uncluttered and easy to parse at a glance?
+- [ ] **Navigation:** Is the primary point-and-click navigation on the ship map intuitive?
+- [ ] **Panel Accessibility:** Are the Resource and Crew Roster panels always accessible and readable?
+- [ ] **Temporary UI:** Does the Room Card Shelf appear and disappear at the correct times and function correctly?
+
+## 3. User Flows & Gameplay Loop
+
+- [ ] **Primary Loop:** Is the core gameplay loop (Generate Power → Unlock Room → Build → Awaken Crew → Assign) smooth and engaging?
+- [ ] **Flow Implementation:** Are all user flows from the spec fully implemented and functional?
+- [ ] **Error Handling:** Are edge cases handled gracefully with clear, diegetic feedback (e.g., "INSUFFICIENT POWER" message for trying to unlock a room)?
+- [ ] **State Management:** Does the UI correctly reflect the current state of all game objects (e.g., crew assignments, room status)?
+
+## 4. Visual Design & Aesthetics
+
+- [ ] **CRT Effect:** Is the diegetic CRT monitor frame with scan lines and optional glitch effects implemented effectively?
+- [ ] **Visual Consistency:** Does the overall look match the `Main UI Sample.png` reference?
+- [ ] **Color Palette:** Is the specified color palette used consistently for primary, accent, success, warning, and error states?
+- [ ] **Typography:** Is the correct primary font (`Eightgon-OGn6p.ttf`) used for all diegetic text?
+- [ ] **Type Scale:** Is the type scale (H1, Body, etc.) applied correctly for readability?
+- [ ] **Iconography:** Are all icons simple, pixelated, and stylistically consistent with the retro theme?
+- [ ] **Spacing:** Is the 8px grid and spacing scale used consistently for a clean, organized layout?
+
+## 5. Animation & Micro-interactions
+
+- [ ] **Motion Principles:** Do animations feel tactile, authentic to CRT, purposeful, and subtle?
+- [ ] **Key Animations:** Are all key animations from the spec implemented with the correct duration and easing? (e.g., Power Click, Room Unlock, Crew Awakening).
+- [ ] **Feedback:** Do animations provide immediate and clear feedback for player actions?
+- [ ] **Performance:** Do animations run smoothly at the target FPS without causing stutter?
+
+## 6. Accessibility
+
+- [ ] **Color Contrast:** Is text readable against all backgrounds, even with the monochrome CRT effect?
+- [ ] **Focus Indicators:** Are interactive elements clearly highlighted when selected or hovered over?
+- [ ] **Keyboard Navigation:** Can all core gameplay actions be performed using only the keyboard?
+- [ ] **Text Scalability:** Is there an option to increase text size for better readability?
+- [ ] **Touch Targets:** Are buttons and other interactive elements large enough to be easily clicked?
+
+## 7. Responsiveness & Performance
+
+- [ ] **Aspect Ratios:** Does the UI scale correctly and maintain its layout across different desktop resolutions (Small, Medium, Large)?
+- [ ] **Zoom Feature:** Does the zoom toggle between the full CRT view and the default view work as specified?
+- [ ] **Performance Goals:** Does the game meet the performance targets for load time, interaction response, and animation FPS?
+- [ ] **Optimization:** Are performance strategies (e.g., efficient shaders, asset optimization) being followed?
+
+## 8. Final Review
+
+- [ ] **Spec Alignment:** Has this checklist been fully reviewed against the `front-end-spec.md` to ensure nothing was missed?
+- [ ] **Player Feedback:** Has the UI been tested by target players, and has their feedback been considered?