Skoči na glavni sadržaj

Dizajnerski sustav

Scoutello bi se trebao osjećati toplo, sposobno i usmjereno na proizvod. Preferirani izgled je lagan, izdašan, zaobljen i urednički: jasan sadržaj na prvom mjestu, zatim suptilna boja brenda, meke površine i mirni pokreti koji čine da se proizvod osjeća responzivnim, a da ne postane ukrasni šum.

Ciljna stranica marketinga najjasnija je javna referenca za trenutni vizualni smjer. Površine proizvoda trebale bi ponovno koristiti zajedničke dizajnerske tokene gdje je to moguće i postati izražajnije samo kada je površina izričito orijentirana na brend ili marketing.

Logo i sredstva brenda​

Upotrijebite logotip Scoutello iz URL-a sredstva javne dokumentacije kada agent, integracija ili generirana stranica treba ponovno upotrebljivu oznaku brenda:

Preferirajte SVG verziju za oštro renderiranje na različitim veličinama zaslona. Upotrijebite PNG verziju kada alat ili odredište ne može obraditi SVG. Održavajte dovoljno čistog prostora oko oznake, izbjegavajte rastezanje ili promjenu boje, te je postavite na bijele, tople kremaste ili druge mirne površine koje čuvaju kontrast.

Boje brenda​

Primarna boja: #ff8d49

Upotrijebite primarnu narančastu kao boju naglaska Scoutello: primarni pozivi na akciju, fokusirana stanja, aktivna navigacija, pozadine malih ikona, istaknuti tekst, meki sjajevi i tople gradijente. U kodovima proizvoda ovo se preslikava na --primary: 24 100% 64% i Tailwind klase kao što su bg-primary, text-primary, border-primary/15 i shadow-primary/10.

Sekundarna boja: #145466

Upotrijebite sekundarnu duboku tirkiznu kao boju uzemljenja. Najbolje funkcionira u gradijentima s primarnom narančastom, tamnim panelima za poziv na akciju, vizualnoj dubini i povremenim trenucima brenda visokog naglaska. Ne bi trebala zamijeniti primarnu narančastu kao zadana boja akcije.

Podržavajuće boje:

  • Topli kremasti pozadini: #fff8f1, #fff4ea, #fcf6f1 i meke orange-50 / amber-50 površine.
  • Produktni neutrali: bijele kartice, tamni tekst na prednjem planu, prigušeni tekst oko 70-75% prozirnosti i lagani obrubi.
  • Tercijarna plava: hsl(205 100% 51%) je dostupna kao podržavajući token, ali treba je koristiti štedljivo kako bi narančasta i tirkizna ostale prepoznatljive kao par brenda.

Vizualni stil​

Preferirajte čist, premium SaaS izgled s dovoljno topline da ne djeluje generički. Ciljna stranica kombinira kremaste mrežaste pozadine, bijele kartice, velike snimke zaslona proizvoda, zaobljene kutove i suzdržane gradijente.

Upotrijebite:

  • Zaobljene kartice i panele, često od rounded-2xl do rounded-[2rem].
  • Mekane obrube kao što su border-primary/10, border-primary/15, ring-black/5 i lagani neutralni obrubi.
  • Slojevite bijele ili kremaste površine umjesto teških obojenih blokova.
  • Suptilne sjene kao što su shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 ili prilagođene sjene niske prozirnosti.
  • Velike snimke zaslona proizvoda ili UI makete kao dokaz, posebno za marketing i pričanje o značajkama.
  • Male trenutke brenda kao što su narančasti istaknuti tekst, čipovi ikona, prstenovi, sjajevi i gradijentni CTA-ovi.

Izbjegavajte:

  • Glasne narančaste pozadine preko cijele stranice.
  • Prekomjerno korištenje tirkizne za obične kontrole.
  • Guste, skučene rasporede.
  • Oštre sjene, oštre pravokutnike ili hladne monokromatske nadzorne ploče.
  • Ukrasne pokrete koji se natječu s čitanjem ili dovršavanjem zadataka.

Tipografija​

Marketing stranica koristi:

  • Space Grotesk za naslove zaslona putem klase landing-display.
  • Manrope za tekst tijela marketinga.

Zajedničke površine aplikacija i dokumenata koriste tipografiju korisničkog sučelja usklađenu sa sustavom, trenutno bližu Interu. Cilj stila je dosljedan na svim površinama: samouvjereni naslovi, usko praćenje naslova, čitljiv tekst tijela i izdašan razmak između redaka.

Smjernice za naslove:

  • Koristite velike, uravnotežene naslove na marketinškim stranicama.
  • Istaknite samo važnu frazu primarnom narančastom bojom.
  • Održavajte duljinu retka kontroliranom pomoću max-w-* i text-balance gdje je dostupno.

Smjernice za tekst tijela:

  • Održavajte odlomke mirnima i izravnima.
  • Koristite prigušeni tekst na prednjem planu za opise, obično text-foreground/70 ili text-foreground/75.
  • Preferirajte odjeljke koji se mogu skenirati, kratke odlomke i jasne oznake.

Izgled i razmak​

Rasporedi bi trebali djelovati prostrano i stabilno. Ciljna stranica koristi spremnik max-w-7xl s responzivnim horizontalnim podmetanjem i velikim vertikalnim odjeljcima.

Uobičajeni obrasci:

  • Podmetanje odjeljaka oko py-16, py-20 ili većeg za glavne marketinške odjeljke.
  • Kartice raspoređene u responzivne mreže s dosljednim razmacima.
  • Hero odjeljci sa snažnim lijevim stupcem sadržaja i snimkama zaslona proizvoda ili kompozicijama uređaja na desnoj strani.
  • Središnji naslovi odjeljaka za široke obećanja proizvoda; naslovi poravnati lijevo za odjeljke priče ili radnog tijeka.
  • Izgledi prvo za mobilne uređaje koji se uredno slažu prije nego što postanu više stupaca na većim zaslonima.

Upotrijebite prazan prostor kao dio dizajna. Ako se odjeljak čini nejasnim, pojednostavite sadržaj i povećajte prostor za disanje prije dodavanja više ukrasa.

Komponente i površine​

Scoutello površine trebale bi djelovati taktilno, ali lagano:

  • Gumbi: zaobljeni pilule za istaknute marketinške CTA-ove; standardni produktni gumbi drugdje.
  • Kartice: bijele ili kremaste, zaobljene, s obrubom i lagano podignute.
  • Ikone: male, jednostavne linijske ikone u čipovima obojenim narančastom bojom.
  • Statistike i elementi povjerenja: suzdržane kartice s obrubima obojenim narančastom bojom ili gradijentima.
  • Obrasci: jasne oznake, izravna pomoćna tekstualna poruka i dovoljno prostora za korištenje na mobilnim uređajima.
  • Snimke zaslona: velike, oštre i lagano podignute. Upotrijebite ih kao konkretan dokaz proizvoda.

Prilikom izrade UI-a proizvoda, započnite s postojećim zajedničkim UI komponentama i tokenima umjesto prilagođenog stiliziranja za jednokratnu upotrebu. Prilikom izrade marketinškog UI-a, upotrijebite osnovne elemente i klase ciljne stranice tamo gdje odgovaraju.

Pokret​

Pokret bi trebao učiniti da sučelje djeluje uglađeno, a ne užurbano. Ciljna stranica koristi kratke animacije otkrivanja, efekte podizanja uređaja, efekte cvjetanja sjaja i male podizanje pri lebdenju.

Preferirani pokret:

  • Otkrivanje prema gore od 12-24px s mekom prozirnošću.
  • Kartice pri lebdenju podižu se samo nekoliko piksela.
  • CTA stanja pri lebdenju koja lagano podižu i produbljuju sjenu.
  • Staggered ulazi odjeljaka tamo gdje podržavaju skeniranje narativa.

Uvijek poštujte preferencije smanjenog pokreta. Izbjegavajte animacije koje mogu sakriti sadržaj, blokirati interakciju ili se činiti potrebnima za razumijevanje stranice.

Glas i dizajn sadržaja​

Vizualni sustav najbolje funkcionira s izravnim, konkretnim tekstom. Preferirajte jezik koji objašnjava što organizacija može objaviti, upravljati ili automatizirati u Scoutellu.

Upotrijebite:

  • Specifične nazive proizvoda: ciljne stranice, pločice, ture, događaji, organizacije, nadzorna ploča, gosti, QR kodovi, prijevodi.
  • Opise orijentirane na ishod koji povezuju iskustva gostiju s radnim procesima operatera.
  • Rodno neutralan jezik na njemačkom i drugom lokaliziranom tekstu.

Izbjegavajte:

  • Nejasni jezik platforme bez primjera.
  • Previše formalan korporativni žargon.
  • Dugi odlomci gdje bi odjeljak koji se može skenirati radio bolje.

Praktična pravila​

  • Upotrijebite #ff8d49 kao glavni naglasak brenda i #145466 kao sekundarnu boju uzemljenja.
  • Preferirajte tokenizirane klase (primary, secondary, foreground, muted, border) nad tvrdo kodiranim bojama na površinama proizvoda.
  • Održavajte marketinške stranice toplima, prostranima, zaobljenima, vođenima snimkama zaslona i lagano animiranima.
  • Održavajte nadzorne ploče i operativne površine mirnijima, gušćima samo gdje je potrebno, i više usmjerenima na zadatke.
  • Dopustite gostujućim iskustvima u vlasništvu kupaca da podrže brendiranje organizacije tamo gdje proizvod već nudi kontrole brendiranja, ali neka Scoutello-ove površine budu usklađene s ovim sustavom.

Povezani koncepti: Rute i površine, Ciljne stranice i pločice, Gostujuća iskustva prvo u pregledniku.