Wireframes & Sitemap: Design the Dubai Website Before You Decorate It

The most expensive habit I see in Dubai web projects is opening Photoshop — or Figma, or a Canva board — before anyone has written the page list. You get a beautiful homepage of a company that does not exist yet: no place for WhatsApp, no Arabic toggle, no contact path, six services invented because the layout had six slots. Wireframes and a sitemap are how you design the site before you decorate it.

I am a freelancer, so I do not sell a 40-page UX theatre. I sell a shared picture of what we are building, so we do not discover in week six that nobody owns the About copy. That picture is a sitemap and mobile wireframes. Colour comes after. That is how I run web design in Dubai when the job is a real business site, not a poster.

Start with a page list, not a palette

Write the pages in a document both of us can edit. For most UAE service businesses the skeleton is small. I keep a practical list in pages every UAE business website needs: Home, About, one page per main service, Contact, often FAQ, often areas served. Extra pages earn their keep when they answer a real question (“dentist in JLT”) or a real operational need (fees, buses, project types).

If a page has no owner and no next step, it is a brochure leftover. “Our vision” without a tap is how sites get fat and slow. We can still have a warm About. We should know why it exists. The sitemap is also where bilingual decisions show up: which pages get Arabic in phase one, which wait. That choice changes structure. It should not appear as a surprise after the English design is “finished.”

1. Business goal in one sentence (enquiries, bookings, tenders, applications).
2. Audience in one sentence (who is on the phone).
3. Page list with a primary action on each.
4. What we are not building in this phase.

That last line saves more dirhams than any discount. A first site that tries to be a portal, a blog, a store and a careers hub will slip. I would rather ship a tight site and add. The calendar for that is in how long a Dubai website takes — content and decisions, not paint, are what stretch the weeks.

User paths: WhatsApp, call, then the form

On a wireframe I draw the thumbs, not the gradients. Header: logo, the one or two links that matter, WhatsApp or call. First screen: who you are, who you help, proof, button. Footer: NAP. If we cannot sketch that on a grey rectangle, we do not have a site yet. We have a poster.

Different pages have different taps. A service page might WhatsApp with a prefilled trade. A careers page might email HR. A store has checkout. Mixing those on one homepage without a primary is how you get four equal buttons and no action. The wireframe is where we pick the primary. We can still have a secondary. We should not have a democracy of buttons.

Grey boxes on purpose

Low-fidelity means no brand colours, no stock hero, no real logo treatment. Boxes and labels. Clients sometimes feel this is “not design.” It is the design of the decisions. The moment we dress it, people argue about the shade of teal instead of whether Careers belongs in the header. I keep wireframes ugly on purpose.

What I put on a mobile frame

Headline placeholder with real words if we have them — not lorem. Real words expose whether the offer fits. A photo slot labelled “finished kitchen / clinic corridor / not a handshake.” Buttons labelled with the actual verb: WhatsApp, Call, Book, Apply. A note for Arabic if the English line will break when reversed. Sticky elements drawn so we see them covering the chat button before we code ourselves into a hole. That last one is a whole article later; the wireframe is where we catch it.

Desktop is not the source of truth

If we only wireframe a wide canvas, we will invent a mega-menu and then crush it into a hamburger. Start on a 390-pixel-wide frame. Widen after the path works. Most of your visitors in this country will never see the wide version first.

Do not decorate in Photoshop first

High-fidelity mockups are useful once the skeleton is agreed. They are harmful when they pretend to be the skeleton. A full visual of Home, with no Contact and no service pages, trains everyone to judge the wrong artefact. You will pay twice: once for the painting, once for the real information architecture. That is the same trap as a cheap quote that skips planning — see why cheap website quotes cost more later.

I still use Figma. I use it after the sitemap. The first file is boxes. The second file is type and colour against your actual content. If you already have a brand kit, we apply it then. If you do not, we still should not invent a luxury identity in the homepage mockup and call it a website.

How this looks in an ITZ project

You send goals, examples, and a WhatsApp number that can go live. I send a page list and two or three mobile wireframes (Home, one service, Contact). We argue in comments, not in layers of gold. Then I design. Then I build. The web design brief is the client-side version of the same discipline. If you want to skip the PDF ritual, message me and we do the sitemap in a call. Either way, we do not start by picking a template because it looked expensive on a laptop.

A sitemap is how a freelance job stays honest about scope. When the list is visible, “can we add a portal” is a new conversation with a new price, not a silent expansion inside a pretty file. If you already have a live site, we can reverse-engineer the map, cut the dead pages, and wireframe the new path before we touch the look.

Frequently asked questions

Do I need a wireframe if I already like a template?

Yes, at least a page list and the main mobile path. A template is a look. It does not decide whether About exists or where WhatsApp sits.

How long does sitemap and wireframe work take?

For a typical SME site, a few days of decisions — not months. It saves weeks of painting the wrong pages. Timelines sit inside the wider build, which I outline in the how-long article.

Can we skip this and go straight to design?

You can. You will pay for it when the pretty homepage has nowhere to put fees, locations or the real call to action.