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
Website design · UAE
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 siteWhat website design is
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.
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.
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.
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
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 today | Designed to be extendedDrawn for the company it is becoming | |
|---|---|---|
| Second entity or branch | A 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 activity | The navigation is reopened, and usually the visual design with it. | A route added inside a structure that expected more of them. |
| An Arabic version | A 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 page | The designer, then the developer, in that order. | Whoever writes the content, inside components that already exist. |
| Accessibility | Checked near the end, if it is checked at all. | Contrast, focus order and target size fixed inside the components, once. |
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
Webzenia has worked with Gulf clients since 2018. Three constraints shape a UAE layout before any of it is styled.
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.
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.
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.
The scope
Six pieces of work, each ending in something you can point at and hand to a builder.
The route a buyer takes from a listing, a search or an ad, and what each page has to answer on the way
A sitemap and URL structure drawn against the licence, so no route promises something the entity cannot sell
Low-fidelity layouts signed off in English and in the mirrored state, before anything is styled
Tokens for colour, type, spacing and radius, and a component library documented for the people who will build it
High-fidelity screens drawn to the brand, with every component specified in both reading directions
A clickable prototype and an annotated spec, handed over in the working file rather than as exported images
Our stack
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 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.
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.
How the design runs
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.
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.
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.
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.
Every component specified in both reading directions, or written down as out of scope.
Our commitment
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
Keep exploring
Builds sequenced around the approvals the launch date waits on.
Flows and states tested with real people before anything is built.
Stores wired for the payment set, the courier and the invoice.
The plan decides more than the theme. We settle that first.
A store you own outright, with the running cost priced first.
Built for the two people who have to publish it, in both scripts.
For content that has to reach more than one surface.
The origin, the scripts and the consent layer, not the network.
Diagnosis first, and a test only where the traffic carries one.
Next step
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.