-
The order that gets it finished.
Sites stall in the same place every time, and it is never the layout.
Write the opening sentence.
List the sections the page needs.
Design one page, one width.
Send it over, set breakpoints.
Publish, then add the second page.
-
Three things to decide before designing
Who is the one visitor. Not a segment. One person with one reason to be on the page. Every layout decision after that gets easier.
What happens if they act. An email, a form, a booking link, a purchase. Build backwards from that and the page almost designs itself.
What you will not include. The cut list is worth writing down. A team page for a team of one, a blog you will not write, a newsletter with no plan behind it.
Then design one page at one width. Three breakpoints in Figma before anything is live is how a weekend project becomes a quarter.
Website examples, and the sections they are made of
Six kinds of small website, the sections each one needs, and roughly how long they take. Useful whether you build it here or elsewhere.
Start for free -> Personal site examples
Five sections, in this order.
Almost every small website that works is these five things arranged down a page. The differences between site types are which ones get the space, not which ones exist.
-
The opening
Who this is for and what it does, in one sentence a stranger understands. Not a slogan. If a visitor cannot repeat your sentence back after four seconds, it is the wrong sentence.
-
The proof
Work, numbers, names or screenshots. Whatever a sceptical reader would ask for after the opening. Three specific things beat ten vague ones.
-
The offer
What you actually want the visitor to do, stated once and stated plainly. A page with three competing calls to action has none.
-
The objection
The reason people do not act, answered on the page. Price, timing, whether you are available, whether it works for their case. Ignoring it does not remove it.
-
The way in
A next step that takes one click and no guesswork. An address they can copy, a form that works, or a button that goes somewhere real.
Six kinds of small site.
Each one is the same five sections weighted differently. Find the closest match and build that, rather than designing from a blank page.
The designer portfolio
Three to six pieces of work, each with its own page. The proof section is most of the site and the offer is small, because the work is doing the selling.
Pages: home, one per project, about, contact. The section that decides it: proof. Every case study opens with what was wrong before you started, or it is a slideshow.
The freelance service site
Different from a portfolio, and people conflate them constantly. This one sells a specific service to a specific buyer. The offer and the objection sections carry the page.
Pages: home, services, work, contact. The section that decides it: the objection. Say what it costs or how pricing works, and whether you are taking work this month.
The product landing page
One page, one thing to sell, one action. The opening does the heavy lifting because most visitors leave from it.
Pages: one, plus a privacy page and terms if you take payments. The section that decides it: the opening. Name the problem in the first line rather than the product.
The small studio site
A portfolio with a business attached. It has to work for a client deciding whether to email, and for a designer deciding whether to apply.
Pages: home, work, one per project, studio, contact. The section that decides it: proof, but named. Clients want to know who you have worked with, not only what you made.
The launch or event page
A date, a thing happening, and one action. It has a deadline, which makes it the easiest kind of site to finish and the easiest to leave stale afterwards.
Pages: one, sometimes two. The section that decides it: the way in. Signup, tickets or a calendar link, above the fold and repeated at the bottom.
The local business one-pager
What it is, where it is, when it is open, how to get in touch. Most visitors arrive on a phone looking for one of those four facts.
Pages: one. The section that decides it: the way in. The address, the hours and the phone number, all copyable, all near the top.
Roughly what each one takes.
Our own estimates for a designer who already knows what the site should say. They are here to keep scope honest, not because anyone measured them.
| Kind of site | Pages | Design | Build and publish |
|---|---|---|---|
| Local business one-pager | 1 | Half a day | Half a day |
| Launch or event page | 1 to 2 | Half a day | Half a day |
| Product landing page | 1 to 3 | 1 to 2 days | 1 day |
| Freelance service site | 3 to 4 | 2 days | 1 to 2 days |
| Designer portfolio | 5 to 9 | 3 to 5 days | 2 to 3 days |
| Small studio site | 6 to 12 | 1 to 2 weeks | 3 to 5 days |
Build time assumes a design tool rather than writing code, and includes the narrow layouts and the SEO fields. It does not include waiting for a client to send their logo.
Frequently asked.
What sections should a website have?
An opening that says what it is, proof that it works, a clear offer, an answer to the obvious objection, and a way in. Five sections. A site missing the objection section is the most common version of a page that looks finished and converts nothing.
How many pages does a small website need?
One to twelve, and most sit between three and six. Past that you are building a content site, and the right move is to choose a tool with a real content system rather than designing every page by hand.
How long does it take to build a small website?
For a designer who already knows what the site should say, a one-pager is about a day and a portfolio is closer to a week. The table above breaks it down. What stalls sites is almost always the writing, not the design.
Do I need a different tool for each kind of site?
No, but the kind decides what the tool must have. Anything with a blog or a case-study collection needs a content system. Anything selling needs commerce. If your site is designed pages with neither, most of what these platforms charge for is capability you will not use.
Can I publish a website designed in Figma?
Yes. Yes, on every plan including free - one-way import, no re-sync, and prototype animations and interactions do not import. Our plugin page shows the path, and the Webflow route is written up separately.
What does it cost to put a small site online?
A domain is roughly $10 to $20 a year, and publishing on your own domain starts from $7/mo billed yearly here, $10 a month on Framer and $15 on Webflow. Framer and Webflow also have free plans that publish to their own subdomain with a badge on it, which is fine for a test and rarely fine for real. Siter.io does not: no - the free plan builds and previews privately; publishing needs a paid plan.
-
You have the design. Publish it.
Siter.io takes a Figma frame and turns it into a live website with your own domain. The free plan builds and previews as much as you like; publishing starts at $7/mo billed yearly.
Get the plugin -> -
Start for free with Siter.io
Start for free ->