Siirry pääsisältöön

Suunnittelujärjestelmä

Scoutellon tulisi tuntua lämpimältä, kyvykkäältä ja tuotekeskeiseltä. Suositeltu ulkoasu on kevyt, runsas, pyöristetty ja toimituksellinen: ensin selkeä sisältö, sitten hienovarainen brändiväri, pehmeät pinnat ja rauhallinen liike, joka saa tuotteen tuntumaan reagoivalta ilman, että siitä tulee koristeellista kohinaa.

Markkinointisivusto on selkein julkinen viite nykyiselle visuaaliselle suunnalle. Tuotepinnat tulisi uusiokäyttää jaettuja suunnittelutokeneita mahdollisuuksien mukaan, ja ne saavat olla ilmeikkäämpiä vain, kun pinta on nimenomaisesti brändi- tai markkinointiorientoitunut.

Logo ja brändiomaisuudet​

Käytä Scoutellon logoa julkisesta dokumentaatio-omaisuuden URL-osoitteesta, kun agentti, integraatio tai luotu sivu tarvitsee uudelleenkäytettävän brändimerkin:

Suosi SVG-versiota terävän renderöinnin saavuttamiseksi eri näyttökokojen välillä. Käytä PNG-versiota, kun työkalu tai kohde ei tue SVG:tä. Pidä riittävästi tyhjää tilaa merkin ympärillä, vältä sen venyttämistä tai värin muuttamista ja aseta se valkoisille, lämpimän kermanvärisille tai muille rauhallisille pinnoille, jotka säilyttävät kontrastin.

Brändivärit​

Ensisijainen väri: #ff8d49

Käytä ensisijaista oranssia Scoutellon korostusvärinä: ensisijaiset toimintakehotteet, kohdennetut tilat, aktiivinen navigointi, pienten kuvakkeiden taustat, korostusteksti, pehmeät hehkut ja lämpimät liukuvärit. Tuotekoodissa tämä vastaa --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ä toissijaista syvää sinivihreää maadoittavana värinä. Se toimii parhaiten liukuväreissä ensisijaisen oranssin kanssa, tummissa toimintakehotepaneeleissa, visuaalisessa syvyydessä ja satunnaisissa korkean korostuksen brändihetkissä. Sen ei tulisi korvata ensisijaista oranssia oletustoimintavärinä.

Tukevat värit:

  • Lämpimät kermanväriset taustat: #fff8f1, #fff4ea, #fcf6f1 ja pehmeät orange-50 / amber-50 pinnat.
  • Tuoteneutraalit: valkoiset kortit, tumma etualan teksti, himmeä teksti noin 70-75 % opasiteetilla ja vaaleat reunat.
  • Kolmannen asteen sininen: hsl(205 100% 51%) on saatavilla tukevana tokenina, mutta sitä tulisi käyttää säästeliäästi, jotta oranssi ja sinivihreä pysyvät tunnistettavina brändiparina.

Visuaalinen tyyli​

Suosi puhdasta, premium SaaS-ulkoasua, jossa on riittävästi lämpöä, jotta se ei tunnu geneeriseltä. Laskusivu yhdistää kermanväriset verkkotaustat, valkoiset kortit, suuret tuotekuvat, pyöristetyt kulmat ja hillityt liukuvärit.

Käytä:

  • Pyöristetyt kortit ja paneelit, usein rounded-2xl -koosta rounded-[2rem] -koon.
  • Pehmeät reunat, kuten border-primary/10, border-primary/15, ring-black/5 ja vaaleat neutraalit reunat.
  • Kerrostetut valkoiset tai kermanväriset pinnat raskaiden värillisten lohkojen sijaan.
  • Hienovaraiset varjot, kuten shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 tai mukautetut matalaopasiteettiset varjot.
  • Suuret tuotekuvat tai käyttöliittymän mallikuvat todisteena, erityisesti markkinointia ja ominaisuustarinoita varten.
  • Pienet brändihetket, kuten oranssi korostusteksti, kuvakesirut, renkaat, hehkut ja liukuväri-CTA:t.

Vältä:

  • Äänekkäitä koko sivun oransseja taustoja.
  • Sinivihreän liiallista käyttöä tavallisissa säätimissä.
  • Tiiviitä, ahtaita asetteluja.
  • Kovia varjoja, teräviä suorakulmioita tai kylmiä monokromaattisia kojelautoja.
  • Koristeellista liikettä, joka kilpailee lukemisen tai tehtävän suorittamisen kanssa.

Typografia​

Markkinointisivusto käyttää:

  • Space Grotesk näyttöotsikoihin landing-display-luokan kautta.
  • Manrope markkinointitekstiin.

Jaetut sovellus- ja dokumentointipinnat käyttävät järjestelmään mukautettua käyttöliittymätypografiaa, joka on tällä hetkellä lähempänä Interiä. Tyylitavoite on johdonmukainen kaikilla pinnoilla: itsevarmat otsikot, tiivis otsikkoseuranta, luettava leipäteksti ja runsas riviväli.

Otsikko-ohjeet:

  • Käytä suuria, tasapainoisia otsikoita markkinointisivuilla.
  • Korosta vain tärkeä lause ensisijaisella oranssilla.
  • Pidä rivipituus hallinnassa max-w-* ja text-balance -asetuksilla, jos saatavilla.

Leipäteksti-ohjeet:

  • Pidä kappaleet rauhallisina ja suorina.
  • Käytä himmeää etualan tekstiä kuvauksiin, yleensä text-foreground/70 tai text-foreground/75.
  • Suosi skannattavia osioita, lyhyitä kappaleita ja selkeitä otsikoita.

Asettelu ja välit​

Asettelujen tulisi tuntua tilavilta ja vakaalta. Laskusivu käyttää max-w-7xl -säiliötä, jossa on responsiiviset vaakasuuntaiset täytteet ja suuret pystysuuntaiset osiot.

Yleisiä malleja:

  • Osion täytteet noin py-16, py-20 tai suuremmat tärkeille markkinointiosioille.
  • Kortit järjestetty responsiivisiin ruudukkoihin tasaisilla väleillä.
  • Sankariosiot, joissa on vahva vasen sisältösarake ja tuotekuvat tai laitekoostumukset oikealla.
  • Keskitetyt osio-otsikot laajoille tuotelupauksille; vasemmalle tasatut otsikot tarina- tai työnkulkua varten.
  • Mobiili-ensimmäiset asettelut, jotka pinoutuvat siististi ennen kuin niistä tulee monisarakkeisia 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 enemmän koristelua.

Komponentit ja pinnat​

Scoutellon pintojen tulisi tuntua taktiilisilta mutta kevyiltä:

  • Painikkeet: pyöristetyt pillerit näkyville markkinointi-CTA:ille; tavalliset tuotepainikkeet muualla.
  • Kortit: valkoiset tai kermanväriset, pyöristetyt, reunalliset ja kevyesti kohotetut.
  • Kuvakkeet: pienet, yksinkertaiset viivakuvakkeet oranssisävyisissä siruissa.
  • Tilastot ja luottamuselementit: hillityt kortit oranssisävyisillä reunoilla tai liukuväreillä.
  • Lomakkeet: selkeät otsikot, suorat aputekstit ja riittävästi tilaa mobiilikäyttöön.
  • Kuvakaappaukset: suuret, terävät ja hieman kohotetut. Käytä niitä konkreettisena todisteena tuotteesta.

Kun rakennat tuotekäyttöliittymää, aloita olemassa olevista jaetuista käyttöliittymäkomponenteista ja tokeneista sen sijaan, että käyttäisit mukautettua kertaluonteista tyylittelyä. Kun rakennat markkinointikäyttöliittymää, käytä laskusivun primitiivejä ja laskusivun luokkia, jos ne sopivat.

Liike​

Liikkeen tulisi saada käyttöliittymä tuntumaan viimeistellyltä, ei kiireiseltä. Laskusivu käyttää lyhyitä paljastusanimaatioita, laitteen nousuefektejä, hehkun kukkaefektejä ja pieniä hover-nostoja.

Suositeltu liike:

  • Paljastus ylös 12–24 pikselistä pehmeällä opasiteetilla.
  • Hover-kortit nousevat vain muutaman pikselin.
  • CTA hover-tilat, jotka hieman nostavat ja syventävät varjoa.
  • Porrastetut osioiden sisääntulot, kun ne tukevat tarinan skannausta.

Kunnioita aina vähennetyn liikkeen asetuksia. Vältä animaatioita, jotka voivat piilottaa sisältöä, estää vuorovaikutusta tai tuntua pakollisilta sivun ymmärtämiseksi.

Ääni ja sisältösuunnittelu​

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

Käytä:

  • Tuotespesifisiä substantiiveja: laskusivut, laatat, kierrokset, tapahtumat, organisaatiot, kojelauta, vieraat, QR-koodit, käännökset.
  • Tulosuuntautuneita kuvauksia, jotka yhdistävät vieraskokemukset operaattorin työnkulkuihin.
  • Sukupuolineutraalia kieltä saksaksi ja muissa lokalisoiduissa kopioissa.

Vältä:

  • Epämääräistä alustakieltä ilman esimerkkejä.
  • Yli-muodollista yritysjargonia.
  • Pitkiä kappaleita, joissa skannattava osio toimisi paremmin.

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

  • Käytä #ff8d49 pääbrändin korostusvärinä ja #145466 toissijaisena maadoittavana värinä.
  • Suosi tokenisoituja luokkia (primary, secondary, foreground, muted, border) koodattujen värien sijaan tuotepintaissa.
  • Pidä markkinointisivut lämpiminä, tilavina, pyöristettyinä, kuvajohtoisina ja kevyesti animoituina.
  • Pidä kojelaudan ja operatiiviset pinnat rauhallisempina, vain tarvittaessa tiiviimpinä ja tehtäväkeskeisempinä.
  • Anna asiakkaan omistamien vieraskokemusten tukea organisaation brändäystä siellä, missä tuote jo tarjoaa brändäysohjaimia, mutta pidä Scoutellon omistamat pinnat linjassa tämän järjestelmän kanssa.

Liittyvät käsitteet: Reitit ja pinnat, Laskusivut ja laatat, Selaimen ensisijaiset vieraskokemukset.