Bir iletişim aracı olarak stil rehberi (style guide)

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, üç 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.

Şu anda Girişimciler için UX serisinin 29. içeriğini okuyorsun.

Serideki diğer 29 içeriğe göz atmayı unutma!

27. Ürün kullanım metrikleriyle kullanıcı deneyimini ölçümleme
28. Kimdir bu ürün tasarımcısı (product designer)?
29. Bir iletişim aracı olarak stil rehberi (style guide)
30. A/B Testi: Daha iyi bir kullanıcı deneyimine giden en pratik yol

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?

Facebook logo kullanım standartları (facebookbrand.com)

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.

Google Fonts ekran görüntüsü

5. Neşe kaynağı ikonlar: İkonografi

İç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.

Carbon Design System ikon kütüphanesi

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.

Carbon Design System Grid yapısı

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.

Kaynak: Dribbble

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.

Carbon Design System buton kullanım örnekleri ve şekilleri

Daha fazla örnek için IBM tarafından hazırlanan Carbon Design System Button component sayfasını inceleyebilirsiniz.

Stil rehberinin fark edilmeyen değeri

Ç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.

150$ indirim fırsatı! Springboard Business Analytics kurs programı 150$ indirimli! İndirim kodunu almak için giriş yap ya da kayit ol.

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.

Referanslar:

Bugün ilk makalen bizdendi.

Daha fazlası için SHERPA Blog okuru olmalısın.
Giriş Yap Ücretsiz kaydol

Benzer Yazılar

İLGİNİ ÇEKEBİLİR
“Benim bugün burada olmamı bir ketçap sağladı.”

“Benim bugün burada olmamı bir ketçap sağladı.”

Gizle
KEŞFETMEYE DEVAM ET
10 Adımda A/B testi nasıl yapılmaz?

10 Adımda A/B testi nasıl yapılmaz?

Gizle