Website design · UAE

Website design that works in Arabic and English.

A site here is drawn before the licence, the activities and the second language have settled. Webzenia designs the system that absorbs those changes, not a set of screens that has to be redrawn.

Get a design plan for the site

What website design is

What website design decides.

Website design here settles the structure, the system and the second reading direction. What is left after those three is styling, and styling is the part that stays easy to change.

Component libraryDesign systemAaButtonHomepageProductPricingBlogCheckoutMobile app

Your structure.

The sitemap, the URL structure and the enquiry paths, drawn against what the licence permits the site to claim and which entity a form is allowed to send a buyer to.

Your design system.

Tokens for colour, type, spacing and radius, and a documented component library. The system is the artefact you keep, because it is what makes the next page an afternoon.

Both reading directions.

Every component specified in its mirrored state as well as its English one. Right to left is a wireframe decision, and a layout that never made it is redrawn rather than translated.

Two ways a site gets designed

Designed to be extended.

Most sites here are drawn for the company as it is on the day of the brief. The company then changes, and the design decides what that costs.

Designed onceDrawn for the company as it is todayDesigned to be extendedDrawn for the company it is becoming
Second entity or branchA new set of pages, drawn from scratch because nothing was built to hold two.A page type that already exists, published by your own team.
A new licensed activityThe navigation is reopened, and usually the visual design with it.A route added inside a structure that expected more of them.
An Arabic versionA redraw. A layout drawn in one direction rarely mirrors without rework.Translation and content work, because the mirrored state was already specified.
Who can add a pageThe designer, then the developer, in that order.Whoever writes the content, inside components that already exist.
AccessibilityChecked near the end, if it is checked at all.Contrast, focus order and target size fixed inside the components, once.
Which one your brief needs.

Most briefs here describe the first and need the second: a DIFC-registered advisory firm opening a mainland branch pays for that gap twice. Extending costs a little more in the drawing and a great deal less in the second year, and which one is right is decided by the entity structure and the activities on the licence, not by the page count. The build that follows the design sits on website design and development, and the emirate-level version of this argument on web design in Dubai.

The UAE context

What the wireframe decides.

Webzenia has worked with Gulf clients since 2018. Three constraints shape a UAE layout before any of it is styled.

  1. 01of 03
    The mirrored stateWhere Arabic is won

    Arabic is a layout decision.

    Mirroring changes the reading order, the side a form label sits on, the direction of every arrow and progress step, and how numerals behave inside a right-to-left line. A Deira trading house on a DET mainland licence discovers that at translation, not at wireframe.

    Our methodEvery component is specified in both directions at wireframe stage, before any visual design.
  2. 02of 03
    The licence in the sitemapWhat the entity may sell

    Your licence decides which pages exist.

    A Dubai Internet City SaaS company that cannot sell direct to mainland customers without a distributor, a branch or a permit under Executive Council Resolution No. 11 of 2025 should not carry a service page written to capture mainland demand. That is a sitemap decision.

    Our methodRoutes and enquiry destinations are mapped against the licence before wireframes begin.
  3. 03of 03
    A named conformance levelNational policy, March 2024

    The UAE names WCAG 2.1 Level AA.

    The National Policy for Digital Accessibility, published in March 2024 and supported by TDRA alongside the UAE Design System 2.0, fixes that level for federal websites, e-services, mobile apps and kiosks. A Musaffah contractor on an Abu Dhabi mainland licence bidding for that work inherits the bar with the contract.

    Our methodContrast, focus order and target size are set in the components and checked before handover.

The scope

Six pieces of design work.

Six pieces of work, each ending in something you can point at and hand to a builder.

User journeyvalidatedAcquisition → conversion100%Search64%Landing48%Browse22%Cart3.2%Converta tested user flow, not screens that were never validated

The route a buyer takes.

The route a buyer takes from a listing, a search or an ad, and what each page has to answer on the way

Entry pointsPage jobs
Sitemapsigned offHomeServicesSectorsOfficesArabicSEOWebAdsroutes scoped to the licence, and mirrored in Arabic

A sitemap your licence allows.

A sitemap and URL structure drawn against the licence, so no route promises something the entity cannot sell

SitemapLicence-scopedURLs
WireframeapprovedGet a quoteone action per screen, fixed before visual design

Wireframes in both scripts.

Low-fidelity layouts signed off in English and in the mirrored state, before anything is styled

Left to rightRight to left
Design systemdocumentedColourTypeAaAaAadisplay · body · monoSpacingComponentsButtonChipBadgetokens for colour, type, spacing and radius, all documented

Tokens and components.

Tokens for colour, type, spacing and radius, and a component library documented for the people who will build it

TokensComponentsDocumented
Visual designLTR + RTLLTRShopniCallRTLShopniCallsame components, mirrored · numerals stay left to right

Screens drawn to your brand.

High-fidelity screens drawn to the brand, with every component specified in both reading directions

Arabic pairingAnnotated
Handoffspec readyGet a quotewidth: hug · pad-x 2444radius 10fill: --brand-accent-600text: --brand-display 600 / 14interactive prototypes and annotated specs, dev-ready

A prototype you can click.

A clickable prototype and an annotated spec, handed over in the working file rather than as exported images

Our stack

The tools we design in.

The kit behind a design that ships as a system. Select one to see why it earns its place, and what we do with it that most do not.

Figma
Why Figma

Figma is where the system actually lives: variables, component variants, and a dev mode that hands over measurements instead of screenshots. It is also the file most build teams here already have access to.

How we excel

We build the token set in Figma variables so it maps one to one onto the coded design system, and we draw the right-to-left variant of every component in the same library rather than in a second file nobody maintains.

VariantsDev handoffHandoff
FigmaDev mode
SketchInspect
Adobe XDShare link
PenpotInspect

How the design runs

Four weeks to build-ready.

These 4 weeks sit inside the first 6 of a build engagement. What each week produces is a document the next week cannot start without.

01Week 1Mapped

Draw the sitemap and routing.

The sitemap, the URL structure and the enquiry routing are drawn as one document, with a column naming the entity each route belongs to and what that entity may claim. That column is what allows a mainland branch or a new activity to be added later without reopening the navigation. Everything after this week is drawn inside whatever this week decided.

  • OutputSitemap, URLs and routing table
  • ColumnThe entity behind each route
  • Signed offBefore any wireframe
02Weeks 2 to 3Drawn

Wireframe both scripts, then componentise.

Wireframes are approved in English and in the mirrored state, so the right-to-left version is a decision rather than a discovery. The token set and the component library follow, each component drawn with its variants, its empty state, and the Arabic pairing of the typeface settled at real sizes.

  • ApprovedIn both reading directions
  • OutputTokens and a component library
  • TypeLatin face with an Arabic companion
03Week 4Build-ready

Assemble screens and hand over.

High-fidelity screens are assembled from components that already exist rather than drawn one page at a time, which is what keeps two pages from the same brief looking like one site. The prototype goes in front of people who match your buyer, and what is handed over is the working file and the spec.

  • ScreensAssembled from the system
  • TestedOn people who match the buyer
  • HandoverThe working file and the spec

Every component specified in both reading directions, or written down as out of scope.

Both directions, specified
Sitemap firstMirrored wireframesTokens documented

Our commitment

Our promises, in writing.

Design is the easiest part of a build to judge on taste. These four are what we ask to be held to instead.

  • Arabic drawn at wireframe stage.

    Every component is specified in its mirrored state alongside its English one. Where an engagement does not fund that, we write it down before wireframes are approved rather than handing over a layout that cannot take Arabic.

  • Accessibility named and checked.

    The conformance level goes into the component spec, not a closing paragraph. Contrast, focus order, target size and keyboard order are checked against it before handover, so a procurement question has an answer rather than an assurance.

  • You keep the working file.

    The design system leaves as the working file and the token set, in a state another studio could build from without calling us. We do not hold the library, and there is no export-only handover that makes us the only supplier.

  • Nothing drawn around missing assets.

    Layouts are drawn against the photography, the logos and the proof that exist on the day. Where a section needs an asset you have not commissioned, it is flagged in the wireframe rather than presented as a screen you cannot fill.

Common questions

Website design in the UAE, answered

Next step

See what your site needs.

Send us what you have, a brand, a site, or a licence and a date. We will come back with the structure and what it would take to draw it.

Tell us what you need.

+971
Chat on WhatsApp