Two jobs sharing one search phrase
Search "website design vs web development" and you will find definitions that sound tidy on paper and fall apart the moment three South African suppliers quote the same brief. One supplier prices a Figma homepage. Another prices a CMS-backed marketing site. A third prices custom logic and calls it "design." The labels sound similar. The deliverables are not.
Website design is the craft of structure, hierarchy, visual system and conversion-facing layout: what a visitor sees, understands and trusts in the first few seconds. Web development is the craft of making that experience real in a browser: templates, CMS, forms, integrations, performance, accessibility and handover. You can buy either without the other. Most SMEs should not.
Nexus runs combined design-and-build programmes for most SME marketing sites, with platform packages from R3,000 (Launch), R5,500 (Business) and R8,000 (Pro). Custom web development starts from R5,000 when unique workflows justify engineering. Ecommerce builds start from R7,500. Treat those as scoped entry points, not a promise that every business needs the same mix.
Design vs development at a glance
Website design
How it persuades- Information architecture and page structure
- Visual hierarchy, type, colour and UI states
- Conversion placement: CTAs, proof, forms
- Incomplete without a build plan
Web development
How it works- Templates, CMS and editable structure
- Forms, WhatsApp paths and integrations
- Performance, QA, redirects and launch
- Incomplete without clear design decisions
| Question | Usually design | Usually development |
|---|---|---|
| Where should the primary CTA sit on mobile? | Yes — layout and UX decision | Implements the responsive behaviour |
| Can a marketer edit service pages without code? | Defines content modules and hierarchy | Builds the CMS fields and permissions |
| Does the enquiry reach our inbox or CRM? | Specifies the conversion path | Wires forms, notifications and routing |
| Will the site keep rankings after a redesign? | Informs URL and content structure | Owns redirects, crawl checks and launch QA |
What website design actually includes (when it is honest)
Honest design scope starts with the commercial job: who should enquire, what must be obvious on the homepage, and which pages need unique layouts versus reusable templates. From there it covers wireframes or high-fidelity mockups, responsive states, component consistency and the conversion mechanics that sit on the page — not decoration layered on afterward.
Design also absorbs brand readiness. If logo, type, colour and messaging are unfinished, exploratory UI becomes expensive discovery work. Settle a basic identity system first, or price brand work as its own line, so website design is not quietly rebuilding itself every time stakeholders change their minds.
What design does not magically include is a live, editable website. A polished Figma file with no build plan, CMS model or QA path is a direction document. Useful — incomplete. If your goal is a working marketing site, read the web development service as a design-and-build conversation, not a mockup purchase.
What web development actually includes (when it is honest)
Honest development scope turns approved design decisions into templates that work on real devices, under real network conditions, with real content. That means CMS structure, form behaviour, analytics events, redirects on migration, accessibility basics and a handover that leaves domain, hosting and accounts under your business name. See web development for how Nexus frames that delivery.
Development also owns the boring reliability work: mobile QA, broken-form checks, thank-you states, CRM or email routing, and performance issues caused by heavy images or third-party scripts. None of that shows up in a hero screenshot. All of it decides whether the site converts after launch.
Custom development starts to matter when the site behaves like a product: portals, configurators, role-based data or workflows that page builders cannot responsibly hold. For a straightforward service-business marketing site, platform development plus strong design is usually the calmer path.
How South African quotes typically mix (or muddle) the two
| Quote type | What you often get | Risk if misunderstood |
|---|---|---|
| Design-only | Mockups, maybe a style guide, no live site | You still need a build budget and a developer who can implement affordably |
| Build-only | Implementation from your existing designs or a template | Weak IA or unclear messaging gets locked into code |
| Design + build (combined) | One programme from brief to launch | Scope must still name templates, content owner and integrations |
| Custom / product build | Engineering around unique workflows | Paying custom rates for a marketing site you could have launched on a platform |
A simple decision path for SME buyers
- Name the outcomeOne sentence: who should enquire, book or buy, and what must work on launch day.
- Check brand readinessLogo-only is rarely enough. If type, colour and messaging are unresolved, settle them before deep UI.
- Decide design-only, build-only or combinedCombined is default for most SMEs. Design-only only if a build team already exists. Build-only only if designs are approved and buildable.
- Count unique templates and integrationsTemplates and conversion wiring move price more than navigation item count.
- Compare quotes on the same sheetOutcome, templates, content owner, design vs build lines, support and exclusions — then look at price.
Red flags when design and development are blurred
- One price for an undefined “full website” with no stage breakdown
- Beautiful mockups with no CMS, QA or mobile testing mentioned
- “Unlimited pages” with no unique-template count
- SEO rankings or lead volume promised inside a design fee
- Ownership of domain, hosting and analytics left unspoken
- Custom development recommended without a workflow that needs it
- Monthly price with no disclosed 12-month total
You do not need to become a designer or a developer. You need every proposal to name which job it is selling — and which job it is quietly leaving out.
Nexus design vs development principle
When to buy design first, build first, or both together
Buy design first when an in-house or existing vendor will implement, or when information architecture is genuinely unsettled and you want to freeze structure before engineering spend. Keep the design buildable: ask which platform it targets and whether animation or one-off layouts will explode the build budget.
Buy build first only when the visual system is already decided and documented — brand guidelines, approved layouts, content ready. Otherwise developers invent structure under time pressure, and you pay for redesign later.
Buy both together when you want one accountable programme from brief to launch. That is the default for most South African SMEs comparing agencies. Use a short brief, or the Growth Plan quiz, to make the outcome concrete before anyone quotes. A free homepage mockup (around 48 hours at Nexus) is a low-risk way to test direction before you fund the full scope.
How this maps to choosing an agency
Agencies that only show portfolio polish are answering the design question. Agencies that only talk stack and plugins are answering the development question. You need both answers, plus process, ownership and support. Our companion guide on choosing a web design agency in South Africa covers the diligence checklist in more depth.
Ask who designs, who builds, and who fixes a broken form three months later. If those answers are vague, the design-versus-development distinction will stay fuzzy in the contract too — and fuzzy contracts become second invoices.
Price still matters, but only after scope is comparable. Two quotes at different rand figures for the same named templates, content ownership and integrations are worth debating. Two quotes that mean different jobs are not a price comparison at all.
Where to go from here
If you are still naming the job, write a one-page brief: outcome, must-have pages, brand assets, integrations and launch deadline. If quotes already exist, force a design-versus-build split on each one before arguing about which homepage "looks nicer."
Nexus can map Launch, Business, Pro, custom or ecommerce once the commercial job is clear — and can start with a free homepage mockup when you want direction without a full commitment. Start at web development or take the quiz linked below.
Keep the signed scope as your change-control baseline. Mid-project ideas get classified as in-scope, deferred or re-quoted. That habit keeps design and development honest for the whole project, not only the pitch.
