Game UI Wireframing in Procreate & Figma Tutorial Part 1 | Daily Task Screen Design
73Welcome to Part 1 of this Game UI Tutorial series! In this video, we’ll start by wireframing a Daily Task Screen using Procreate. I’ll walk you through the process of sketching out the basic layout and UI elements for the screen. After finalising the wireframe, we’ll open up Figma and create a basic white box layout that we’ll build on in the next part of the series.
Throughout the video, I’ll also discuss user experience considerations and design choices that will guide us in future parts as we implement the UI in Unity.
What You’ll Learn in This Video:
How to use Procreate for sketching out a basic game UI wireframe.
The process of building a white box layout in Figma.
User experience (UX) tips for designing effective UI screens.
How to plan your wireframe for future development in Unity.
Timestamps
1:13 Procreate Wireframe Process
11:30 Pencil Wireframe to Figma Whitebox
20:55 Overview of Components and Creating Components
22:00 Creating Component Variants25:00 Auto Layouts
26:15 Figma Prototype Testing & Refinement
Support the channel on Patreon: Join me on Patreon for exclusive content, behind-the-scenes updates, and more: https://www.patreon.com/c/WarrenWinters