codigeeks.com

What UI and UX design have to do with mobile app development

Where design sits in an app project, why decisions made on a prototype are cheaper than in code, and how design affects store review and permissions.

ArticlePublished Updated

People commissioning their first app often ask the same thing: what is UI design, what is UX design, and why are they on the quote before any code? The short answer is that design is where the app is decided. Code builds what design has already settled.

Two jobs, one sequence

UX (user experience) design works out what the app does, for whom, and in which order: the flows, the screens and the decisions a user makes on each. UI (user interface) design then gives those screens their final form: layout, type, colour, controls and the feedback they give. The UI and UX guide lists what each should deliver.

Why design comes before development

A change costs least while it is still a sketch. Moving a button on a wireframe takes minutes; moving it after the screen has been built, connected to the server and tested can take days. Letting a handful of real users try a clickable prototype before development starts can show the confusing parts while they are still cheap to fix. Skipping that step does not remove the work. It moves it later, into code, where it costs more.

Design decides what developers build

Good design hands developers more than pictures: every state of every screen (empty, loading, error, offline), the rules for what happens when, and reusable components. Without these, developers fill the gaps themselves, and the app ends up inconsistent.

Design affects whether the app is approved

Apple’s App Review Guidelines open their design section by saying Apple customers value products that are simple, refined, innovative and easy to use, and they set minimum standards for approval. One of them, guideline 4.2, asks for features, content and UI that lift an app beyond a repackaged website. An app designed around tasks that suit a phone is more likely to pass than one that copies a website’s pages.

Design decides how the app asks for access

Permission requests are design decisions. Google’s core app quality guidelines ask apps to request only the permissions they need, when the feature is used rather than at startup, to explain why, and to keep working if the user declines. Each of those is a screen or a message that someone has to design.

Design decides who can use the app

Accessibility is a design property first. The W3C’s WCAG 2.2 sets testable criteria for contrast, text alternatives, focus and, among its newer criteria, a minimum target size of 24 by 24 CSS pixels (2.5.8). Building these in from the first wireframe is far easier than retrofitting them.

What to ask a design team

The answers tell you more about the quality of the design work than any portfolio.