Preskoči na glavni sadržaj
Pomalo.web studio
Natrag na primjere
Posjetite stranicu → Treba mi slično

Case Study

Adriatic Fuel & Marine Solutions

Cijela stranica napravljena iznova – od prvog razgovora i prikupljanja materijala do dizajna, izrade, lansiranja i preseljenja hostinga.

Djelatnost
Pomorske usluge
Lokacija
Dubrovnik
Opseg
Cijela stranica, od nule
Status
Živa
Klijent

Adriatic Fuel & Marine Solutions

Pomorska tvrtka sa sjedištem u Dubrovniku. Bave se poliranjem goriva, čišćenjem tankova, popravkom trupova, najmom barži i drugim uslugama održavanja plovila duž Jadrana.

Ovlašteni su kao Datacol partner i dostupni su za hitne intervencije danonoćno. U ovom poslu to je glavni argument, a na staroj stranici se to nigdje nije vidjelo.

Izazov

Što je bilo loše s postojećom stranicom?

  • Izgledala je kao svaka druga. Gotov predložak, velika slika koja se sama prebacuje, pa dugi blokovi teksta i mala galerija. Ništa na njoj nije govorilo da iza toga stoji ozbiljna tvrtka.
  • Usluge se nisu vidjele. Bile su složene u kartice koje se listaju jedna po jedna, pa je posjetitelj morao klikati da uopće sazna čime se tvrtka bavi. Većina to ne radi.
  • Greške u tekstu. Na vidljivim mjestima stajalo je »Tankl cleaning« i »scaping solution«. Kupac koji traži izvođača za svoj brod takve stvari primijeti.
  • Sporo se otvarala. Za ovako jednostavnu stranicu vrtjela su se tri teška dodatka odjednom. Posjetitelj je čekao prije nego išta vidi.
  • Nije se imalo gdje javiti. Kontakt je bila adresa u podnožju. Bez obrasca i bez načina da netko zatraži baš onu uslugu koja mu treba.
  • Nije imala svoj izgled. Boje bez reda, naslovi i tekst iste težine, logotipi partnera razbacani kao sitne slike.
Pristup

Napravljena iznova, od prazne stranice

Sustav boja

Tamno zeleno more i mjedeno zlato, #002420 i #ebc06b. Boje broda i mora, ne uredske prezentacije. Stara stranica nije imala nijednu boju koja bi se ponavljala, samo tamnu pozadinu i naglaske kako je došlo.

Svih osam usluga na jednom ekranu

Umjesto kartica koje se listaju, sve usluge stoje jedna do druge i vide se odjednom. Tri glavne (Fuel Polishing, Injection System Cleaning, Hull Repairs) zauzimaju više prostora i pisane su krupnije, pa oko prvo padne na njih. Nitko ne mora klikati da sazna što tvrtka radi.

Naslovna: video i jedna jasna rečenica

Umjesto nepomične slike ide kratki video. Naslov ne ponavlja ime tvrtke nego kaže što kupac dobiva: »Clean Tanks. Reliable Performance. Less Downtime.« Odmah ispod stoje tri podatka koja odlučuju posao – danonoćna dostupnost, Datacol partner, Dubrovnik.

Strojevi i galerija

Tri Datacol sustava (MX-3000 Injection, Tank Cleaning i Tank Filtering) dobila su vlastitu sekciju s opisom i slikama koje se otvaraju na klik. Galerija ima 14 fotografija s terena i 4 videa. Na mobitelu se prvo prikaže dio, a ostatak na dodir, da se ne čeka učitavanje svega odjednom.

Kontakt: obrazac koji zna zašto se javljate

Umjesto same adrese u podnožju, sada stoji obrazac gdje čovjek upiše mail i s popisa odabere koja mu od osam usluga treba. Uz njega idu kartice s adresama, brojevima i mailom, da onaj tko radije zove ne mora ništa tražiti.

Prije i poslije

  • Naslovna

    Prije Slika koja se sama prebacuje
    Poslije Video, jasan naslov, dva gumba i osnovni podaci odmah

  • Usluge

    Prije Kartice koje se listaju jedna po jedna
    Poslije Svih osam usluga vidljivo odjednom

  • O nama

    Prije Zid teksta i sitne sličice
    Poslije Tekst s jedne strane, logotipi partnera s druge

  • Strojevi

    Prije Nije postojalo
    Poslije Vlastita sekcija s tri Datacol sustava i uvećanjem slika

  • Galerija

    Prije Pet sitnih sličica u redu
    Poslije 14 fotografija i 4 videa, uvećanje na klik

  • Kontakt

    Prije Samo adresa u podnožju
    Poslije Obrazac s biranjem usluge i kartice s adresama i brojevima

Tehnički dio

Na čemu je sve to napravljeno.

Ovaj dio je za one koje zanima što je ispod haube. Ako vas ne zanima, ništa ne gubite – preskočite na galeriju.

Astro

Stranica se sklopi unaprijed i poslužuje kao gotov HTML

Tailwind CSS

Boje, razmaci i tipografija na jednom mjestu

React

Samo za dijelove koji stvarno moraju reagirati

Barlow / Barlow Condensed

Fontovi s vlastitog servera, bez poziva prema Googleu

  • Stara stranica vrtjela je WordPress, Elementor i Slider Revolution. Nova nema nijedan dodatak koji se izvršava kod posjetitelja.
  • Uvećanje slika, prijelazi i kontrole videa napisani su ručno, bez dodatne biblioteke, i rade i tipkovnicom.
  • Galerija na mobitelu učitava slike u dva navrata, pa se prvi ekran otvori bez čekanja.

Galerija

Adriatic Fuel and Marine Solutions – naslovna sekcija
Adriatic Fuel and Marine Solutions – stranica usluga
Adriatic Fuel and Marine Solutions – galerija
Adriatic Fuel and Marine Solutions – obrazac za kontakt

Pogledajte cijelu stranicu uživo: af-ms.net

Rezultat

Što je klijent dobio?

  • Stranica se otvara odmah. Otišli su svi teški dodaci koji su se prije vrtjeli u pozadini. Ostao je čist, lagan sadržaj.
  • Sve se vidi bez klikanja. Nema kartica koje se listaju. Usluge, oprema i galerija stoje otvoreni čim se stranica učita.
  • Tvrtka sada ima svoj izgled. Iste boje kroz cijelu stranicu, naslovi jasno odvojeni od teksta, logotipi partnera složeni umjesto razbacani.
  • Rađena za mobitel. Sve se posloži prema veličini ekrana, a galerija na mobitelu učitava slike postupno da se ne čeka.
  • Slike se otvaraju na klik. Fotografije strojeva i galerija uvećavaju se preko cijelog ekrana, rade i tipkovnicom, a video ima svoje kontrole.
  • Jasan put do upita. S naslovne na usluge, s usluga na obrazac – i to na obrazac u kojem je tražena usluga već odabrana.