Website design from brief to finished mockups

Custom web design is the stage clients look forward to, and also one of the stages that most often run over. Everything before it is abstract, everything after it is technical, and this is the part where the site finally becomes something you can look at and have an opinion about.

That is also why it goes wrong. Opinions arrive without a framework, revisions multiply, and a stage planned for three weeks takes seven.

What a designer asks at the start

The brief is not paperwork. The questions in it determine whether the first version is close or wide of the mark.

• Who the visitor is. Their situation when they arrive, not their age bracket.
• What they should do. One action per page type.
• Which competitor sites you like. And specifically what about them.
• Which you dislike. Often more informative than the first list.
• What is fixed. Logo, colors, an existing brand guide.
• What content exists. Real text and photographs, or none yet.

The two questions people answer badly are the third and fourth. Answering with a list of links and nothing else forces the designer to guess what you were pointing at. Saying that one competitor’s site is liked because the price is visible on the first screen, and another is disliked because there are three steps before any contact detail, is worth more than twenty links.

The last question decides the whole schedule. A design made against real text fits it. A design made against filler text is a picture, and when the real text arrives it does not fit, which is a rebuild rather than a revision.

The wireframe and why it comes before the visuals

The wireframe is the layout without any styling. Gray blocks, real headings, actual proportions, no colors and no images.

It exists so that the argument about structure happens before any effort has gone into appearance. Moving a block in a wireframe takes minutes. Moving the same block after the design is finished means redoing everything around it.

It also separates two conversations that otherwise collide. Whether the price should be visible before the description is a business question. Whether the heading should be that particular gray is a taste question. Discussing both at once means the business question loses, because taste is easier to have an opinion about.

Clients sometimes ask to skip the wireframe because it looks unfinished and unimpressive. Skipping it is possible, but it moves the structural argument to the most expensive point in the process.

The first screen and the home page

The home page takes the longest and carries the most disagreement, because everyone in the company wants something on it.

The first screen answers what you do, for whom, and what to do next. Everything else on the page supports that, and the most common failure is trying to fit the entire company onto it.

The specific temptations are consistent. A rotating slider, because it lets three departments each have their message. A large abstract image, because it looks designed. A long paragraph about the company, because someone wrote it and it must go somewhere. All three push the actual point below the fold.

What earns a place on the first screen is a short list, and it is the same on most business sites.

• What you do, in plain words. Not a slogan.
• For whom, or where. Narrow beats broad.
• One reason to keep reading. A price, a term, a guarantee.
• The action. A button visible without scrolling.
• A way to reach a person. Phone or messaging app, visible.

The useful test is to look at the first screen on a phone and ask whether somebody who has never heard of you would understand what is being offered. If not, no amount of styling below will recover it.

Inner pages and the templates behind them

How many unique mockups are actually needed

Clients count pages and designers count templates, and the cost of design depends mainly on the number of unique templates rather than the total page count.

A site with thirty pages usually needs seven or eight designed templates. The home page, a service page, a list page, an article page, an about page, a contact page, and one or two special cases. Every other page is one of those filled with different content.

The number matters because each template is designed, reviewed and then built, and each one that is genuinely unique adds to all three. A request for every service page to look different sounds like personalization and costs several times more while making the site harder to navigate, because visitors learn a layout once and then expect it.

The empty list, the error page, and the thank-you page

These three get forgotten in almost every project and each one is a moment when the visitor is already unsettled.

The empty list is what a page shows when there is nothing to show. No search results, an empty cart, a filter that matched nothing. Undesigned, it is a blank area that reads as a broken site.

The error page is what appears when an address does not exist. Undesigned, it is the hosting default, which looks like the site is gone.

The thank-you page is what appears after a form is submitted, and it is the most valuable of the three. It confirms the inquiry arrived, sets an expectation about when a reply will come, and it is the simplest place to record a conversion.

The mobile layout

Most traffic is mobile, and mobile is still routinely designed last or not at all.

Designing the desktop version first and adapting it afterwards produces a mobile version that is a compressed desktop. The alternative is to plan the mobile layout at the wireframe stage, deciding what is dropped, what is reordered and what becomes a collapsed section.

• What is dropped on a small screen. Decorative elements, secondary blocks.
• What moves up. Contact, price, the main action.
• How the menu behaves. And how many items it holds.
• How tables and long lists work. They rarely translate directly.
• How large the tap targets are. Fingers are not cursors.

The item most often missed is the fourth. A price comparison table that works on a desktop becomes unusable at phone width, and the answer is a different arrangement rather than a horizontal scroll bar.

How long custom web design takes

Those figures assume the content exists and the client responds within a couple of days. Neither assumption holds often, and the usual cause of a schedule doubling is not the design work but the gaps between rounds.

The single largest accelerator available to the client is answering quickly and in one message. Feedback arriving in five separate messages over eight days turns a two-day revision into a two-week one.

What is handed to the build

The mockups are not the deliverable by themselves. What goes to the developer is a set.

The full handover set is worth listing, because a missing item here becomes a question during the build and a delay.

• Every template at two widths. Desktop and phone at minimum.
• How elements look in each state. Hover, focus, error, disabled, loading.
• Fonts with licenses. Web use has to be covered.
• Images at the right sizes. Not one large file scaled down in the browser.
• Color and spacing values. Written down, not measured off the picture.
• Icons as vectors. So they stay sharp at any size.

This part of the work belongs to corporate website development as a single process rather than to design as a separate purchase, which is why a design bought from one supplier and built by another so often needs a week of reconciliation before the build can start.

What usually gets missed is how elements look in their different states. What a button looks like when hovered, what a field looks like when the input is wrong, what a menu looks like when open. If they are not delivered, the developer invents them, and the result is a site that is slightly different from the design in twenty small ways.

This is also the point where the design should be checked against what the pages will actually contain, which is why the structure work described in our article on corporate website structure belongs before the design rather than after it.

How to review mockups and how many revisions to expect

Two rounds is the normal allowance and it is sufficient when the reviews are structured. How many rounds the work covers belongs in the contract before the project starts. The first two are included and anything beyond them is quoted separately. This limit protects against an endless loop where every new round reopens what was already agreed.

The first round is for structure and content. Is anything missing? Is the order right? Does the emphasis fall in the right place? The second is for detail. Wording, spacing, specific colors.

Reversing that order is what produces five rounds. Approving the appearance first and then noticing that a section is missing means the appearance work is redone.

• Collect all feedback in one message. Numbered, per page.
• Say what the problem is, not the fix. The designer solves it better.
• Decide who has final say. Before the review, not during.
• Look at it on a phone. Not only on your monitor.
• Separate must-change from preference. They get treated differently.

The second item is the one that changes outcomes. Saying that a button should be red is an instruction. Saying that the button is hard to find is a problem, and a designer given the problem usually solves it in a way you would not have thought to ask for but end up preferring.

What to do about photographs

Photographs decide more of the impression than the layout does, and they are usually the last thing anyone thinks about.

Stock images of generic offices and models are recognizable to visitors and they undermine everything else. Real photographs of your premises, your team and your work outperform them even when the technical quality is lower.

The worst option is to mix the two, with real photographs in some blocks and stock images in others. Settle the photo question at the wireframe stage, so the designer does not draw a block for a panoramic shot you do not have.

If a photo session is not possible, the honest fallback is fewer images and more space rather than filler. A clean page with three real pictures reads better than a busy one with twelve borrowed ones.

Mistakes that cause the design to be redone twice

Four recur consistently.

Designing against filler text and receiving the real text afterwards. The real text is always a different length, and the layout that was built around the placeholder does not hold it.

Reviewing by committee with no decision maker. Five people give contradictory feedback, the designer implements a compromise, and nobody is satisfied.

Approving a desktop design without looking at the mobile version. The problems surface after the build, when they are development problems rather than design ones.

Changing the structure after the design is approved. Adding a section that was not in the wireframe means reopening the template it lives in, and often the ones around it.

What it costs

Design does not usually come as a separate line. It is part of the project, and the project tier reflects how much of it is individual work.

A company site on a prepared template with your content and branding costs from $1,000 to $2,000. A site with a fully custom design across several templates is from $2,000 to $3,000.

The difference between the tiers is mostly the number of unique templates and how much of the design is made from scratch rather than adapted. What moves the figure across a whole project is laid out in our article on what determines the cost of website development, and design is one stage inside it rather than a separate contract.

What to have ready before the first conversation, so the brief stage does not itself take three weeks, is listed in our article on what to prepare before talking to a studio. What to check when the finished site is handed over is in our website handover checklist.

Conclusions

The design stage runs on schedule when the structure is settled before the appearance, when the text is real rather than placeholder, and when one person on the client side has final say.

The number that matters is templates rather than pages, and reducing the count of genuinely unique ones is the single cheapest way to shorten the stage without making the site worse.

If you are about to start and want to know how many templates your site actually needs, send us the page list you have in mind or the address of the site you are replacing. We will group it into templates and say which of them need a custom design and which can share one. Based on the template count, we will give you a duration and tell you what the site will cost.