Siirry pääsisältöön

Suunnittelujärjestelmä

Scoutellon tulisi tuntua lämpimältä, kyvykkäältä ja tuotteeseen keskittyvältä. Suositeltu ilme on vaalea, väljä, pyöristetty ja toimituksellinen: ensin selkeä sisältö, sitten hienovarainen brändiväri, pehmeät pinnat ja rauhallinen liike, joka tekee tuotteesta responsiivisen ilman koristeellista hälyä.

Markkinoinnin landing page on selkein julkinen viite nykyiseen visuaaliseen suuntaan. Tuotepinnoissa tulisi mahdollisuuksien mukaan käyttää jaettuja suunnittelutunnisteita, ja niiden tulisi muuttua ilmeikkäämmiksi vain silloin, kun pinta on nimenomaisesti brändi- tai markkinointipainotteinen.

Logo ja brändiresurssit​

Käytä Scoutello-logoa julkisesta dokumentaation resurssi-URL-osoitteesta, kun agentti, integraatio tai luotu sivu tarvitsee uudelleenkäytettävän bränditunnuksen:

Suosi SVG-versiota, jotta renderöinti pysyy tarkkana kaikilla näyttökooilla. Käytä PNG-versiota, kun työkalu tai kohde ei tue SVG:tä. Jätä tunnuksen ympärille riittävästi tyhjää tilaa, älä venytä tai uudelleenväritä sitä ja sijoita se valkoiselle, lämpimän kerman sävyiselle tai muulle rauhalliselle pinnalle, joka säilyttää kontrastin.

Brändivärit​

Pääväri: #ff8d49

Käytä oranssia pääväriä Scoutellon korostusvärinä: ensisijaisissa toimintakehotuksissa, kohdistetuissa tiloissa, aktiivisessa navigoinnissa, pienissä kuvaketaustoissa, korostustekstissä, pehmeissä hohteissa ja lämpimissä liukuväreissä. Tuotekoodissa tämä vastaa arvoa --primary: 24 100% 64% ja Tailwind-luokkia, kuten bg-primary, text-primary, border-primary/15 ja shadow-primary/10.

Toissijainen väri: #145466

Käytä syvää teal-sävyä ankkuroivana värinä. Se toimii parhaiten liukuväreissä oranssin päävärin kanssa, tummissa toimintakehotuspaneeleissa, visuaalisen syvyyden luomisessa ja satunnaisissa vahvan painotuksen brändielementeissä. Sen ei tulisi korvata oranssia pääväriä oletustoimintovärinä.

Tukivärit:

  • Lämpimän kerman sävyiset taustat: #fff8f1, #fff4ea, #fcf6f1 sekä pehmeät orange-50 / amber-50 -pinnat.
  • Tuotteen neutraalit värit: valkoiset kortit, tumma etualan teksti, noin 70–75 %:n peittävyydellä esitetty himmennetty teksti ja vaaleat reunukset.
  • Tertiäärinen sininen: hsl(205 100% 51%) on käytettävissä tukitunnisteena, mutta sitä tulisi käyttää säästeliäästi, jotta oranssi ja teal säilyvät tunnistettavana brändiparina.

Visuaalinen tyyli​

Suosi selkeää ja korkealaatuista SaaS-ilmettä, jossa on riittävästi lämpöä geneerisyyden välttämiseksi. Landing page yhdistää kerman sävyiset mesh-taustat, valkoiset kortit, suuret tuotekuvakaappaukset, pyöristetyt kulmat ja hillityt liukuvärit.

Käytä:

  • Pyöristettyjä kortteja ja paneeleja, usein välillä rounded-2xl–rounded-[2rem].
  • Pehmeitä reunuksia, kuten border-primary/10, border-primary/15, ring-black/5 ja vaaleita neutraaleja reunuksia.
  • Kerrostettuja valkoisia tai kerman sävyisiä pintoja raskaiden värillisten lohkojen sijaan.
  • Hienovaraisia varjoja, kuten shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, tai mukautettuja matalan peittävyyden varjoja.
  • Suuria tuotekuvakaappauksia tai käyttöliittymän mallinnuksia todisteena, erityisesti markkinoinnissa ja ominaisuuksien esittelyssä.
  • Pieniä brändin korostuksia, kuten oranssia korostustekstiä, kuvake-elementtejä, renkaita, hohteita ja liukuvärillisiä toimintakehotuksia.

Vältä:

  • Räikeitä koko sivun oransseja taustoja.
  • Tealin liiallista käyttöä tavallisissa ohjaimissa.
  • Tiiviitä ja ahtaita asetteluja.
  • Voimakkaita varjoja, teräviä suorakulmioita tai kylmän yksivärisiä dashboard-näkymiä.
  • Koristeellista liikettä, joka kilpailee lukemisen tai tehtävien suorittamisen kanssa.

Typografia​

Markkinointisivustolla käytetään:

  • Space Grotesk -fonttia näyttävissä otsikoissa landing-display-luokan kautta.
  • Manrope-fonttia markkinointitekstien leipätekstissä.

Jaetuissa sovellus- ja dokumentaatiopinnoissa käytetään järjestelmän mukaista käyttöliittymätypografiaa, joka muistuttaa tällä hetkellä enemmän Interiä. Tavoite on sama kaikilla pinnoilla: itsevarmat otsikot, tiivis otsikkotekstin kirjainvälistys, helppolukuinen leipäteksti ja väljä rivikorkeus.

Otsikkojen ohjeistus:

  • Käytä markkinointisivuilla suuria ja tasapainoisia otsikoita.
  • Korosta pääoranssilla vain tärkeää ilmausta.
  • Rajoita rivipituutta käyttämällä tarvittaessa max-w-*- ja text-balance-arvoja.

Leipätekstin ohjeistus:

  • Pidä kappaleet rauhallisina ja suorina.
  • Käytä kuvauksissa himmennettyä etualan tekstiä, yleensä text-foreground/70 tai text-foreground/75.
  • Suosi helposti silmäiltäviä osioita, lyhyitä kappaleita ja selkeitä otsikoita.

Asettelu ja välit​

Asettelujen tulisi tuntua väljiltä ja vakailta. Landing page käyttää max-w-7xl-säilöä, responsiivista vaakasuuntaista sisämarginaalia ja suuria pystysuuntaisia osioita.

Yleisiä käytäntöjä:

  • Osioiden sisämarginaali noin py-16, py-20 tai suurempi laajoissa markkinointiosioissa.
  • Kortit responsiivisissa ruudukoissa, joissa on yhtenäiset välit.
  • Hero-osiot, joissa on vahva vasemman reunan sisältösarake ja oikealla tuotekuvakaappauksia tai laitekokoonpanoja.
  • Keskitetyt osio-otsikot laajoille tuotetta koskeville lupauksille; vasemmalle tasatut otsikot tarina- tai työnkulkua käsitteleville osioille.
  • Mobiili edellä suunnitellut asettelut, jotka pinoutuvat selkeästi ennen muuttumistaan usean sarakkeen asetteluiksi suuremmilla näytöillä.

Käytä tyhjää tilaa osana suunnittelua. Jos osio tuntuu epäselvältä, yksinkertaista sisältöä ja lisää hengitystilaa ennen kuin lisäät koristeita.

Komponentit ja pinnat​

Scoutellon pintojen tulisi tuntua konkreettisilta mutta kevyiltä:

  • Painikkeet: pyöristetyt pilleripainikkeet näkyville markkinoinnin toimintakehotuksille; muualla tavalliset tuotepainikkeet.
  • Kortit: valkoisia tai kerman sävyisiä, pyöristettyjä, reunustettuja ja kevyesti kohotettuja.
  • Kuvakkeet: pieniä ja yksinkertaisia viivakuvakkeita oranssisävyisissä elementeissä.
  • Tilastot ja luottamusta rakentavat elementit: hillittyjä kortteja, joissa on oranssisävyiset reunukset tai liukuvärit.
  • Lomakkeet: selkeät otsikot, suorat ohjetekstit ja riittävästi tilaa mobiilikäyttöön.
  • Kuvakaappaukset: suuria, tarkkoja ja hieman kohotettuja. Käytä niitä konkreettisena todisteena tuotteesta.

Käyttöliittymää rakennettaessa kannattaa hyödyntää olemassa olevia jaettuja käyttöliittymäkomponentteja ja tunnisteita yksittäisten mukautettujen tyylien sijaan. Markkinointikäyttöliittymää rakennettaessa kannattaa käyttää laskeutumissivujen peruskomponentteja ja landing-luokkia silloin, kun ne sopivat tilanteeseen.

Liike​

Liikkeen tulisi tehdä käyttöliittymästä viimeistelty, ei levotonta. Laskeutumissivulla käytetään lyhyitä paljastusanimaatioita, laitteiden nousuefektejä, hehkuefektejä ja pieniä hover-nostoja.

Suositeltu liike:

  • Paljastuminen 12–24 pikselin korkeudelta pehmeän läpinäkyvyysefektin kanssa.
  • Hover-korttien nostaminen vain muutamalla pikselillä.
  • CTA-elementtien hover-tilat, joissa elementti nousee hieman ja varjo syvenee.
  • Osioiden porrastetut sisääntulot silloin, kun ne tukevat sisällön silmäiltävää hahmottamista.

Kunnioita aina vähäisen liikkeen asetuksia. Vältä animaatioita, jotka voivat piilottaa sisältöä, estää vuorovaikutuksen tai tuntua välttämättömiltä sivun ymmärtämisen kannalta.

Äänensävy ja sisällön suunnittelu​

Visuaalinen järjestelmä toimii parhaiten suoran ja konkreettisen tekstin kanssa. Suosi kieltä, joka kertoo, mitä organisaatio voi julkaista, hallita tai automatisoida Scoutellossa.

Käytä:

  • Tuotekohtaisia substantiiveja: laskeutumissivut, ruudut, kierrokset, tapahtumat, organisaatiot, hallintapaneeli, vieraat, QR-koodit ja käännökset.
  • Tavoitteisiin keskittyviä kuvauksia, jotka yhdistävät vieraskokemukset ylläpitäjien työnkulkuihin.
  • Sukupuolineutraalia kieltä saksassa ja muissa lokalisoiduissa teksteissä.

Vältä:

  • Epämääräistä alustakieltä ilman esimerkkejä.
  • Liian muodollista yritysjargonia.
  • Pitkiä kappaleita silloin, kun silmäiltävä osio toimisi paremmin.

Käytännön säännöt​

  • Käytä #ff8d49-arvoa brändin pääkorostusvärinä ja #145466-arvoa toissijaisena tasapainottavana värinä.
  • Suosi tunnisteisiin perustuvia luokkia (primary, secondary, foreground, muted, border) kovakoodattujen värien sijaan tuotepinnoissa.
  • Pidä markkinointisivut lämpiminä, väljinä, pyöristettyinä, kuvakaappauksiin perustuvina ja kevyesti animoituina.
  • Pidä hallintapaneeli ja operatiiviset näkymät rauhallisempina, tarvittaessa tiiviimpinä ja tehtäväkeskeisempinä.
  • Anna asiakkaan omistamien vieraskokemusten tukea organisaation brändiä siellä, missä tuote tarjoaa brändinhallinnan asetuksia, mutta pidä Scoutellon omistamat näkymät tämän järjestelmän mukaisina.

Liittyvät käsitteet: Reitit ja näkymät, Laskeutumissivut ja ruudut, Selaimessa toimivat vieraskokemukset.