Website / Construction / Concept
A bold construction-company website where a pinned SVG building is drawn, built and lit on scroll.
Projektüberblick
Graditelj Teslić is a concept website for a construction company in Teslić that builds residential and commercial buildings, sells apartments and runs its own machinery. Concrete grey, charcoal and safety orange set the tone. The centrepiece is a pinned P+4 building: a blueprint draws itself, the foundation is poured, a tower crane lifts five floors, the roof, windows, balconies and facade follow, the lights come on and the drawing wipes into a real photo.
Ziel war es, das Angebot verständlicher zu machen, die Arbeit mit mehr Kontext zu zeigen und den Weg vom ersten Eindruck bis zu Kontakt, Anfrage, Buchung oder Kaufentscheidung zu vereinfachen.
Im Detail
Jedes Bild öffnet sich als Vollbild-Vorschau.
Case Study
Local builders usually have a phone number and a few photos online. This concept shows the whole job: what the company builds, how a building comes together, which machines it owns and how to ask for a quote in under a minute.
Vertrauen und Performance
6
Services
Residential and commercial buildings, apartment sales, concrete works, excavation and civil works.
8
Build phases
Blueprint, foundation, crane and floors, roof, windows, facade, lights and the real photo.
100
Desktop Lighthouse
93 to 96 on mobile, 100 for accessibility, best practices and SEO.
Die Überlegungen hinter dem Projekt
The brief
Investors and apartment buyers in a small town compare builders by reputation. The site needed to prove capacity: own crew, own crane and machines, and a clear way of working from first site visit to handover.
Design direction
Big Shoulders Display gives the headlines the weight of site signage, while Manrope keeps details readable. Hazard-tape marquees, a measuring-tape progress bar and square buttons tie the interface to the building site without turning it into a costume.
Quote flow
A sticky process timeline explains the five stages of a contract, the FAQ handles the usual objections, and the quote form asks what, where and when before preparing a WhatsApp or Viber message. No backend is needed and the visitor sees exactly what is sent.
So funktioniert es
01
Map services, machinery and the contract process into one scroll.
02
Build the P+4 building, crane and blueprint as layered SVG.
03
Pinned build, wipe to photo, horizontal machinery and counters.
04
Three-step form that prepares a WhatsApp or Viber message.
Design-Assets
Leistungen
Website
Concept & copy (sr)
UX/UI Design
GSAP motion
SVG illustration
Quote flow
Etwas Ähnliches bauen
Schicken Sie eine kurze Nachricht zu Ihrem Unternehmen, Markt, Ihrer aktuellen Website und Ihrem Ziel. Panic Digital hilft bei Struktur, Design, Entwicklung und SEO-Grundlage für den nächsten Schritt.
Panic Digital kontaktieren
Weiter entdecken
+A German-language B2B website for an industrial assembly company that installs and commissions plastics machinery across Europe.
Nächste Case StudyÄhnliche Projekte