Course Project

Course Project

UI Mockup Assignment Evolution

Your assignment for this course is to improve your mockup from the previous assignment, now that you’ve spent time learning about the UMG system in Unreal Engine.

Design Enhancement Goals

Elevate Your Designs Further: Think about how you can improve your original concepts using your new understanding of:

• UMG component capabilities and limitations
• Modular design principles
• Interface communication patterns
• Template-based workflows

Technical Implementation Focus

Break Down UI into Actionable Components: Your improved designs should clearly show how they translate to actual UMG widgets:

Component Mapping

List specific UMG components required for each UI element (Button, Progress Bar, Image, etc.)

Implementation Clarity

If you gave your designs to a colleague, would they understand how to build them?

Modular Thinking

Show which elements can be templates and reused across different screens

Project Deliverables

Updated Visual Mockups:

• Use design tool of your choice (Photopea, Figma, InVision, Penpot)
• Show clear improvements from initial designs
• Demonstrate understanding of UI design principles

Technical Documentation: Include comprehensive list of UMG components for each widget:

• Panel components needed (Canvas Panel, Grid Panel, etc.)
• Interactive elements (Buttons, Sliders, Text Boxes)
• Display components (Images, Progress Bars, Text Blocks)
• Layout considerations and anchor points

Design Evaluation Criteria

Clarity and Communication:

• Are the mockups clear and professional?
• Can another developer understand the implementation approach?
• Do the designs show modular thinking?

UMG Integration Planning:

• Realistic component usage
• Proper understanding of UMG capabilities
• Consideration for template reusability
• Interface communication planning

Design Improvement:

• Clear evolution from original mockup
• Application of design theory principles
• Improved usability and visual hierarchy

Recommended Approach

1. Review Original Mockup: Identify areas for improvement based on course learnings

2. Plan Component Architecture: Before designing, think about:

   • Which elements will be modular templates
   • How widgets will communicate with game systems
   • What enumerations and structs might be needed

3. Create Enhanced Mockups: Focus on:

   • Clear visual hierarchy
   • Consistent modular elements
   • Realistic UMG implementation

4. Document Implementation: For each screen/widget:

   • List required UMG components
   • Note modular elements that can be reused
   • Explain communication patterns needed

Tip

Success Tips: The best projects will show clear progression from the initial concept and demonstrate practical understanding of how UI theory translates to actual Unreal Engine implementation.

Three Game Mode Selection

UI Design Focus: Create mockups for three different game modes such as:

• Stealth Survival
• Platformer
• Capture the Flag
• Action Combat
• Crafting
• Story Mode

Design Considerations for Each Mode:

Information Hierarchy:

• What information is most critical for each game mode?
• How can you keep displays simple while remaining unique?
• What layouts from other games could be improved upon?

Mode-Specific Requirements:

• Stealth: Minimal UI, awareness indicators, stealth meter
• Combat: Health/mana bars, ability cooldowns, target information
• Crafting: Inventory grids, resource counters, recipe displays
• Platformer: Lives, score, power-up indicators, level progress

Resource Utilization

Game UI Database Reference: Continue using GameUIDatabase.com for inspiration and reference. Look for:

• Similar game modes to your chosen three
• Innovative approaches to common UI problems
• Examples of clean, uncluttered designs
• Layouts that prioritize player immersion

Screenshot Integration: Use the F9 key in Unreal Engine to capture screenshots from your current Coursera project. These can serve as:

• Base templates for your designs
• Reference for proportions and scale
• Foundation for drawing over with new UI concepts

Detailed Breakdown Requirements

Component Labeling: For each UI element in your mockup, provide detailed labels such as:

• “Health Progress Bar Template (Health enumeration)”
• “Ability Button (W_Icon template with spell icon)”
• “Resource Counter (Text Block with background border)”
• “Mini-map (Image component with scroll box overlay)”

Template Identification: Clearly identify which elements would be:

• Reusable Templates: Buttons, progress bars, icons that appear multiple times
• Unique Widgets: Specialized displays specific to one screen
• Modular Components: Elements that could be combined in different ways

Communication Planning: Note how UI elements connect to game systems:

• “Health bar updates through Interface_Character_Health_Modify”
• “Ability buttons trigger Interface_Character_Use_Ability”
• “Inventory slots communicate with Actor_Item_Manager”

Final Deliverable Format

Visual Presentation:

• Clean, professional mockups showing all three game modes
• Consistent visual style across different modes
• Clear annotation and labeling system

Technical Documentation:

• Component breakdown for each major widget
• Modular element identification
• Interface communication notes
• Implementation difficulty assessment

Reflection Summary: Brief explanation of:

• How designs evolved from original mockup
• What UMG concepts influenced your decisions
• Which modular approaches you would implement first
• Potential challenges in actual development

This project demonstrates your ability to bridge the gap between UI design theory and practical Unreal Engine implementation, showing mastery of both creative design and technical understanding.