Character Selection/Details Page
Conceptualization and Planning
Begin by conceptualizing the layout, allocating space for character renders and ability displays.
Define a clear visual hierarchy to emphasize character details.
AI-Generated Character Render
Utilize AI-generated images for character renders to achieve a visually impactful representation.
Choose high-resolution AI-generated images for visual fidelity.
Displaying Character Abilities
Allocate a section for displaying character abilities using concise presentation formats.
Ensure a straightforward depiction of abilities without delving into detailed UX considerations.
Color Schemes and Visual Effects
Select a fitting color palette aligned with the game's theme for visual cohesion.
Apply visual enhancements like shadows and highlights to accentuate character features.
Interactive Elements and User Engagement
Implement basic interactive elements for character selection, considering limited UX functionalities.
Ensure basic design responsiveness for smooth transitions within the one-day timeframe.
Refinement and Finalization
Conduct a final review, refining and adjusting design elements for coherence.
Make necessary adjustments and finalize the character selection screen UI within the time constraints.
Within a one-day timeframe, focusing primarily on visual design elements will allow for a visually appealing character selection screen without extensive UX considerations.
Resources used:
Character Render -
https://www.reddit.com/r/DotA2/comments/zargfc/open_ai_midjourney_generated_these_heroes/
Abilities Render -
Layout/Inspiration -
https://dribbble.com/shots/15810788-Game-UI-design/attachments/7624678?mode=media
Tools Used:
Figma, ChatGPT, and Dribbble