Designing a Mobile App Screen
From wireframe to high-fidelity UI.
Step 1: Define Screen Goal and Flow
Start with one primary user task per screen — for example, viewing weekly deadlines or completing a checkout step. Sketch the entry point, success state, and one error or empty state before opening high-fidelity tools.
Place frames for related screens side by side on the canvas: Home, Detail, and Settings. Connect them mentally or with simple arrows so navigation order stays clear while you design.
Step 2: Low-Fidelity Wireframe
Use gray boxes and placeholder text to map hierarchy without color distraction. Focus on information order, primary action placement, and thumb reach on mobile.
Keep wireframes in the same frame size as production — iPhone 15 or a 393 px width frame. Validate structure with stakeholders before investing in visual polish.
Step 3: Apply Typography and Color
Introduce type scale: large title, section heading, body, and caption. Limit to one or two font families and consistent weights for a cohesive product feel.
Apply brand primary for main actions, neutral grays for surfaces, and semantic colors for success, warning, and error. Check contrast ratios for accessibility — 4.5:1 minimum for body text.
Step 4: Build Reusable Components
Turn repeated patterns into components: app bar, list row, FAB, and bottom nav. Use variants for states — default, pressed, disabled — instead of duplicating frames.
Auto Layout on list rows lets long titles wrap without manual resizing. Fixed height toolbars with flexible content areas mirror real mobile layout behavior.
Step 5: States and Edge Cases
Design loading skeletons, empty lists, and error messages on the same screen frame or as variants. Developers need these states — missing ones cause last-minute UI debt.
Show keyboard overlap on forms if inputs sit low on screen. Safe area padding at top and bottom prevents content from sitting under notches or home indicators.
Step 6: Prototype and Review
Link frames in Prototype mode with smart animate or instant transitions. Test the tap path on mobile preview or the Figma mirror app.
Run a five-minute walkthrough with a teammate: can they complete the task without explanation? Note friction, fix hierarchy, and document spacing tokens you reused for the design system tutorial next.
FAQ
How many screens should I design at once?
Focus on one core flow of 3–5 screens first — enough to test navigation and consistency. Expand after the happy path works, not before.
When do I move from wireframe to hi-fi?
Move when structure, copy hierarchy, and primary actions are agreed. Changing layout after full visual design costs more time than iterating in grayscale.
Do I need a design system for one app screen?
Not a full system, but reuse spacing, type, and color tokens from the start. It makes the next screens faster and prepares you for formal component documentation.