UI/UX design guide
Scope of the guide
Short answer: Mobile application design is the UI and UX work that plans the screens, flows and interactions of an application according to the phone's small screen, touch usage, iOS and Android platform rules and intermittent usage conditions.
I am Selçuk Aker; I have been designing graphic and digital interfaces for over 19 years and my portfolio includes many published mobile application interfaces. When most people think of "mobile application design", beautiful screen visuals come to mind. However, most of the work consists of invisible decisions: which task should be on the first screen, what the user will see when the internet connection is lost, when to request notification permission? In this guide, I explain what mobile application design involves, why it is important and the differences between platforms. Whether the application itself and the business is necessary is a separate issue; I discussed it in the article what is a mobile application.
What does mobile application design involve?
Mobile application design consists of four layers and they cannot be considered independently of each other:
| Layer | Scope | Sample decisions |
|---|---|---|
| UX | User, task, flow, information architecture | Is registration mandatory, what's on the first screen? |
| UI | Visual language, widget, typography, color, icon | Button style, dark theme, empty status illustration |
| Platform | iOS and Android rules, system behavior | Back gesture, tab bar, permission dialogs |
| Store and environment | Application icon, store images, notification texts | Reading the icon in small size, screenshot order |
The number of screens varies depending on the scope of the application; But next to each screen, empty, loading, error and permission states should also be designed. I have detailed the list of these situations in the article situations that should be added to the mobile application screen list.
Why is mobile application design important?
Mobile usage occurs in different conditions than desktop, and if the design does not meet these conditions, the user will easily give up. To put it without exaggeration, the importance of design comes from the following points:
- First use takes a short time: When the user first opens the application, he wants to quickly understand what it does. If he doesn't understand it, removing it is a one-tap job.
- Attention is intermittent: The application is used on the bus, while waiting in line or while walking. The task may be interrupted; It is important to be able to continue where you left off.
- The screen is small, the finger is big: Information that fits on the desktop does not fit on the mobile. It is imperative to prioritize.
- One-handed use is common: Having important actions within easy reach of the thumb makes it easier to use.
- The cost of error is high: Wrong touch can become a real problem in flows such as payment, appointment or order.
- Development cost depends on design decision: An unclear flow creates a loss of time and budget when it changes during coding.
Good design helps reduce these risks; However, the success of the application also depends on the value of the product, marketing, technical quality and competition.
What does the difference between UI and UX look like on mobile?
Let's think about the same screen: the cart screen in a food ordering application.
- UX decisions: Should address be selected before adding to cart? When should the minimum amount warning be displayed? Is the cart protected if the user bounces at checkout? Is the coupon area visible to everyone or is it behind a link?
- UI decisions: What is the total amount and where does it stand? Is the "confirm order" button pinned to the bottom of the screen? Is the product quantity change control large enough? What color and how is the discount line differentiated?
If the two sets of decisions do not work together, the result is a screen that is beautiful but confusing, or logical but tiring to use. For the general framework of the distinction between UI and UX, you can look at the UI/UX design homepage.
Basic mobile design principles
General interface principles also apply on mobile; but some become particularly evident. For detailed explanation, you can refer to the UI/UX design principles guide.
- Let the primary task of each screen be clear. If there are multiple equally important actions on a screen, the user will pause.
- Select navigation structure by number of tasks. For a small number of main sections, the bottom tab bar is a common and understandable structure; Very deep content requires different solutions.
- Reduce data entry. Opening a keyboard is expensive on mobile. Appropriate keyboard type, autofill, choice lists, and location-retrieved information reduce typing.
- Design the states. Empty list, loading, no connection, server error, and successful transaction screens are as important as the main screens.
- Enable undo. Offer confirmation or undo for actions such as deletion or cancellation.
- Keep the touch areas adequate. Apple recommends at least 44 × 44 pt, Android and Material Design recommend at least 48 × 48 dp.
Mobile app navigation patterns
The navigation structure is the skeleton of the application and is one of the most difficult decisions to change later. Common patterns and their appropriate situations can be summarized as follows:
| Mold | Suitable for | Point to note |
|---|---|---|
| Bottom tab bar | Few, equally important major sections | As the number of tabs increases, tags become more cramped |
| Stack (forward and reverse) | Streams drilling down from the list | The user should not lose track of where he is |
| Side menu (drawer) | Many infrequently used sections | Since it is confidential, it is not suitable for important sections |
| Single screen and toolbar | Applications with a single main task | The structure may become inadequate as additional features are added |
| Step by step flow (wizard) | Sequential tasks such as registration, application, payment | The user should be able to see how many steps are left and go back |
Most apps use these patterns together: bottom tab bar for major sections, stack navigation within each section, and step-by-step flow for specific tasks. The selection should be made by looking at the task list at the wireframe stage.
iOS and Android: do they have to look the same?
It doesn't have to look the same, but it should work the same. Both platforms have official design guidance: Apple's Human Interface Guidelines and Google's Material Design 3. Users come with their platform's habits.
The main differences to note are:
- Going back: In iOS, swiping from the left edge of the screen and the back button in the top left are customary; Android has a system back gesture or button. The application must meet both behaviors consistently.
- Navigation components: The appearance and location of components such as the tab bar, top bar and menu may differ between platforms.
- System dialogs and permissions: Permission requests and warning windows open in the operating system's own view; The designer plans what will happen before and after these.
- Typography: Each platform has a default system font and dynamic font size behavior.
- Units of measurement: Point (pt) is used in iOS design, density-independent pixel (dp) is used in Android.
In practice, many teams establish a common design language that carries the brand identity and adapt platform habits in navigation, navigation and system components. This is less costly and more familiar to the user than two completely separate designs.
Native, hybrid and cross-platform: impact on design
How the application will be developed also affects design decisions. In native development (such as Swift for iOS, Kotlin for Android), each platform's own components are used directly; It becomes easier to comply with platform habits. In cross-platform approaches such as Flutter or React Native, two platforms are targeted with a single code base; common components are used more, and it must be decided from the beginning which platform-specific behaviors will be preserved.
What is important for the designer is to know the technology choice before the design begins or at the wireframe stage at the latest. Which component comes ready-made, which one will be specially coded, and how complex the animations can be depends on this choice. I discussed the subject in the article Native, Flutter and React Native selection and the alternatives that work in the browser in the article PWA or mobile application. For mobile experiences that work in the browser, see mobile web design.
Onboarding: first boot experience
Onboarding is the introduction, registration and initial setup steps that the user encounters when they open the application for the first time. A common mistake is to make the user watch a long introductory slide before using the application.
More useful approaches:
- A single screen that explains the value of the application in a few seconds or a direct transition to the home screen.
- postpone the recording until the moment when the recording is actually required; allowing browsing first.
- Giving information where it is used: a quick tip on the first use of a feature.
- Minimizing personalization questions and making them skippable.
- Requesting permissions as soon as the reason is understood.
Permissions, notifications and offline statuses
Mobile apps may need permissions such as location, camera, contacts and notification. What happens if the user does not grant permission should also be designed: how will the feature work restricted, how will the user be able to unlock the permission later?
Notifications are a valuable but sensitive channel. Too frequent or irrelevant notifications may lead the user to turn off notifications altogether. Which event requires notification and how the user manages it is within the scope of the design.
What the application displays when the connection is lost is also important: showing cached data, queuing the operation, giving a clear warning? These decisions are made together with the developer and backend team; Details are in the article mobile application backend, API and offline design.
Accessibility and different screen sizes
Mobile accessibility starts with a few basic controls:
- Dynamic font size: When the user enlarges the text from the system setting, the texts should not be cut or the order should be disrupted.
- Contrast: Contrast ratio of at least 4.5:1 for normal text and at least 3:1 for large text at WCAG 2.2 AA level.
- Screen reader: Reading each button with a meaningful name with VoiceOver on iOS and TalkBack on Android.
- Touch areas: Size and adequate spacing in accordance with platform recommendations.
- Motion: Simplified animations when the motion reduction setting is on.
Different screen sizes are also part of the design: small phones, large-screen models, notch and dynamic areas, landscape mode and tablet. It is not necessary to draw separate screens for each size; but flexible layout rules need to be defined and controlled on the smallest and largest screens. For the official guide, see Android accessibility page and Apple accessibility guide.
Store images and app icon
The user's first encounter with the application is often on the store page. The app icon, screenshots and promotional text are therefore part of the experience. The icon should be recognized at a small size, and screenshots should explain what the application does in the first few frames.
Store images are often planned as a separate deliverable; The metrics and rules are determined by Apple and Google and may change over time. It is necessary to check the current measurements on the App Store Connect and Google Play Console help pages. For an old but still instructive note on this subject, see featured mobile design in the app store.
Mobile interface examples from the portfolio
Mobile application interfaces published in my portfolio cover different types of usage: car rental application Ayes Rent A Car, courier application Courier App, pet care application Pawla Pet App, distance education application Education App, for smart home control [Intelligent House] App](/en/calismalar/intelligent-house-app) and dark-themed audiobook application Voice Book Mobile App are some of them. You can see the whole thing on the mobile application works page. These pages show the published interfaces; I do not have a verified role statement on every project. In projects with confirmed roles, I undertook interface design at Danone and ERP Software; I prepared the entire website at Yatcim.
What determines cost and duration?
The budget and duration of mobile app design depends on the complexity of the flows rather than the number of screens. The determining factors are: number of user roles (such as customer, courier, administrator), number of platforms, scope of states, design system need, scope of research and testing, store images and number of revisions. I explained these factors in the article mobile application interface design prices. You can refer to the how to design a mobile application guide for the step-by-step process, and the can an application be made with artificial intelligence guide for the limits of producing fast applications with artificial intelligence. For service scope, there are mobile app design service, mobile app designer and freelance mobile app designer pages.
Summary and checklist
- Mobile app design includes UX, UI, platform rules and store appearance together.
- Each screen should have one primary task; Statuses should be designed with as much care as home screens.
- iOS and Android don't have to look the same; Navigation and system behavior must respect the platform.
- Development technology should be known at the wireframe stage at the latest.
- Onboarding is short, registration is postponed if possible, permissions should be requested on grounds.
- Dynamic text, contrast, screen reader and touch area controls should be made.
- Store images and icons should be planned as a separate delivery.
Frequently asked questions about mobile app design
Why is mobile application design important?
Mobile use is brief, intermittent, and often occurs with one hand; If the user does not quickly understand what the application does, they may give up. Design simplifies tasks to these conditions, reduces the risk of errors, and helps reduce the cost of changing flows during development.
Is mobile application design and mobile web design the same?
It is not. Mobile web design is the adaptation of a site opened in the browser to the small screen; Issues such as store, permission, notification and platform components are either non-existent or limited. Mobile application design is the design of a software installed on the device according to iOS and Android rules.
Are two separate designs required for iOS and Android?
Most projects do not require two completely separate designs. A common design language is established and platform differences in navigation, back movement, system components and typography are also addressed. In cases where the application makes heavy use of platform-specific features, further parsing may be required.
How does native or hybrid development affect design?
It is easy to use the platform's own components in native development. In cross-platform approaches such as Flutter and React Native, common components are used more and it must be decided from the beginning which platform-specific behaviors will be preserved. If the technology choice is known before the design begins, the screens are prepared in a codeable format.
Are onboarding screens required in every application?
It is not necessary. If the application can explain what it does on the first screen, a long introduction flow is unnecessary. The important thing is that registration and permissions are requested at the right time and the information is provided where the relevant feature is used.
Are app store images part of the design?
Yes, the user experience starts on the store page. However, icons, screenshots and promotional images are usually planned as a separate delivery from interface design. Since measurements and rules are determined by the stores and may change, current help pages should be checked.
How to check accessibility in mobile app?
During the design phase, contrast ratios, touch area sizes and the behavior of the layout with enlarged text are checked. After development, it is tested with VoiceOver and TalkBack that each element is read meaningfully and that the motion reduction setting is adhered to. On the Android side, Google's accessibility scanning tools can also help.
Is good design enough for an application to be successful?
It is not enough. The design makes it easy for the user to understand and use the application; However, whether the product meets a real need, its technical quality, marketing and maintenance are at least as decisive as the design. The impact of the design should be measured with predetermined indicators after publication.
Do you have a digital product project?
This guide gives information about UI/UX design. You can share your current screens and goals for your digital product.
- Target user of the product
- Prioritized task and flow
- Platform (web, iOS, Android)
