İllüstrasyon

İlkeler

İlke	Kural
Yerini hak eder	Her illüstrasyonun yanında anlamın tamamını taşıyan bir başlık ve metin vardır. Metin tek başına yetiyorsa ve an sıradansa ikon kullanın ya da hiçbir şey koymayın.
Tek fikir	Bir spot tek bir nesneyi, bir sahne tek bir görevin tek adımını anlatır.
Az ve ferah	Parça en küçük boyunda okunacak kadar az şekil içerir; çevresinde geniş boşluk bırakılır.
Düz ve tutarlı	Düz renk blokları, boy başına tek çizgi kalınlığı, köşeler yarıçap token’larından.
Ölçülü	Parça ağırlıkla nötrdür; marka rengi vurgudur, zemini doldurmaz.
Süs varsayılandır	Ürün ekranında illüstrasyon süstür ve ekran okuyucudan gizlenir.
Para akışında güven öndedir	Tutar girişi, onay ve makbuz ekranlarında illüstrasyon yoktur.

Nerede kullanılır

Bağlam	Kullanım	Boy	Ton
Boş durum, tam sayfa ya da panel	Evet	160 (sayfa), 120 (kart, tablo paneli)	Nötr
Arama ya da filtre sonucu yok	Evet; tablo içindeyse yalnızca ikon	120	Nötr
Hata sayfası (404, 403, 500, bağlantı yok, oturum sona erdi)	Evet	160	Nötr
Para dışı bir işin başarısı (profil kaydedildi, belge yüklendi)	Evet	160	Vurgulu
Para işinin başarısı	Yalnızca sade onay işareti, durağan ya da kısa giriş	120	Vurgulu, kutlamasız
İlk kullanım adımı	Evet	Sahne 480 × 320	Vurgulu
Özellik tanıtım kartı	Evet	240	Vurgulu
Doküman sitesi kapağı, marka paketi kapağı	Evet	Sahne 640 × 400	Vurgulu

Nötr ton (boş, hata, bekleme) yalnızca nötr slotları ve bir durum işaretini kullanır. Vurgulu ton (başarı, ilk kullanım, tanıtım) marka slotlarını da kullanır.

Nerede kullanılmaz

• Para akışlarında: tutar girişi, alıcı seçimi, gözden geçirme, onay, tek kullanımlık şifre, makbuz.
• Veri içeren form, tablo ve gösterge panellerinde ve ayar listelerinde. Bunlarda ikon kullanılır.
• Karar isteyen diyaloglarda (silme, iptal, imza).
• 120 px’ten küçük yerlerde. İllüstrasyon 120 px’in altına küçültülmez; yerine ikon kullanılır.
• Ürün içinde ekran görüntüsü ya da kolaj olarak. Ekran gösterilecekse ayrıntısız arayüz blokları çizilir.
• Arayüz ikonlarının yerine.

Stiller

BigBang’in iki illüstrasyon stili ve yalnızca tanıtımda kullanılan bir üç boyutlu katmanı vardır. Bir ekranda tek stil kullanılır.

Stil	Görünüm	Nerede
Çizgili	Düz renk dolguların çevresinde ink slotunda tek kalınlıkta dış çizgi. İç ayrıntı çizgisi 160 ve üstünde, en çok 4 adet.	Ürün içi spotlar: boş, hata, başarı, bekleme
Düz	Dış çizgisiz, iki tonlu düz renk blokları. Gölgeli yüz aynı rampanın bir adım koyusudur.	Sahneler, tanıtım kartları, doküman sitesi
Üç boyutlu	Yumuşak ışıklı hacimli nesneler.	Yalnızca tanıtım: doküman sitesi kapağı, marka paketi, sunum şablonları. Ürün ekranlarında yoktur (D-10).

Ortak kurallar:

• Perspektif: Önden, göz hizasında görünüm. İzometrik, 3/4 açı ve kaçış noktası yoktur. Derinlik, sağ ya da alt kenarda nesne genişliğinin en çok %8’i kadar bir kalınlık bandıyla verilir.
• Işık: Işık sol üstten gelir. Gradyan, parlama, doku ve gren yoktur.
• Gölge: Gölge, bulanıklık ve SVG filtresi yoktur. Nesneyi zemine oturtmak için neutral-1 slotunda bulanıksız, düz bir zemin elipsi kullanılabilir.
• Çizgiler uçları ve birleşimleri yuvarlak çizilir; dışa aktarımda dolguya çevrilir.

Ölçüler

Her boy kendi ölçüsünde çizilir; bir boy diğerinin küçültülmüş kopyası değildir.

Boy	Tuval (px)	Izgara	İç boşluk	Çizgi kalınlığı	En çok nesne
spot-120	120 × 120	4 px	8 px	2 px	1 + 1
spot-160	160 × 160	4 px	12 px	2 px	1 + 2
spot-240	240 × 240	4 px	16 px	3 px	1 + 3
scene-480	480 × 320	8 px	24 px	3 px	6
scene-640	640 × 400	8 px	32 px	4 px	8

• 2 px kalınlık border-width-focus, 1 px iç ayrıntı çizgisi border-width-default token’ıyla aynıdır.
• Köşeler yalnızca yarıçap ölçeğinden gelir (0, 4, 6, 8, 16, 24 px ve tam yuvarlak). Bir dikdörtgende tek yarıçap kullanılır. Bkz. Şekil.
• Canlı alanın spotlarda en az %35’i, sahnelerde %40’ı boş kalır.
• İllüstrasyon yalnızca tuvalin 1 ya da 2 katı boyutunda gösterilir.
• Son SVG dosyası spotlarda en çok 6 KB, sahnelerde 20 KB’tır.

Renk slotları

İllüstrasyonlar doğrudan renk kodu ya da rampa adımı kullanmaz; adlandırılmış slotlara başvurur. Her slot açık ve koyu modda bir rampa adımına bağlıdır; marka değişince renkler kendiliğinden değişir.

Slot	Görev	Açık mod	Koyu mod
ink	Tüm dış çizgiler, küçük dolu işaretler	neutral 800	neutral 100
surface	Nesne yüzü, parlak nokta	neutral 0	neutral 800
neutral-1	surface gölgeli yüzü, zemin elipsi	neutral 100	neutral 750
neutral-2	İkincil nesneler, arayüz blokları	neutral 200	neutral 700
neutral-3	Üçüncül ayrıntı, soyut figür	neutral 400	neutral 500
primary-strong	Marka nesnelerinin gölgeli yüzü	brand 700	brand 300
primary	Ana marka nesnesi	brand 500	brand 400
primary-soft	Geniş yumuşak marka alanları	brand 100	brand 800
accent	Tek ikincil renkli nesne	accent 500	accent 400
accent-soft	Yumuşak ikincil alan	accent 100	accent 800
backdrop	Kompozisyonun arkasındaki şekil	brand 50	brand 900
success	Yalnızca başarı işareti	green 600	green 400
warning	Yalnızca bekleme ve uyarı işareti	orange 600	orange 400
danger	Yalnızca hata işareti	red 600	red 400

Kurallar:

• Bir parça en çok 6 slot kullanır (ink, surface ve backdrop dahil).
• Renk aileleri: nötr ve marka, artı en çok bir ikincil renk ya da bir durum rengi.
• Durum slotları yalnızca durum işaretinde (onay, çarpı, ünlem, kum saati) kullanılır; gövdelerde kullanılmaz.
• Marka rengi (primary ve primary-strong) boyalı alanın en çok %30’unu kaplar.
• Koyu modda surface sayfadan açıktır ki nesneler kaybolmasın; hiçbir yerde saf beyaz yoktur.

İçerik kuralları

İllüstrasyonda şunlar bulunmaz:

• Yazı, harf, rakam; saat ve takvimde de sayı yoktur.
• Para birimi simgesi ve tutar içeren etiketler.
• Logo, kart ağı işaretleri, banka adları, uygulama mağazası rozetleri.
• Gerçek kart, banknot ve madeni para.
• Bayrak, sınırları olan harita, yer simgesi, dinî ya da siyasi simgeler.
• Taranabilir QR kod ve barkod. QR gerekiyorsa üç kare ve çizgilerle çizilir.
• Gerçek kişi benzerliği, yüz hatları, ten rengi, cinsiyet belirten giysi.
• El hareketleri (başparmak, tamam işareti).
• Kumbara, şans oyunu nesneleri, maskot hayvanlar.
• Korku dili: kırılan kilit, kapüşonlu figür, kurukafa.
• Eksenli ya da düşen eğilim gösteren grafikler.

İnsan gerekiyorsa yalnızca sahnelerde ve tek bir soyut figür olarak çizilir: kapsül gövde ve daire baş, yüz hattı ve saç yok, neutral-3 dolgu ve ink çizgi.

Metaforlar

Aynı kavram her yerde aynı nesneyle anlatılır.

Nesne	Çizim kuralı	Kullanım
Belge	Dikey sayfa, kıvrık köşe, 3-5 çizgi	Raporlar, belge yükleme
Büyüteç	Boş bir kartın üstünde	Arama sonucu yok, sayfa bulunamadı
Zil	Önden, sayısız nokta rozet	Bildirim yok
Kilit	Gövde, kapalı halka, anahtar deliği	Erişim yok, güvenlik
Kalkan	Simetrik, düz, isteğe bağlı onay işareti	Doğrulama, güvenlik
Takvim	Üstte halkalar, sayısız kareler, bir kare vurgulu	Planlanmış işler
Bulut	Çapraz çizgili	Bağlantı yok
Kum saati	Kumu warning slotunda	İnceleme bekliyor
Klasör	Önden, içinden yarım çıkan belge	Belge yok
Telefon	Yuvarlak köşeli, ayrıntısız arayüz bloklu ekran	İlk kullanım, cihaz doğrulama

Hareket

Animasyonlu illüstrasyon yalnızca doküman sitesinde ve tanıtım yüzeylerinde kullanılır. Ürün ekranlarında illüstrasyon durağan SVG’dir.

Animasyon	Ne hareket eder	Süre	Nerede
Giriş	Parça saydamdan görünüre, %96’dan %100 boya	240 ms, easing-expressive	Tüm parçalar
Başarı	Onay işareti çizilir, rozet hafifçe büyüyüp yerine oturur	400 ms	Başarı parçaları
Bekleme	Tek nesne 4 px salınır; iki döngü sonra durur	2 × 2,4 sn	Yalnızca sahneler ve doküman kapağı

• Hiçbir animasyon 5 saniyeyi geçmez; konfeti, yanıp sönme ve zıplayan para yoktur.
• Para akışında yalnızca kısa giriş kullanılır ve easing-productive ile çalışır.
• Azaltılmış harekette animasyonun son karesi durağan görsel olarak gösterilir. Bkz. Hareket.

Erişilebilirlik ve alternatif metin

• Ürün ekranındaki illüstrasyon süstür: alt="" ve aria-hidden="true" taşır. Anlamı yanındaki başlık ve metin taşır.
• Bir illüstrasyon tek başına bilgi taşıyorsa (yalnızca doküman sitesinde ve tanıtım yüzeylerinde) alternatif metin yazılır.
• Alternatif metin görüntünün ne anlattığını söyler, nasıl göründüğünü değil: “Boş belge klasörü” yeterlidir; “Mavi renkli, içinden kâğıt çıkan bir klasör illüstrasyonu” yazılmaz.
• “Görsel”, “resim”, “illüstrasyon” kelimeleriyle başlamayın; ekran okuyucu bunu zaten söyler.
• Alternatif metin en çok 125 karakterdir, cümle düzeninde yazılır ve iki dilde de mesaj katalogundan gelir.
• Anlam taşıyan işaret (onay, çarpı, ünlem, kilit) üzerinde durduğu renge ve sayfa yüzeyine karşı açık ve koyu modda en az 3:1 kontrast taşır.
• İllüstrasyonun içinde yazı olmadığı için çeviri gerekmez.

Fotoğraf

Ürün ekranlarında fotoğraf kullanılmaz. Doküman sitesinde ve tanıtım malzemesinde fotoğraf kullanılacaksa:

• Lisansı sınırsız ticari kullanıma, değiştirmeye ve marka paketinde yeniden dağıtıma izin verir; lisans kaydına işlenir (D-17).
• Kişi içeren fotoğrafın kullanım izni belgelenmiştir.
• Klişe kare kullanılmaz: el sıkışma, takım elbiseli gülümseyen ekip, ekranı işaret eden parmak.
• Fotoğrafın üstüne yazı konacaksa yazı ile zemin arasında en az 4.5:1 kontrast sağlanır.
• Alternatif metin kuralları illüstrasyonla aynıdır.

Yönergeler

İllüstrasyonu metinle birlikte kullanın

Henüz rapor yokRaporlar seçtiğiniz döneme göre hazırlanır.

YapınBaşlık ve metin anlamı taşır; illüstrasyon desteği verir.

YapmayınMetin olmadan illüstrasyon ne olduğunu söylemez; ekran okuyucu hiçbir şey duymaz.

Görselin içine yazı koymayın

Başlık ve açıklama metin olarak

YapınYazı görselin dışında, mesaj katalogundan gelir; iki dilde çalışır.

Görselin içinde “Hoş geldiniz” yazısı

YapmayınGörseldeki yazı çevrilemez, büyütülemez ve ekran okuyucu onu okuyamaz.