Ana içeriğe geç

Tasarım sistemi

Scoutello sıcak, yetkin ve ürün odaklı bir his vermelidir. Tercih edilen görünüm açık, ferah, yuvarlatılmış ve editoryaldir: önce anlaşılır içerik, ardından ölçülü marka rengi, yumuşak yüzeyler ve ürünü dekoratif bir gürültüye dönüşmeden duyarlı hissettiren sakin hareketler gelir.

Pazarlama açılış sayfası, mevcut görsel yönelimin en net herkese açık referansıdır. Ürün yüzeyleri mümkün olduğunca ortak tasarım belirteçlerini yeniden kullanmalı; yalnızca yüzey açıkça markaya veya pazarlamaya yönelik olduğunda daha ifade gücü yüksek hâle gelmelidir.

Logo ve Marka Varlıkları​

Bir aracı, entegrasyonu veya oluşturulan sayfayı yeniden kullanılabilir bir marka işaretiyle donatmak gerektiğinde Scoutello logosunu herkese açık doküman varlık URL’sinden kullanın:

Ekran boyutları arasında net bir görüntü için SVG sürümünü tercih edin. Bir araç veya hedef SVG’yi desteklemiyorsa PNG sürümünü kullanın. İşaretin çevresinde yeterli boş alan bırakın; logoyu esnetmekten veya yeniden renklendirmekten kaçının. Kontrastı koruyan beyaz, sıcak krem ya da diğer sakin yüzeyler üzerinde konumlandırın.

Marka renkleri​

Birincil renk: #ff8d49

Birincil turuncuyu Scoutello vurgu rengi olarak kullanın: birincil harekete geçirici mesajlar, odaklanmış durumlar, etkin gezinme, küçük simge arka planları, vurgulu metin, yumuşak ışımalar ve sıcak degradeler. Ürün kodunda bu renk --primary: 24 100% 64% ile eşleşir; bg-primary, text-primary, border-primary/15 ve shadow-primary/10 gibi Tailwind sınıflarında kullanılır.

İkincil renk: #145466

İkincil koyu teal rengini dengeleyici bir renk olarak kullanın. Bu renk, birincil turuncuyla oluşturulan degradelerde, koyu harekete geçirici mesaj panellerinde, görsel derinlikte ve ara sıra kullanılan yüksek vurgulu marka anlarında en iyi sonucu verir. 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 kenarlıklar.
  • Üçüncül mavi: hsl(205 100% 51%) destekleyici bir belirteç olarak kullanılabilir; ancak turuncu ve teal renklerinin marka ikilisi olarak ayırt edilebilir kalması için ölçülü kullanılmalıdır.

Görsel stil​

Genel his vermekten kaçınacak kadar sıcak, temiz ve premium bir SaaS görünümünü tercih edin. Açılış sayfası krem renkli ağ arka planlarını, beyaz kartları, büyük ürün ekran görüntülerini, yuvarlatılmış köşeleri ve ölçülü degradeleri bir araya getirir.

Kullanın:

  • Genellikle rounded-2xl ile rounded-[2rem] arasında değişen yuvarlatılmış kartlar ve paneller.
  • border-primary/10, border-primary/15, ring-black/5 gibi yumuşak kenarlıklar ve açık nötr kenarlıklar.
  • Yoğun renkli bloklar yerine katmanlı beyaz veya krem yüzeyler.
  • shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 gibi ince gölgeler veya düşük opaklıklı özel gölgeler.
  • Özellikle pazarlama ve özellik anlatımlarında kanıt sunmak için büyük ürün ekran görüntüleri veya kullanıcı arayüzü maketleri.
  • Turuncu vurgulu metin, simge etiketleri, halkalar, ışıma efektleri ve degradeli harekete geçirici mesajlar gibi küçük marka dokunuşları.

Kaçının:

  • Sayfanın tamamında kullanılan yüksek sesli turuncu arka planlar.
  • Olağan kontrollerde teal renginin aşırı kullanılması.
  • Yoğun ve sıkışık düzenler.
  • Sert gölgeler, keskin dikdörtgenler veya soğuk, tek renkli panolar.
  • Okumayı ya da görevlerin tamamlanmasını engelleyen dekoratif hareketler.

Tipografi​

Pazarlama sitesi şunları kullanır:

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

Ortak uygulama ve doküman yüzeyleri, sistemle uyumlu kullanıcı arayüzü tipografisi kullanır ve şu anda Inter’a daha yakındır. Tüm yüzeylerdeki stil hedefi aynıdır: kendinden emin başlıklar, sıkı başlık harf aralığı, okunabilir gövde metni ve ferah satır yüksekliği.

Başlık yönergeleri:

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

Gövde metni yönergeleri:

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

Düzen ve Boşluklar​

Düzenler ferah ve dengeli hissettirmelidir. Açılış sayfası, duyarlı yatay dolgulu bir max-w-7xl kapsayıcısı ve geniş dikey bölümler kullanır.

Yaygın kalıplar:

  • py-16, py-20 veya büyük pazarlama bölümleri için daha geniş aralıklarda bölüm dolgusu.
  • Tutarlı boşluklara sahip duyarlı ızgaralarda düzenlenmiş kartlar.
  • Güçlü bir sol içerik sütununa ve sağda ürün ekran görüntülerine veya cihaz kompozisyonlarına sahip hero bölümleri.
  • Geniş kapsamlı ürün vaatleri için ortalanmış bölüm başlıkları; hikâye veya iş akışı bölümleri için sola hizalanmış başlıklar.
  • Büyük ekranlarda çok sütunlu düzene dönüşmeden önce düzgün şekilde alt alta dizilen, mobil öncelikli düzenler.

Beyaz alanı tasarımın bir parçası olarak kullanın. Bir bölüm anlaşılması zor görünüyorsa daha fazla dekorasyon eklemeden önce içeriği sadeleştirin ve nefes alma alanını artırın.

Bileşenler ve Yüzeyler​

Scoutello yüzeyleri dokunsal ancak hafif hissettirmelidir:

  • Düğmeler: öne çıkan pazarlama harekete geçirici mesajları için yuvarlatılmış kapsüller; diğer yerlerde standart ürün düğmeleri.
  • Kartlar: beyaz veya krem renkli, yuvarlatılmış, kenarlıklı ve hafif yükseltilmiş.
  • Simgeler: turuncu tonlu etiketlerin içinde küçük ve basit çizgi simgeleri.
  • İstatistikler ve güven unsurları: turuncu tonlu kenarlıklara veya degradelere sahip ölçülü kartlar.
  • Formlar: net etiketler, doğrudan yardımcı metin ve mobil kullanım için yeterli boşluk.
  • Ekran görüntüleri: büyük, net ve hafif yükseltilmiş. Bunları ürünün somut kanıtı olarak kullanın.

Ürün arayüzü oluştururken özel, tek seferlik stiller yerine mevcut paylaşılan arayüz bileşenleri ve token’ları temel alın. Pazarlama arayüzü oluştururken, uygun olduğu yerlerde landing primitive’lerini ve landing class’larını kullanın.

Hareket​

Hareket, arayüzün yoğun değil, özenli hissettirmesini sağlamalıdır. Landing sayfasında kısa görünme animasyonları, cihazın yükselme efektleri, ışıma efektleri ve küçük hover yükselmeleri kullanılır.

Önerilen hareketler:

  • Yumuşak opaklık geçişiyle 12–24 px aşağıdan yukarı doğru görünme.
  • Hover sırasında kartların yalnızca birkaç piksel yükselmesi.
  • CTA hover durumlarında hafif yükselme ve gölgenin belirginleşmesi.
  • Hikâye akışını taramayı desteklediği yerlerde bölümlerin kademeli olarak görünmesi.

Her zaman azaltılmış hareket tercihlerini dikkate alın. İçeriği gizleyebilecek, etkileşimi engelleyebilecek veya sayfayı anlamak için gerekliymiş gibi hissettirebilecek animasyonlardan kaçının.

Ses ve İçerik Tasarımı​

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

Kullanın:

  • Ürüne özgü isimler: landing sayfaları, kutucuklar, turlar, etkinlikler, kuruluşlar, kontrol paneli, misafirler, QR kodları, çeviriler.
  • Misafir deneyimlerini operasyon ekiplerinin iş akışlarıyla ilişkilendiren, sonuç odaklı açıklamalar.
  • Almanca ve diğer yerelleştirilmiş metinlerde cinsiyet açısından nötr dil.

Kaçının:

  • Örnek içermeyen belirsiz platform ifadeleri.
  • Gereğinden fazla resmî kurumsal jargon.
  • Taranabilir bir bölümün daha iyi sonuç vereceği uzun paragraflar.

Uygulama Kuralları​

  • Ana marka vurgusu olarak #ff8d49, ikincil dengeleyici renk olarak #145466 kullanın.
  • Ürün yüzeylerinde sabit kodlanmış renkler yerine token’laştırılmış class’ları (primary, secondary, foreground, muted, border) tercih edin.
  • Pazarlama sayfalarını sıcak, ferah, yuvarlatılmış, ekran görüntülerini öne çıkaran ve hafif animasyonlu tutun.
  • Kontrol panelini ve operasyonel yüzeyleri daha sakin, yalnızca gerektiğinde daha yoğun ve görevlere daha odaklı tutun.
  • Ürün marka oluşturma kontrolleri sunduğunda, müşterinin sahip olduğu misafir deneyimlerinin kuruluş markasını desteklemesine olanak tanıyın; ancak Scoutello’nun sahip olduğu yüzeyleri bu sistemle uyumlu tutun.

İlgili kavramlar: Rotalar ve yüzeyler, Landing sayfaları ve kutucuklar, Tarayıcı öncelikli misafir deneyimleri.