Przejdź do głównej zawartości

System projektowy

Scoutello powinien sprawiać wrażenie ciepłego, kompetentnego i skoncentrowanego na produkcie. Preferowany wygląd to jasny, przestronny, zaokrąglony i edytorialny: najpierw jasna treść, potem subtelny kolor marki, miękkie powierzchnie i spokojny ruch, który sprawia, że produkt wydaje się responsywny, nie stając się ozdobnym szumem.

Marketingowa strona docelowa jest najjaśniejszym publicznym odniesieniem do obecnego kierunku wizualnego. Powierzchnie produktu powinny w miarę możliwości ponownie wykorzystywać wspólne tokeny projektowe i stawać się bardziej wyraziste tylko wtedy, gdy powierzchnia jest wyraźnie zorientowana na markę lub marketing.

Logo i zasoby marki​

Użyj logo Scoutello z publicznego adresu URL zasobów dokumentacji, gdy agent, integracja lub wygenerowana strona potrzebuje wielokrotnego znaku marki:

Preferuj wersję SVG dla wyraźnego renderowania na różnych rozmiarach ekranu. Użyj wersji PNG, gdy narzędzie lub miejsce docelowe nie obsługuje SVG. Zachowaj wystarczająco dużo wolnej przestrzeni wokół znaku, unikaj jego rozciągania lub zmiany koloru i umieszczaj go na białych, ciepłych kremowych lub innych spokojnych powierzchniach, które zachowują kontrast.

Kolory marki​

Kolor podstawowy: #ff8d49

Użyj podstawowego pomarańczowego jako akcentu Scoutello: podstawowe wezwania do działania, stany skupienia, aktywna nawigacja, małe tła ikon, podświetlony tekst, delikatne poświaty i ciepłe gradienty. W kodzie produktu odpowiada to --primary: 24 100% 64% i klasom Tailwind, takim jak bg-primary, text-primary, border-primary/15 i shadow-primary/10.

Kolor wtórny: #145466

Użyj wtórnego głębokiego turkusu jako koloru bazowego. Najlepiej sprawdza się w gradientach z podstawowym pomarańczowym, ciemnych panelach wezwań do działania, głębi wizualnej i okazjonalnych momentach marki o wysokim nacisku. Nie powinien zastępować podstawowego pomarańczowego jako domyślnego koloru akcji.

Kolory pomocnicze:

  • Ciepłe kremowe tła: #fff8f1, #fff4ea, #fcf6f1 i miękkie powierzchnie orange-50 / amber-50.
  • Neutralne kolory produktu: białe karty, ciemny tekst na pierwszym planie, stonowany tekst o kryciu około 70-75% i jasne obramowania.
  • Trzeciorzędny niebieski: hsl(205 100% 51%) jest dostępny jako token pomocniczy, ale powinien być używany oszczędnie, aby pomarańczowy i turkusowy pozostały rozpoznawalne jako para marki.

Styl wizualny​

Preferuj czysty, premium wygląd SaaS z wystarczającą ilością ciepła, aby uniknąć wrażenia generyczności. Strona docelowa łączy kremowe tła siatkowe, białe karty, duże zrzuty ekranu produktu, zaokrąglone rogi i powściągliwe gradienty.

Używaj:

  • Zaokrąglone karty i panele, często od rounded-2xl do rounded-[2rem].
  • Miękkie obramowania, takie jak border-primary/10, border-primary/15, ring-black/5 i jasne neutralne obramowania.
  • Warstwowe białe lub kremowe powierzchnie zamiast ciężkich bloków kolorów.
  • Subtelne cienie, takie jak shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 lub niestandardowe cienie o niskim kryciu.
  • Duże zrzuty ekranu produktu lub makiety interfejsu użytkownika jako dowód, szczególnie w przypadku opowiadania historii marketingowej i funkcjonalnej.
  • Małe akcenty marki, takie jak podświetlony pomarańczowy tekst, żetony ikon, pierścienie, poświaty i gradientowe CTA.

Unikaj:

  • Głośnych, pełnoekranowych pomarańczowych teł.
  • Nadmiernego używania turkusu do zwykłych elementów sterujących.
  • Gęstych, ciasnych układów.
  • Ostrych cieni, ostrych prostokątów lub zimnych monochromatycznych pulpitów nawigacyjnych.
  • Dekoracyjnego ruchu, który konkuruje z czytaniem lub ukończeniem zadania.

Typografia​

Witryna marketingowa używa:

  • Space Grotesk dla nagłówków wyświetlanych za pomocą klasy landing-display.
  • Manrope dla tekstu głównego w materiałach marketingowych.

Wspólne powierzchnie aplikacji i dokumentacji używają typografii interfejsu użytkownika zgodnej z systemem, obecnie bliższej Inter. Celem stylu jest spójność na wszystkich powierzchniach: pewne nagłówki, ciasne śledzenie nagłówków, czytelny tekst główny i duży odstęp między wierszami.

Wskazówki dotyczące nagłówków:

  • Używaj dużych, zrównoważonych nagłówków na stronach marketingowych.
  • Podświetlaj tylko ważną frazę podstawowym pomarańczowym.
  • Kontroluj długość linii za pomocą max-w-* i text-balance, gdzie jest to dostępne.

Wskazówki dotyczące tekstu głównego:

  • Zachowaj spokój i bezpośredniość akapitów.
  • Używaj stonowanego tekstu na pierwszym planie do opisów, zazwyczaj text-foreground/70 lub text-foreground/75.
  • Preferuj skanowalne sekcje, krótkie akapity i jasne etykiety.

Układ i odstępy​

Układy powinny sprawiać wrażenie przestronnych i stabilnych. Strona docelowa używa kontenera max-w-7xl z responsywnymi poziomymi dopełnieniami i dużymi pionowymi sekcjami.

Typowe wzorce:

  • Dopełnienie sekcji wokół py-16, py-20 lub większe dla głównych sekcji marketingowych.
  • Karty rozmieszczone w responsywnych siatkach ze spójnymi odstępami.
  • Sekcje hero z silną lewą kolumną treści i zrzutami ekranu produktu lub kompozycjami urządzeń po prawej stronie.
  • Wyśrodkowane nagłówki sekcji dla ogólnych obietnic produktu; nagłówki wyrównane do lewej dla sekcji fabularnych lub przepływu pracy.
  • Układy mobilne, które czysto się układają, zanim staną się wielokolumnowe na większych ekranach.

Używaj białej przestrzeni jako części projektu. Jeśli sekcja wydaje się niejasna, uprość treść i zwiększ przestrzeń do oddychania, zanim dodasz więcej dekoracji.

Komponenty i powierzchnie​

Powierzchnie Scoutello powinny sprawiać wrażenie dotykowych, ale lekkich:

  • Przyciski: zaokrąglone pigułki dla widocznych CTA marketingowych; standardowe przyciski produktu w innych miejscach.
  • Karty: białe lub kremowe, zaokrąglone, z obramowaniem i lekko podniesione.
  • Ikony: małe, proste ikony liniowe w żetonach zabarwionych na pomarańczowo.
  • Statystyki i elementy zaufania: stonowane karty z obramowaniami zabarwionymi na pomarańczowo lub gradientami.
  • Formularze: jasne etykiety, bezpośrednia pomoc i wystarczająca przestrzeń do użytku mobilnego.
  • Zrzuty ekranu: duże, wyraźne i lekko podniesione. Używaj ich jako konkretnego dowodu produktu.

Podczas tworzenia interfejsu użytkownika produktu, zacznij od istniejących wspólnych komponentów interfejsu użytkownika i tokenów, a nie od niestandardowych stylów jednorazowych. Podczas tworzenia interfejsu użytkownika marketingowego, używaj prymitywów strony docelowej i klas strony docelowej, tam gdzie pasują.

Ruch​

Ruch powinien sprawiać, że interfejs wydaje się dopracowany, a nie zatłoczony. Strona docelowa wykorzystuje krótkie animacje ujawniania, efekty unoszenia urządzeń, efekty rozkwitu poświaty i małe podniesienia przy najechaniu myszką.

Preferowany ruch:

  • Ujawnianie od dołu o 12-24px z miękkim kryciem.
  • Karty po najechaniu myszką unoszące się tylko o kilka pikseli.
  • Stany CTA po najechaniu myszką, które lekko unoszą i pogłębiają cień.
  • Sekwencyjne wejścia sekcji, gdzie wspierają skanowanie narracyjne.

Zawsze szanuj preferencje dotyczące ograniczonego ruchu. Unikaj animacji, które mogą ukrywać treść, blokować interakcję lub wydawać się wymagane do zrozumienia strony.

Głos i projektowanie treści​

System wizualny najlepiej działa z bezpośrednim, konkretnym tekstem. Preferuj język, który wyjaśnia, co organizacja może publikować, zarządzać lub automatyzować w Scoutello.

Używaj:

  • Nazwy własne produktu: strony docelowe, kafelki, wycieczki, wydarzenia, organizacje, pulpit nawigacyjny, goście, kody QR, tłumaczenia.
  • Opisy zorientowane na wyniki, które łączą doświadczenia gości z przepływami pracy operatorów.
  • Język neutralny pod względem płci w języku niemieckim i innych lokalizowanych tekstach.

Unikaj:

  • Niejasnego języka platformy bez przykładów.
  • Nadmiernie formalnego żargonu korporacyjnego.
  • Długich akapitów, gdzie lepiej sprawdziłaby się skanowalna sekcja.

Praktyczne zasady​

  • Używaj #ff8d49 jako głównego akcentu marki i #145466 jako drugorzędnego koloru bazowego.
  • Preferuj tokenizowane klasy (primary, secondary, foreground, muted, border) zamiast zakodowanych na stałe kolorów na powierzchniach produktu.
  • Utrzymuj strony marketingowe ciepłe, przestronne, zaokrąglone, prowadzone przez zrzuty ekranu i lekko animowane.
  • Utrzymuj pulpity nawigacyjne i powierzchnie operacyjne spokojniejsze, gęstsze tylko tam, gdzie jest to konieczne, i bardziej skoncentrowane na zadaniach.
  • Pozwól doświadczeniom gości należącym do klienta wspierać branding organizacji tam, gdzie produkt już udostępnia kontrolki brandingu, ale utrzymuj powierzchnie należące do Scoutello zgodne z tym systemem.

Powiązane koncepcje: Trasy i powierzchnie, Strony docelowe i kafelki, Doświadczenia gości oparte na przeglądarce.