Industrial clients don’t need big promises – they need to see quickly whether a company makes the right product, whether it has its own production and how to request a quote. Using Unitechnology as an example, I explain how I built a corporate website with a catalogue of 16 product lines, service pages and consultation forms.
The company and the brief
Unitechnology (the UNI METAL technology brand) is a Ukrainian company that has been operating since 2009. It started out providing engineering services for industrial and civil buildings, and today it delivers complete solutions for planning and construction projects. The company has its own production capacity, modern equipment and a full cycle: from analysing the client’s idea to commissioning the finished building with a complete set of supporting documentation. The principle it puts front and centre on the website is one contractor at every stage and one party responsible for the result.
A manufacturer like this has a very wide range: electrical enclosures, shelving systems, sandwich panels, industrial floor drains, air ducts, ventilated facades, bomb shelter equipment, doors, gates and fencing, stainless steel furniture and chimneys. On top of that come made-to-order metalworking services. The website’s job is to organise all of this so that an engineer, buyer or developer quickly finds their product line and contacts the company without extra steps.
Header, menu and navigation
The header is shared by every page and works as a short business card for the company. The top row holds the UNI METAL technology logo, phone number, e-mail and address with the labels “Call us”, “Write to us” and “Visit us”, and on the right a dark “Request a call” button. Below it is the main menu:
- “Company” – a drop-down with “About us”, “Jobs” and “Blog”;
- “Product catalogue” – a drop-down menu with all 16 product lines, from electrical enclosures to ventilation equipment;
- “Services” – a drop-down list of metalworking services;
- “Gallery” and “Contacts”;
- YouTube, LinkedIn, Facebook, TikTok and Instagram icons;
- a language switcher with a flag.
When you scroll, the header shrinks into a compact bar with the menu and the call-back button, so the catalogue and the enquiry are available anywhere on the page. Inner pages open with a green and graphite banner with the title and breadcrumbs, so visitors always know which section they are in.
Home page: from the slider to the consultation form
The home page takes an industrial client from first impression to enquiry:
- a five-slide hero slider with a “01 – 05” counter and arrows; the first slide reads “Construction technologies” with a promise to meet every client requirement in full;
- “Products” – a grid of cards with photos and a round arrow button, plus an “All products” button;
- “Company services” – a slider on a graphite background with arrows and dots: TIG and laser welding, metal bending, CNC punching and other services;
- “Company advantages” – four tiles with icons: growing since 2009, own production capacity, modern equipment, full production cycle;
- “Working with us” – turnkey delivery, supporting documentation and complete solutions for industrial, public and civil buildings, laboratories and research facilities, and energy sites;
- “We are easy to work with” – four steps on a vertical line: request and consultation, a commercial offer within the agreed time, specifications or documentation on request, contract and delivery;
- a “Get a consultation now” form with “Name” and “Phone” fields.
The footer mirrors the whole site structure: sections, the full list of catalogue product lines, all services and contacts. Any page is one click away from the very bottom.
Product catalogue and product line pages
The catalogue is the heart of the website. Each of the 16 product lines has its own page, and they all follow the same layout, which makes them easier to compare and harder to get lost in. Take the “Ventilated rainscreen facades” page:
- the first screen is split into a green half with the title and breadcrumbs and a large photo of a facade;
- a “Technical documentation” tile with a PDF icon – documents can be downloaded straight from the page;
- a detailed product description: which panels the facades are made of, where they are used, the warranty on products and installation, and individual pricing;
- a “Benefits and advantages” block – appearance, energy efficiency, weather resistance and wall protection;
- a “More product examples” button;
- a consultation form, a “Videos” slider with clips about production and the steps to working together.
The same template works for any product line: enclosures, shelving, sandwich panels or doors. The company adds text, photos, documentation and videos – and the page is ready.
Metalworking services
Services have their own section because different clients order them, with different needs. The “Services” page is a grid of nine tiles with large photos and a caption on a white label with an arrow:
- locksmith and fitting work, and powder coating;
- plasma and laser cutting;
- CNC punching;
- laser and TIG welding;
- metal bending, and turning and milling.
Photos of real processes – welding sparks, a laser beam, a press brake – show what the work is before the visitor even reads the caption.
Company, gallery, jobs, blog and contacts
The remaining pages answer the questions of people choosing a reliable contractor or looking for a job:
- “About us” – the “Main goal” and “About the company” blocks, a strip of four advantages and a consultation form;
- “Gallery” – photos split into “Products”, “Production and equipment” and “Completed projects”;
- “Jobs” – vacancy cards with what is expected of the candidate and the tasks: CNC programming process engineer, HR director, sales director;
- “Blog” – a feed of articles with “First”, “Previous”, “Next” and “Last” pagination;
- “Contacts” – phone, e-mail, address, contacts for the sales manager and the technical consultant, and a consultation form.
The website’s palette is the brand green and graphite with white, large photos of production and a strict grid. This look suits an industrial company: calm, businesslike and keeping the focus on the products.
What matters in a manufacturer’s website
Industrial clients come to a manufacturer’s website with a specific task and spend little time reading. Based on this project, a website for a metalworking or construction manufacturer works when:
- the catalogue is in the menu on every page – people look for their product line rather than scrolling through the home page;
- each product line has its own page with a description, benefits and documentation – easy to forward to colleagues and easier to find in search;
- services are kept apart from products – they have a different audience and different searches;
- the manufacturer’s credentials are in plain sight: year founded, own capacity, equipment, full cycle;
- it is clear how work begins – steps from request to contract take the fear out of the first call;
- the consultation form is short – name and phone, and the manager will clarify the rest.
If you run a manufacturing business with a wide range, start with a map of your product lines and a single page template for each. That way the website grows easily with your range, and clients always find what they need and know where to send an enquiry.
Project details
Project typecorporate catalogue website
CategoryBusiness website
TechnologiesHTML5, CSS3, JavaScript
Rolewebsite development: page build, catalogue drop-down menu, sliders, product line and service pages, consultation forms
ClientUnitechnology (UNI METAL technology)
CountryUkraine
What was done
- Built the pages: home, about, jobs, blog, catalogue, product line page, services, gallery, contacts
- Built a shared header with contacts, a “Request a call” button, social links and a language switcher
- Built a catalogue drop-down menu for 16 product lines and a compact header on scroll
- Built a hero slider with a slide counter and a services slider on the home page
- Built the advantages, cooperation and four-step client process blocks
- Created a product line page template: description, benefits, technical documentation, videos and form
- Built a services page of nine tiles and a gallery with three sections
- Built the jobs page, a paginated blog and contacts with managers
- Built the consultation form and a footer with the full catalogue and services map
Result
- A corporate catalogue website for a manufacturer, in Ukrainian
- 16 product lines with a single page template and documentation
- A separate section with nine metalworking services
- The manufacturer’s credentials and the steps to working together on the home page
- Consultation form and call-back request from any page
Visit the project website
