Kurumsal Kimliğini Dijitale Taşımak İsteyen Şirketler İçin Web Tasarım
Kurumsal kimlik bir logo dosyası değil, tekrar edilebilir bir dil. Web'e taşınırken bu dilin ekran karşılıkları tanımlanmazsa her sayfa biraz farklı görünmeye başlıyor. Biz kimliğinizi önce tasarım sistemine çeviriyor, siteyi o sistemden kuruyoruz.
- Marka rehberi → yazılı web kılavuzu
- Bileşen kitaplığı teslim edilir
- Kontrast ve erişilebilirlik kontrolü
- Tasarım dosyaları ve kaynak kod sizin
Aynı marka, her kanalda biraz farklı.
Kimlik dijitale taşınmadığında marka kendiliğinden dağılıyor; kimse bilerek bozmuyor, kural olmadığı için herkes kendi yorumunu ekliyor.
- Mavinin üç farklı tonu dolaşıyorSunumdaki, sitedeki ve sosyal medyadaki renk birbirini tutmuyor; hangisinin doğru olduğunu kimse bilmiyor.
- Logo her yerde başka boyuttaKimi sayfada eziliyor, kimi yerde koyu zeminde okunmuyor; beyaz ve tek renk varyantları hiç kullanılmıyor.
- Yazı tipi web'de karşılık bulmuyorBasılı işlerdeki font lisans nedeniyle siteye taşınamıyor, yerine gelişigüzel bir alternatif konuyor.
- Her yeni sayfa biraz farklıKural yazılı olmadığı için yeni eklenen sayfalar kendi düzenini kuruyor; site zamanla parçalı bir görüntüye dönüşüyor.
- Kurumsal duruş ekrana yansımıyorŞirket ciddi ve köklü, site ise hazır şablon hissi veriyor. Karar veren taraf bu farkı fark ediyor.
- Ajans değişince dil değişiyorYeni tasarımcı kendi yorumuyla başlıyor; iki yılda bir marka görünümü baştan kuruluyor.
Marka → web bileşen eşleyici
Elinizde hangi marka varlığı var? İşaretleyin; her varlığın hangi web bileşenlerine doğrudan çevrilebildiğini, eksiklerin ise hangi üretim işini gerektirdiğini görün. Hiçbir veri kaydedilmez.
Temel varlıkların çoğu eksik; işin bir kısmı kimlik üretimi olacak.
Henüz varlık işaretlemediniz. İşaretledikçe hangi web bileşenlerinin hazır malzemeyle kurulabileceğini göreceksiniz.
- Vektör logo dosyasıLogonun vektöre çevrilmesi veya yeniden çizimi.
- Logo varyantlarıEksik varyantların üretimi (negatif ve tek renk kullanım).
- Renk paletiEkran paletinin tanımlanması ve kontrast düzeltmeleri.
- Tipografi ve web lisansıWeb lisansı kontrolü ya da karaktere en yakın alternatife geçiş.
- İkon setiTek çizgi kalınlığında marka uyumlu ikon setinin üretimi.
- Fotoğraf stiliFotoğraf yönergesi; gerekirse çekim planı veya arşiv seçimi.
- Metin tonu rehberiKısa bir metin tonu notu; web için başlık kalıplarının belirlenmesi.
- Sunum ve baskı şablonlarıWeb için boşluk ölçeği ve kılavuz ızgarasının tanımlanması.
Ekrandaki liste, keşif görüşmesinin gündemini oluşturur. Elinizdeki dosyalara bakıp neyin taşınacağını, neyin üretileceğini netleştirelim.
Eşleme, kurumsal kimlik dosyalarının web tasarım sistemine tipik karşılıklarını gösteren örnek bir değerlendirmedir; dosyalarınızın içeriğine göre sonuç değişebilir. Yazı tipi kullanımı her koşulda lisansınıza bağlıdır.
Kimlikten sisteme, sistemden sayfaya.
Sayfa tasarlamadan önce dili kuruyoruz. Böylece sayfa sayısı arttıkça marka dağılmıyor, tersine güçleniyor.
- Kimlik denetimiEldeki dosyalar, renk değerleri, yazı tipi lisansı ve logo varyantları tek tek gözden geçiriliyor.TeslimVarlık envanteriEksik listesiLisans notu
- Ekran karşılıklarıMarka renkleri ekran paletine çevriliyor; kontrast, durum renkleri ve tipografi ölçeği tanımlanıyor.TeslimRenk token setiTipografi ölçeğiBoşluk ölçeği
- Bileşen kitaplığıButon, kart, form, tablo, bölüm başlığı ve gezinme bileşenleri marka diline göre tasarlanıyor.TeslimBileşen kitaplığıDurum örnekleriKullanım kuralları
- Sayfa şablonlarıKurumsal ana sayfa, hizmet, vaka çalışması ve referans şablonları aynı bileşenlerden kuruluyor.TeslimSayfa şablonlarıMobil düzenlerİçerik iskeleti
- Uygulama ve kılavuzTasarım koda dönüyor; yazılı web kullanım kılavuzu ve dosyalar teslim ediliyor.TeslimCanlı siteWeb kullanım kılavuzuKaynak kod
Prestij hissi nerede kuruluyor?
Kurumsal duruş süsten değil, tutarlılıktan ve sadelikten geliyor. Aşağıdakiler bu hissi taşıyan yapı taşları.
- SistemTasarım token setiRenk, tipografi, boşluk, köşe yarıçapı ve gölge değerleri tek yerde tanımlı.
- SistemBileşen kitaplığıButon, kart, form, tablo ve bölüm başlıkları; her birinin durumlarıyla birlikte.
- ŞablonKurumsal ana sayfaNe yaptığınızı ilk ekranda anlatan, iddiayı kanıtla destekleyen düzen.
- ŞablonVaka çalışması şablonuProblem, yaklaşım ve sonucu aynı iskeletle anlatan referans sayfası.
- ŞablonEkip ve kurumsal sayfalarKadro, tarihçe, belge ve sertifika bölümleri için tutarlı düzen.
- KaliteErişilebilirlik ve kontrastMarka renkleri okunabilirlik eşiklerine göre kontrol edilir; odak halkası tanımlanır.
Token'ları CSS değişkeni olarak kuruyor, bileşenleri Next.js veya WordPress tarafında aynı değerlerden besliyoruz; böylece bir renk değiştiğinde tüm site birlikte değişiyor. Tasarım dosyaları Figma üzerinde, bileşen kitaplığı ve değişkenleriyle birlikte teslim ediliyor.
Kimliğin kendisinde eksik varsa (logo varyantı, ikon seti, baskı şablonu) iş grafik tasarım tarafıyla birlikte planlanıyor. Kullanıcı akışları ve bilgi mimarisi de ele alınacaksa UI/UX tasarım devreye giriyor. Bir tasarım ve yazılım ortağı seçerken nelere bakılacağını yazılım firması seçerken dikkat edilmesi gerekenler yazımızda anlattık.
Örnek bir kimlik → web takvimiÖrnek
Aşağıdaki plan, marka rehberi büyük ölçüde hazır olan bir kurumsal site için örnektir. Kimlik üretimi gerekiyorsa plan önüne bir faz eklenir.
| Hafta | Ne yapılır | Hafta sonunda elinizde ne olur |
|---|---|---|
| 1. hafta | Kimlik denetimi | Varlık envanteri, lisans notu |
| 2. hafta | Ekran karşılıkları | Renk, tipografi ve boşluk token seti |
| 3–4. hafta | Bileşen kitaplığı | Bileşenler ve durum örnekleri |
| 5–6. hafta | Sayfa şablonları ve onay | Ana sayfa, hizmet, vaka çalışması |
| 7–8. hafta | Uygulama ve içerik | Test adresinde gezilebilir site |
| 9. hafta | Kılavuz, yayın ve devir | Canlı site, web kullanım kılavuzu |
Kılavuz teslimden sonra yeni sayfalar aynı bileşenlerden kuruluyor; marka dili yeni içerik eklendikçe bozulmuyor.
- HizmetWeb TasarımHizmetin tamamı: kapsam, süreç ve teslimatlar.
- HizmetGrafik TasarımLogo, kurumsal kimlik ve marka sistemi üretimi.
- HizmetUI/UX TasarımBilgi mimarisi, akış tasarımı ve prototipleme.
- RehberYazılım firması seçerken dikkat edilmesi gerekenlerTasarım ve yazılım ortağı seçerken sorulacak sorular.
- RehberTeknik SEO audit kontrol listesiKurumsal sitede teknik tarafın kontrol sırası.
- ProjeOpencartExtraKendi markamızın iki dilli kurumsal sitesi.
Sık sorulanlar
Marka rehberi, renk, font lisansı, tasarım sistemi ve teslim hakkında en çok sorulanlar.
Marka dosyalarınıza birlikte bakalım
Elinizde ne varsa paylaşın; ilk görüşmede neyin doğrudan taşınabileceğini, neyin üretilmesi gerektiğini netleştirelim.
- ✓ Keşif görüşmesi ücretsiz
- ✓ Kurallar yazılı teslim edilir
- ✓ Tasarım dosyaları sizin
Markanız ekranda da aynı dili konuşsun
Kimliği tasarım sistemine çeviriyor, siteyi o sistemden kuruyor, kuralları yazılı bırakıyoruz.