Client site2026

Hydrocist

A site for a roof, facade and paving cleaning company. Everything leads to a free quote request with photos of the surface.

Visit the sitehydrocistic-web.vercel.app
hydrocistic-web.vercel.app
The home page of Hydrocist, a roof, facade and paving cleaning company.
Year
2026
Type
Client site
My role
Design and build
Built with
  • Vite
  • React
  • Tailwind

Who it is for

Hydrocist cleans roofs, facades, paving and driveways, removes moss, algae and lichen, and seals surfaces after cleaning. It works for family homes, businesses and housing associations.

The customer usually does not know what their roof needs or what it will cost. They only know it does not look good. The site has to help them take a first step that commits them to nothing.

The idea

Nobody can price a roof clean without seeing the roof.

So the site leads to a form rather than a phone number, and the form takes photos of the surface. The company makes a first estimate from them, and only then is a date agreed.

The form asks for the essentials only: contact details, what needs cleaning and a short description. The whole process, from the first photo to the finished result, is set out in four steps on the page, so it is clear what happens after sending.

How I built it

hydrocistic-web.vercel.app
The six services on the Hydrocist site, from roof cleaning to regular upkeep.

What gets cleaned

Six services, one short card each: roofs, facades, paving and driveways, moss, algae and lichen, sealing and protection, and regular upkeep. The cards are named after what gets cleaned, not after the method, because the customer is looking for their surface.

hydrocistic-web.vercel.app
The four-step process on the Hydrocist site: send photos, get a proposal, an on-site visit, the handover.

From the first photo to the result

Send photos, get a proposal, an on-site visit, the handover. Four steps that answer what happens once the form is sent, and show that a proposal comes first and the work only after.

hydrocistic-web.vercel.app
The Why Hydrocist section, six reasons in a dark grid.

Why this company

Six short reasons in one dark grid, from a method matched to the surface to work for houses, businesses and housing associations. Each fits in one sentence, so the whole grid reads in a few seconds.

The small things

  1. 01

    Video instead of a photo

    The opening section is a video of dirt being washed off roof tiles. The difference shows before anyone reads the headline.

  2. 02

    Photos in the form itself

    Photos of the surface can be attached to the request, so the first estimate is not a guess.

  3. 03

    The surface from a list

    What needs cleaning is picked from a list in the form. The customer does not have to describe it in their own words.

  4. 04

    No commitment, everywhere

    The buttons say the same thing throughout: a free quote, a free request. Sending one commits nobody to anything.

  5. 05

    Italics on the words that matter

    The key word in each heading, such as čistotu (clean) or první dojem (first impression), is set in a serif italic so it stands out from the line.

  6. 06

    A local business to Google

    Structured data describes Hydrocist as a local business, with its email and the area it serves.

Colour and type

A near-black, a white and a single extra colour, a pale water blue. Text is set in Inter, and the key words in headings in Instrument Serif italic.

Colours

Type

  • InterHeadings and text
  • Instrument SerifHighlighted words

Let's get to it.

Got a project, a collaboration or just a question? I usually reply within a day.

Email me