Website design that matches the brand you paid for.

Desktop, tablet and mobile layouts built from your real palette, type scale and lockups, handed to a developer as a component library with notes, not as a flat picture of a website.

The site is where most brands quietly stop.

A business commissions a logo, gets a set of files, and is pleased with them. Then the website gets built, and the developer, with no palette to work from and no type scale to follow, picks the closest colour off a screenshot and a font that looked similar. Nothing about that is negligent. It is what happens when the only brand asset handed over was a logo, and it is why so many businesses have a brand that is correct on a business card and approximate everywhere that actually gets traffic.

Website design, done properly, is the step that closes that gap. It is not decorating a template and it is not a picture of a homepage. It is the work of taking a specified identity: the real HEX and Pantone values, the real type scale, the real lockups and clear-space rules, and resolving it into layouts that hold at every width, then documenting those layouts as reusable components so the build matches the design rather than approximating it.

The distinction that matters commercially: what is sold here is design, not development. You receive layouts and a component library ready for a developer, not a live deployed website. That line is stated plainly on this page and in the FAQs below, because it is the single most common bad surprise on this kind of purchase, and a buyer who expected a working site is a failed project no matter how good the design was.

What you receive

Layouts, components and the notes to build from.

Everything drawn against your existing brand system. If you do not have one specified yet, that is the job above this one, the brand identity page covers the sequence.

The component library is the part that separates this from a set of pretty screens. A developer receiving flat images has to infer every spacing rule, every hover state and every breakpoint behaviour, and will infer some of them differently from how they were drawn. A library states them, which is why the built site ends up looking like the design instead of like a good-faith approximation of it.

Start a website design project
  • Desktop, tablet and mobile layouts
  • Reusable component library
  • Developer handoff notes
  • Editable source files
  • Accessibility and contrast checked
Inside the PROCANIS brand guidelines, page 3, covering logo usage, colour values and type rules Inside the PROCANIS brand guidelines, page 5, covering logo usage, colour values and type rules Inside the PROCANIS brand guidelines, page 7, covering logo usage, colour values and type rules

Scope

Where design ends and development begins.

Set out as a table rather than a paragraph, because this is the line every dispute on a website project is actually about. Read it before you brief, not after.

You receive: the design.

Desktop, tablet and mobile layouts for every page in scope. A component library: buttons, cards, forms, navigation, type styles, with spacing and states defined. Handoff notes covering breakpoints and behaviour. Editable source files, and the signed copyright transfer.

You do not receive: a live site.

No code, no hosting, no domain configuration, no CMS setup and no deployment. If you need a built and running website, you need a developer as well as this, and it is a much better conversation to have at brief stage than at handover.

Why we do not just include the build.

Because doing it badly is worse than not doing it. A studio that designs well and codes adequately produces a site that is slow, hard to maintain, or both. Your developer builds it properly from documentation that leaves nothing to guess, and you own both halves.

What your developer actually gets.

Named layers, defined spacing tokens, stated breakpoints, every interactive state drawn, and notes on what should reflow versus what should reposition. Enough that the questions during the build are about implementation rather than intent.

Website design, in plain numbers.

Layouts per page
Desktop, tablet, mobile
Component library
Included, with states
Handoff notes
Included
Source files
Editable, yours
Revisions
Unlimited
Development
Not included, design only
Copyright
Signed transfer, every project
Average reply time
about an hour

How it runs

From brand system to buildable design.

Five stages. The first one is the one people want to skip, and skipping it is what produces a site that does not look like the brand.

  1. 01

    Establish what the brand actually specifies

    Before anything is drawn we need the real values: palette in HEX, the type scale, lockups and clear-space. If those exist in a guidelines document, send it. If they do not exist, this is the gap, and designing a site on top of it just moves the problem onto the web.

  2. 02

    Structure before surface

    What pages exist, what each one is for, and what a visitor is meant to do on it. A beautiful layout for the wrong page structure is an expensive way to fail. This stage produces a sitemap and a page-by-page intent list, and it is quick.

  3. 03

    Desktop layouts, drawn against the system

    The main layouts, using the specified palette and scale rather than approximations of them. Presented in context with the reasoning written beside them, the same way logo concepts are.

  4. 04

    Tablet and mobile, reflow decided, not inherited

    Every element gets an explicit decision: does it reflow, reposition, collapse or disappear. Left implicit, a developer decides it, and that is how a carefully designed section turns into a stack of full-width blocks on a phone.

  5. 05

    Component library and handoff

    Layouts resolved into reusable components with spacing, states and breakpoints defined, plus handoff notes. Then the source files and the signed copyright transfer go over together.

Fit

Who a website design project is actually for.

Right for you if you have a brand and need it on the web properly.

A business with a specified identity whose current site does not reflect it, one rebuilding after a rebrand, or one launching where the site should be designed from the system rather than assembled from a template. Also right if you have a competent developer and no designer. That pairing works well, and it is the one this handoff is built for.

Probably not, if you need a built site or you have no brand yet.

If what you actually need is a working website by Friday, you need a developer or a site builder, not a design studio. And if there is no specified brand to design from, start with the identity, a site designed against an unspecified brand is a set of decisions someone will have to make again.

Scope

What website design does not include.

The same list as the scope table above, stated again in the place buyers actually read before briefing.

Development, hosting and deployment.

No code is written, no server is configured, no domain is pointed. You receive designs and documentation. This is the line, it is not negotiable within this service, and it is much cheaper to discover here than at handover.

Copywriting.

We design around the words you supply and will tell you when a section has more copy than the layout can carry or too little to justify itself. Writing the content is a separate discipline. Layouts designed against placeholder text break when real text arrives, so send real text.

SEO, analytics and ongoing maintenance.

The designs are structured sensibly: real heading hierarchy, sane content order, but technical SEO, tracking and maintenance are implementation concerns that live with whoever builds and runs the site.

Questions

The ones people actually ask.

Do you build the website or just design it?

Design only. You receive desktop, tablet and mobile layouts, a component library and handoff notes, not a live site. It is stated three times on this page because it is the assumption that most often goes wrong on this kind of purchase. If you need the build too, brief us with that in mind and pair us with a developer.

Can my developer work from what you deliver?

That is what it is built for. They get named layers, defined spacing, stated breakpoints, every interactive state drawn, and notes on reflow behaviour. Most of the friction in a design-to-build handoff comes from intent that was never written down, so it is written down.

Do I need brand guidelines before a website design?

You need the values a guidelines document contains: palette, type scale, lockups, clear-space. If they are already specified anywhere usable, that is enough. If they are not specified at all, designing the site means inventing them on the fly, which produces a website that does not match anything else you own. The <a href="/services/brand-guidelines/">guidelines page</a> covers what a proper specification includes.

Who owns the website design files?

You do, in writing, the same signed copyright assignment that comes with every project here, covering the layouts, the component library and the editable sources. Worth checking on any design purchase: owning a rendered image of a website and owning the editable design are very different things, and only one of them lets you change suppliers.

We are rebranding. Should the site be redesigned at the same time?

Designed after, not at the same time. The site should be drawn from the finished system, running both in parallel means the layouts get built against a palette and type scale that are still moving, and everything gets redrawn. <a href="/blog/rebrand-vs-refresh/">Rebrand or refresh</a> covers how much of the identity is actually changing, which decides how much of the site has to.

How many pages does a website design project cover?

Whatever is in scope, agreed at brief stage. Most small business projects are a homepage plus four to eight inner page types, and it is page TYPES that matter, not page count, because forty pages built from six templates is six designs. Tell us the structure and we will quote the templates.

Do you design in Figma?

Yes, and handoff is set up for it. If your developer prefers something else, say so at brief stage rather than after, exporting between tools loses layer structure and spacing tokens, which are precisely the things that make the handoff worth having.

Will the site design match my logo exactly?

It will match the specified system exactly, which is a stronger claim. Exact means the same HEX values, the same type scale and the same lockup proportions, not visually similar. That is the entire reason to design a site from a brand rather than alongside one.

Also from this studio

Get the brand onto the web properly.

Send your guidelines or whatever brand files exist, and say what pages are in scope and who is building it. You get questions, a page-type list and a quote back. Average reply time about an hour, no charge for the conversation.

Start your project