Alle ProjekteProjekt / 02

Website / Automotive / Car wrap

Autofolije Teslić

A full-GSAP car wrap website where visitors recolour a real car across eight films before asking for a quote.

WebsiteUX/UI DesignGSAP motionColour configuratorGallery & lightboxQuote flow

Live-Projekt ansehen Details ansehen

Kunde / Projekt: Autofolije Teslić
Fokus: Website / UX/UI Design
Standort: Teslić, Bosnia and Herzegovina

Projektüberblick

Ein fokussiertes Digitalprojekt für Klarheit, Vertrauen und Handlung.

Autofolije Teslić wraps cars in colour, chameleon and matte films, tints windows and applies paint protection film. The new version of the website starts with a colour configurator: one real photo of a car is recoloured across eight wrap films, including matte, satin and chameleon, with a clip-path wipe and a light blade, and the accent colour of the whole site follows the chosen film. A pinned 'panel by panel' process, a before and after slider, finish cards, a services index, a masonry gallery and a quote prefilled with the chosen colour follow.

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

Die Details hinter dem Erlebnis.

Jedes Bild öffnet sich als Vollbild-Vorschau.

Autofolije Teslić — Designdetail 1 — 01 / Autofolije Teslić

Autofolije Teslić — Designdetail 2 — 02 / Autofolije Teslić

Case Study

New colour. Same car.

Kunde: Autofolije Teslić
Standort: Teslić, Bosnia and Herzegovina
Website: Live-Website ansehen

Wrapping is a decision about colour, so the website lets visitors make that decision first. Pick a film, watch the car change, and carry the choice straight into the quote request.

Vertrauen und Performance

Wrap films

Gloss, matte, satin and chameleon finishes on one real car photo.

Finishes

Gloss, matte, satin and chameleon cards with a cursor-following light.

100

Desktop Lighthouse

93 to 97 on mobile. Accessibility 99, best practices and SEO 100.

Die Überlegungen hinter dem Projekt

The brief

Let people try the colour before they call.

The most common question a wrap studio gets is 'how would my car look in…?'. The hero answers it on the spot: eight films on one real photo, with the name and finish of each, and the site's accent colour switching to match.

Interaction

Full GSAP, tuned for phones.

Saira Condensed headlines, Geist and Geist Mono for text and data. Each colour change runs a clip-path wipe with a light blade across the car.

Pinned 'panel by panel' process: samples, washing and prep, application and heat, edges and checks, with squeegee wipes.
Before and after slider, finish cards with cursor light and a services index with a cursor image preview.
Masonry gallery with filters and a swipeable lightbox, plus a wrap-versus-paint comparison.

Quote

The chosen colour goes into the message.

A three-step quote form (car, service, colour and contact) is prefilled with the film picked in the hero and prepares a Viber or WhatsApp message for the studio.

So funktioniert es

Ein klarer Prozess vom ersten Schritt bis zum Ergebnis.

01
Photo
Prepare and mask one real car photo so it can be recoloured convincingly.
02
Configurator
Eight films with wipe, light blade and a site-wide accent colour.
03
Motion
Pinned process, before / after, finish cards and gallery.
04
Quote
Three-step form prefilled with the chosen colour, to Viber or WhatsApp.

Design-Assets

Das visuelle System hinter dem Projekt.

Brand system

Leistungen

Was im Projekt enthalten war.

Website

UX/UI Design

GSAP motion

Colour configurator

Gallery & lightbox

Quote flow

Etwas Ähnliches bauen

Sie brauchen eine Website, Web-App oder ein Redesign mit dieser Klarheit?

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