Preskoči na glavni sadržaj

Sustav dizajna

Scoutello treba djelovati toplo, pouzdano i usmjereno na proizvod. Preporučeni izgled je svijetao, prozračan, zaobljen i urednički: sadržaj je na prvom mjestu, a zatim slijede suptilna boja brenda, nježne površine i smirena animacija zbog koje proizvod djeluje responzivno, bez dekorativne prenatrpanosti.

Marketinška odredišna stranica najjasnija je javna referenca za trenutačni vizualni smjer. Površine proizvoda trebale bi, gdje je moguće, ponovno upotrebljavati zajedničke tokene dizajna, a izražajnije postati samo kada su izričito usmjerene na brend ili marketing.

Logotip i elementi brenda​

Upotrijebite logotip Scoutello s javnog URL-a za elemente dokumentacije kada agent, integracija ili generirana stranica treba ponovno upotrebljivu oznaku brenda:

Prednost dajte SVG verziji za oštar prikaz na svim veličinama zaslona. PNG verziju upotrijebite kada alat ili odredište ne podržava SVG. Ostavite dovoljno praznog prostora oko oznake, nemojte je razvlačiti ni mijenjati joj boju te je postavite na bijele, toplo kremaste ili druge smirene površine koje zadržavaju kontrast.

Boje brenda​

Primarna boja: #ff8d49

Primarnu narančastu upotrebljavajte kao naglasnu boju Scoutello: za primarne pozive na radnju, fokusirana stanja, aktivnu navigaciju, pozadine malih ikona, istaknuti tekst, nježna svjetlosna isticanja i tople gradijente. U kodu proizvoda to odgovara vrijednosti --primary: 24 100% 64% i Tailwind klasama kao što su bg-primary, text-primary, border-primary/15 i shadow-primary/10.

Sekundarna boja: #145466

Sekundarnu tamnu tirkiznu upotrebljavajte kao stabilizirajuću boju. Najbolje funkcionira u gradijentima s primarnom narančastom, na tamnim panelima poziva na radnju, za vizualnu dubinu i u povremenim istaknutim trenucima brenda. Ne bi trebala zamijeniti primarnu narančastu kao zadanu boju za radnje.

Dodatne boje:

  • Toplo kremaste pozadine: #fff8f1, #fff4ea, #fcf6f1 te nježne površine orange-50 / amber-50.
  • Neutralne boje proizvoda: bijele kartice, tamni tekst u prednjem planu, prigušeni tekst s neprozirnošću od približno 70–75 % i svijetli obrubi.
  • Tercijarna plava: hsl(205 100% 51%) dostupna je kao pomoćni token, ali treba je upotrebljavati štedljivo kako bi narančasta i tirkizna ostale prepoznatljiv par brenda.

Vizualni stil​

Prednost dajte čistom, premium SaaS izgledu s dovoljno topline kako ne bi djelovao generički. Odredišna stranica kombinira kremaste mrežaste pozadine, bijele kartice, velike snimke zaslona proizvoda, zaobljene kutove i odmjerene gradijente.

Upotrebljavajte:

  • Zaobljene kartice i panele, često od rounded-2xl do rounded-[2rem].
  • Nježne obrube poput border-primary/10, border-primary/15, ring-black/5 i svijetlih neutralnih obruba.
  • Slojevite bijele ili kremaste površine umjesto velikih blokova jarkih boja.
  • Suptilne sjene poput shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 ili prilagođenih sjena s niskom neprozirnošću.
  • Velike snimke zaslona proizvoda ili makete sučelja kao dokaz, osobito u marketingu i predstavljanju funkcionalnosti.
  • Male elemente brenda poput narančastog istaknutog teksta, pločica s ikonama, prstenova, svjetlosnih efekata i gradijentnih CTA-ova.

Izbjegavajte:

  • Jarke narančaste pozadine preko cijele stranice.
  • Pretjeranu upotrebu tirkizne za uobičajene kontrole.
  • Guste i zbijene rasporede.
  • Oštre sjene, pravokutnike s naglašenim rubovima ili hladne jednobojne nadzorne ploče.
  • Dekorativne animacije koje odvlače pažnju od čitanja ili dovršavanja zadatka.

Tipografija​

Marketinška stranica upotrebljava:

  • Space Grotesk za istaknute naslove putem klase landing-display.
  • Manrope za tekst marketinškog sadržaja.

Zajedničke površine aplikacije i dokumentacije upotrebljavaju tipografiju sučelja usklađenu sa sustavom, trenutačno bližu fontu Inter. Cilj je stilska dosljednost na svim površinama: samouvjereni naslovi, zbijeno praćenje naslova, čitljiv tekst i izdašna visina retka.

Smjernice za naslove:

  • Na marketinškim stranicama upotrebljavajte velike, uravnotežene naslove.
  • Primarnom narančastom istaknite samo važnu frazu.
  • Duljinu retka držite pod kontrolom pomoću max-w-* i text-balance gdje su dostupni.

Smjernice za osnovni tekst:

  • Odlomci neka budu smireni i izravni.
  • Za opise upotrebljavajte prigušeni tekst u prednjem planu, obično text-foreground/70 ili text-foreground/75.
  • Prednost dajte odjeljcima koje je lako pregledati, kratkim odlomcima i jasnim oznakama.

Raspored i razmaci​

Rasporedi trebaju djelovati prostrano i stabilno. Odredišna stranica upotrebljava spremnik max-w-7xl s responzivnim vodoravnim unutarnjim razmacima i velikim okomitim odjeljcima.

Uobičajeni obrasci:

  • Unutarnji razmak odjeljaka oko py-16, py-20 ili veći za glavne marketinške odjeljke.
  • Kartice raspoređene u responzivne mreže s ujednačenim razmacima.
  • Hero odjeljci s izraženim lijevim stupcem sadržaja te snimkama proizvoda ili kompozicijama uređaja s desne strane.
  • Centrirani naslovi odjeljaka za široko postavljena obećanja proizvoda; lijevo poravnati naslovi za odjeljke s pričom ili tijekom rada.
  • Rasporedi oblikovani prema pristupu mobile-first koji se uredno slažu u jedan stupac prije prelaska u više stupaca na većim zaslonima.

Prazan prostor koristite kao dio dizajna. Ako odjeljak djeluje nejasno, pojednostavnite sadržaj i povećajte prostor prije dodavanja novih ukrasa.

Komponente i površine​

Površine Scoutello trebaju djelovati opipljivo, ali lagano:

  • Gumbi: za istaknute marketinške CTA-ove upotrebljavajte zaobljene kapsule; drugdje standardne gumbe proizvoda.
  • Kartice: bijele ili kremaste, zaobljene, s obrubom i blagim izdizanjem.
  • Ikone: male, jednostavne linijske ikone u pločicama s narančastim tonom.
  • Statistike i elementi povjerenja: odmjerene kartice s narančasto toniranim obrubima ili gradijentima.
  • Obrasci: jasne oznake, izravan pomoćni tekst i dovoljno prostora za upotrebu na mobilnim uređajima.
  • Snimke zaslona: velike, oštre i blago izdignute. Upotrebljavajte ih kao konkretan dokaz proizvoda.

Pri izradi korisničkog sučelja proizvoda započnite s postojećim dijeljenim komponentama sučelja i tokenima umjesto s prilagođenim stilovima za pojedinačne slučajeve. Pri izradi marketinškog sučelja koristite primitive i klase za odredišne stranice kada odgovaraju.

Animacije​

Animacije trebaju sučelju dati uglađen izgled, a ne djelovati prenatrpano. Odredišna stranica koristi kratke animacije pojavljivanja, efekte podizanja uređaja, efekte širenja sjaja i blago podizanje elemenata pri prelasku pokazivačem.

Preporučene animacije:

  • Pojavljivanje odozdo s pomakom od 12–24 px uz blagi prijelaz prozirnosti.
  • Podizanje kartica pri prelasku pokazivačem za samo nekoliko piksela.
  • Stanja CTA elemenata pri prelasku pokazivačem koja ih blago podižu i pojačavaju sjenu.
  • Postupno pojavljivanje odjeljaka kada podržava sekvencijalno pregledavanje sadržaja.

Uvijek poštujte postavke za smanjenu količinu animacija. Izbjegavajte animacije koje mogu sakriti sadržaj, blokirati interakciju ili ostaviti dojam da su nužne za razumijevanje stranice.

Glas i oblikovanje sadržaja​

Vizualni sustav najbolje funkcionira uz izravan i konkretan tekst. Prednost dajte jeziku koji objašnjava što organizacija može objaviti, upravljati ili automatizirati u Scoutello.

Koristite:

  • Imenice specifične za proizvod: odredišne stranice, pločice, ture, događaji, organizacije, nadzorna ploča, gosti, QR kodovi, prijevodi.
  • Opise usmjerene na rezultate koji povezuju iskustva gostiju s radnim procesima operativnih timova.
  • Rodno neutralan jezik na njemačkom i u drugim lokaliziranim sadržajima.

Izbjegavajte:

  • Neodređen jezik o platformi bez primjera.
  • Pretjerano formalan korporativni žargon.
  • Duge odlomke tamo gdje bi bolje funkcionirao sadržaj prilagođen brzom pregledu.

Praktična pravila​

  • Koristite #ff8d49 kao glavnu boju brenda, a #145466 kao sekundarnu boju za ravnotežu.
  • Dajte prednost klasama s tokenima (primary, secondary, foreground, muted, border) u odnosu na izravno unesene boje u površinama proizvoda.
  • Marketinške stranice neka budu tople, prozračne, zaobljene, usmjerene na snimke zaslona i blago animirane.
  • Nadzorne ploče i operativne površine neka budu mirnije, gušće samo kada je to nužno i više usmjerene na zadatke.
  • Omogućite da iskustva gostiju u vlasništvu klijenata podrže brendiranje organizacije tamo gdje proizvod već nudi kontrole brendiranja, ali površine u vlasništvu Scoutello uskladite s ovim sustavom.

Povezani koncepti: Rute i površine, Odredišne stranice i pločice, Iskustva gostiju prilagođena preglednicima.