WordPress website design your editors can use without breaking anything
Designing for WordPress is not the same as designing a picture of a website and hoping WordPress can produce it. The block editor has real constraints, and designing with them is what keeps a site consistent two years in.
What is WordPress website design?
WordPress Website Design is designing a site specifically for the WordPress block editor: a block library, theme.json design tokens, layout patterns and an editing experience your team can use safely. It suits Australian organisations that publish regularly and want design consistency enforced by the system rather than by a document nobody reads.
Get a fixed written quote- Typical timeline
- 4 to 7 weeks
- What drives cost
- Depends on the number of blocks and content types, whether patterns are in scope, and how many stakeholders review.
- Best for
- Content heavy sites edited by marketing staff rather than developers
- You own
- Design files, the token set and the documented block library
- Built with
- Figma, native block patterns, theme.json tokens, WCAG 2.2 AA
Your handover
Designing for the block editor instead of fighting it
A lot of WordPress disappointment starts in design. A studio produces layouts with no knowledge of how the block editor composes a page, hands them over, and a developer either builds an unmaintainable pile of one-off templates or reaches for a page builder to force the shapes into existence. Both outcomes cost you later, and neither was necessary.
- 01Block inventory with justified variations
- 02Design tokens specified for theme.json
- 03Mobile-first wireframes composed from real blocks
- 04Visual design for every block and state
- 05Pre composed page patterns for common needs
- 06Template designs for each content type
- Editor help text and block naming
- Accessibility annotations to WCAG 2.2 AA
- Developer handover pack and walkthrough
- Custom theme built to your design system
What are the repeatable units of this site
Designing for WordPress properly means thinking in blocks and patterns from the first wireframe. What are the repeatable units of this site. What variations does each one need. Which combinations are allowed and which are not. How does a section behave when an editor puts it directly after an identical one. Those questions have answers in Figma and they cost nothing to settle there. Answering them in production, after an editor has already published fourteen pages, is where the awkward compromises come from. The engineering side of that is WordPress development, and the two stages should be designed to meet.
Blocks are named the way your team talks, not the way a developer thinks.
Your editors are users too, and nobody designs for them
Almost all website design attention goes to the visitor. Meanwhile a staff member spends several hours a week inside the admin, and their experience determines whether the site stays good. If publishing a case study means choosing between nine similar blocks, guessing which image ratio is right and previewing something that does not match the live page, the site degrades steadily no matter how strong the front end design was.
Blocks are named the way your team talks, not the way a developer thinks
So we design the authoring experience as a deliverable. Blocks are named the way your team talks, not the way a developer thinks. Each one carries placeholder content that demonstrates its intent and help text stating what it is for and when not to use it. Image fields state the ratio and minimum dimensions. Blocks that should not sit next to each other are prevented from doing so. Editor previews resemble the published page closely enough to be trusted. The measurable outcome is that a new staff member can publish correctly on their first afternoon without asking anyone.
- Blocks named in plain language, not developer shorthand
- Help text on every block stating its purpose and its limits
- Placeholder content that shows the intended use
- Image ratios and minimum sizes stated in the field
- Allowed and disallowed block combinations defined
- Editor preview close enough to the real page to rely on
How the engagement runs
How a WordPress design project runs
We run the same reviewable stages as any design project, with two WordPress specific additions. First, the block inventory is agreed before visual design, because it is the thing that determines both build cost and editing experience. Second, we design a set of page patterns, which are pre composed arrangements of blocks that let an editor create a complete campaign page in a few minutes rather than assembling it from parts and getting the rhythm wrong.
- 01Content auditWhat you publish, how often and who publishes it
- 02Block inventoryThe repeatable units the site needs, with the variations each one genuinely requires
- 03WireframesTemplates composed from the inventory, so no layout depends on a block that does not exist
- 04TokensColour, type scale, spacing and layout widths specified for theme.json
- 05Visual designBlocks designed with every variation and state, then templates assembled from them
- 06PatternsPre composed page arrangements for the pages your team creates most often
- 07Editor documentationBlock names, help text and a short screen recording per content type
Two decisions on your side that keep the project moving
The other discipline is restraint. Clients frequently ask for more block variations than they will ever use, and every extra one is build cost, another choice in the editor and another thing to maintain. We push toward a smaller library with well chosen options. If a variation gets used twice a year, it should be a pattern rather than a block.
The comparison
Native blocks compared with a page builder design
Page builders are not universally bad and we do not pretend otherwise. They exist because a sole operator with no developer needs to build a page today. The trade offs change once an organisation has a marketing team, a brand to keep intact and a site expected to last several years.
Consideration
Native block design
- Brand consistency
- Enforced by tokens and constrained options
- Page weight
- Only what the blocks on that page need
- Editor freedom
- Compose from defined blocks, hard to break
- Cost curve
- Higher at design, lower per page afterwards
- Portability
- Standard WordPress that any developer can maintain
Page builder design
- Brand consistency
- Depends on every editor remembering the rules
- Page weight
- Builder assets loaded across the site regardless
- Editor freedom
- Move anything anywhere, which is freedom and risk together
- Cost curve
- Lower at design, rising as workarounds accumulate
- Portability
- Tied to the builder plugin and its future
Where the choice usually lands
Read the comparison as a description of who carries the cost and when. Builder designs are cheaper to start and get more expensive with every page added. Native block designs cost more upfront and get cheaper as the site grows, because the system does the enforcing rather than a person.
theme.json is where the design system becomes enforceable
WordPress lets you define a site's colours, typography, spacing and layout constraints centrally in theme.json, and to restrict what editors may change. This is the most underused feature in modern WordPress and it is the difference between a brand that holds and one that drifts. If your palette exists only in a PDF, someone will eventually pick a colour from the wheel because it looked close enough on their monitor.
More on theme.json is where the design system becomes enforceable
We deliver tokens designed for that file: a named colour palette with contrast checked pairings, a type scale with fluid sizes rather than fixed pixels, a spacing scale, and content width rules. Then we decide together what editors may override. Usually the answer is that they can choose from your palette but cannot enter arbitrary values, can pick from your type scale but cannot set point sizes, and can adjust spacing in defined steps only. Editors sometimes assume this will slow them down and generally report the opposite, because most of those decisions were never theirs to make and removing them removes the hesitation.
When a premium theme is genuinely enough
If you publish a handful of pages a year, have one person maintaining the site and no strong brand system to protect, a well built commercial theme with careful configuration will serve you. The money saved is better spent on content or on getting found. We give this advice regularly, and the tell is usually that nobody has requested a new page in eighteen months.
The rest of the answer
Custom WordPress design earns its cost when several people publish, when brand consistency has commercial value, when you run campaigns needing new pages at short notice, or when your content has structure a generic theme cannot express. If the last one is your situation, the deeper question may be content modelling rather than design, and that leads toward custom CMS work or a headless setup. And if the site is not really a publishing platform at all, a conventional design system on another stack may fit better.
How we scope it
Four ways to scope your WordPress Website Design project
We do not publish package prices, because the same brief can be a short build or a long one. These are the shapes the work usually takes. Tell us which one sounds like you and you will get a fixed written quote that spells out exactly what it covers.
Essentials
The core of it, scoped and quoted
Fixed written quote, agreed before work starts
- Block inventory with justified variations
- Design tokens specified for theme.json
- Mobile-first wireframes composed from real blocks
- Visual design for every block and state
Growth
The version most businesses need
Fixed written quote, agreed before work starts
- Everything in Essentials
- Pre composed page patterns for common needs
- Template designs for each content type
- Editor help text and block naming
Platform
The largest version, built around your operation
Fixed written quote, agreed before work starts
- Everything in Growth
- Accessibility annotations to WCAG 2.2 AA
- Developer handover pack and walkthrough
- Custom theme built to your design system
WordPress Website Care
Ongoing support once it is live
Rolling monthly, quoted in writing
- A named engineer rather than a ticket queue
- Patching, monitoring and a tested backup
- Changes and improvements worked through monthly
- Rolling, cancel with 30 days notice
These are shapes, not menus. Most quotes end up somewhere between two of them, and we will say so when the honest answer is the smallest one. Describe the problem and we will tell you which it is.
Questions buyers usually ask
Frequently asked questions
Scope and timeline
How long does WordPress website design take?
Typically 4 to 7 weeks to developer handover. The block inventory and wireframes take the first two weeks or so, visual design the middle, and patterns plus editor documentation the remainder. Sites with many content types take longer, though the delay is usually content preparation on your side rather than design. We set a content deadline in week one for that reason.
How long does a custom WordPress build take?
Between 3 and 7 weeks for most business sites once the design is approved. Theme and block development is the largest slice, followed by content modelling and migration of existing pages. Sites with heavy content volumes take longer, though usually because content preparation on your side is the bottleneck rather than development. We agree a content deadline in week one for that reason.
Cost and quoting
What does WordPress design cost?
It depends on the number of blocks and content types, whether patterns are in scope, and how many stakeholders review. A marketing site with twelve blocks and four templates is a small project. A site with several content types, an events structure and role-based publishing is not. A scoping call first, then a written quote at a fixed number.
Is WordPress cheaper than a custom built site?
Usually at build time, and that is a legitimate reason to choose it. The saving comes from not rebuilding an admin interface, a media library and a permissions system that already exist and work. Ongoing costs are different: WordPress needs regular patching and a hosting environment tuned for it. We quote both the build and a realistic maintenance scope in writing so the comparison is honest.
Working with us
Can you design for our existing WordPress site?
Often, yes. If the theme is sound, a design pass updating tokens, typography and spacing can transform the look without a rebuild, and it can be applied progressively. If the site runs on a heavy page builder, we will be straight with you: designing native blocks then leaving the builder in place gives you the cost of both approaches and the benefit of neither.
Will our team actually be able to build new pages?
That is the design goal and we test it before handover. Patterns mean a campaign page starts as a complete arrangement rather than an empty canvas, and constrained tokens mean nobody has to guess at spacing or colour. In practice a marketing coordinator can produce a solid landing page in under an hour once the library exists, without a developer being involved.
Detail and edge cases
Do we own the design files and tokens?
Yes. Figma files, the token specification, exported assets and font licences transfer to your business at handover. Any WordPress developer can implement from the pack, which is deliberate. We avoid proprietary tooling in the design layer precisely so the work is not locked to us or to a particular builder plugin.
Do you handle the build as well as the design?
We can, and design plus build as one project removes the handover gap entirely. If you have a developer already, we hand over an annotated pack written for that scenario and stay available during implementation. Either way the technical decisions about themes, plugins and hosting are covered in our WordPress development work rather than assumed.
Related services
Get a fixed written quote for your WordPress design
Tell us what you publish and who publishes it. We reply within one business day with a block inventory sketch and a fixed written quote if it is a fit.