Kurumsal Kimlik Kılavuzunu Web Sitesine Nasıl Uygularsınız? Uygulama Rehberi

Biz Talha Aslan ve ekibi olarak bu işi sahada çok kez yaptık. En sık gördüğümüz sorun şudur: kurumsal kimlik kılavuzu güzel bir PDF olarak çekmecede durur, web sitesi ise ondan bağımsız büyür. Bu rehberde kılavuzu bir geliştiricinin doğrudan kullanabileceği bir sisteme nasıl dönüştürdüğümüzü adım adım anlatıyoruz. Yani amaç, PDF ile canlı site arasındaki farkı kalıcı olarak kapatmak.

Kılavuz ile web sitesi arasındaki fark neden oluşur?

Kılavuzların çoğu basılı işi hedefler ve sabit bir sayfayı düşünür. Oysa web sitesi akışkandır; ekran genişliği, kullanıcı ayarı ve içerik uzunluğu sürekli değişir. Bu yüzden "logo her zaman sol üstte, 40 mm" gibi bir kural ekranda tek başına anlam taşımaz. Kuralın web karşılığını birinin açıkça tanımlaması gerekir.

İkinci neden iş bölümüdür. Kılavuzu bir marka ajansı hazırlar, siteyi ise başka bir ekip kodlar. Ara katmanda kimse kuralları çevirmezse geliştirici kendi tahminiyle ilerler. Sonuç olarak her yeni sayfada biraz farklı bir mavi, biraz farklı bir buton ve biraz farklı bir başlık boyutu ortaya çıkar. Zamanla bu küçük farklar markayı bulanıklaştırır.

Üçüncü neden ise kılavuzun etkileşimi hiç anlatmamasıdır. Bir butonun üzerine gelindiğinde, tıklandığında ya da devre dışı kaldığında nasıl görüneceği basılı bir broşürde yoktur. Dolayısıyla web için bu durumları sıfırdan, ama kılavuzun ruhuna sadık kalarak tasarlamanız gerekir.

Uygulamaya başlamadan önce kılavuzun hangi bölümlerini ayıklamalısınız?

İlk iş, kılavuzu okuyup web ile ilgili her kuralı tek bir listeye çıkarmaktır. Biz bunu bir tablo dosyasında yapıyoruz; her satıra kuralı, kaynağını ve web karşılığını yazıyoruz. Böylece ekibin geri kalanı PDF'i açmadan karar verebilir. Ayıklama sırasında özellikle şu başlıklara bakın:

• Logo varyantları, koruma alanı, en küçük kullanım boyutu ve yasak kullanımlar.
• Ana ve yardımcı renkler, varsa HEX, RGB, CMYK ve Pantone karşılıkları.
• Kurumsal yazı tipi ailesi, ağırlıkları ve yedek yazı tipi önerisi.
• Başlık ve metin hiyerarşisi, satır aralığı ve hizalama tercihleri.
• Fotoğraf dili, illüstrasyon tarzı ve ikon seti.
• Marka tonu, yazım kuralları ve yasak ifadeler.

Bu listede eksik kalan alanları da işaretleyin. Örneğin kılavuzda dijital renk kodu yoksa ya da yazı tipinin web lisansı belirsizse, bunları tasarıma geçmeden çözmeniz gerekir. Aksi halde ilerleyen haftalarda geri dönüp her şeyi yeniden boyamak zorunda kalırsınız.

Tasarım tokenı nedir ve kılavuzu neden tokenlara çevirmelisiniz?

Tasarım tokenı, bir tasarım kararını adı olan tek bir değere bağlayan küçük bir kayıttır. Örneğin "marka-ana-renk" adlı token bir HEX değerini, "aralik-4" adlı token ise belirli bir boşluk ölçüsünü taşır. Kod tarafında bu tokenlar çoğunlukla CSS özel özellikleri, yani CSS değişkenleri olarak yaşar.

Tokenların gücü tek kaynak olmalarından gelir. MDN'in CSS özel özellikleri belgesi bu değişkenleri bir kez tanımlayıp tüm belgede yeniden kullanabileceğinizi anlatır. Dolayısıyla marka rengi değişirse yüzlerce satırı değil, tek bir değeri güncellersiniz.

Biz tokenları iki katmanda kuruyoruz. Alt katmanda ham değerler durur: mavi tonları, gri skalası, boşluk adımları. Üst katmanda ise anlam taşıyan adlar vardır: "buton-arka-plan", "baglanti-rengi", "hata-metni". Bileşenler yalnızca üst katmanı kullanır. Böylece karanlık mod ya da kampanya teması eklemek istediğinizde yalnızca eşleşmeyi değiştirirsiniz. Bu yaklaşımın daha geniş çerçevesini tasarım sistemi rehberimizde anlattık.

Marka renklerini dijital değerlere nasıl dönüştürürsünüz?

Kılavuzda yalnızca CMYK ya da Pantone kodu varsa, ekran için ayrı bir değer belirlemeniz gerekir. Çünkü basılı mürekkep ile ekran ışığı farklı çalışır ve otomatik çeviri çoğu zaman donuk bir sonuç verir. Bu çeviri sürecinin ayrıntılarını basılı kimliği dijitale taşıma yazımızda ele aldık; burada yalnızca web sitesine özgü kısma odaklanıyoruz.

Pratikte her marka rengi için sRGB alanında bir HEX değeri seçiyoruz. Ardından bu değeri birkaç farklı ekranda, açık ve koyu ortamda karşılaştırıyoruz. Marka sahibinin onayını aldıktan sonra değer, kılavuzun dijital ekine resmi kod olarak giriyor. Renk kodlarını farklı biçimler arasında çevirmek için HTML renk kodları aracımızı kullanabilirsiniz.

Tek bir ana renk yetmez. Web arayüzü, aynı rengin açık ve koyu tonlarına ihtiyaç duyar: arka plan vurgusu, üzerine gelme durumu, kenarlık ve seçili öğe için. Bu yüzden her ana renkten genellikle sekiz ile on adımlık bir ton skalası türetiyoruz. Skalayı göz kararı değil, tutarlı bir açıklık artışıyla kurmak tonların birbirine yakışmasını sağlar.

Hangi renk sitede hangi işi yapmalı?

Renk paletini rollere bölmek, kılavuzu web'e çevirmenin en kritik adımıdır. Kılavuz genellikle "ana renk" ve "yardımcı renk" der; web ise "bağlantı", "birincil buton", "uyarı" ve "başarı" gibi rollere ihtiyaç duyar. Aşağıdaki tablo, bizim sık kullandığımız bir rol dağılımını örnek olarak gösteriyor.

Hata, başarı ve bilgi renkleri çoğu kılavuzda yoktur. Ancak sitede mutlaka gerekir. Bu renkleri seçerken marka paletinin sıcaklığına ve doygunluğuna uyan tonlar arayın. Ayrıca rengin tek başına anlam taşımamasına dikkat edin; hata mesajının yanında bir ikon ya da açık bir metin de olsun. Renklerin algısal etkisini merak ediyorsanız renk psikolojisi yazımız iyi bir başlangıç noktası olur.

Marka rengi kontrast testinden geçmezse ne yaparsınız?

Bu, sahada en çok karşılaştığımız sorundur. Birçok marka rengi beyaz zemin üzerinde metin için fazla açıktır. W3C'nin en düşük kontrast açıklamasına göre AA düzeyinde normal metin için en az 4.5:1, büyük metin için en az 3:1 oran gerekir. Üstelik bu eşikleri yuvarlayamazsınız; 4.499:1 değeri sınavı geçemez.

Aynı belge önemli bir ayrıntıyı da açıklar: logo ve marka adının parçası olan metin bu kuralın dışındadır. Fakat kılavuz, sıradan gövde metnini bu istisnaya dahil etmez. Yani markanız açık turuncu olsa bile sitedeki paragrafları ve butonları o turuncuyla okunaksız yazamazsınız.

Çözüm için genellikle şu yollardan birini seçiyoruz:

• Ana rengi dolgu olarak kullanıp üzerine koyu metin yerleştirmek.
• Metin ve bağlantılar için aynı rengin daha koyu bir tonunu türetmek.
• Rengi yalnızca büyük başlıklarda, ikonlarda ve dekoratif alanlarda tutmak.
• Marka sahibiyle konuşup kılavuza erişilebilir bir "dijital metin rengi" eklemek.

Her denemeyi renk kontrast kontrol aracımızla ölçebilirsiniz. Erişilebilirliğin geniş çerçevesi için WCAG standartları yazımıza göz atın.

Odak göstergesi ve form durumları için rengi nasıl seçersiniz?

Kılavuzlar klavye kullanıcısını neredeyse hiç hesaba katmaz. Oysa sitede Tab tuşuyla gezinen biri, hangi öğede olduğunu açıkça görmelidir. W3C'nin metin dışı kontrast açıklaması arayüz bileşenleri ve anlam taşıyan grafikler için en az 3:1 oran ister. Üstelik logo istisnası odak göstergelerini kapsamaz.

Bu nedenle odak halkası için marka paletinden belirgin bir renk seçiyoruz. Çoğu zaman ana rengin koyu tonu ya da ona zıt bir yardımcı renk iş görür. Ardından halkayı hem açık hem koyu zeminde test ediyoruz. Benzer bir dikkat form alanlarında da gerekir: kenarlık, seçili onay kutusu ve hata durumu da 3:1 sınırına uymalıdır.

Hover ve basılı durumlar için de aynı titizliği gösterin. Örneğin birincil butonun üzerine gelindiğinde rengi bir ton koyulaşabilir; ancak metin kontrastı yine sınırın üstünde kalmalıdır. Bu küçük değişimleri de token olarak tanımlamak, her geliştiricinin aynı tonu seçmesini sağlar.

Devre dışı bileşenler bu kuralın dışında kalır. Yine de onları o kadar soluk yapmayın ki kullanıcı neden tıklayamadığını anlamasın. Kısacası her durum için açık bir görsel karar verin ve bu kararı token olarak kaydedin.

Kurumsal fontu web tipografisine nasıl taşırsınız?

İlk soru teknik değil, hukukidir: kurumsal yazı tipinin web kullanım lisansı var mı? Masaüstü lisansı çoğu zaman web sitesine gömmeyi kapsamaz. Bu yüzden lisans belgesini kontrol edin ya da yazı tipi sağlayıcısına sorun. Lisans uygun değilse kılavuzun ruhuna yakın, web lisanslı bir alternatif seçmeniz gerekir.

Lisans netleştikten sonra performansa geçiyoruz. web.dev'in yazı tipi en iyi uygulamaları WOFF2 biçimini önerir, gereksiz karakterleri alt kümeyle çıkarmayı ve font-display ayarını bilinçli seçmeyi anlatır. Ayrıca alt küme oluşturmadan önce lisans iznini doğrulamanızı hatırlatır.

Kılavuzda genellikle dört beş ağırlık yer alır. Web sitesinde ise çoğu zaman iki ya da üç ağırlık yeter: normal, yarı kalın ve kalın. Her ek ağırlık ayrı bir dosya demektir. Dolayısıyla tasarımın gerçekten kullandığı ağırlıkları seçin. Yazı tipi seçimi ve eşleştirme konusunu web tipografisi rehberimizde ayrıca anlattık.

Tipografi ölçeğini ekran boyutlarına göre nasıl kurarsınız?

Kılavuz başlık boyutlarını punto ile verir; web ise piksel, rem ve görünüm alanı birimleriyle çalışır. Biz önce gövde metni boyutunu sabitliyoruz, ardından başlıkları tutarlı bir oranla büyütüyoruz. Böylece altı başlık düzeyi birbirine orantılı bir merdiven oluşturur.

Mobil ekranda büyük başlıklar fazla yer kaplar. Bu yüzden başlık boyutlarını ekran genişliğine göre esneyen bir aralıkta tanımlıyoruz. CSS'teki clamp işlevi en küçük ve en büyük sınırı korurken arada akıcı bir geçiş sağlar. Sonuç olarak okur, kılavuzdaki hiyerarşiyi masaüstünde de telefonda da aynı mantıkla takip eder.

Satır aralığı ve satır uzunluğu da ölçeğin parçasıdır. Gövde metninde rahat bir satır aralığı ve çok uzun olmayan satırlar okumayı kolaylaştırır. Kılavuzdaki hizalama tercihini ise dikkatle çevirin; iki yana yaslı metin ekranda düzensiz boşluklar yaratabilir. Örneğin basılı katalogda iki yana yaslı olan gövdeyi web'de sola yaslı kullanmak çoğu zaman daha iyi sonuç verir.

Logo kullanım kurallarını site başlığına nasıl uygularsınız?

Kılavuz koruma alanını genellikle logonun bir parçasına göre tarif eder, örneğin harf yüksekliği kadar boşluk. Web'de bu oranı korumak için logoyu SVG olarak kullanıyor ve çevresindeki boşluğu logonun yüksekliğine bağlı bir değerle veriyoruz. Böylece logo büyüyüp küçüldüğünde koruma alanı da onunla birlikte büyür ve küçülür.

En küçük kullanım boyutu da ekrana çevrilmelidir. Basılı kılavuzdaki milimetre değeri yerine, logonun net kaldığı en küçük piksel yüksekliğini test ederek belirliyoruz. Ardından mobil başlıkta bu sınırın altına inmiyoruz. Logo bu boyutta seçilemiyorsa kılavuzdaki sade varyantı ya da yalnızca amblemi kullanıyoruz.

Koyu arka planlar için ters renkli logo varyantı şarttır. Ayrıca favicon, logonun en küçük ve en sade halidir; arama sonuçlarında da yer alır. Bu konuda favicon sorunlarını anlattığımız yazıya bakabilirsiniz. Son olarak logoyu bir bağlantı olarak kullanıyorsanız ona anlamlı bir erişilebilir ad verin.

Boşluk ve ızgara sistemini kılavuzdan nasıl türetirsiniz?

Birçok kılavuz, basılı sayfa için kenar boşlukları ve sütun sayısı tanımlar. Web'de bu değerleri doğrudan kopyalamak yerine bir temel birim seçiyoruz. Örneğin 4 ya da 8 piksellik bir adım belirleyip tüm boşlukları bunun katları olarak tanımlıyoruz. Böylece bileşenler arasında rastgele değerler yerine öngörülebilir bir ritim oluşur.

Izgara için genellikle masaüstünde on iki sütunlu, mobilde ise dört sütunlu bir yapı kuruyoruz. Kılavuzdaki asimetrik yerleşimler varsa bunları bu ızgaranın içinde yeniden yorumluyoruz. Yani amaç kılavuzun görsel karakterini korumak, ama ekranın esnekliğine teslim olmaktır.

Boşluk tokenlarını da renk tokenları gibi adlandırın. "Aralik-2", "aralik-4" gibi adlar geliştiricinin elle piksel yazmasını engeller. Ayrıca tasarım dosyasıyla kodun aynı dili konuşmasını sağlar.

Fotoğraf ve ikon dilini sitede nasıl korursunuz?

Kılavuzdaki fotoğraf yönergesi çoğu zaman ruh hâlini tarif eder: doğal ışık, gerçek insanlar, sıcak tonlar. Web'de bu tarifi somut kurallara çeviriyoruz. Örneğin kapak görsellerinin en boy oranını, kırpma odağını ve üzerine metin geldiğinde devreye giren karartma katmanını tanımlıyoruz.

İkonlarda tutarlılık daha da önemlidir. Farklı setlerden gelen ikonlar, çizgi kalınlığı ve köşe yuvarlaklığı yüzünden hemen göze batar. Bu nedenle tek bir ikon seti seçiyor, gerekirse eksik ikonları aynı çizgi kalınlığıyla çiziyoruz. İkonları da SVG olarak ve mevcut metin rengini miras alacak şekilde hazırlıyoruz.

Görsellerin alt metni de marka dilinin parçasıdır. Ancak alt metin pazarlama sloganı değil, görselin ne gösterdiğinin kısa bir açıklaması olmalıdır.

Marka tonunu arayüz metinlerine nasıl yansıtırsınız?

Ton kuralları genellikle reklam metnini hedefler. Oysa sitede en çok okunan metinler butonlar, form etiketleri ve hata mesajlarıdır. Bu küçük metinlere mikro metin denir. Kılavuz "samimi ama ciddi" diyorsa, bunun bir hata mesajında nasıl duyulacağını örnekle göstermeniz gerekir.

Biz her ton kuralı için bir "yap ve yapma" çifti yazıyoruz. Örneğin "Hata oluştu" yerine "Bu e-posta adresini tanıyamadık, yazımını kontrol eder misiniz?" gibi. Ayrıca butonlarda tutarlı fiiller seçiyoruz; bir sayfada "Gönder", diğerinde "Yolla" demiyoruz. Marka dilinin site genelinde nasıl kurulduğunu marka dili rehberimizde ayrıntılı anlattık.

Hitap biçimini de baştan sabitleyin. "Sen" ya da "siz" kararı, başlıktan çerez uyarısına kadar her metinde aynı olmalıdır. Aksi halde okur farklı sayfalarda farklı bir şirketle konuşuyormuş gibi hisseder.

Bileşen kütüphanesini kılavuza göre nasıl kurarsınız?

Tokenlar hazır olduğunda bileşenlere geçiyoruz. Bileşen, buton, form alanı, kart ya da gezinme menüsü gibi tekrar kullanılan arayüz parçasıdır. Her bileşen değerlerini yalnızca tokenlardan alır; içinde elle girdiğiniz bir renk ya da boşluk değeri olmaz. Böylece kılavuz değiştiğinde bileşenler de kendiliğinden değişir.

Kütüphaneyi kurarken şu sırayı izliyoruz:

1. Temel öğeler: başlıklar, paragraf, bağlantı, liste ve tablo stilleri.
2. Etkileşimli öğeler: butonlar, form alanları, onay kutuları ve seçim listeleri.
3. Bileşik parçalar: kartlar, uyarı kutuları, sekmeler ve akordeonlar.
4. Yerleşim parçaları: üst başlık, altbilgi, gezinme ve içerik bölümleri.

Her bileşen için normal, üzerine gelme, odak, basılı ve devre dışı durumlarını belgeleyin. Ayrıca bileşenin hangi tokenları kullandığını yanına yazın. Bu belge, kılavuzun web'deki canlı karşılığı olur.

Karanlık mod kurumsal kimliği bozar mı?

Doğru kurulursa bozmaz. Ancak marka renklerini koyu zemine olduğu gibi taşımak çoğu zaman sorun çıkarır. Koyu zeminde doygun renkler titreşir, koyu tonlar ise kaybolur. Bu yüzden karanlık mod için ana rengin biraz daha açık ve daha az doygun bir versiyonunu seçiyoruz.

İki katmanlı token yapısı burada işe yarar. Anlam taşıyan "buton-arka-plan" tokenı açık modda bir değere, karanlık modda başka bir değeri gösterir. Bileşenlerin kodu ise hiç değişmez. Logoyu da ters renkli varyantıyla değiştirirsiniz. Kontrast testlerini iki mod için ayrı ayrı yapmayı unutmayın.

Kılavuz kuralları web'de neye dönüşür?

Aşağıdaki tablo, sık karşılaştığımız kılavuz kurallarının web karşılığını özetliyor. Bu tabloyu kendi projeniz için bir başlangıç şablonu olarak kullanabilirsiniz.

Tasarım dosyası ile kod arasında tokenları nasıl eşitlersiniz?

Tokenları yalnızca kodda tutarsanız tasarımcılar eski değerlerle çalışmaya devam eder. Tersine yalnızca tasarım dosyasında tutarsanız geliştirici her değeri elle kopyalar. Bu yüzden iki tarafın da aynı kaynaktan beslenmesini sağlıyoruz. Pratikte token listesini tek bir dosyada tutuyor, tasarım aracındaki stilleri ve CSS değişkenlerini bu listeden üretiyoruz.

Adlandırma burada da belirleyicidir. Tasarım dosyasında "Mavi 600" diyen bir stil, kodda da aynı adı taşımalıdır. Ayrıca her değişikliği kısa bir notla kayda geçirin: neyi, neden ve kimin onayıyla değiştirdiniz? Böylece altı ay sonra biri "bu mavi neden koyulaştı?" diye sorduğunda cevabı hemen bulursunuz.

Eşitleme için düzenli bir ritim de belirleyin. Örneğin her sürüm öncesinde tasarım stilleri ile kod değişkenlerini karşılaştıran kısa bir kontrol, sapmaları büyümeden yakalar.

Kurumsal kimliği sitede en çok hangi hatalar bozar?

Sahada en sık gördüğümüz hatalar teknik değil, alışkanlık kaynaklıdır. Ekip hızlı bir kampanya sayfası çıkarmak ister ve kısa yoldan gider. Ancak her kısa yol, kılavuzdan küçük bir sapma bırakır. Aşağıdaki hataları özellikle takip edin:

• Kampanya sayfasında paletin dışında yeni bir renk kullanmak.
• Logoyu sıkıştırmak, uzatmak ya da üzerine gölge eklemek.
• Başlıklarda kılavuzda olmayan bir yazı tipini denemek.
• Butonlarda farklı köşe yuvarlaklıkları ve farklı yükseklikler kullanmak.
• Hazır temanın varsayılan renklerini kılavuz yerine bırakmak.

Bu hataların ortak çözümü, bileşen kütüphanesini tek geçerli yol hâline getirmektir. Yani yeni bir sayfa, mevcut bileşenlerle kurulamıyorsa önce kütüphaneye yeni bileşen eklersiniz, sonra sayfayı yaparsınız. Böylece kısa yol yerine kalıcı bir çözüm üretirsiniz.

Örnek senaryo: bir üretim firmasının sitesi nasıl ilerler?

Örnek senaryo olarak, yıllardır basılı katalog kullanan bir üretim firması düşünün. Kılavuzunda koyu lacivert ve canlı sarı var, ama yalnızca Pantone kodları yazıyor. Kurumsal yazı tipi ise yalnızca masaüstü lisanslı. İlk haftada kılavuzu ayıklıyor ve eksikleri listeliyoruz.

İkinci adımda lacivert ve sarı için ekran değerlerini seçiyoruz. Lacivert, beyaz zeminde metin için rahatça geçiyor. Sarı ise beyaz zeminde metin olarak geçmiyor; bu yüzden onu buton dolgusu yapıp üzerine lacivert metin koyuyoruz. Ardından yazı tipi için web lisansı alıyor ya da yakın bir alternatif öneriyoruz.

Üçüncü adımda tokenları ve bileşen kütüphanesini kuruyoruz. Son olarak her sayfa şablonunu kontrol listesine göre test ediyoruz. Bu senaryo bir garanti değil; yalnızca sürecin tipik akışını gösteren bir örnektir.

Yayına almadan önce hangi kontrolleri yapmalısınız?

Siteyi yayına almadan önce aşağıdaki listeyi tek tek işaretliyoruz. Liste kısa görünse de her madde ayrı bir sayfa turu gerektirir.

• Tüm renkler token üzerinden geliyor, kodda elle girdiğiniz renk yok.
• Gövde metni ve butonlar 4.5:1, büyük başlıklar 3:1 kontrastı sağlıyor.
• Odak göstergesi her etkileşimli öğede belirgin ve 3:1 sınırını geçiyor.
• Logo mobilde en küçük boyutun altına inmiyor, koruma alanı yerinde duruyor.
• Yazı tipi dosyaları WOFF2 ve site yalnızca gereken ağırlıkları indiriyor.
• Hata, başarı ve bilgi mesajları renk dışında metin ya da ikonla da ayrışıyor.
• Buton fiilleri ve hitap biçimi tüm sayfalarda tutarlı.
• Karanlık mod varsa kontrast testlerini iki mod için ayrı yaptınız.
• Favicon ve paylaşım görselleri kılavuzdaki logoyla uyumlu.

Kurumsal kimlik kılavuzu yaşayan bir belge olarak nasıl kalır?

Site yayına girdikten sonra iş bitmez. Yeni kampanyalar, yeni sayfalar ve yeni ekip üyeleri gelir. Kurumsal kimlik kılavuzunun dijital eki güncel tutulmazsa birkaç ay içinde eski sorunlar geri döner. Bu nedenle kılavuzun bir sahibi olmalı ve her değişiklik o kişinin onayından geçmelidir.

Biz dijital eki, tokenlar ve bileşen kütüphanesiyle aynı yerde tutmayı öneriyoruz. Böylece belge ile kod birbirinden kopmaz. Ayrıca her yeni bileşen için kısa bir inceleme adımı ekliyoruz: renk tokenı kullanıyor mu, kontrast geçiyor mu, ton tutarlı mı? Kısacası küçük ama düzenli bir kontrol, büyük bir yeniden tasarımdan daha ucuzdur.

Yılda bir kez de genel bir denetim planlayın. Bu denetimde canlı sitenin rastgele sayfalarını kılavuzla karşılaştırın ve sapmaları listeleyin.

Kurumsal kimlik kılavuzunu sitenize kim uygulamalı?

Bu iş, marka tasarımı ile ön yüz geliştirme arasında köprü kuracak bir ekip ister. Kılavuzu okuyup tokenlara çevirebilen, kontrastı ölçen ve bileşenleri kodlayan kişilerin birlikte çalışması gerekir. Bunu sitenizde baştan sona biz kurarız; kılavuzunuzu inceleyip yol haritası çıkarırız. Kapsam ve süre için web tasarım hizmetimiz sayfasından teklif isteyebilirsiniz.

Kendi ekibinizle ilerlemek istiyorsanız bu rehberdeki sırayı izleyin: ayıklama, renk, kontrast, tipografi, logo, boşluk, ton, bileşenler ve kontrol. Takıldığınız noktada ise mevcut sitenizi kılavuzla karşılaştıran bir inceleme için web tasarım ekibimizden teklif alabilirsiniz. Sonuç olarak hedef, PDF'teki markanın ekranda da aynı güveni vermesidir.

Unutmayın ki kılavuzu uygulamak tek seferlik bir dönüşüm değil, sitenin her yeni sayfasında tekrarlanan bir alışkanlıktır. Bu alışkanlığı kurduğunuzda tasarım kararları hızlanır, tartışmalar azalır ve marka her temas noktasında aynı sesle konuşur. Üstelik yeni bir ekip üyesi de kuralları PDF yerine doğrudan bileşenlerden öğrenir.