UI Concept Sketches and Wireframes Guide
Purpose:
This document outlines the process for creating UI concept sketches and wireframes for early-stage game development.
1. Overview
- UI Concept Sketches: Simple, low-fidelity visuals outlining basic UI layout and structure.
- Wireframes: More detailed, functional blueprints focused on element placement and user flow, without aesthetics like color or images.
2. Tools
- Sketching: Excalidraw, Figma, Adobe XD, Balsamiq, Pen and Paper.
- Collaboration: Excalidraw
- Assets: Use internal style guide and asset libraries.
3. UI Concept Sketch Guidelines
- Focus on Layout: Visualize key UI components (menus, HUD, buttons) without detail.
- Multiple Variations: Explore different layout options.
- Basic Annotations: Add simple notes for navigation or interactions.
4. Wireframe Guidelines
- Grid Structure: Standardize UI layout with consistent spacing and sizing.
- Focus on Flow: Clearly depict user navigation between screens.
- Indicate Interactions: Highlight buttons, inputs, and clickable areas.
- Placeholder Text: Use labels for key elements (e.g., “Main Menu,” “Score”).
5. Key UI Components
- Main Menu: Title, navigation buttons.
- In-Game HUD: Health bars, score, mini-map, action buttons.
- Pause Menu: Resume, save, quit buttons.
- Pop-Ups: Simple dialog boxes with “OK” or “Cancel.”
- Settings/Inventory: Toggles, sliders, grids for items.
6. Best Practices
- Iterate Early: Share for feedback before moving to high-fidelity designs.
- Consistency: Follow established style guides.
- Focus on Functionality: Prioritize usability over aesthetics.
7. File Naming and Version Control
- Naming:
UI_[GameName]_[ScreenName]_v[VersionNumber](e.g.,UI_FantasyQuest_MainMenu_v1.0). - Storage: Use shared drives or project systems like GitHub.
8. Review Process
- Initial Review: Submit to Lead UI/UX Designer or Game Director.
- Team Feedback: Ensure technical feasibility and usability improvements.