If you searched for custom website design Saudi Arabia, you probably want to know whether your business has outgrown a template. Custom design earns its cost when your brand, your Arabic and English content or your customers' path to an enquiry no longer fit a layout made for someone else. This guide explains the three levels of design, what "custom" should mean in writing, how right-to-left work changes the job, what drives cost and time, and when a template is the smarter choice.
In short:
- There are three levels of design: a template with your content, a customised theme, and a fully custom design. Most quotes that say "custom" mean the middle one.
- A real custom design has deliverables you can check: discovery notes, a sitemap, wireframes, named page templates, a design system and an agreed number of revision rounds.
- For Saudi businesses, Arabic right-to-left layouts and a bilingual structure are often the strongest reason to go custom, because many templates treat Arabic as an afterthought.
- Cost and time grow with the number of unique page templates, languages, content work and approval rounds, not with the word "custom" itself.
- A well-chosen template is fine for a new business, a short-term campaign or a tight budget. Upgrade later, when you know what your visitors need.
In this guide
- The three levels of design
- Template or custom: how to decide
- What "custom" should mean in a proposal
- The design system behind the site
- Arabic, English and right-to-left design
- What drives cost and time
- How a custom project runs
- Mistakes that waste a custom budget
- Custom design with Webnaa
- FAQ
- Summary
Template, customised theme or fully custom: the three levels of design
"Custom website" is one of the loosest phrases in web design. One provider uses it for a theme demo with your logo swapped in; another uses it for a site designed from a blank canvas around your customers. Before you compare offers, separate three levels of design. This article is about the design side: how the site looks and how its pages are structured. The platform, WordPress or custom code, is a separate decision covered in WordPress or custom code? A fully custom design can run on WordPress, and a custom-coded site can still look like a template.
Level 1: a template with your content
You or your designer pick a ready-made theme, import its demo, then replace the text, photos, logo and colours. The layout and section order stay as the theme author designed them. Done well, it looks tidy and loads quickly. Done badly, it looks exactly like the demo, with sections nobody needed.
Level 2: a customised theme
The designer starts from a solid base theme but makes real decisions: a page structure planned for your services, your own colour and type system, and sections rearranged for your content. On WordPress, careful work keeps changes in a child theme or the theme's settings, so parent theme updates do not wipe them out. The WordPress theme handbook describes child themes for exactly this reason. Most good small business websites sit here.
Level 3: a fully custom design
The design is created for your business from research and wireframes, then built as a set of page templates and components that exist nowhere else. Every layout answers a question about your visitors: what they need to see first, what makes them trust you, how they send an enquiry. It usually comes with a documented design system, so the site can grow without drifting out of shape.
| Question | Template | Customised theme | Fully custom |
|---|---|---|---|
| Who decides the layout | The theme author | Your designer, within the theme's limits | Your designer, from research |
| How unique it looks | Low: others use the same demo | Medium to high | High |
| Arabic and right-to-left quality | Depends entirely on the theme | Can be fixed where it matters | Designed for both directions from the start |
| Design deliverables | Usually none | Style choices, sometimes mock-ups | Sitemap, wireframes, design files, design system |
| Relative cost and time | Lowest | Moderate | Highest |
| Main risk | Looking generic, carrying unused features | Edits made in the wrong place and lost on update | Paying for originality that visitors do not need |
| Good fit | A new business, a campaign, a tight budget | Most established small and mid-sized businesses | Strong brands, complex offers, bilingual audiences, growth plans |
Template or custom: how to decide
Templates have a poor reputation they do not always deserve. A good theme has been tested on many devices and often loads faster than a rushed custom build. The case for going custom rests on specific problems a template cannot solve.
When a template is fine, and often smarter
- You are new and still testing your offer. Spending heavily on a design built around guesses is premature.
- The site has one simple job. A café menu with a map and a WhatsApp button, or an event page with a registration form, rarely needs a bespoke design system. Our guide on when one page works covers this case.
- The budget is tight and content is not ready. A strong template with well-written content beats a custom design filled with placeholder text.
- Your sector has settled conventions. Visitors to a restaurant or a small clinic site expect familiar patterns. A clean, well-adapted layout can serve them better than an unusual one.
Signs you have outgrown a template
Your content keeps breaking the layout
Service names wrap onto three lines, Arabic headings overflow cards designed for short English words, or you keep deleting sections because they do not fit what you sell.
The Arabic version feels second-class
Icons point the wrong way, menus are half mirrored, fonts fall back to a system face, and Arabic text sits cramped in boxes sized for Latin letters.
Buyers compare you with larger firms
If you bid for corporate or government-related work, procurement teams look at your website next to established competitors. A demo layout they have seen elsewhere weakens that impression.
The theme is heavier than the site
Sliders and bundled plugins you never use slow the site on mobile data, and removing them breaks other parts of the layout.
Three quick scenarios
A new landscaping business in Riyadh with four services, a few project photos and customers who mostly arrive from Google Maps. A well-adapted template with good photos, clear service sections and a WhatsApp button is the sensible start. Custom design can wait until the business knows which services bring the best enquiries.
An industrial supplier in Jubail that sells to procurement teams in both languages, with product categories, technical data sheets and certificates. A customised theme, or a fully custom design for the product pages, pays back here because the content structure is what buyers judge.
A consultancy in Jeddah with a defined brand identity, three practice areas and a team that publishes insights. The website must match an existing brand in Arabic and English, a strong case for a custom design built on a documented design system.
What "custom" should mean in a proposal
Because the word is so loose, your protection is a proposal that lists deliverables you can see and approve. It should answer the points below. Our guide to what a web design quote should include covers the commercial side; here we focus on the design itself.
- Discovery. How the designer will learn about your business: a workshop or questionnaire, and a review of competitors and your current analytics.
- Sitemap. The list of pages and how they are grouped in the menu, in each language.
- Wireframes. Simple grey layouts of the key pages showing what goes where before any colour is applied. They let you correct the structure cheaply.
- Named page templates. For example: homepage, service page, project page, about, contact, article. Each unique template is designed once and reused.
- Visual design. Full mock-ups of those templates for desktop and mobile, in Arabic and English if the site is bilingual.
- Design system. The documented colours, type scale, spacing, buttons, forms and components that the build will follow.
- Revision rounds. How many rounds are included at the wireframe stage and at the visual stage, and what counts as a new request.
- Accessibility target. Which standard the design aims to meet, for example colour contrast and focus states in line with WCAG.
- Handover. Whether you receive the design files, the design system document and the right to reuse them with another provider.
Vague wording is the most common source of disputes. Compare these pairs:
| Vague | Clear |
|---|---|
| Custom, modern design | Six page templates designed from wireframes: home, service, project, about, contact, article |
| Revisions without limit, with no written scope | Two rounds on wireframes and two rounds on visual design, consolidated feedback in writing |
| Responsive | Each template designed and tested at mobile, tablet and desktop widths |
| Arabic and English | Both languages designed and reviewed separately, with right-to-left mock-ups for every template |
| Fast | Agreed image formats and sizes, no unused sliders or animation libraries |
If you are still preparing to ask for quotes, our website brief template helps you describe your business so that providers price the same scope. For a broader view of the full service list a provider should cover, see what a professional web design services package should include.
The design system behind a custom website
The difference between a custom website that stays sharp and one that slowly falls apart is usually a design system. Nielsen Norman Group defines a design system as a complete set of standards for managing design at scale with reusable components and patterns, and describes its usual parts as a style guide, a component library and a pattern library (Design Systems 101). A small business needs the same discipline in a lighter form.
For a business website, a practical design system usually covers:
- Colour. Brand colours plus the working colours a site needs: text, backgrounds, borders, links, success and error messages. Each pairing should be checked for readable contrast.
- Typography. One Arabic and one Latin typeface that work together, a small type scale for headings and body text, and line heights set separately for each script.
- Spacing and grid. A fixed set of spacing steps and column widths, so sections line up across every page.
- Components. Buttons, forms, cards, service blocks, testimonial or certificate blocks, tables, accordions for FAQs, and their states: hover, focus, error, disabled.
- Patterns. Repeatable combinations, such as "service hero with enquiry button", that editors can drop into a new page.
A custom design without a design system is a set of pretty pages. With one, it is a site your team can grow.
On WordPress, a design system can live in the theme's global styles and reusable block patterns, so a service page added months after launch still looks like it belongs. Our guide to web design colours and typography goes deeper into choosing a palette and Arabic and Latin fonts that sit well together.
A design system is also where accessibility is won or lost. The W3C's WCAG 2 overview explains that the guidelines are organised under four principles and tested at levels A, AA and AAA, and that WCAG 2.2 is the current version. Design contrast, focus states and form errors correctly once, in the system, and every page inherits them. Our website accessibility checklist lists the checks in plain terms.
Custom design for Arabic and English: right-to-left is a design job
For many businesses in the Kingdom, the bilingual requirement is the strongest reason to move beyond a template. Many themes claim "RTL support" when only the text direction flips. A custom design treats Arabic and English as two first-class layouts. Our bilingual website design guide covers the site structure, language switcher and SEO; this section covers what changes in the design work itself.
Direction belongs in the markup
The W3C Internationalization guidance on structural markup and right-to-left text in HTML recommends setting the base direction with the dir attribute on the html element, declaring the language with lang, and writing styles with start and end rather than left and right. MDN's reference on CSS logical properties and values explains how this works: a property such as margin-inline-start follows the direction of the text, so the same rule applies to the right side on an Arabic page and the left side on an English one. Ask your designer whether the build uses this approach; it lets one design system serve both languages without a pile of overrides.
What to mirror and what to leave alone
| Element | In the Arabic layout |
|---|---|
| Menu order, columns, sidebars, card order | Mirror: the first item starts on the right |
| Arrows for "next", "back" and "read more" | Mirror, so they point in the reading direction |
| Breadcrumbs and step indicators | Mirror, so progress runs right to left |
| Logos, photos and product images | Do not flip; a mirrored photo shows reversed text and signage |
| Phone numbers, prices, dates, model numbers | Keep in their normal reading order inside the Arabic text |
| Form fields for email and website addresses | Keep left to right, even on the Arabic page |
Arabic typography needs its own settings
Arabic letters have tall ascenders, descenders and dots that need more line height than Latin text at the same size. Many Arabic typefaces also look smaller than a Latin face at the same point size, so headings and body text may need a slightly larger setting in Arabic. Italics are not a native Arabic convention, so emphasis needs another treatment. A custom design sets these values per language instead of reusing the English settings.
Plan for different text lengths
The same message can be longer or shorter in Arabic than in English. Review designs with real copy in both languages, give buttons and menu items room to grow, and test the mobile menu with the longest label in each language. For an Arabic-first audience, design the Arabic layout first and then check that English holds up, rather than designing in English and flipping it at the end.
Mixed text and user input
Arabic sentences on Saudi business sites often include English brand names, product codes, email addresses and numbers. Without care, punctuation jumps to the wrong side. The W3C page above recommends dir="auto" where the direction of content is not known in advance, such as form fields and text users type in. Test real mixed sentences from your own content, and the contact form with Arabic and English entries.
Custom website design Saudi Arabia: what drives cost and time
Custom work is priced on effort, and effort comes from a short list of drivers. For typical price ranges and the yearly costs around a build, see our guide to website design costs in Saudi Arabia; here we look at what moves a custom project up or down.
| Driver | Why it adds effort | How to keep it under control |
|---|---|---|
| Number of unique page templates | Each template is wireframed, designed for three screen sizes, built and tested | Reuse templates: ten service pages can share one service template |
| Languages | Bilingual means two sets of mock-ups to review, two directions to test and two sets of content | Agree which pages are bilingual at launch and which follow later |
| Content and photography | Writing, translating and photographing are separate jobs from design | Decide early who writes; supply real photos or budget for a shoot |
| Revision rounds | Every round means rework and re-approval | Name one decision-maker and send consolidated feedback |
| Integrations | Booking, CRM, payment or ERP links add design and development work | Separate must-haves at launch from phase-two features |
Time follows the same drivers, but the slowest part of most projects is not design. It is waiting: for content, for the logo files, for feedback, for a decision on which services go on the homepage. A project can stall for weeks if nobody on the client side owns approvals, so ask each provider what they need from you and when.
The design is also only one part of the bill. Hosting, the domain, updates, backups and edits continue after launch, so compare options over two or three years and check whether every figure includes VAT.
How a custom design project runs, step by step
Providers name the stages differently, but a sound custom project follows this order, and each step ends with something you can see and approve.
1. Brief and discovery
Goals, audiences, services, competitors, languages and the actions you want visitors to take. Output: a short written summary you both agree on.
2. Sitemap and content plan
The page list in both languages, who writes each page and when content is due. This is where many projects are won or lost.
3. Wireframes
Grey layouts of the key templates on mobile and desktop. Fix structure here, while changes are cheap. The thinking behind this stage is covered in our guide to UX and UI design for websites.
4. Visual design and design system
Colour, type and components applied to the approved wireframes, with Arabic and English mock-ups. The design system is documented alongside.
5. Build on a preview link
The site is built with real content on a private link, so you review it in your own browser and on your own phone, not as static images.
6. Testing
Phones and computers, both languages, forms, speed, contrast and keyboard navigation. Mixed Arabic and English text gets its own check.
7. Launch and handover
The site goes live on your domain, search engine basics are connected, and your team learns how to add pages using the approved patterns.
Mistakes that waste a custom design budget
These patterns most often turn a custom design into an expense without a return.
- Paying for originality nobody asked for. A homepage that hides the services behind animation may impress in a meeting and lose enquiries in real use. Custom should mean fitted to your visitors, not different for its own sake.
- Designing before the content exists. Layouts built around imagined copy break when the real text is longer, shorter or in a different order. Write, or at least outline, the key pages first.
- Approving desktop mock-ups only. Many visitors, especially those arriving from Google Maps or WhatsApp, will see your site on a phone first. Ask for mobile mock-ups of every template and review those before desktop; our note on designing for mobile first explains why.
- Heavy visuals that slow the site. Full-screen video, large uncompressed photos and several animation libraries can make a custom site slower than the template it replaced. Our article on why website speed drives sales shows what to watch.
- Not owning the outputs. Make sure the domain is in your name and the proposal says what happens to the design files and the site if you change provider.
- Ignoring search during the redesign. Moving from a template to a custom design often changes page addresses. Without redirects and a plan, you can lose rankings you earned. Our website redesign checklist covers the steps.
If you are still choosing who to work with, our guide on how to hire a web designer lists the questions to ask.
Custom design with Webnaa
Webnaa is a website design service based in Riyadh, working with businesses across the Kingdom remotely. We offer two routes, depending on how far your project goes beyond a standard business site.
A professional website on a subscription
For most businesses, our website design service is the practical answer, with prices from SAR 39 a month, no setup fee and no long contract, and every website priced in our price calculator by type, pages and languages. For example, a professional 5-page bilingual WordPress website built for your business is SAR 324 a month and includes:
- Up to 5 pages, each in Arabic and English, with the content written for you.
- Hosting, SSL and a standard domain registered in your name.
- A preview link within 24 hours at most from receiving all the information and content we need from you, so you see the design before launch, and a money-back guarantee if you do not like it during the design stage, per the refund policy.
- An enquiry form, gallery, map, WhatsApp button and direct call number, a fast mobile-friendly build, and search engine setup with Search Console and a sitemap.
- Technical support, fixing technical faults, security and technical updates and backups included in the subscription; you edit the site yourself from the dashboard.
A new page after launch is added to your subscription at its calculator price. Prices are paid in advance, every 6 months or for a full year with 10% off, and from year two you pay only the monthly base. The domain is registered in your name, and if you would rather own the website outright, you can buy it: the website value (one year at 10% off, without articles) plus an independence fee of 30% of the undiscounted year, SAR 4,665 for this website, including a year of hosting. Full details are in our price calculator.
Choose what you need, see your exact price
The price updates with every choice. No surprises, no hidden fees.
The calculator is off. Press the power button to start
From Zoho, a global provider with data centres in Riyadh and Jeddah. More than 10 addresses are quoted separately.
Deeper custom work by written quote
When your project needs more, such as custom features, portals or systems built in PHP or Laravel, we scope it through our custom web development service. If you already have a website that has outgrown its template, our website redesign service covers the move. Both are priced in a written quote, with scope and delivery date, before work starts. You can read how we run projects on our how we work page.
A website built around your business
See our prices from SAR 39 a month and what a WordPress website includes, then send us your business details and review the design on a preview link before launch.
Need logins, workflows or a portal rather than a website? Read custom web application development in Saudi Arabia.
FAQ
What is the difference between a custom website and a template website?
A template website uses a layout designed in advance for many businesses, with your content added. A custom website is designed for your business from a sitemap and wireframes, with its own page templates and design system. A customised theme sits between the two.
Is custom website design worth it for a small business in Saudi Arabia?
It is worth it when a template is holding the business back: the Arabic version feels second-class, the content does not fit the layout, or buyers compare you with larger firms. For a new business still testing its offer, a well-adapted template or a managed subscription is usually the better first step.
Can a custom design be built on WordPress?
Yes. Design and platform are separate decisions. A fully custom design can be built as a WordPress theme with its own styles and block patterns, so your team still gets an easy dashboard. Custom code makes more sense when you need features that WordPress plugins cannot handle well.
How long does a custom website design take?
It depends on the number of unique page templates, the languages, the content work and how fast approvals come back. Delays usually come from content and feedback rather than design. A Webnaa subscription website’s preview link is sent within 24 hours at most from receiving all the information and content we need from you.
Does a custom design help my Google rankings?
Design alone does not rank a site, and nobody can guarantee rankings. A custom design can help indirectly by giving each service a clear page, loading quickly and working well on phones. A redesign can also hurt rankings if page addresses change without redirects, so plan search as part of the project.
Summary
Custom website design in Saudi Arabia is not a single product but a choice between three levels: a template with your content, a customised theme, or a design created for your business from research. Templates are fine, and often wiser, for new businesses, simple sites and short-term needs. Custom work pays back when your brand, your bilingual audience or the complexity of your offer no longer fit someone else's layout. Whatever you choose, insist on deliverables you can see in writing, a design system that lets the site grow, Arabic treated as a first-class layout, and clear ownership of the result.
Sources: W3C Internationalization: structural markup and right-to-left text in HTML, MDN: CSS logical properties and values, WordPress Theme Handbook: child themes, Nielsen Norman Group: Design Systems 101, W3C WAI: WCAG 2 overview. Webnaa: pricing, website design service.