Ana içeriğe geç

Tasarım sistemi

Scoutello sıcak, yetenekli ve ürüne odaklı hissettirmeli. Tercih edilen görünüm açık, cömert, yuvarlak ve editoryal nitelikte olmalı: önce net içerik, ardından ince marka rengi, yumuşak yüzeyler ve dekoratif bir gürültüye dönüşmeden ürünü duyarlı hissettiren sakin animasyonlar.

Pazarlama açılış sayfası, mevcut görsel yön için en net halka açık referanstır. Ürün yüzeyleri, mümkün olduğunca paylaşılan tasarım jetonlarını yeniden kullanmalı ve yalnızca yüzey açıkça markaya veya pazarlamaya yönelik olduğunda daha etkileyici hale gelmelidir.

Logo ve Marka Varlıkları​

Bir temsilci, entegrasyon veya oluşturulan sayfa yeniden kullanılabilir bir marka işareti gerektirdiğinde, genel belgeler varlık URL'sinden Scoutello logosunu kullanın:

Ekran boyutları genelinde net oluşturma için SVG sürümünü tercih edin. Bir araç veya hedef SVG'yi işleyemediğinde PNG sürümünü kullanın. İşaretin etrafında yeterli boş alan bırakın, esnetmekten veya yeniden renklendirmekten kaçının ve kontrastı koruyan beyaz, sıcak krem veya diğer sakin yüzeylere yerleştirin.

Marka Renkleri​

Birincil renk: #ff8d49

Scoutello vurgu rengi için birincil turuncuyu kullanın: birincil harekete geçirici mesajlar, odaklanmış durumlar, aktif gezinme, küçük simge arka planları, vurgulu metin, yumuşak parıltılar ve sıcak gradyanlar. Ürün kodunda bu, --primary: 24 100% 64% ve bg-primary, text-primary, border-primary/15 ve shadow-primary/10 gibi Tailwind sınıflarına karşılık gelir.

İkincil renk: #145466

İkincil koyu teal rengini birleştirici bir renk olarak kullanın. Birincil turuncu ile gradyanlarda, koyu harekete geçirici mesaj panellerinde, görsel derinlikte ve ara sıra yüksek etkili marka anlarında en iyi şekilde çalışır. Varsayılan eylem rengi olarak birincil turuncunun yerini almamalıdır.

Destekleyici renkler:

  • Sıcak krem arka planlar: #fff8f1, #fff4ea, #fcf6f1 ve yumuşak orange-50 / amber-50 yüzeyler.
  • Ürün nötrleri: beyaz kartlar, koyu ön plan metni, yaklaşık %70-75 opaklıkta soluk metin ve açık renk kenarlıklar.
  • Üçüncül mavi: hsl(205 100% 51%) destekleyici bir jeton olarak mevcuttur, ancak turuncu ve teal renginin marka çifti olarak tanınabilir kalması için idareli kullanılmalıdır.

Görsel Stil​

Genel hissettirmekten kaçınacak kadar sıcaklığa sahip, temiz, premium bir SaaS görünümünü tercih edin. Açılış sayfası, krem rengi ağ arka planlarını, beyaz kartları, büyük ürün ekran görüntülerini, yuvarlak köşeleri ve ölçülü gradyanları birleştirir.

Kullanın:

  • Genellikle rounded-2xl'den rounded-[2rem]'e kadar yuvarlak kartlar ve paneller.
  • border-primary/10, border-primary/15, ring-black/5 ve açık nötr kenarlıklar gibi yumuşak kenarlıklar.
  • Ağır renkli bloklar yerine katmanlı beyaz veya krem yüzeyler.
  • shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 veya özel düşük opaklıklı gölgeler gibi ince gölgeler.
  • Özellikle pazarlama ve özellik hikaye anlatımı için kanıt olarak büyük ürün ekran görüntüleri veya UI maketleri.
  • Turuncu vurgulu metin, simge etiketleri, halkalar, parıltılar ve gradyan CTA'lar gibi küçük marka anları.

Kaçının:

  • Yüksek sesli tam sayfa turuncu arka planlar.
  • Sıradan kontroller için teal renginin aşırı kullanımı.
  • Yoğun, sıkışık düzenler.
  • Sert gölgeler, keskin dikdörtgenler veya soğuk monokrom kontrol panelleri.
  • Okumayı veya görev tamamlamayı engelleyen dekoratif animasyonlar.

Tipografi​

Pazarlama sitesi şunları kullanır:

  • landing-display sınıfı aracılığıyla başlıklar için Space Grotesk.
  • Gövde metni için Manrope.

Paylaşılan uygulama ve belgeler yüzeyleri, sistemle uyumlu UI tipografisi kullanır, şu anda Inter'e daha yakındır. Stil hedefi yüzeyler arasında tutarlıdır: kendinden emin başlıklar, sıkı başlık izleme, okunabilir gövde metni ve cömert satır aralığı.

Başlık kılavuzu:

  • Pazarlama sayfalarında büyük, dengeli başlıklar kullanın.
  • Yalnızca önemli ifadeyi birincil turuncu ile vurgulayın.
  • Mümkün olduğunda max-w-* ve text-balance ile satır uzunluğunu kontrol altında tutun.

Gövde metni kılavuzu:

  • Paragrafları sakin ve doğrudan tutun.
  • Açıklamalar için soluk ön plan metni kullanın, genellikle text-foreground/70 veya text-foreground/75.
  • Taranabilir bölümleri, kısa paragrafları ve net etiketleri tercih edin.

Düzen ve Boşluk​

Düzenler ferah ve kararlı hissettirmeli. Açılış sayfası, max-w-7xl kapsayıcı, duyarlı yatay dolgu ve büyük dikey bölümler kullanır.

Yaygın desenler:

  • Bölüm dolgusu py-16, py-20 veya büyük pazarlama bölümleri için daha büyük.
  • Tutarlı boşluklara sahip duyarlı ızgaralarda düzenlenmiş kartlar.
  • Güçlü bir sol içerik sütunu ve sağda ürün ekran görüntüleri veya cihaz kompozisyonları içeren kahraman bölümleri.
  • Geniş ürün vaatleri için ortalanmış bölüm başlıkları; hikaye veya iş akışı bölümleri için sola hizalanmış başlıklar.
  • Daha büyük ekranlarda çok sütunlu hale gelmeden önce temiz bir şekilde yığılan mobil öncelikli düzenler.

Boşluğu tasarımın bir parçası olarak kullanın. Bir bölüm belirsiz hissettiriyorsa, daha fazla dekorasyon eklemeden önce içeriği basitleştirin ve nefes alma alanını artırın.

Bileşenler ve Yüzeyler​

Scoutello yüzeyleri dokunsal ama hafif hissettirmeli:

  • Düğmeler: Belirgin pazarlama CTA'ları için yuvarlak haplar; diğer yerlerde standart ürün düğmeleri.
  • Kartlar: beyaz veya krem, yuvarlak, kenarlıklı ve hafifçe yükseltilmiş.
  • Simgeler: turuncu renkli etiketlerde küçük, basit çizgi simgeler.
  • İstatistikler ve güven öğeleri: turuncu renkli kenarlıklar veya gradyanlarla ölçülü kartlar.
  • Formlar: net etiketler, doğrudan yardım metni ve mobil kullanım için yeterli boşluk.
  • Ekran görüntüleri: büyük, net ve hafifçe yükseltilmiş. Bunları ürünün somut kanıtı olarak kullanın.

Ürün UI'ı oluştururken, özel tek seferlik stil yerine mevcut paylaşılan UI bileşenleri ve jetonlarından başlayın. Pazarlama UI'ı oluştururken, uygun olduklarında açılış ilkel öğelerini ve açılış sınıflarını kullanın.

Animasyon​

Animasyon, arayüzün meşgul değil, cilalı hissetmesini sağlamalıdır. Açılış sayfası kısa açılış animasyonları, cihaz yükseltme efektleri, parıltı yayılma efektleri ve küçük fareyle üzerine gelme kaldırmaları kullanır.

Tercih edilen animasyon:

  • 12-24 pikselden yukarı doğru yumuşak opaklıkla açılma.
  • Fareyle üzerine gelindiğinde kartların yalnızca birkaç piksel kaldırılması.
  • Fareyle üzerine gelindiğinde hafifçe kalkan ve gölgeyi derinleştiren CTA durumları.
  • Anlatı taramasını destekledikleri yerlerde kademeli bölüm girişleri.

Her zaman azaltılmış animasyon tercihlerine saygı gösterin. İçeriği gizleyebilecek, etkileşimi engelleyebilecek veya sayfanın anlaşılması için gerekli hissettiren animasyonlardan kaçının.

Ses Tonu ve İçerik Tasarımı​

Görsel sistem, doğrudan, somut metinlerle en iyi şekilde çalışır. Bir kuruluşun Scoutello'da ne yayınlayabileceğini, yönetebileceğini veya otomatikleştirebileceğini açıklayan dili tercih edin.

Kullanın:

  • Ürüne özgü isimler: açılış sayfaları, karolar, turlar, etkinlikler, kuruluşlar, kontrol paneli, misafirler, QR kodları, çeviriler.
  • Misafir deneyimlerini operatör iş akışlarına bağlayan sonuç odaklı açıklamalar.
  • Almanca ve diğer yerelleştirilmiş kopyalarda cinsiyetten nötr dil.

Kaçının:

  • Örnekler olmadan belirsiz platform dili.
  • Aşırı resmi kurumsal jargon.
  • Taranabilir bir bölümün daha iyi çalışacağı yerlerde uzun paragraflar.

Pratik Kurallar​

  • Ana marka vurgusu olarak #ff8d49 ve ikincil birleştirici renk olarak #145466 kullanın.
  • Ürün yüzeylerinde sabit kodlanmış renkler yerine jetonlaştırılmış sınıfları (primary, secondary, foreground, muted, border) tercih edin.
  • Pazarlama sayfalarını sıcak, ferah, yuvarlak, ekran görüntüsü odaklı ve hafif animasyonlu tutun.
  • Kontrol paneli ve operasyonel yüzeyleri daha sakin, yalnızca gerektiğinde daha yoğun ve daha görev odaklı tutun.
  • Ürün zaten marka kontrollerini gösteriyorsa, müşteri tarafından sahip olunan misafir deneyimlerinin kuruluş markalamasını desteklemesine izin verin, ancak Scoutello'ya ait yüzeyleri bu sistemle uyumlu tutun.

İlgili kavramlar: Rotalar ve yüzeyler, Açılış sayfaları ve karoları, Tarayıcı öncelikli misafir deneyimleri.