Mobile App Design Basics: Layout, Nav and Best Practices

TLDR: What will you learn

• Design mobile-first, so your layout works on a small screen before anything else.
• Keep navigation simple and predictable, using patterns people already know from apps they use daily.
• Make touch targets big enough to tap comfortably with a thumb on a moving MRT.
• Choose readable typography and test on real devices, not just a desktop mockup.

Take this one section at a time, and you will start noticing design choices everywhere, from your banking app to the food delivery service you ordered lunch from. Let us begin.

Why Mobile-First Thinking Comes First

When I start any mobile app design project, I begin with the phone, not the laptop. In Singapore, where almost everyone carries a smartphone and services like SingPass and LifeSG have to work flawlessly on the go, that habit is not optional.

Think about it: if a Singaporean cannot log in with SingPass while standing on a crowded MRT platform, the whole service breaks down. Mobile is the primary experience here, not an afterthought.

What Mobile-First Actually Means

Mobile-first means you design for the smallest, most constrained screen first, then scale up to tablet and desktop. It is the opposite of building a rich desktop layout and cramming it onto a phone.

I like this order because starting small forces discipline. When you only have a narrow screen to work with, you cannot hide behind space, so you decide what genuinely matters before anything else gets added.

If you are still fuzzy on where visual design ends and the overall experience begins, it helps to understand the difference between UI and UX before you lay out a single screen.

The Constraints It Forces You to Respect

Designing mobile-first means designing within real limits, and those limits actually make your product better. There are three constraints I keep in front of mind:

• Limited screen space: Every element competes for attention, so you build a clear content hierarchy and reveal detail only when needed.
• One thumb: Most people hold their phone in one hand, so primary actions belong within easy thumb reach, near the bottom of the screen.
• Variable connectivity: Even in Singapore, coverage dips in lifts, basements, and tunnels, so screens must load fast and fail gracefully.

Progressive disclosure is your best friend here. Instead of showing everything at once, you surface the core action first and tuck secondary options behind a tap.

How Prioritising Core Tasks Improves Usability

Let me give you a scenario. Imagine a small local F&B startup building an ordering app for their hawker-style stall.

If they design desktop-first, they end up with a busy screen full of promotions, loyalty points, filters, and a sprawling menu. Shrink that onto a phone and checkout becomes a frustrating maze.

Starting mobile-first, they ask a simpler question: what does a hungry customer actually need to do? The answer is pick an item, add it to cart, and pay.

So the core path stays clean: browse, add, checkout in as few taps as possible. Loyalty rewards and detailed nutritional info still exist, but they sit one layer deeper, revealed only when the customer wants them.

That is the payoff of mobile-first thinking. By designing for the hardest, smallest case first, you protect the tasks that matter most, and the wider experience gets easier for everyone.

Building a Clear Mobile Layout and Grid

Good mobile app design starts with an invisible skeleton: a grid that keeps every screen tidy no matter what device it lands on.

When I sketch a new app, I picture a transport app similar to SimplyGo, where a commuter opens the screen to check their fare balance and top up in a hurry. If the layout is messy, they miss the number they came for.

A consistent grid solves that. It gives you predictable columns and margins so a compact phone and a larger foldable both feel like the same considered product, not two random layouts.

Using columns and margins

I default to a simple grid, often 4 columns for phones, with consistent gutters between them. You do not need to fill every column; the grid just gives you snap points so elements line up.

Keep a single-column layout for most mobile content. Thumbs scroll vertically, so stacking blocks top to bottom is easier to read than squeezing things side by side.

For grouped information, cards are your friend. In our SimplyGo style example, I would put the fare balance in one card and recent trips in another, each with a clear boundary so the eye reads them as separate scannable chunks.

Set a fixed screen margin, around 16 to 24 pixels on each side, and never let text or tap targets bleed into it. If you are new to setting up these frames, Figma design basics every beginner should master walks through the grid and layout tools.

Whitespace and breathing room

Whitespace is not wasted space. It is what stops your top-up amount from colliding with the button beneath it.

I give every card generous internal padding and leave clear gaps between grouped elements. When a balance and a top-up button share a card, the space around them signals they belong together while keeping each one easy to tap.

Crowded screens feel stressful, and a stressed commuter on a crowded MRT will simply put the phone away. Breathing room reads as calm and trustworthy.

Ordering elements by task priority

Ask what the user came to do, then put that first. For a transport app, the fare balance and top-up action belong near the top where they are seen instantly.

Secondary things like trip history or settings can sit lower, since people scroll for those on purpose. This is visual hierarchy: size, position, and contrast telling the eye what matters most.

Finally, design around the hardware. Respect the safe area so nothing important hides behind the notch or camera cutout, and keep your key actions clear of the home indicator at the bottom so a swipe does not accidentally trigger them.

Choosing the Right Navigation Pattern

The moment I open an unfamiliar app, I look for one thing: where do I go next? If the answer is hidden behind a tiny icon in the corner, half the design battle is already lost.

Getting navigation right is one of the highest-leverage decisions in mobile app design, because it shapes how easily people find and use everything else you built.

Let me walk you through the main patterns and when each one earns its place.

Bottom tabs versus hamburger menus

A bottom tab bar puts your core destinations along the base of the screen, right where a thumb naturally rests. That is why bottom navigation is the strongest choice for reachability on larger phones, and why so many apps we use daily rely on it. It is also why designers like Josh Clark, author of Designing for Touch, have long argued that the reachable lower band is prime real estate.

Look at DBS PayLah! or Grab. Both surface their most important actions, things like paying, transferring, or booking a ride, in a persistent bottom bar so you never have to hunt.

A hamburger menu, by contrast, tucks everything behind a single icon. It looks tidy, but that tidiness comes at a cost: anything inside it is out of sight and out of mind.

The trade-off is discoverability. Features buried in a hamburger menu get noticeably less use, so I treat that menu as a home for secondary items like settings, help, and account details, never for core tasks.

If Grab hid the ride booking flow inside a hamburger menu, I promise you their conversion would drop. Keep your money makers visible.

Structuring information architecture

Before you pick a pattern, sort your features into tiers. I usually run a quick card sort with the team, grouping every screen into primary, secondary, and rarely used buckets.

Your primary bucket becomes your tab bar. Aim for three to five top-level destinations, because more than five and the tabs get cramped and the labels turn unreadable on a small screen.

If you find yourself with eight equally important sections, that is usually a sign the app is trying to do too much, or that your grouping needs another pass.

Gesture navigation, like swiping between screens, works beautifully as a complement once users know your layout, but I would never make it the only way to reach something important. Hidden gestures are undiscoverable for first-time users.

A floating action button suits one dominant action per screen, such as composing a new message or starting a new transaction. Use it sparingly: one FAB, one clear job.

Keeping labels clear

Icons alone are rarely as obvious as we designers think. A house means home, sure, but a diamond, a spark, or an abstract swirl means nothing to a first-time user.

Pair each tab icon with a short text label. Two words at most, in plain language your users actually say.

Signal the active state clearly so people always know where they are. I usually combine a filled or coloured icon with a matching label colour, rather than relying on a subtle tint alone.

Test it on a real phone in bright Singapore daylight. If you cannot tell at a glance which tab is selected, neither can your users.

Designing Touch Targets and Spacing

Good mobile app design lives or dies on whether people can actually tap the thing they meant to tap. Fingers are not mouse pointers, and a button that looks fine on your laptop can be a nightmare on a moving MRT.

How big and how far apart

The widely accepted floor for a touch target is roughly 44 to 48px on the shorter side. Apple’s Human Interface Guidelines call for a hit target of at least 44x44pt, and Google’s Material Design accessibility guidance leans towards 48x48dp, so build to the larger number, and you will be safe on both.

Just as important is the space between targets. Aim for at least 8px of padding around each interactive element so two neighbouring buttons never share an edge that a fingertip could straddle.

Picture a lunch rush on a GrabFood or foodpanda checkout. Someone in a hawker centre queue is trying to confirm an order one-handed, and the “Add item” and “Remove” buttons sit almost touching. One mis-tap adds a second nasi lemak they never wanted, and now there is a refund request and a bad review.

Designing for the thumb zone

The thumb zone is not just intuition. Mobile interface researcher Steven Hoober observed more than 1,300 people using phones in the wild and found that around 49 percent held the device one-handed with the thumb doing the tapping, and that roughly 75 percent of all touches are thumb-driven.

On a large device like a Galaxy S24 or an iPhone Pro Max, the thumb comfortably reaches the bottom third of the screen, strains for the middle, and struggles to reach the top corners.

That reachable arc is the “thumb zone”. Put your primary actions, the “Confirm order”, “Pay now”, and “Next” buttons, in the bottom-centre band where the thumb naturally rests.

Keep destructive or irreversible actions out of that easy-reach zone. A “Delete address” or “Cancel subscription” control belongs higher up, or behind a confirmation step, so nobody triggers it while scrolling with their thumb.

Practical rules for lists, forms and buttons

Here are targets you can apply straight away:

• List rows: Give each tappable row a height of at least 48px, so scanning a menu of 30 dishes never lands on the wrong one.
• Form fields: Make input fields and their labels tap-friendly, with at least 48px height and clear 16px gaps between fields to stop the keyboard covering the wrong box.
• Primary buttons: Make them full-width or near it, at least 48px tall, and place them last in the reading order at the bottom of the flow.
• Icon-only controls: Pad small icons so the invisible tap area still hits 44 to 48px even if the icon itself is 24px.

Design for a hurried thumb, not a careful mouse, and your mis-tap rate drops immediately. Test every screen holding your phone one-handed on a bus, because that is how your users will really use it.

Typography and Readability on Small Screens

Good mobile app design lives or dies on whether people can actually read your text without squinting. On a phone held at arm’s length, in bright sunlight, with a thumb hovering over the screen, legibility is not a nice-to-have.

I always start by asking who is using the app. When I worked on flows similar to HealthHub, the audience included older Singaporeans checking appointments and health records, so text had to be comfortable for someone in their sixties or seventies, not just a designer with 20/20 vision.

Choosing readable typefaces and sizes

Stick to one or two font families at most. A system font like San Francisco on iOS or Roboto on Android is a safe default because it is already optimised for screens.

For body text, aim for around 16px as your minimum. Anything smaller and you force people to zoom, which breaks your carefully planned layout.

Build a clear type scale so hierarchy stays consistent across every screen. A simple set might be:

• Body: 16px
• Secondary or captions: 14px (used sparingly)
• Subheading: 20px
• Heading: 24px
• Screen title: 28px or larger

A defined type scale keeps your headings, labels, and body text predictable, so users learn your visual language quickly.

Spacing and line length for scanning

People scan on mobile, they do not read essays. Set line height to roughly 1.4 to 1.6 times the font size so lines have room to breathe.

Keep line length short. On a narrow phone screen this happens naturally, but avoid stretching text edge to edge with no margins.

Break long paragraphs into two or three lines each. I once reviewed an onboarding screen with a solid wall of text and users simply tapped past it without reading a word.

Colour contrast for accessibility

Low-contrast greys are a common trap. That elegant light grey on white might look refined in Figma, but it disappears outdoors.

Follow WCAG guidance: aim for a contrast ratio of at least 4.5: 1 for normal body text, and 3: 1 for large text. This matters even more for a public service app where accessibility is expected, not optional.

Test your contrast with a real checker, not your gut feeling.

Finally, respect dynamic type. Many users, especially older ones, enlarge system text, so design layouts that reflow gracefully when text grows rather than clipping or overlapping.

A practical test: hand your prototype to someone over 60, set their phone text size to large, and watch them read a screen aloud. If they hesitate or pinch to zoom, your typography still needs work.

Common UI Patterns Users Already Understand

When I sit down to design a screen, my first question is rarely “what looks impressive?” It is “what does the user already know?” Every hour someone spends learning your interface is an hour they are not spending buying, booking, or coming back.

That is the quiet power of mobile app design: the best patterns are often the ones people never notice, because they have used them a hundred times before.

Borrow proven patterns, keep your brand

Think about how a shopper uses an e-commerce app like Shopee here in Singapore. They tap a product, add it to a cart icon in the corner, then move through a checkout that shows items, delivery address, and payment in a predictable order.

Nobody had to teach them that flow. The cart badge, the “Proceed to checkout” button, the order summary before you pay: these are recognisable patterns that quietly build trust, because they behave the way people expect money-related screens to behave.

You do not need to reinvent any of that. Lean on patterns your users already understand, then layer your brand on top through colour, tone, and imagery.

The staples worth reusing include:

• Onboarding flows that explain value in two or three swipes, not ten
• Search with autocomplete and recent queries
• Cards for scannable product or content lists
• Forms with clear labels and inline validation
• Pull-to-refresh for feeds and order status

Respect iOS and Android conventions

Consistency with platform conventions is not optional if you want your app to feel native. iOS users expect a back gesture from the left edge and tab bars at the bottom; Android users expect the system back button and often a different placement for primary actions.

Fight those habits and your app feels foreign, even if it is beautiful. When I prototype, I keep both platform guidelines open and check that navigation and controls match what each user’s phone has trained them to do.

If you want a faster start, grab a solid kit. Some of the best Figma templates to kickstart your designs already ship with iOS and Android components, so you are building on tested foundations instead of guessing.

Design the moments things go wrong

Empty states and error handling are where lazy design shows. An empty cart should not be a blank screen; it should say something friendly and point the user to browse deals.

And when a payment fails, “Error 402” helps no one. Tell the user plainly what happened, such as “Your card was declined; please try another payment method,” and give them a clear next step.

Handle these edge cases well, and users forgive the app. Ignore them, and you lose the sale at the worst possible moment.

Accessibility and Inclusive Mobile Design

When I audit a new app, accessibility is one of the first things I check, and I am always surprised by how often it gets treated as a nice-to-have. Accessible mobile app design is not optional; it is what lets your app reach every user, including the millions who cannot rely on perfect eyesight, steady hands, or full colour vision.

Think about who actually uses your app. In Singapore, that increasingly includes seniors navigating government services on their phones, from checking appointments on HealthHub to using Singpass to log in.

Why inclusion widens your audience

The government’s Digital for Life vision is built around exactly this idea: no one should be left behind as services move online. If your app frustrates a 70-year-old trying to renew something on a government portal, you have not just failed one person; you have failed the goal of digital inclusion.

Here is the part designers often miss: inclusive design tends to improve usability for everyone. Clear, high-contrast labels help a visually impaired user, but they also help a food delivery rider squinting at a bright screen under the midday sun outside a hawker centre.

The core things to get right

Contrast is the foundation. Text and background need enough separation so people can read comfortably, not just in a dim office but outdoors too.

Then there is scalable text. If a user bumps up their system font size, your layout should reflow gracefully rather than clipping words or breaking buttons.

Tap targets matter more than people think. A cramped button that is fine for a young thumb becomes a source of misfires for someone with tremors or larger fingers.

A quick scenario with screen reader labels

Picture a visually impaired user filling in a feedback form using VoiceOver on iOS. If your input fields have no proper labels, the screen reader just announces “text field, text field,” and the user has no idea what to type.

Add a clear accessible label to each field, such as “Full name” and “Mobile number,” and suddenly that same user can complete the form independently. That single fix is the difference between an app they can use and one they abandon.

Do not forget colour. Never rely on colour alone to signal errors or status, and test your palette against common colour blindness types so a red error state is not invisible to someone with red-green deficiency.

Here is a short checklist I run during design and review:

• Text and background pass a strong contrast check
• Layout survives a larger system font size without breaking
• Tap targets are comfortably large and well spaced
• Every interactive element has a meaningful screen reader label
• Colour is never the only way meaning is conveyed
• The colour palette is checked against colour blindness

Run this on every screen, not just the login page, and you will build something far more usable for everyone.

Testing Your Design on Real Devices

A design that looks perfect on your 27-inch monitor can fall apart the moment it lands in someone’s hand. Buttons that felt generous shrink, text that seemed readable turns fuzzy, and that lovely thumb zone you planned suddenly forces awkward finger stretches.

Good mobile app design is only proven once it survives a real phone in real conditions. No amount of zooming on a desktop canvas replaces holding the actual screen.

Prototyping and mirroring to a phone

Start by turning your static screens into a clickable prototype. In Figma, this takes minutes: link your frames, then open Figma Mirror on your phone to see the design at true scale.

The difference is immediate. A 44-pixel tap target that looked tiny on desktop suddenly feels right, or a caption you loved reveals itself as unreadable at arm’s length.

Mirror to both an iPhone and an Android device if you can. Text renders differently, safe areas around notches vary, and system gestures can clash with your bottom navigation.

Test across screen sizes too, from a compact older phone to a large flagship. If you are still finding your way around the tool, a step-by-step Figma tutorial for beginners walks through building and previewing prototypes from scratch.

Gathering usability feedback

Numbers on a screen never tell you what confuses a human. You need to watch real people fumble through your flow.

Picture a small beauty salon in Tampines building a booking app. Before launch, the owner hands the prototype to two front desk staff and three regular customers, then simply watches.

Within minutes, patterns emerge. A staff member taps the wrong date because the calendar arrows sit too close, and a customer squints at pale grey time slots that vanish under the salon’s bright ceiling lights.

Test under the messy conditions your users actually live in:

• In direct sunlight near a window, to check contrast and glare
• One-handed on a shaky MRT commute, mimicking real distraction
• With an older customer who may need larger text and clearer labels
• On patchy mobile data, so slow loading states get noticed
• With sound off, the way most people browse in public

Keep sessions short and resist the urge to explain. The moment you defend a design, you stop learning from it.

Iterating from findings

Feedback is only useful when it changes something. Cluster your observations, fix the highest-impact issues first, then mirror the updated prototype back to the same phones.

For the salon, that might mean spacing out the calendar controls and darkening the time slot text before the next round. Repeat this loop- prototype, mirror, test, iterate- until people move through the booking without a single puzzled pause.

Conclusion

We started this guide with a simple frustration: apps that feel clumsy on a small screen, where buttons sit just out of thumb reach and text forces you to squint.

Good mobile app design solves that by starting with mobile-first thinking, then flowing through every decision that follows.

That means a clear layout that guides the eye, intuitive navigation that never leaves users lost, and tap targets sized for real thumbs, not mouse pointers.

It means readable type that holds up in bright Singapore sunlight, familiar patterns that feel instantly learnable, accessibility that welcomes everyone, and testing on real devices instead of trusting a desktop preview.

Apps that respect small screens and thumbs are the ones people keep, recommend, and return to. That is the whole game.

The fastest way to internalise these ideas is to practise, so here is your challenge: pick one app you open every single day, whether it is a banking app, a food delivery app, or the LTA journey planner, and redesign just one screen.

Move the primary action into the thumb zone, tidy the hierarchy, and see how much better it feels. One screen at a time is how real skill builds.

If you want structure and feedback instead of guessing, hands-on training makes a big difference. In Singapore, you can tap SkillsFuture support to lower the cost of upskilling, and our WSQ User Experience & User Interface (UX/UI) Design Essentials course walks you through these principles with guided projects and mentor feedback.

You will leave with portfolio-ready mobile work you can show employers or clients, not just theory in your notes.

So take that first screen you redesigned, keep going, and let us help you turn practice into a career. Enrol today and start building mobile experiences people genuinely love to use.