Website / Construction / Concept
A bold construction-company website where a pinned SVG building is drawn, built and lit on scroll.
Project overview
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.
The goal was to make the offer easier to understand, present the work with stronger context and create a smoother path from first impression to contact, inquiry, booking or product evaluation.
A closer look
Open any image for a full-screen preview.
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.
Trust and performance signals
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.
The thinking behind the work
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.
How it works
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
Deliverables
Website
Concept & copy (sr)
UX/UI Design
GSAP motion
SVG illustration
Quote flow
Build something similar
Send a short message about your business, market, current site and goal. Panic Digital can help define the structure, design, development and SEO foundation for the next step.
Contact Panic Digital
Continue exploring
+A German-language B2B website for an industrial assembly company that installs and commissions plastics machinery across Europe.
View next caseRelated project pages