# Designing Arabic-First Interfaces

> Why mirroring an English layout is not enough, and what changes when you design Arabic, right-to-left interfaces from the first sketch: reading flow, typography, numbers and icons.

- **By**: [Mohamed Amin](https://aminuix.com)
- **Published**: Jan 14, 2026
- **Category**: Design

![Arabic RTL mobile app screens for the Naqla driver app](https://aminuix.com/api/media/file/journal-designing-arabic-first-interfaces-hq-1600x940.webp)

Most of the products I design are used in Arabic first: a trucking app for drivers in Egypt, a boutique hotel website for Saudi Arabia, a real estate platform in Qatar. And in almost every project, the first draft someone hands over is an English layout that has simply been flipped.

Flipping is a start, not a design. Right-to-left changes how the eye travels across a screen, which elements feel primary, and even how numbers and icons are read. When I design Arabic-first, the Arabic layout is the original and English is the adaptation, not the other way around.

Here is what that means in practice, and the details I check on every Arabic RTL UI design.

## Start From the Reading Flow

In Arabic the eye starts at the top right, so that is where the most important information belongs: the screen title, the user's status, the main action. On the Naqla driver app, the driver's current state and ongoing trip sit exactly there, because a driver glancing at the phone in a truck cab should get the answer in one look.

Navigation follows the same logic. Back arrows point right, progress moves right to left, and sliders and carousels advance in the reading direction. If any of these still point the "English" way, the interface feels subtly wrong even when users cannot say why.

## Typography Is Not a Translation

Arabic letters are taller and more detailed than Latin ones, so a type scale copied from English usually looks cramped. I give Arabic text more line height, avoid very thin weights at small sizes, and choose typefaces designed for Arabic from the start, such as Ge SS Two on Naqla or Arabic Jali on the Saudi Investment Company website.

Mixed content needs care too. Brand names, phone numbers and prices often stay in Latin characters inside Arabic sentences, and the layout has to keep them readable without breaking the line.

## Numbers, Icons and the Things That Do Not Flip

Not everything should be mirrored. Google's [Material Design guidance on bidirectionality](https://m3.material.io/foundations/layout/understanding-layout/bidirectionality-rtl) and [Microsoft's mirroring guidelines](https://learn.microsoft.com/en-us/globalization/input/mirroring) draw the same line I use in practice:

- **Numbers stay left to right.** Prices, phone numbers and dates read the same way in Arabic, so they must not be reversed.
- **Directional icons flip, symbolic ones do not.** Arrows and "next" chevrons mirror; a clock, a checkmark or a play button stays as it is.
- **Media controls keep their meaning.** A play button points the same way for everyone.

## Test It With Arabic Readers

The fastest way to find RTL problems is to watch native Arabic readers use the prototype. They notice in seconds when a list feels upside down or a button sits on the "wrong" side. Designing Arabic-first takes a little more thought at the start, and it saves a lot of rework later.

## Sources

- [Bidirectionality & RTL](https://m3.material.io/foundations/layout/understanding-layout/bidirectionality-rtl), Material Design 3
- [Mirroring](https://learn.microsoft.com/en-us/globalization/input/mirroring), Microsoft Learn

## other articles

- [Designing a Luxury Concierge Website for Mykonos](https://aminuix.com/blog/designing-the-mykonos-concierge-website) (Oct 10, 2026, Design): How the Mykonos Hospitality Group website presents villas, yacht charters, private chefs and cars as one concierge: service cards, photos as the product, sliders guests control and one Book button.
- [Designing a Creative Agency Website That Wins Clients](https://aminuix.com/blog/designing-the-based-creative-agency-website) (Oct 10, 2026, Design): How the BASED creative studio website was designed to prove its taste in seconds: a headline that is the brand, the work first, a clear hierarchy and a journal that shows how the studio thinks.
- [Designing Trust: The NAL Lawyers Law Firm Website](https://aminuix.com/blog/designing-the-nal-lawyers-website) (Oct 10, 2026, Design): How the NAL Lawyers website was designed for people under pressure: plain Arabic instead of legal jargon, proof before promises, real people, and one clear next step.