✔ Introduce TOPIAR and the mission of the “Happy Country” organisation from the very first screen
✔ Present four areas of work: planning, plant supply and planting, green roofs and landscape lighting
✔ Win trust with completed projects – from private houses to residential complexes and commercial properties
✔ Introduce the team and the company’s key figures
✔ Lead visitors to a free consultation request
✔ Share expertise on the blog
People buy landscaping with their eyes: before calling, they want to see the gardens, terraces and roofs a company has already created and know who is behind it. TOPIAR needed a website that shows its work at full size, explains its four areas of work and leads to a free consultation request.
I built the home page and inner pages around large photos, with a black-and-white palette and a green accent, and put the emphasis on motion: the first screen, the “Mission” block, the company figures, the portfolio, reviews, the call-to-action block and the contact form are all animated, while the services open on hover – the photo changes and a description and button appear.
The result is a website with ten page types: home, services and service page, a filterable portfolio and project page, blog and article, “About us”, contacts and privacy policy – and every page offers a short route to a consultation.
A website where the company’s work is shown at full size and every block comes alive as you scroll and hover.
First screen, mission, figures, portfolio, reviews, call to action and form all animate in
Hovering over a service name swaps the photo and reveals a description with a button
All work, commercial properties, residential complexes and private houses – with pagination
About the project, team, area, status and progress; service benefits and description
Article feed with a category filter and articles with a table of contents
Call-to-action block on inner pages and a form with data processing consent
Large photos of the work, lively animations and a short route to an enquiry: visitors see what the company can do and can ask for a consultation straight away.
The website covers several key tasks:
Guaranteed reply within 24 hours.
The first call is free and with no commitment.
A landscaping company’s website sells above all through images: lush gardens, green roofs and lit paths are more convincing than any list of services. Using TOPIAR as an example, I explain how I built a corporate website with an animated home page, services that open on hover, a portfolio filtered by type of project and enquiry forms.
TOPIAR is a landscaping company based in Kyiv. It plans gardens and grounds, supplies and plants trees and shrubs, creates green roofs and installs landscape lighting. On its website, the company appears together with the non-profit organisation “Happy Country”, which promotes a simple idea: the environment around your home affects your health, mood and quality of life, and a well-planned garden is not a luxury but a normal part of a good life. The company sums itself up in figures: 13 years on the Ukrainian market, 150 clients across the country, 120 specialists on the team and 500 completed projects.
People choose landscaping with their eyes. Before they call, they want to see the gardens, terraces and roofs the company has already created, understand what it does and who works there. So the website had to show the work at full size, explain the four areas of work in a few words, build trust through the team and reviews, and lead visitors from any page to a free consultation request. The website is in Ukrainian.
The header is a dark bar with the TOPIAR logo and a menu: “Home”, “Portfolio”, “Projects”, “Blog”, “About us”, “Documents” and “Contacts”. Below it is a photo of a modern house with a terrace and lighting, and in the centre of the frame sits a round “lens” with the organisation’s name and a “Get in touch” button. On either side are two captions with thin leader lines: the type of organisation and its core message about why it matters to change the space around you. The first screen is animated, and on the inner pages the top block with the heading gets its own animation too.
Right after it comes the “Mission” block: a large heading, a short text explaining that the organisation promotes modern, sensible landscaping, and line art – circles and intersecting lines in the brand green. This block is animated as well, and on the “About us” page the mission and vision blocks come to life in the same way.
The “Services” block is a wide strip of four photos separated by thin vertical lines. At the bottom of each column is the name of a service:
What makes the block stand out is how it reacts to the cursor. Hover over a service name and the photo changes, while a description of the service and a button appear on top. The landscape lighting text, for example, explains that the company’s specialists plan, assemble and install lighting in Kyiv, including on large plots and for unusual requirements. One block thus holds four short stories, and the page stays light. Below the strip, an “All projects” link leads to the page with every service.
The “About us” block sits on a light background with a subtle pattern: a wide photo of a garden in bloom, overlaid with a semi-transparent card about a team of enthusiasts who want to make Ukrainians’ living space more comfortable, plus a “Get in touch” button. It is followed by the company’s four figures in large green type: 13 years on the market, 150 clients, 120 specialists and 500 projects. The figures are animated and come to life when the block scrolls into view.
Next is the dark “Blog” block: three article cards with a photo, heading, date and teaser, and an “All articles” link. After it comes a green “Book a free consultation” card with a button, set against pale silhouettes of grasses. This call-to-action block is animated too and is repeated on the inner pages, so the way to an enquiry is always close at hand.
The portfolio on the home page is a dark section with three projects: two shots in the top row and a wide image below, each with the project name on a light label. The block is animated, and the “All work” link leads to the portfolio page. Then comes “Our team”: a slider with photos of staff in company uniform, their names and job titles, which you browse with arrows.
Client reviews sit on a photo of an avenue of clipped shrubs: two semi-transparent cards with a quotation-mark icon, the text and the author’s name. The home page ends with the “Contact us” block – a green card with “Surname”, “Phone”, “Email” and “Message” fields, a consent tick box for processing personal data and a black button. Like the reviews, the form appears with an animation.
The inner pages open with a dark top block containing a heading, a short introduction and the same line art. The services page is a grid of cards with a photo and a name. The “Our work” page is built the same way, but above the grid there is a filter by type of project:
The active tab is underlined in green, and below the grid there is pagination with arrows. Further down the page come reviews and the free consultation block, so a visitor who has just browsed the work can send an enquiry straight away.
The project page goes into detail: an “About the project” section, the team that worked on it, the area, the status and a description of how the work went. The service page opens with a large photo and the service name, followed by an introduction and a list with icons, three benefits – “Client wishes met 100%”, “Always available online”, “A better quality of life” – and a description section where photos and text alternate in a staggered layout.
On the blog, articles can be filtered by category, and each card has a photo, date and teaser. The article page has a heading, date, text with subheadings and a table of contents. The “About us” page covers the organisation’s mission and vision, contacts have a page of their own, and the privacy policy includes the date of the last update and sections on cookies. The footer holds the logo, a menu with a sitemap, social media icons and a link to the policy.
Landscaping is expensive and takes time, so clients choose a contractor very carefully. Based on this project, a website for such a company works when:
If you work in landscaping, greening or construction, start your website by asking what clients want to see before they call. Most often it is finished projects, clear services and the people who will work on their property. Then your website becomes more than a business card – it becomes a showcase that brings in enquiries.
