App design involves designing how an app works and what it looks like: which screens there are, how you navigate between them, and how each screen appears. It consists of two layers. UX design focuses on the user’s journey, while UI design focuses on what the user sees and interacts with along the way.
What’s the difference between UX and UI in an app?
UX design determines how the app works; UI design determines how it looks. Each addresses a different question and delivers a different result.
UX design: How does the app work?
Does the user reach their goal quickly and without hesitation? UX design maps out the paths through the app, using user flows, a navigation structure, and wireframes. The result is the app’s skeleton.
UI design: What does the app look like?
Can the user see at a glance what they can do? UI design fleshes out that skeleton with color, typography, icons, and components. The result is the visual design of each screen.
Why does the design determine whether your app gets used?
In practice, the two overlap. A button that looks good but is in the wrong place is a UX problem that you can’t solve with a prettier UI design. Read more about how Cube approaches UX design and about UI design at Cube. The design determines whether someone completes their task in a few taps or gives up halfway through. An app that people download but don’t understand will only be opened once.
This is especially critical for business apps. A mechanic wearing work gloves, or a fan in a packed stadium, has no patience for a button that’s too small or a menu they have to search through. Good app design therefore starts with the context in which the app is used, not with the prettiest screen. That’s why a good app design is finalized before development begins. Tweaking a screen in Figma is quick and easy. Tweaking the same screen in built code, however, also affects the logic, the connections, and the tests.
How does the app design process work?
The app design process consists of five steps: defining requirements, creating user flows and wireframes, designing the user interface, building a clickable prototype, and testing it. Each step builds on the previous one.
Defining requirements. Together
, we determine what the app needs to be able to do: which features, which integrations, and on which platforms. Android and iOS each have their own guidelines, so that decision needs to be made at the beginning.
User flows and wireframes. We map out the paths through the app and visualize the screen structure and navigation in simple sketches, without color or images yet.
UI design. Once the wireframes are approved, we design the user interface. At Cube, every new project starts with a standard Figma boilerplate that includes colors, typography, spacing, and a grid; then the designers customize the colors, fonts, and logo to match the brand.
Clickable prototype. We turn the design into a clickable prototype: a model of the app where you can tap through the screens as if it already existed.
What does the design phase deliver?
The design phase delivers a validated design and a technical design that allows development to begin. It is the first part of the Design & Build phase and translates the scope defined at the Kickoff into screens and technical specifications. At Cube, the design phase consists of three collaborative sessions: from user flows and initial visual designs, through a design review with the technical design, to a final design for Phase 1. What you’ll end up with:
user stories in the form of who, what, why;
user flows and an interactive design you can click through;
the most important screens of the administration interface;
a technical design with a data model, architecture, and the necessary integrations;
a refined business case.
The final session concludes with a go/no-go decision: you don’t decide to proceed with development until you know exactly what you’re getting. Designers and developers collaborate in this step to ensure that a design is actually buildable. This is how Wevi’s LeaseApp got started: first user stories, then wireframes and a visual design, and only then development. You can read about how design and development align under Design & Build.
How does app design differ for iOS and Android?
iOS follows Apple’s Human Interface Guidelines, while Android follows Google’s Material Design. These guidelines differ in navigation, typography, and behavior, and users are accustomed to different patterns on each platform.
iOS: Human Interface Guidelines
To go back, use the button in the top-left corner or swipe from the left edge. The system font is San Francisco. iOS runs only on Apple devices, with a limited number of screen sizes.
Android: Material Design
You navigate back using the system gesture or the system button. The system font is Roboto. Android runs on devices from many manufacturers, so the design must work across a wide range of screen sizes.
A Single Codebase
With a single codebase, you don’t have to design two separate apps. You create a single design and adapt the elements that users are accustomed to seeing differently on each platform—such as navigation, date pickers, and notifications. This way, the app feels familiar on every device.
What is a design system?
A design system is a library containing all the building blocks of your app: colors, typography, spacing, and components such as buttons, input fields, lists, and cards—each with their own variants and states. At Cube, the design system is stored in Figma as components and variables, and the developers use the same values in the code. You then assemble a new screen using existing components. This keeps the app consistent and makes future expansion faster, even when a new designer or developer joins the team.
Which states belong in an app design?
An app design isn’t complete until every screen also shows what happens when things don’t go as planned. Designs are usually created using clean sample data, which makes it easy to overlook tricky situations.
At Cube, a design doesn’t go to development until these scenarios have been worked out:
Interaction states: default, focus, active, disabled, error, and loading.
Empty data: What does a new user see when there’s nothing there yet?
Long texts and many items: Does the layout stay intact with a long name or a hundred lines of text?
Error messages: Final texts, no placeholders.
How do you design an accessible app?
An accessible app is usable by everyone, including people with low vision, those who use a screen reader, or those with limited hand mobility. Cube designs in accordance with WCAG 2.1 Level AA. Specifically, this means:
Contrast. Small text has a minimum contrast ratio of 4.5:1; large text and elements such as icons and buttons have a minimum of 3:1.
Touch targets. Everything you can tap on a mobile device is at least 44 by 44 pixels.
Focus. Every interactive element has a visible focus indicator, allowing you to navigate the app even without touching the screen.
Not Just Color. Information is never conveyed solely through color but is also presented as text or an icon.
Furthermore, as of June 28, 2025, the European Accessibility Act applies to a number of digital products and services, such as e-commerce and banking services. If your app falls under this category, accessibility is not a choice but a requirement.
Sources: WCAG 2.1, W3C, 2018, and Directive (EU) 2019/882, European Accessibility Act.
How does a design transition to development?
A design only moves to development once it meets a set checklist: all states are present, final text is in place, variables are linked, exceptions are worked out, and accessibility has been verified. This is followed by a three-step handoff.
Design review, before development. The developer reviews the design for feasibility, exceptions, and existing components. This brings any surprises to light before any code is written.
Development. If anything is unclear, the developer consults directly with the designer instead of filling it in themselves. They pull colors, spacing, and typography directly from Figma.
Design QA, after development. The designer verifies that the built app matches the design: visually, in terms of interaction, across different screen sizes, and for accessibility.
To learn how the development process itself works—from choosing a framework to publishing in the app stores—read our guide on how to have an app developed.
Curious about what your app could look like? Discuss your idea with Jarno in 30 minutes.
Apps we’ve designed.
Thermen Resorts
How Thermen Resorts extends the tranquility of its resorts to every digital experience.
-
Platform
-
Website
- +3
Worth reading next...
What is digital design?
What digital design is and how designing digital products creates a usable, coherent experience for the user.
What is interaction design? 5 dimensions.
What interaction design is, the principles behind it and how the five dimensions shape the interaction between people and a product.
Questions about app design? No problem.
An app designer creates the app’s functionality and visual appearance: user flows, wireframes, the visual design, and a clickable prototype. After development, they verify that the app matches the design.
At Cube, we design apps in Figma. That’s where the wireframes, screen designs, prototype, and design system are stored, and developers pull the exact values directly from there.
For the most part, yes. You create a single design and adapt it for each platform based on what users are accustomed to, such as navigation and the “back” button. This way, the app feels familiar on both platforms.
A wireframe is a simple sketch of the screen structure, without color or images. A prototype is a clickable model of the finalized design.
Yes. Tweaking a design in Figma costs much less than modifying a built app. With a tested prototype, you know what you’re getting before development begins.