Icon ve Illustration Setleri: UI ve Sosyal Medya İçin

Icon ve illustration, markanın “mikro dili”dir. Kullanıcı tek bir ikon gördüğünde bile kalite ve güven hissi alır ya da “kolaj” gibi algılar. Tutarlılık; sadece estetik değil, operasyonel bir kazançtır: ekipler aynı kurala göre üretir, ajans değişse bile sistem bozulmaz. Otellerde oda/konsept/paket ikonları; B2B’de ürün özellikleri ve avantajları bu mikro dilin temel taşıdır.

Icon seti nasıl hazırlanır, nelere dikkat edilmeli?

Net cevap: Önce stil kararını ver (stroke mu solid mi), sonra ikon ızgarasını (grid) ve stroke kalınlığını sabitle, renk kullanımını kurallaştır ve export/dosya standardını yaz. Seti “tema ve kullanım alanına” göre gruplandırarak büyüt.

• •En kritik 5 karar:
• •Stil: stroke vs solid
• •Grid: 24px/32px gibi sabit ızgara
• •Stroke kalınlığı: tek değer + ölçek kuralı
• •Köşe radius’u / uçlar: round vs sharp
• •Renk: tek renk mi, sınırlı palette mi?

UI’de ikonlar “yol gösterir”: menü, durum, özellik, aksiyon… Bu yüzden okunurluk ve tutarlılık şarttır. UI ikon seti kurarken amaç; her ekranın farklı ikon diliyle konuşmasını engellemek ve kullanıcıya güven vermektir. B2B ürünlerde ikonlar özellikleri sınıflandırır; otel web sitelerinde ikonlar oda özelliklerini ve konsepti hızlı anlatır.

Stroke vs solid: hangisini seçmeliyim?

• •Stroke (çizgisel): modern, hafif, UI’da sık tercih edilir; doğru kalınlıkla premium görünür
• •Solid (dolgu): daha güçlü, “badge” etkisi; yanlış kullanılırsa ağır durabilir

Mini örnek (Otel): Oda özelliklerinde stroke ikonlar (Wi-Fi, balkon, deniz manzarası) “hafif ve premium” his verir.

Mini örnek (B2B): Özellik kartlarında solid ikonlar “netlik ve vurgu” sağlar; ancak set tek olmalı.

Grid ve stroke kalınlığı standardı

• •Grid: 24px veya 32px (ürüne göre)
• •Stroke: tek kalınlık (örn. 2px) + küçük boyutta optik düzeltme
• •Optik denge: ikon iç boşlukları eşit görünmeli (matematik değil, göz)

Sosyal medyada mikro-illustration’lar; bir fikri hızlı ve eğlenceli biçimde anlatır. Ama burada en büyük hata “her kampanyada farklı bir çizim dili” kullanmaktır. Mikro-illustration’lar, ikonlarla aynı dil ailesinde olmalı: aynı stroke, benzer köşe dili, aynı renk sınırları. Böylece feed tutarlı görünür ve marka hafızası güçlenir.

Illustration stili markaya göre nasıl seçilir?

Net cevap: Konumlandırmaya göre stil seç: premium için sade ve az detay, aile/enerjik için daha yuvarlak ve sıcak, B2B için düz ve net geometrik formlar. Sonra bu stili 5–10 temel sahne/karakter/obje setiyle standardize et.

• •Stil kararında 5 kriter:
• •Detay seviyesi (az/orta)
• •Çizgi dili (stroke uyumu)
• •Renk kullanımı (tek renk / sınırlı palette)
• •Gölge/doku (var/yok)
• •Duygu tonu (premium/rahat/yenilikçi)

Rakip içerikler çoğu zaman “ikon sitesi” listeler; ama markaya özel sistem kurma kısmı eksik kalır. Burada amaç; otel ve B2B’de hangi ikon temalarıyla başlamalı ve seti nasıl büyütmeli sorusuna pratik bir cevap vermek.

Otel ve B2B için örnek icon temaları neler?

Net cevap: Otelde oda özellikleri, konsept/paket ve deneyim alanları (spa, restoran, çocuk); B2B’de özellik/avantaj, pain-point ve süreç ikonları başlangıç için idealdir. 25–40 ikonluk bir çekirdek set, çoğu markada ilk aşamada yeterli olur; sonra ihtiyaçla büyütülür.

Otel çekirdek ikon temaları

• •Oda: Wi-Fi, balkon, manzara, metrekare, yatak tipi
• •Tesis: havuz, plaj, spa, gym, kids club
• •Paket: her şey dahil, kahvaltı, transfer, erken rezervasyon

B2B çekirdek ikon temaları

• •Özellik: otomasyon, entegrasyon, raporlama, yetki
• •Avantaj: hız, maliyet, güvenlik
• •Pain-point: dağınık veri, manuel iş, hata riski

Key Statistics / Data Point (sheet dolu): Icon seti ve illustration sistemi olan projelerde yeni ekran/post tasarım süreleri kısalırken, marka algısı daha bütünlüklü hissedilir. (Kesin rakam iddiası yok; pratik gözlem.)

Sistem kurulduktan sonra asıl başarı; sürdürülebilir yönetimdir. Aynı ikon farklı isimlerle export edilirse veya dosyalar dağınık kalırsa set hızla bozulur. Bu bölüm; Figma’da komponent yapısı, export isimleri ve sürümleme için pratik bir “operasyon standardı” verir.

Figma ve export pratikleri

• •Ikonlar component olarak tek yerde (library)
• •Varyantlar: stroke/solid ayrımı varsa net etiket
• •Export: SVG (UI), PNG/WebP (sosyal)
• •İsimlendirme: icon/otel/room-wifi gibi kategori bazlı

Dosya klasör yapısı

• •/icons/core/ (çekirdek)
• •/icons/otel/ (otel temaları)
• •/icons/b2b/ (B2B temaları)
• •/illustrations/micro/ (mikro set)
• •/guidelines/ (PDF style sheet)

Rakip yazılar genelde “ikon siteleri” önerir; ama bu sizi kısa vadede hızlandırırken uzun vadede tutarsızlaştırır. Fark yaratan yaklaşım: kendi markanız için çekirdek ikon temaları + style sheet + dosya düzeni ile bir sistem kurmak ve yeni ihtiyaçları bu sistemin içine eklemektir. Böylece her ekip üyesi aynı dili konuşur; UI, sosyal medya ve sunum birbiriyle uyumlu kalır.