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

Twenty templates, as whole pages.

These are Siter.io’s own templates rather than other people’s sites. Each one is shown as a whole page rather than a thumbnail, so hover a card to scroll it or open it at full size — then read on for the sections underneath them. What each one is for.

  • App landing page template for Siter.io — A mobile app that needs somewhere to send store traffic

    Apps and software

    App landing page template

    A dark hero with the phone held over full-bleed photography, then everything an app listing asks for underneath - a six-tile feature grid, a watch section, a video walkthrough and reviews with stars.

    Hero with both store badges, six-icon feature grid, product gallery, watch support, video carousel, four reviews, second download block, three blog cards, newsletter

  • Art gallery website template for Siter.io — An exhibition, a collection or a show with a date on it

    Art and culture

    Art gallery website template

    Built for artwork rather than around it. The headline sits over the first piece, works run down the page in a deliberately uneven two-column rhythm, and the shop at the bottom credits every artist by name.

    Dated headline over artwork, staggered work grid, full-width carousel with caption, member preview with times, four collections, artwork shop with artist credits, stacked social footer

  • Book landing page template for Siter.io — One book, one download, one clear ask

    Books and launches

    Book landing page template

    A split hero puts the cover on color and the offer on white. Below it the page does the job a book page has to do - what you will learn, who wrote it, and what is actually in each chapter before anyone is asked to download.

    Split hero with cover, four-tile benefits, author panel with portrait, chapter-by-chapter contents, three testimonials, eBook and paperback download blocks

  • Online course website template for Siter.io — A catalog of lessons that needs browsing, not scrolling

    Courses and education

    Online course website template

    Faces float around the headline so the page reads as people before it reads as product. The course grid is the center of it, six cards deep with a play badge on every thumbnail.

    Hero with floating avatars, three-step joining process, three counters, six-card course grid, nine-topic index, single testimonial, closing card

  • Digital product store template for Siter.io — Files sold by the pack - presets, wallpapers, templates, assets

    Digital products

    Digital product store template

    The longest page in the set, and the most commercial. Featured work sits in a priced mosaic, then categories, then a full product page with a specification table and two masonry galleries.

    Featured mosaic with prices, three category rows with cart buttons, full pack detail with spec table, two masonry galleries, discounted offer, newsletter

  • Crypto website template for Siter.io — A market product where the numbers are the argument

    Finance and crypto

    Crypto website template

    Dark, with geometric shapes drifting in the margins. Live-looking price cards sit directly under the headline, and the page keeps returning to figures - totals, percentage moves, sparklines.

    Hero with floating shapes, three coin cards with percentage moves, three headline totals, four-tile explainer, sparkline rows, NFT showcase, three alternating profiles

  • Medical clinic website template for Siter.io — A practice where people arrive wanting hours and a phone number

    Clinics and practices

    Medical clinic website template

    The practical answers are the first thing under the hero, in a dark panel that holds opening hours, appointments and an emergency number. The rest builds trust - named practitioners, a dated timeline, published studies.

    Photo hero, hours and emergency panel, three services, named practitioner feature, year timeline with video, booking form over photo, three dated studies, address block

  • Link in bio template for Siter.io — A profile link that has to hold more than one destination

    One-screen pages

    Link in bio template

    The only single-screen design here. A verified-style avatar on a soft gradient, six wide buttons each carrying its own thumbnail, and a row of social icons. It ends where the screen ends.

    Avatar and handle, six thumbnailed link buttons, social icon row

  • Typographic portfolio template for Siter.io — A designer whose name should be the loudest thing on the page

    Portfolios

    Typographic portfolio template

    One enormous word across the top, a portrait under it, and then projects numbered rather than named. Images are placed off the grid on purpose so the eye moves rather than scans.

    Oversized wordmark, portrait with intro, three numbered projects with staggered image pairs, name and contact footer

  • Editorial portfolio template for Siter.io — Work that suits a magazine voice rather than a studio one

    Portfolios

    Editorial portfolio template

    Centered, serif and quiet. The projects carry real names instead of numbers, and a scroll cue sits beside the portrait because the page expects to be read rather than skimmed.

    Serif masthead, centered portrait with scroll cue, three named projects with mixed image sizes, centered footer

  • Photography portfolio template for Siter.io — A freelancer who needs to look hireable, not just talented

    Portfolios

    Photography portfolio template

    The most CV-like page in the set. Counters, a work history with company logos, a skills breakdown naming actual tools, then the photographs - and a contact form at the end rather than an email address.

    Hero with headline and portrait, about with four counters, work history table with logos, three skill columns with tool lists, masonry gallery on black, wide carousel, contact form

  • Case study portfolio template for Siter.io — A designer whose work needs explaining, not just showing

    Portfolios

    Case study portfolio template

    Three case studies, each a wide card with the image on one side and the reasoning on the other. Short, and built to be clicked into rather than read to the end.

    Minimal header, intro with portrait and award note, three case-study cards with their own buttons, contact footer

  • Minimal portfolio template for Siter.io — Someone who is available for work and wants to say so

    Portfolios

    Minimal portfolio template

    An availability pill, a paragraph in the first person, and links as pills rather than a navigation bar. Each project is one image and one paragraph, which is the whole design.

    Availability pill and first-person intro, pill row of links, three projects each one image and one paragraph, footer repeating the availability

  • Art direction portfolio template for Siter.io — Art direction, motion and 3D work that carries itself

    Portfolios

    Art direction portfolio template

    Almost no interface. Work tiles fall down the page in a staggered column with the discipline set sideways beside each one, so the page reads as a contact sheet rather than a grid.

    Headline with new badge, staggered work tiles with rotated discipline labels, two full-width pieces, minimal contact footer

  • Real estate website template for Siter.io — A listings business where every property needs the same six numbers

    Property

    Real estate website template

    Listings are tabbed by type and every card carries the same shape - badges, price, floor area, price per square meter and a call button. A featured property gets a full specification bar of its own.

    Architectural hero, three counters, three-step process, tabbed listings with six property cards, featured property with spec bar, two testimonials, newsletter

  • Restaurant website template for Siter.io — A kitchen with a menu and an address

    Food and hospitality

    Restaurant website template

    Photography first, with an italic serif carrying the warmth. The menu is tabbed and priced by the piece, and the page closes on opening hours rather than a form.

    Photo hero with menu and order buttons, story block, tabbed menu with prices, two recipe features, coming-soon blocks, catering photo strip, four chefs, hours and booking

  • Clothing brand website template for Siter.io — A clothing label with a season to push

    Fashion and retail

    Clothing brand website template

    Black with an acid-yellow accent, and it commits. Sizes and prices sit on every product block, a full product page with a size picker is built in, and the sale section flips the whole palette to yellow.

    Arrivals carousel, collection split, priced product blocks with sizes, product detail with size picker, portrait rows, classics grid, yellow sale section, newsletter

  • Yoga studio website template for Siter.io — A studio selling classes on a monthly plan

    Sport and wellness

    Yoga studio website template

    A section rail tracks progress down the left edge while the page moves from classes to instructor to plans. Pricing is two plans stacked beside a photograph, with the enroll button on each.

    Photo hero, three service cards, about with video, instructor feature, three program cards, two pricing plans, photo mosaic, pull quote, blog cards, newsletter

  • Travel website template for Siter.io — Trips sold by destination with a price from

    Travel and tours

    Travel website template

    A weather reading sits in the hero, which sets the tone - this page is about conditions and specifics. Routes are priced from, and the results section counts kilometres walked rather than describing them.

    Mountain hero with weather, three priced routes, image collage, video block, mission counters, three result cards with one carrying the figures, three rated guides, closing CTA over photo

  • Wedding website template for Siter.io — An event planner whose enquiries arrive by form

    Weddings and events

    Wedding website template

    Cream and terracotta with a serif display face. The booking button is a circle overlapping the hero photograph, and the preparation steps are numbered and staggered so the page never feels like a checklist.

    Serif hero with circular booking button, about, alternating help and inspire blocks, three numbered preparation steps, catering, couple carousel with location, booking form

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.

Estimated effort for a designer building their own site, assuming the copy is written. Add time if the writing is not done, because the writing is usually what stalls it.
Kind of sitePagesDesignBuild and publish
Local business one-pager1Half a dayHalf a day
Launch or event page1 to 2Half a dayHalf a day
Product landing page1 to 31 to 2 days1 day
Freelance service site3 to 42 days1 to 2 days
Designer portfolio5 to 93 to 5 days2 to 3 days
Small studio site6 to 121 to 2 weeks3 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.

  • The order that gets it finished.

    Sites stall in the same place every time, and it is never the layout.

    1. Write the opening sentence.

    2. List the sections the page needs.

    3. Design one page, one width.

    4. Send it over, set breakpoints.

    5. 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.

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. Every design in the template gallery is listed by the sections it ships with, if you would rather start from a structure than assemble one.

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 — the import runs 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: the free plan builds and previews privately; publishing needs a paid plan.

Choosing where to build it

Also useful: personal website examples and Siter.io pricing in full.

  • Figma plus Siter.io

    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 ->
Hey there 👋  Friends from designmodo are here to help!
More Products