Svi radoviProjekat / 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

Pogledaj sajt uživo Pogledaj detalje

Klijent / Projekat: Autofolije Teslić
Fokus: Website / UX/UI Design
Lokacija: Teslić, Bosnia and Herzegovina

Pregled projekta

Fokusiran digitalni projekat za jasnoću, povjerenje i akciju.

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.

Cilj je bio da ponuda bude lakša za razumjeti, da radovi dobiju jači kontekst i da put od prvog utiska do kontakta, upita, rezervacije ili kupovine bude jednostavniji.

Izbliza

Detalji iza cijelog iskustva.

Otvorite bilo koju sliku za pregled preko cijelog ekrana.

Autofolije Teslić — detalj dizajna 1 — 01 / Autofolije Teslić

Autofolije Teslić — detalj dizajna 2 — 02 / Autofolije Teslić

Case study

New colour. Same car.

Klijent: Autofolije Teslić
Lokacija: Teslić, Bosnia and Herzegovina
Sajt: Pogledaj sajt uživo

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.

Povjerenje i performanse

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.

Razmišljanje iza projekta

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.

Kako radi

Jasan proces od prvog koraka do rezultata.

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.

Dizajn materijali

Vizuelni sistem iza projekta.

Brand system

Šta je urađeno

Šta je sve ušlo u projekat.

Website

UX/UI Design

GSAP motion

Colour configurator

Gallery & lightbox

Quote flow

Napravimo nešto slično

Treba vam sajt, web aplikacija ili redizajn ovako jasan?

Pošaljite kratku poruku o vašem poslu, tržištu, trenutnom sajtu i cilju. Panic Digital pomaže da se definišu struktura, dizajn, razvoj i SEO osnova za sljedeći korak.

Kontaktirajte Panic Digital