Preskočiť na hlavný obsah

Dizajnový systém

Scoutello by malo pôsobiť príjemne, schopne a zamerane na produkt. Preferovaný vzhľad je svetlý, veľkorysý, zaoblený a redakčný: najprv jasný obsah, potom jemná farba značky, mäkké povrchy a pokojný pohyb, vďaka ktorému produkt pôsobí responzívne bez toho, aby sa stal dekoratívnym šumom.

Marketingová vstupná stránka je najjasnejšou verejnou referenciou pre súčasný vizuálny smer. Produktové povrchy by mali v čo najväčšej miere využívať zdieľané dizajnové tokeny a mali by byť výraznejšie iba vtedy, keď je povrch explicitne zameraný na značku alebo marketing.

Logo a firemné podklady​

Použite logo Scoutello z verejného URL adresa pre dokumenty, keď agent, integrácia alebo generovaná stránka potrebuje opakovane použiteľné značkové logo:

Preferujte verziu SVG pre ostré vykreslenie na rôznych veľkostiach obrazovky. Použite verziu PNG, keď nástroj alebo cieľ nemôže spracovať SVG. Zachovajte dostatočný voľný priestor okolo značky, vyhnite sa jej roztiahnutiu alebo zmene farby a umiestnite ju na biele, teplé krémové alebo iné pokojné povrchy, ktoré zachovávajú kontrast.

Firemné farby​

Primárna farba: #ff8d49

Použite primárnu oranžovú ako akcentovú farbu Scoutello: primárne výzvy na akciu, zamerané stavy, aktívna navigácia, pozadia malých ikon, zvýraznenie textu, jemné žiary a teplé prechody. V produktovom kóde sa to mapuje na --primary: 24 100% 64% a triedy Tailwind, ako napríklad bg-primary, text-primary, border-primary/15 a shadow-primary/10.

Sekundárna farba: #145466

Použite sekundárnu tmavú tyrkysovú ako uzemňovaciu farbu. Najlepšie funguje v prechodoch s primárnou oranžovou, tmavými panelmi s výzvou na akciu, vizuálnou hĺbkou a občasnými momentmi značky s vysokým dôrazom. Nemala by nahradiť primárnu oranžovú ako predvolenú farbu akcie.

Podporné farby:

  • Teplé krémové pozadia: #fff8f1, #fff4ea, #fcf6f1 a jemné povrchy orange-50 / amber-50.
  • Produktové neutrálne farby: biele karty, tmavý text popredia, tlmený text s priehľadnosťou okolo 70-75 % a svetlé okraje.
  • Terciárna modrá: hsl(205 100% 51%) je k dispozícii ako podporný token, ale mala by sa používať striedmo, aby oranžová a tyrkysová zostali rozpoznateľné ako pár značky.

Vizuálny štýl​

Preferujte čistý, prémiový SaaS vzhľad s dostatkom tepla, aby nepôsobil genericky. Vstupná stránka kombinuje krémové sieťované pozadia, biele karty, veľké snímky obrazovky produktu, zaoblené rohy a zdržanlivé prechody.

Použite:

  • Zaoblené karty a panely, často od rounded-2xl do rounded-[2rem].
  • Jemné okraje, ako napríklad border-primary/10, border-primary/15, ring-black/5 a svetlé neutrálne okraje.
  • Vrstvené biele alebo krémové povrchy namiesto ťažkých farebných blokov.
  • Jemné tiene, ako napríklad shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 alebo vlastné tiene s nízkou priehľadnosťou.
  • Veľké snímky obrazovky produktu alebo makety používateľského rozhrania ako dôkaz, najmä pre marketing a rozprávanie príbehov o funkciách.
  • Malé momenty značky, ako napríklad zvýraznený oranžový text, čipové ikony, kruhy, žiary a prechodové CTA.

Vyhnite sa:

  • Hlasným oranžovým pozadiam cez celú stránku.
  • Nadmernému používaniu tyrkysovej pre bežné ovládacie prvky.
  • Hustým, stiesneným rozloženiam.
  • Drsným tieňom, ostrým obdĺžnikom alebo chladným monochromatickým dashboardom.
  • Dekoratívnemu pohybu, ktorý konkuruje čítaniu alebo dokončovaniu úloh.

Typografia​

Marketingové stránky používajú:

  • Space Grotesk pre nadpisy v zobrazení prostredníctvom triedy landing-display.
  • Manrope pre marketingový text.

Zdieľané povrchy aplikácií a dokumentov používajú typografiu používateľského rozhrania zosúladenú so systémom, momentálne bližšie k Inter. Cieľom štýlu je konzistencia naprieč povrchmi: sebavedomé nadpisy, tesné sledovanie nadpisov, čitateľný text a veľkorysý riadkovací priestor.

Pokyny pre nadpisy:

  • Používajte veľké, vyvážené nadpisy na marketingových stránkach.
  • Zvýraznite iba dôležitú frázu primárnou oranžovou.
  • Udržujte dĺžku riadkov pod kontrolou pomocou max-w-* a text-balance, kde je to možné.

Pokyny pre text:

  • Udržujte odseky pokojné a priame.
  • Používajte tlmený text popredia na opisy, zvyčajne text-foreground/70 alebo text-foreground/75.
  • Preferujte skenovateľné sekcie, krátke odseky a jasné štítky.

Rozloženie a rozmiestnenie​

Rozloženia by mali pôsobiť priestranne a stabilne. Vstupná stránka používa kontajner max-w-7xl s responzívnym horizontálnym odsadením a veľkými vertikálnymi sekciami.

Bežné vzory:

  • Odsadenie sekcií okolo py-16, py-20 alebo väčšie pre hlavné marketingové sekcie.
  • Karty usporiadané v responzívnych mriežkach s konzistentnými medzerami.
  • Hero sekcie so silným ľavým stĺpcom obsahu a snímkami obrazovky produktu alebo kompozíciami zariadení vpravo.
  • Vycentrované hlavičky sekcií pre všeobecné sľuby produktu; hlavičky zarovnané vľavo pre sekcie príbehov alebo pracovných postupov.
  • Rozloženia primárne pre mobilné zariadenia, ktoré sa čisto skladajú pred tým, ako sa stanú viacstĺpcovými na väčších obrazovkách.

Používajte biely priestor ako súčasť dizajnu. Ak sa sekcia zdá nejasná, zjednodušte obsah a zväčšite priestor pred pridaním ďalšej dekorácie.

Komponenty a povrchy​

Povrchy Scoutello by mali pôsobiť hmatateľne, ale ľahko:

  • Tlačidlá: zaoblené pilulky pre výrazné marketingové CTA; štandardné produktové tlačidlá inde.
  • Karty: biele alebo krémové, zaoblené, s okrajmi a ľahko vyvýšené.
  • Ikony: malé, jednoduché líniové ikony v čipoch s oranžovým odtieňom.
  • Štatistiky a prvky dôvery: zdržanlivé karty s okrajmi alebo prechodmi s oranžovým odtieňom.
  • Formuláre: jasné štítky, priamy pomocný text a dostatočný priestor pre mobilné použitie.
  • Snímky obrazovky: veľké, ostré a mierne vyvýšené. Používajte ich ako konkrétny dôkaz produktu.

Pri vytváraní produktového používateľského rozhrania začnite od existujúcich zdieľaných komponentov používateľského rozhrania a tokenov namiesto vlastného jednorazového stylingu. Pri vytváraní marketingového používateľského rozhrania použite primitívy vstupnej stránky a triedy vstupnej stránky, kde sa hodia.

Pohyb​

Pohyb by mal spôsobiť, že rozhranie bude pôsobiť uhladene, nie uponáhľane. Vstupná stránka používa krátke animačné efekty odhalenia, efekty zdvihnutia zariadenia, efekty rozkvitnutia žiary a malé zdvihnutia pri najazdení myšou.

Preferovaný pohyb:

  • Odhalenie zdola o 12-24 px s jemnou priehľadnosťou.
  • Karty pri najazdení myšou sa zdvihnú len o pár pixelov.
  • Stavy CTA pri najazdení myšou, ktoré mierne zdvihnú a prehĺbia tieň.
  • Striedavé vstupy sekcií, kde podporujú skenovanie príbehu.

Vždy rešpektujte preferencie zníženého pohybu. Vyhnite sa animáciám, ktoré môžu skryť obsah, blokovať interakciu alebo sa javiť ako nevyhnutné na pochopenie stránky.

Hlas a dizajn obsahu​

Vizuálny systém najlepšie funguje s priamym, konkrétnym textom. Preferujte jazyk, ktorý vysvetľuje, čo môže organizácia publikovať, spravovať alebo automatizovať v Scoutello.

Použite:

  • Názvy produktov: vstupná stránka, dlaždice, prehliadky, udalosti, organizácie, dashboard, hostia, QR kódy, preklady.
  • Opisy zamerané na výsledky, ktoré spájajú skúsenosti hostí s pracovnými postupmi operátorov.
  • Rodovo neutrálny jazyk v nemčine a inom lokalizovanom texte.

Vyhnite sa:

  • Vágnej platformovej reči bez príkladov.
  • Príliš formálnemu podnikovému žargónu.
  • Dlhé odseky tam, kde by lepšie fungovala skenovateľná sekcia.

Praktické pravidlá​

  • Použite #ff8d49 ako hlavný akcent značky a #145466 ako sekundárnu uzemňovaciu farbu.
  • Preferujte tokenizované triedy (primary, secondary, foreground, muted, border) pred pevne zakódovanými farbami na povrchoch produktu.
  • Udržujte marketingové stránky teplé, priestranné, zaoblené, vedené snímkami obrazovky a ľahko animované.
  • Udržujte dashboardy a prevádzkové povrchy pokojnejšie, hustejšie iba tam, kde je to potrebné, a viac zamerané na úlohy.
  • Umožnite hosťovským zážitkom vlastneným zákazníkmi podporovať branding organizácie tam, kde produkt už ponúka ovládacie prvky brandingu, ale udržujte povrchy vlastnené Scoutello v súlade s týmto systémom.

Súvisiace koncepty: Trasy a povrchy, Vstupné stránky a dlaždice, Hosťovské zážitky primárne v prehliadači.