Design for the phone people actually own
A designer finishes a delivery app on a large, expensive phone. It looks clean and spacious, and everything fits.
Then a rider in Ibadan opens it. Her Android phone is 360 wide. She has turned the text size up because small writing strains her eyes. She's standing in bright sunlight, holding a parcel in one hand. The Confirm delivery button label now wraps onto two lines, the customer's address is cut off, and the price overlaps the icon beside it.
Nothing is broken in the code. The design was made for a phone, and a situation, that the rider doesn't have. This lesson is about designing for the phone people actually own, in the conditions they actually use it.
Words in this lesson
| Word | What it means, in plain English |
|---|---|
| Physical pixel | One of the tiny dots of light that make up a screen. |
| Density | How many physical pixels are packed into each inch of screen. |
| dp (density-independent pixel) | Android's design unit, which stays roughly the same physical size on any screen. |
| CSS pixel | The web's design unit, which works the same way for websites. |
| Device pixel ratio | How many physical pixels a phone uses to draw one CSS pixel. |
| sp (scalable pixel) | Android's unit for text, which grows when someone makes their text bigger. |
| Font scaling | A phone setting that makes all text larger (or smaller) for that person. |
A quick reminder from Module 1
In lesson 1.4 you saw StatCounter's figures for Nigeria in August 2026: about 82% of mobile visitors on Android, and around 42% of mobile screens 360 wide. That's why this course starts every screen at 360 × 800.
But there's a puzzle. Phones are often advertised with far bigger numbers, like "1080 × 2400". So what does "360 wide" actually mean?
Design units aren't screen pixels
Screens differ in density. Android's developer documentation gives an example: one device might have 160 pixels per inch, while another fits 480 in the same space. If you designed in physical pixels, a button would be large on one phone and tiny on the other.
So designers and developers don't work in physical pixels. They work in design units:
- Android uses dp. Android's documentation describes one dp as roughly equal to one physical pixel on a medium-density (160 dpi) screen, and Android converts dp to real pixels for each screen: px = dp × (dpi ÷ 160).
- The web uses CSS pixels. MDN describes the device pixel ratio as the ratio of physical pixels to CSS pixels, meaning how many of the screen's real pixels are used to draw a single CSS pixel.
- iPhones use points (pt), which work in a similar way.
A worked example
A phone with a screen of 1080 × 2400 physical pixels and a device pixel ratio of 3 uses 3 physical pixels for every design unit in each direction:
- 1080 ÷ 3 = 360
- 2400 ÷ 3 = 800
So as far as your design is concerned, it's a 360 × 800 screen. The extra pixels make things sharper, not bigger.
That's what your Figma frame means. A 360 × 800 frame, with a 48-wide button in it, maps to 360 × 800 dp on Android or 360 × 800 CSS pixels on the web, with a button about the same physical size on every phone.
The rule: always design and measure in design units (dp, CSS pixels or points), never in the physical resolution printed on the phone's box.
People change the text size, and you must let them
Many people make text bigger on their phones: older customers, people with low vision, and anyone tired of squinting.
Android's developer documentation says that, starting in Android 14, the system supports font scaling up to 200%. It uses a nonlinear curve: large text doesn't grow at the same rate as small text, so headings don't become enormous, but body text grows the most.
Android's documentation also says:
- Text should use sp units, so it respects the person's chosen size.
- Apps should be tested with the maximum font size switched on.
On a Pixel-style Android phone, the setting is in Settings → Accessibility → Display size and text. Phone makers such as Samsung, Tecno and Infinix often place it somewhere slightly different, so search your phone's Settings for font size.
What large text does to a design
| Design choice | What happens at large text sizes |
|---|---|
| A button with a fixed width | The label wraps onto two lines, or gets cut off |
| A card with a fixed height | Text spills out, or disappears behind the card edge |
| Two buttons side by side at 360 | They no longer fit |
| A label and value on one line ("Amount ₦25,000") | They crash into each other |
| Text inside an image | It doesn't grow at all |
The fix is what you learned about auto layout in Module 3: let containers hug their content, so they grow with the text, rather than fixing their size.
The conditions of real use
A phone isn't only a screen size. Think about everything around it:
| Condition | What it means for your design |
|---|---|
| Bright sunlight | Low-contrast text becomes hard to read. You'll learn the contrast rules in Module 6. |
| One hand busy | People tap with a thumb while carrying something. That's lesson 5.2. |
| Moving vehicles, crowded places | Taps land slightly off target, so small buttons get missed. |
| Interruptions | People leave mid-task and come back. Forms shouldn't lose what they typed (lesson 5.3). |
| Slow or expensive data | Heavy images and videos cost people time and money (lesson 5.5). |
| Shared phones | Several family members may use one device. Be careful what's visible on screen. |
| Low storage | A large app may get uninstalled to make space for photos. |
None of these show up when you design at a desk on fast Wi-Fi. You have to go looking for them, which is what your research in Module 2 was for.
Build a phone profile
Before designing, write a short phone profile of the people you're designing for, using evidence from your research:
| Question | Example answer (from research with delivery riders) |
|---|---|
| What phones do they use? | Mostly mid-range Android phones, 360 wide |
| Text size setting? | Two out of six had increased it |
| Where do they use the app? | Outdoors, often in sunlight, often moving |
| Hands free? | Usually one hand holding a parcel or a handlebar |
| Connection? | Mobile data, sometimes weak |
| What worries them? | Running out of data, battery and storage |
Every design decision in the rest of this module can be checked against that profile.
Test on something real
Your laptop screen lies to you: it's bigger, brighter and closer than a phone in someone's hand. Three ways to get closer to the truth:
- Look at your design on a real phone. In Module 3 you saw that Figma's mobile app can mirror designs and play prototypes, even though it can't edit design files.
- Check real apps and websites at 360 wide. In Chrome on a computer, open DevTools and click Toggle device toolbar. Chrome's documentation says it opens with Dimensions set to Responsive, where you can type an exact width and height, such as 360 and 800.
- Turn your own phone's text size to maximum for a day, and notice which apps break.
About the steps in this lesson. The Android and Chrome settings were checked against Android's developer documentation and Chrome's DevTools documentation in September 2026. Menus change, and phone makers rename settings. If yours look different, search your phone's Settings for font size, or search developer.chrome.com for device mode.
Common mistakes
| Mistake | Better |
|---|---|
| Designing at your own phone's size | Start at 360 × 800, the most common width here |
| Confusing the phone's physical resolution with design size | Design in dp, CSS pixels or points |
| Fixed-width buttons and fixed-height cards | Let containers hug their content |
| Never testing with large text | Test at the maximum font size |
| Putting important text inside images | Use real text, which can grow and be read aloud |
| Judging a design on a bright laptop screen | Mirror it on a real phone, outdoors if you can |
| Assuming everyone has fast Wi-Fi and plenty of storage | Check your phone profile |
The short version
- Design in design units: dp on Android, CSS pixels on the web, points on iPhone. A 1080 × 2400 phone with a device pixel ratio of 3 is a 360 × 800 design.
- Android's formula is px = dp × (dpi ÷ 160). More pixels make things sharper, not bigger.
- Since Android 14, people can scale text up to 200%, with body text growing most. Test at the maximum, and let containers hug their content.
- Real use means sunlight, one hand, movement, interruptions, slow data, shared phones and low storage.
- Write a phone profile from your research, and test on a real phone.
Try it yourself
- Write a phone profile for the people you researched in Module 2, with at least six rows. Mark which answers come from evidence and which are still guesses.
- Find your own phone's font size setting and turn it to the maximum. Open three apps you use often, and screenshot anything that breaks: wrapped buttons, cut-off text, overlaps.
- In Chrome on a computer, open DevTools, click Toggle device toolbar, set the width to 360, and look at a Nigerian bank, school or shopping website. Note three problems you see.
- In Figma, open the 360 × 800 login screen you built in Module 3. Duplicate the frame, and roughly double the size of the body text to stress-test it. Fix everything that breaks using auto layout Hug, not by shrinking the text back.
- Mirror the fixed design on a phone if you have one, and check it outdoors.
You'll know you've got it when you can explain why a 1080-pixel-wide phone is a 360-wide design, and your screen still works with its body text at double size.
More free previews
- ▶UX, UI, and why confusing them costs you20 min
- ▶Assumptions are not research: know what you actually know20 min
- ▶Set up Figma and draw your first screen20 min
- ▶Information architecture: why some apps feel obvious20 min
- ▶Spacing and the 8-point grid, used properly20 min
- ▶Why the words decide whether people finish15 min
- ▶Every screen has more than one state20 min
- ▶Why five users find most of the problems15 min
- ▶Design systems: why teams stop redrawing buttons20 min
- ▶Choose a problem worth designing for20 min