Arabic-first design is more than flipping the layout

Most products used in the Gulf were designed in English and translated later. The result is familiar: a mirrored layout with icons pointing the wrong way, phone numbers that scramble, search that cannot find a name typed without a hamza. Designing Arabic-first avoids these problems because the hard cases are solved before the English version exists.

Direction, and what should not be mirrored

Layout, navigation and progress flow from right to left. But not everything flips: media controls, clocks, charts with a time axis and brand logos usually keep their direction. Phone numbers, card numbers, codes and email addresses are left-to-right runs inside right-to-left text, and they must be isolated, or the characters around them reorder.

Numbers and dates

Decide early whether the product uses Western digits or Eastern Arabic digits, and use one consistently. Many Gulf users read both, but mixing them on one screen looks careless. Government and some banking services also need Hijri dates alongside Gregorian ones, with clear labels.

Type that works in both scripts

Arabic needs more line height than Latin, and Arabic text at the same font size often looks smaller. Choose an Arabic typeface designed to sit next to the Latin one, test both at small sizes, and allow for labels that grow or shrink by a third in translation.

Search and names

Arabic search has to normalise the text it compares:

• treat alef with and without hamza or madda as the same letter;
• treat taa marbuta and haa, and alef maqsura and yaa, as equivalent;
• ignore diacritics and tatweel.

Names deserve their own design: separate Arabic and Latin fields where documents require both, no assumption of a single family name, and matching that tolerates different transliterations of the same person.

Test with real users

Automated checks catch missing translations, but only native speakers catch a sentence that is grammatically correct and still sounds wrong. Put Arabic-speaking users in front of every release, not only the final one, and review emails, PDFs and notifications as carefully as the main screens.

Our product teams design and build Arabic-first web and mobile applications for government, banking and trade, and this website is built the same way.