Case study 02Konstruktivni biro, Prokuplje
A site that gets built as you scroll.
How twenty-five years of clean work became proof an investor can read in five seconds.
- Client
- D.O.O. Konstruktivni biro, since 2001
- Type
- Corporate site for a design-and-build firm
- Stack
- Next.js, Tailwind CSS
- Role
- Design & Full-stack Development
Phase 1 · Overview
The brief
Konstruktivni biro is a design-and-build firm from Prokuplje, founded in 2001 by Branislav Garić and run today together with his sons. It has designed hundreds of thousands of square metres, from homes to production complexes for Leoni.
I designed and built its corporate website: the place where an investor who has never heard of the firm decides whether to pick up the phone.
- Who it is for
- Investors and companies planning a building
- What I did
- Design, information architecture, full-stack development
- Pages
- Home, services, why us, contact
- On record
- Leoni Kraljevo, 61,000 m². Leoni Niš, 27,000 m².
Phase 2 · The problem
Foundation
A firm this strong looked smaller online than it is. Konstruktivni biro wins work on its record, but an investor who looked it up before calling found nothing that matched what it has built.
- 01The record was offline.Twenty-five years of projects, permits and references lived in folders and in people’s memory. An investor looking the firm up had nothing to check.
- 02The scale didn’t show.A firm that delivers 61,000 m² production halls looked no different online from a three-person studio. A smaller competitor with a better site looked bigger.
- 03The real advantage went unsaid.Design and construction under one roof is rare, and it is the reason clients come back. Nothing explained it to someone new.
ApprovedThe record was there. Nobody could see it.
Phase 3 · The approach
Structure
A firm with this background doesn’t need selling. It needs its record put in front of the investor, in the order an investor checks it: is the firm sound, what has it built, what exactly does it do, and who do I call. So the site shows before it tells.
3.1Design
Show the record, in the order an investor checks it.
Design decision 01of 03
Is the firm sound? Numbers before words.
- Why
- An investor is about to commit serious money and has read every adjective before. Four facts that can be checked in public registers do more: on the market since 2001, every permit granted, every building fully registered, never a blocked account. They sit above the first sales sentence.
- What the client gets
- The firm’s standing is clear in the first seconds, before the visitor has read a paragraph.
- 25+Years on the market
- 100%Permits granted through CEOP
- 100%Property fully registered
- 0Account blocks or debts
Design decision 02of 03
What makes them different? A building that goes up as you scroll.
- Why
- The firm’s advantage is abstract in words: the design office and the construction crew are one team, so nobody passes the blame. The model makes it visible. A slab, then columns and floors, then the finished facade: both halves of the job in one motion, with the visitor driving it.
- What the client gets
- The one thing an investor should remember, that this firm designs and builds, is the thing the page has them do with their own hand.
Scroll to build
Bureau and site under one roof.
- 01FoundationA flat slab. Nothing else on screen yet.
- 02StructureColumns and floor plates go up.
- 03FacadeGlass, cladding and greenery: the finished building.
Design decision 03of 03
What have they built? References by type, with square metres.
- Why
- An investor planning a factory wants to see factories, not houses. The category comes first, so they reach their own kind of building in one click. The floor area is there because a photograph can’t show scale: 61,000 m² for Leoni Kraljevo says more than any picture.
- What the client gets
- The right reference lands in front of the right investor, and the size of the firm is finally visible.
Colour and typeProfessional, but a firm you could phone
Colour
- Paper
#f5f4f1The colour of drawing paper. It keeps the site warm, a long way from the cold grey most construction sites use. - Charcoal
#1c1c1cText, and the single dark band that carries the founder’s argument. One dark section on a light page marks it as the most important thing said. - Orange
#ee7a2fThe colour of a building site: cranes, helmets, safety markings. It is used for one word in a headline and for the active marker, and nothing else. - Peach
#fbd9c2A soft tint of the orange for card backgrounds, so the accent itself can stay rare.
Type
- OutfitHeadlines and textA geometric sans with the clean lines of a technical drawing, and still friendly enough to read at length.
- An italic serifOne word per headlineSet in orange on the word that matters, like a note written by hand on a plan. It gives an engineering firm a human voice.
3.2Development
What I built.
Each piece below exists to shorten the way from a first visit to a phone call. The services are a working example: point at a card to open it, as on the site.
- Next.js
- Tailwind CSS
- The building that goes up.The model is tied to scroll position while its section stays pinned: slab, structure, finished facade. The visitor controls the build.
- References that hold still.A sticky section with four building types. The photograph and the description change as the visitor moves through them.
- Services at two levels.Thirteen services grouped into four cards that open when pointed at, and turn into a tap-to-open list on phones. The full list has its own page.
- A three-field enquiry form.Name, e-mail and a description; the company name is optional. The phone number sits in the header, the hero and the footer.
- A long page that stays light.Images are served at the size each screen needs, and a thin bar shows progress down the home page.
- A phone version of its own.One column, large type and a large phone number, with taps in place of every hover.
ApprovedProof first. Promises after.
Phase 4 · The results
Handover
The site now matches the firm. An investor who has never heard of Konstruktivni biro can check its standing, see what it has built and reach an engineer, without leaving the home page.
- 25+Years of record, on the first scrollBeside three more facts an investor can check: every permit granted, every building registered, no account blocks.
- 4Building types to find a reference byEach reference carries its name and floor area, up to Leoni Kraljevo at 61,000 m².
- 13→4Services grouped into packagesThe full list stays one click away for anyone who wants to check everything.
- 3Fields between an investor and the engineersAnd a phone number on every screen.
| Before the site | With it | |
|---|---|---|
| Standing | Known to those who had worked with the firm | Four facts on the home page that anyone can verify |
| Scale | Invisible to a new investor | References with names and square metres |
| The advantage | Explained in person, if at all | Shown by one animation: design and construction in one team |
| First contact | A phone number to track down | A call or a three-field form from any screen |
Approved25+ years. 100% permits. 100% registered. 0 blocks.
Live project
Projektovanje i izgradnja koja traje.
Scroll the home page and build the building yourself.
Visit the site