Bir iletişim aracı olarak stil rehberi (style guide)
Hayatımızdaki pek çok markanın tasarım süreçlerinde, yaratıcı takıma rehberlik eden çeşitli standartlar bulunur. Marka kimliği, görsel ve içerik başta olmak üzere, birçok alanda marka kültürü ve tasarım prensiplerini temsil eden bu standartların dokümante edilmesiyle stil rehberleri (style guide) oluşturulur.
Hayatımızdaki pek çok markanın tasarım süreçlerinde, yaratıcı takıma rehberlik eden çeşitli standartlar bulunur. Marka kimliği, görsel ve içerik başta olmak üzere, üç ya da daha fazla alanda marka kültürü ve tasarım prensiplerini temsil eden bu standartların dokümante edilmesiyle stil rehberleri (style guide) oluşturulur.
Genellikle ürün takımının işbirliği ile ortaya çıkan stil rehberlerinde; misyon, vizyon, hedef kitle, logo kullanımı ve standartları, tipografi kılavuzu, görsel kullanımı, yazım dili ve içerik standartları gibi, tasarıma ilişkin birçok prensip yer alır. Bu yazıda, görsel odaklı stil rehberlerinin başlıca öğelerinden bahsedeceğim.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Her gün kullandığımız telefonun, okuduğumuz gazetenin, girdiğimiz web sitesinin; kısacası hayatımızdaki pek çok marka logosunun kullanımına yönelik tasarım standartlarının dışına çıkılmasının, markalar tarafından kesin olarak yasaklandığını biliyor musunuz?
Stil rehberi nasıl ve kimler tarafından hazırlanır?
Stil rehberi, marka için hazırlanan marka kimliği rehberi temel alınarak, kreatif ve yazılım takımlarının işbirliğiyle hazırlanır. Çoğu büyük şirketin, sadece stil rehberi hazırlamak ve geliştirmek için özel takımları bulunur. Stil rehberinin içeriği temel ihtiyaçlar doğrultusunda belirlenir. Rehberin bilgi mimarisini görebileceğiniz indeks sayfası da bu rehberlerin en önemli bölümlerinden biridir.
Stil rehberinin olmazsa olmazları nelerdir?
1. İşin temelini iyi kurun: Marka dijital stili
Bir stil rehberinin temelinde marka kültürü bulunur. Markanın misyonu, vizyonu ve marka kimliği rehberi baz alınarak marka için dijital bir tasarım dili oluşturulur. Bu aşamada yapılacak hata, başarısız bir rehber hazırlanmasına neden olacaktır.
2. Markayı renklendirin: Renk kullanımı
Markanız için geliştirilen bir mobil uygulama arayüzünden logoya veya web sitesine kadar, pek çok amaçla kullanıma yönelik, erişilebilir ve renk standartlarına uyumlu temel renk paleti bir stil rehberinin en önemli öğelerinden biridir.
Atlassian renk paleti (atlassian.design)
3. Konuşmadan çok şey anlatın: Logo
Logonuzun, kullanıcıların markanıza ilişkin algısından satın alma kararlarına kadar, oldukça geniş bir etki alanı vardır. Dolayısıyla, logonun yanlış kullanımı marka için bir faciaya dönüşebilir. Bu nedenle, markayı en iyi şekilde anlatması önemlidir. Stil rehberinizin; logonuzun renk tonları, çizim, boşluk kullanımı, doğru ve yanlış kullanımları, kullanım alanları ve alternatif kullanımlarına kapsamlı bir şekilde cevap vermesi gerekir.
Atlassian logo kullanım örnekleri (atlassian.design)
4. Bill Gates haklı; içerik kraldır: Evet ama tipografi olmadan bir hiç
E-posta imzası, sunum içeriği, web sitenizdeki “Hakkımızda” sayfası ya da blog içeriğinizi kullanıcılarınıza en iyi şekilde anlatan araçlardan biri tipografidir. Boşluk kullanımı, büyük-küçük harf kullanımı, renk seçimi, font seçimi gibi birçok şeyi kapsar. Tipografi kullanımına ilişkin her şey, stil rehberinizde ayrıntılı bir şekilde yer almalıdır.
İçeriği güçlendirmeye veya metin içerik olmadan bir şeyler anlatmaya çalıştığımız yerlerde imdadımıza koşan tasarım elementleri ikonlardır. Stil rehberinin yapı taşlarından biridir. Kullanım alanlarının iyi belirlenmesi önemlidir. Bununla birlikte, içeriğiniz ve kullanacağınız tipografi ile uyumlu, kendine özel bir dili olmalıdır.
6. Simetri takıntılı kullanıcıları mutlu etmenin yolu: Grid sistemi
Kökleri gazete sayfalarına kadar dayanan grid sistemleri, tasarımın değişmez öğelerindendir. Responsive kelimesi hayatımıza girdikten sonra dijital ürünler için de kullanımı artarak devam etmekte olup front-end dünyasına Flexbox, Grid gibi yeni teknolojiler ve standartlar kazandırmıştır.
Menü yerleşiminden içerik ve görsel konumlandırmaya kadar, ürün içinde pek çok açıdan bütünlük oluşturmayı sağlar.
7. Cubic-bezier (0.5, 0, 0.1, 1): Hareket ve animasyon
Tasarım elementlerinin bazılarının, kimi durumlarda bir şey anlatması gerekebilir. Bir slider’ın değişme süresi ve efekti, satın alma işlemi başarıyla tamamlandığında oluşacak animasyon ya da bir buton tetiklendiğinde vereceği efektler için bir kural seti oluşturulabilir. Animasyon standartları, stil rehberinin opsiyonel elementlerinden biridir ancak; bu karar takım tarafından ortak verilmelidir.
Buraya kadar bahsettiklerimiz, görsel odaklı stil rehberinin temel yapıtaşlarıdır diyebiliriz. Bu temel üzerine, ihtiyaca yönelik component’ler (öğe) tasarlanmalı ve geliştirilmelidir.
Nedir bu component?
Ürün içinde kullanılan buton, avatar, slider, içerik, başlık gibi her türlü eleman, arayüz içinde birer component olarak yer alır. Bu component’ler gerektiğinde farklı stil ve şekillerde olsalar da özünde temel yapıları stil rehberi ile sabitlenen tasarım prensiplerine bağlı olmalıdır. İhtiyaca göre oluşturulacak her component için, birden çok farklı durum olacağı düşünülerek tasarım prensipleri belirlenmelidir.
Component’e özel durumları buton örneği ile açıklayalım:
Kullanıcıların ürün içinde aksiyon almasını sağlayan en önemli tasarım elemanlarından biri butonlardır. Butonların kullanımı, tasarım diline ve ikon yapısına uyumlu olmalıdır. Birden fazla renk, farklı boyutlar, ikonlu ve ikonsuz kullanım, hata ve başarı durumları gibi senaryolarda nasıl kullanılacakları stil rehberinde yer almalıdır.
Buton üzerinden anlattığımız bu alternatif kullanımlar, ihtiyaca göre diğer tasarım elemanları için de ayrı ayrı tasarlamalı ve örnek kullanımlarıyla birlikte stil rehberine eklenmelidir.
Çoğu insan tarafından zaman ve kaynak israfı olarak değerlendirilen stil rehberi, aslında ileriye dönük bir yatırımdır ve bir marka için olmazsa olmazlardan biridir. Ürüne görsel bir dil, değer ve bütünlük katar. Bununla birlikte, ürün için çalışan takımlar arasında bir iletişim aracı işlevi görür. Takıma yeni katılan kişiler için ürüne hızlı bir adaptasyon süreci sağlar.
Tahmin edersiniz ki bir ürünün tasarım ve geliştirme sürecine ilişkin tüm bilginin dokümante edilmemesi, ürün geliştirmenin devamlılığı açısından büyük bir problemdir. Böylesi durumlarda, takım üyelerinin projeden ayrılması halinde yaşanabilecek pek çok problem çözümsüz kalabilir ya da bu problemlere çözüm üretmek çok fazla zaman ve kaynak harcamayı gerektirebilir. Dolayısıyla, ürün takımına sonradan katılan kişilere kılavuzluk edecek bir rehber olmamasının, esas zaman ve kaynak israfı olduğu dikkate alınmalıdır.
