Style Guide, bir markanın ya da ürünün görsel ve dilsel kimliğini belirli kurallarla tanımlayan kılavuzdur. Logo kullanımı, renk paleti, yazı karakterleri, ikon seti, görsel stil, konuşma dili gibi tüm tasarım unsurlarını tutarlı hale getirir. Bu rehber, ekipler arasında ortak bir dil yaratır ve markanın bütünlüğünü korur.
Style Guide Neden Gereklidir?
- Marka kimliğinde tutarlılık sağlar
- UI/UX ekipleri arasında iletişim kolaylığı sunar
- Geliştirici, tasarımcı ve içerik üreticilerin aynı dili konuşmasını sağlar
- Kurum dışı tasarım ajansları veya freelance çalışanlar için yön gösterici olur
Style Guide İçeriğinde Neler Olmalı?
1. Yazı Tipi (Typography)
Yazı tipi, markanın karakterini yansıtır. Style Guide’da şu detaylara yer verilmelidir:
- Başlık ve paragraf için kullanılan fontlar
- Boyut hiyerarşisi (H1–H6, p, small vs.)
- Satır aralığı (line height), harf aralığı (letter spacing)
- Responsive kullanım kuralları
2. Renk Paleti (Color Palette)
Renkler, duygusal etki yaratır ve marka hafızasında yer eder. Style Guide’da:
- Ana renkler (primary)
- İkincil renkler (secondary)
- Nötr renkler (gri tonları, siyah, beyaz)
- Durum renkleri (uyarı, başarı, hata vb.)
- Her rengin HEX, RGB ve CMYK karşılıkları
3. Logo Kullanımı
Logo kullanımında net kurallar belirlemek çok önemlidir:
- Farklı zeminlerde kullanım (açık, koyu, fotoğraf)
- Boşluk kuralları (minimum çevre boşluğu)
- Yasaklı kullanımlar (deforme etme, döndürme, gölge ekleme vs.)
- İkincil logolar, simge formatlar (favicon, mobil ikon)
4. İkon Seti
Kullanılacak ikon kütüphanesi veya özel ikonlar varsa tanımlanmalıdır:
- Stil türü: çizgisel (line), dolu (filled), iki tonlu (duotone)
- Boyut standardı
- Renk ve durum değişkenleri (hover, disabled)
- Kaynaklar: SVG sprite mı, font-icon mı?
5. Görsel Stil (Imagery & Illustration)
Kullanılan görsellerin ya da illüstrasyonların tarzı markayı doğrudan etkiler.
- Görselde kullanılacak filtreler ya da stil
- Fotoğraf çekim tarzı (gerçekçi, konsept, flat, soyut)
- Stok görsel tercihleri veya yasakları
6. Dil ve Konuşma Tarzı (Tone of Voice)
Markanın insanlara nasıl hitap ettiği, tarzını belirler:
- Resmî mi, samimi mi?
- Sen dili mi, siz dili mi?
- Emoji veya espri kullanımına izin veriliyor mu?
- Yazım kuralları, noktalama tercihleri
7. Grid ve UI Yapısı (Opsiyonel)
Eğer bu style guide bir UI kütüphanesiyle ilişkiliyse aşağıdaki bileşenler de dahil edilmelidir:
- 12’li grid yapısı, boşluklar (spacing)
- Buton, form, kart gibi UI elementleri
- Component davranışları (hover, aktif, disabled)
Style Guide’ınızı Nerede Yayınlamalısınız?
- PDF dokümanı olarak paylaşabilirsiniz
- Figma ya da Sketch içinde interaktif hale getirebilirsiniz
- Zeroheight, Storybook veya Notion ile dijital rehber oluşturabilirsiniz
İpuçları ve Öneriler
- Çok uzun metinler yerine kısa ve net açıklamalar kullanın
- Örnekli anlatımlar: doğru ve yanlış kullanımlar
- Sıkça sorulan sorular bölümü ekleyin
- Güncelleme tarihlerini mutlaka belirtin
Sonuç
Güçlü bir style guide, marka tutarlılığının temel taşıdır. Yalnızca tasarım değil, içerik, iletişim ve kullanıcı deneyimi tarafında da bir standart oluşturur. İyi hazırlanmış bir stil rehberi, zamandan kazandırır ve profesyonelliği artırır.
Kaynaklar
İlham Veren Style Guide Örnekleri
Kendi stil rehberinizi hazırlarken ilham alabileceğiniz, dünya çapında profesyonelce hazırlanmış style guide örneklerini aşağıda listeledik. Bu kılavuzlar hem görsel dilin hem de kullanıcı deneyiminin nasıl standardize edileceğini göstermesi açısından oldukça değerlidir.
-
Apple Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/
Apple’ın tüm platformları için hazırladığı detaylı bileşen ve deneyim rehberi. -
Google Material Design
https://m3.material.io/
Renk, tipografi, animasyon ve UI bileşenlerinde dünya çapında standart hâline gelen sistem. -
Atlassian Design System
https://atlassian.design/
Kurumsal araçlar için modüler UI bileşenleri ve içerik dili rehberi. -
IBM Design Language
https://www.ibm.com/design/language/
Tasarım sistemine erişilebilirlik ve mühendislik entegrasyonu odaklı kurumsal yaklaşım. -
Microsoft Fluent UI
https://fluent2.microsoft.design/
Windows, Office ve web uygulamaları için modern arayüz bileşenleri. -
Mailchimp Content & Design Style Guide
https://mailchimp.com/developer/marketing/docs/style-guide/
Marka tonu, içerik dili ve tasarım stiline dair örneklerle dolu bir içerik rehberi. -
UK Government Design System
https://design-system.service.gov.uk/
Kamu hizmetleri için erişilebilir, sade ve mobil uyumlu tasarım rehberi. -
Shopify Polaris
https://polaris.shopify.com/
E-ticaret arayüzleri için geliştirilmiş, tutarlı bir tasarım sistemi. -
Spotify Design Language
https://spotify.design/
Görsel anlatım gücü yüksek, müzikle bütünleşik bir stil yaklaşımı.