Kendin Yap Marka: Logo, Renkler ve Uyumlu Bir Web Sitesi Oluşturma
Basit bir DIY marka akışı öğrenin: kolay bir logo tasarlayın, renk paleti ve yazı tipleri seçin ve her yerde tutarlı görünen bir web sitesi oluşturun.

"Uyumlu Marka" Nasıl Görünür (ve Neden Önemlidir)
"Uyumlu marka" her şeyin tamamen aynı görünmesi demek değildir. Her şeyin aynı görsel kurallar dizisini takip etmesi demektir—böylece logonuz, renkleriniz, yazı tipleriniz ve web düzeniniz tek bir markaya aitmiş gibi hissedilir.
Kurallar tutarlı olduğunda, insanlar sizi daha hızlı tanır, size daha çabuk güvenir ve sitenizde daha az sürtünme ile ilerler. Tutarsızsa, işiniz parçalı hissedilebilir—her parça tek başına "güzel" görünse bile.
"Uyumlu" olmak gerçekte ne demektir
Pratik düzeyde, uyumlu marka birkaç temel unsurda tutarlılıktır:
- Logo sistemi: aynı logo versiyonlarının tekrar tekrar kullanılması (her sayfa veya platform için farklı logo değil).
- Renk kuralları: net rolleri olan küçük bir palet (birincil, vurgu, arka plan, metin) ve bu rollerin sayfalar boyunca aynı şekilde kullanılması.
- Tipografi: başlıklar, gövde, butonlar/etiketler için basit bir hiyerarjiye sahip bir veya iki yazı tipi ailesi.
- Düzen kalıpları: tekrar eden boşluk, hizalama ve UI stilleri (butonlar, kartlar, form alanları) böylece sayfalar bağlı hisseder.
Ana sayfanızın, bir e-postanın ve bir Instagram gönderisinin ekran görüntüsünü alıp—bunların açıkça aynı şirkete ait olduğunu söyleyebiliyorsanız—doğru yoldasınız.
Gerçekçi DIY hedefleri belirleyin (basit, net, tekrarlanabilir)
DIY markalaşma, karmaşıklıktan ziyade açıklık hedeflendiğinde en iyi çalışır. Amacınız sonsuz bir "yaratıcı" sistem kurmak değil—tahmin yapmadan tekrarlayabileceğiniz bir şey inşa etmektir.
İyi bir DIY hedefi:
- 1 logo konsepti birkaç kullanılabilir varyasyonla
- 1 renk paleti ekranlarda okunabilir
- 1–2 yazı tipi temel bir tip ölçeğiyle
- Yeniden kullanılabilir küçük bir bileşen seti (butonlar, başlıklar, görsel tarz)
Oluşturacağınız varlıklar (her şeyin tutarlı kalması için)
Markanızı her yerde yeniden kullanacağınız bir kit gibi düşünün. Sonunda şunlara sahip olmalısınız:
- Logo dosyaları (SVG/PNG) tam renk, tek renk ve ikon işareti (gerekirse) olarak
- Marka renk paleti HEX kodları ve kullanım notlarıyla
- Tipografi kuralları (yazı tipi seçimleri, başlık/gövde/buton boyutları ve ağırlıkları)
- UI temelleri: butonlar, bağlantılar, form alanları, basit ikonlar
- Görsel kuralları (fotoğraf stili veya illüstrasyon stili, filtreler, arka planlar)
- Sayfa şablonları (ana sayfa bölümleri, ürün/hizmet sayfası, iletişim)
Markanızın nerede "uyumlu" olması gerektiğine karar verin
Tasarım yapmadan önce insanların sizi nerede göreceğini listeleyin. Çoğu küçük işletme için tutarlılık gereklidir:
- Web sitesi (özellikle ana sayfa, fiyatlandırma/hizmetler, iletişim)
- E-posta (bülten şablonları, imzalar)
- Sosyal (profil resimleri, gönderi şablonları, hikâye kapakları)
- Faturalar/teklifler ve PDF'ler
- Ambalaj veya baskı (ürün gönderiyorsanız veya yüz yüze çalışıyorsanız)
Amaç: uyumlu marka karar yorgunluğunu azaltır. Kurallarınız bir kez belirlendiğinde, yeni sayfalar ve gönderiler daha hızlı oluşturulabilir—ve her şey yine de sizinmiş gibi görünür.
Tasarımdan Önce Net Bir Marka Yönü Belirleyin
Logoya veya renk paletlerine bakmadan önce markanızın ne sinyal vermek istediğine karar verin. Bu adımı atlarsanız, zevkinize göre tasarım yaparsınız ve sonra neden web sitesi, logo ve sosyal medyanın farklı şirketlere ait gibi hissettirdiğini merak edersiniz.
1) Tek cümlelik bir marka vaadi yazın
Müşterinin başını sallayıp "Evet, bu yaptığınız şey" demesini sağlayacak kadar açık ve spesifik tutun.
Örnek formül:
“Biz [hedef kitleye] [sonuç] sağlamaya yardımcı oluruz, [nasıl] yaparak, [yaygın sıkıntı] olmadan.”
Bu cümle bir filtre olur: bir tasarım seçeneği bu vaadi desteklemiyorsa, sadece süslemeymiş demektir.
2) 3–5 marka sıfatı seçin (tasarım korumaları)
İnsanlarda bırakmak istediğiniz hissi tanımlayan kelimeler seçin.
Şöyle karışımlar deneyin:
- samimi, sakin, pratik
- premium, minimal, kendinden emin
- cesur, neşeli, enerjik
Sıfatlar çelişirse (örn. “lüks” + “ucuz”), görselleriniz de zorlanır.
3) Hedef kitlenizi ve onların neye önem verdiğini belirleyin
Sadece demografide kalmayın. İnsanların sizi seçerken o anda neyin önemli olduğunu yazın:
- Zaman mı tasarruf etmek istiyorlar, riski azaltmak mı, patronlarına iyi görünmek mi, yoksa bütçeye mi uymak istiyorlar?
- Onların size daha hızlı güvenmesi için ne gerekir?
Bu, daha sonra tipografiyi (resmi vs samimi), boşluğu (sakin vs çarpıcı) ve hatta buton etiketlerini etkileyecektir.
4) 10–15 ilham örneği toplayın (sadece ekran görüntüleri)
Ana sayfaların, logoların, ambalajların ve sosyal gönderilerin ekran görüntülerini alın. Ekran görüntüleri stabildir, karşılaştırması kolaydır ve desenleri fark etmenizi sağlar.
5) Neleri beğendiğinizi not edin
Her örnek için neden işe yaradığını yazın:
- renkler (soluk vs parlak)
- boşluk (ferah vs sıkışık)
- fotoğraf stili (gerçek insanlar vs sadece ürün)
- logo stili (wordmark vs ikon)
Artık net bir yönünüz var—böylece logo, renkler ve web sitesi amaçlı olarak uyum sağlar.
Logo Temelleri: Basit Bir Logo Sistemi Seçin
DIY logo karmaşık olmak zorunda değildir ki profesyonel görünsün. Önemli olan, net, tekrarlanabilir olması ve gerçekten kullanacağınız yerlerde çalışmasıdır—web sitesi başlığı, sosyal profil, faturalar ve küçük bir favicon gibi.
İsminize uyan bir logo tipi seçin
Bunlardan birini seçerek başlayın:
- Wordmark: işletme adınızın karakteristik bir tip stiliyle yazılması. İsminiz kısa ve kolay okunuyorsa harika.
- Lettermark: baş harfler (örn. “AB”). İsim uzun veya telaffuzu zor ise yardımcı olur.
- İkon + wordmark: isminizle eşleştirilen basit bir sembol. Uygulama ikonu istiyorsanız veya bazen sadece ikon kullanacaksanız işe yarar.
Emin değilseniz, wordmark genellikle en güvenli ve kolay DIY seçeneğidir.
Bir “varsayılan” versiyon belirleyin
Basit bir logo sistemi, çoğunlukla kullandığınız bir birincil versiyonla başlar—genellikle yatay, tek renkli bir logo.
Şimdi varsayılanınızı belirleyin, örneğin:
- Yatay wordmark (web başlıkları için en uygun)
- Üst üste wordmark (kare alanlar için iyi)
- İkon + wordmark (gerçekten ikona ihtiyacınız varsa)
Amaç: her yeni kullanım için logoyu yeniden tasarlamamalısınız.
Küçük boyutlarda okunaklı tutun (favicon testi yapın)
Logonuzu yaklaşık 16–32 px boyutuna küçültün. Eğer bulanıklaşıyorsa, basitleştirin.
Yaygın çözümler:
- İnce çizgileri ve küçük boşlukları kaldırın
- Eleman sayısını azaltın
- Harfler arasındaki boşluğu artırın
- Logonun içinde uzun sloganlardan kaçının (bunları ayrı tutun)
Favicon testinden geçen bir logo genellikle diğer yerlerde de çalışacaktır.
Detaylardan ve efektlerden kaçının—temiz şekillere öncelik verin
DIY logolar genellikle şu hataları yapar:
- Gradyanlar, gölgeler, konturlar, dokular
- Küçük parçaları olan karmaşık ikonlar
- Okunabilirliği zorlayan aşırı süslü fontlar
Bunun yerine temiz şekiller ve güçlü kontrast hedefleyin. Logo tek renkte sade bir arka planda da iyi görünmelidir.
Güvenli varyasyonlara karar verin (tutarlılığı korumak için)
Farklı alanlar için birkaç öngörülebilir varyasyona ihtiyacınız olacak. Sınırlı ve kasıtlı tutun:
- Yatay (birincil)
- Üst üste (dar düzenler için)
- Sadece ikon (sadece gerçekten tanınabiliyorsa)
Ayrıca kabul edilebilir renk versiyonlarını belirleyin:
- 1-renk koyu
- 1-renk açık (koyu arka planlar için)
Bu varyasyonlar baştan tanımlandığında, web sitesi, sosyal profiller ve belgeler otomatik olarak daha tutarlı görünür—hatta her şeyi kendiniz yapıyor olsanız bile.
Pratik DIY Logo İş Akışı (Eskizden Finale)
Sanatçı olmanız gerekmiyor—kullanılabilir bir logo yapmak için tekrarlanabilir bir sürece ihtiyacınız var. Amaç bir başyapıt yaratmak değil. Web başlığına, sosyal profile, faturaya ve ambalaja koyduğunuzda işleyen bir logo oluşturmaktır.
Adım 1: 10 dakikalık eskiz sprinti yapın
Zamanlayıcıyı 10 dakikaya ayarlayın ve 20 küçük fikir çizin. Küçük kutucuklar halinde mini eskizler yapın.
Nicelik, kaliteye göre önemlidir—ilk makul fikre takılmayı engeller. Çoğu eskiz kötü olacak—bunun amacı bu.
Adım 2: 2–3 net yön keşfedin
Birkaç eskizi seçin ve kasıtlı olarak farklı logo “türlerini” test edin:
- Sadece metin: karakteristik bir wordmark (çoğunlukla kullanımı en kolay olan)
- Monogram: sıkıştırılmış bir baş harf şekli (ikon ve favicon için iyi)
- Basit sembol: adla eşleştirilen tek tanınabilir şekil (çok basit tutulduğunda en iyi)
Her yön için birkaç varyasyon tutun ki adilce karşılaştırabilesiniz.
Adım 3: Geometri ve güçlü silüetle sadeleştirin
Detay eklemeden önce logoyu kalın bir silüet olarak çalıştırın. Şunu sorun:
- Tek renk olsaydı yine tanınır mıydı?
- Küçük boyutlarda (tarayıcı sekmesi ikonu gibi) net kalıyor mu?
Daireler, kareler, düz çizgiler gibi temel geometri kullanarak şekilleri temizleyin. Burada DIY logolar genellikle hızla düzelir: daha az detay, daha temiz kenarlar, daha iyi denge.
Adım 4: Hızlı benzersizlik kontrolü yapın
Beğendiğiniz yönü bulduktan sonra yakın kopyalardan kaçınmak için hızlı bir arama yapın:
- İşletme adınız + “logo” araması yapın
- Sektörünüzde benzer semboller arayın
- Sembol fikrinin görsel aramasını yapın
Burada yasal bir temizlik yapmıyorsunuz—sadece bariz benzerliklerden kaçınmak amaçlanır.
Adım 5: 1–2 finalist seçin ve hizalamayı rafine edin
Artık “fikir modu”ndan “parlatma modu”na geçin. Bir ana seçenek (ve bir yedek) seçin ve şu öğeleri düzeltin:
- Harfler arasındaki boşluk
- Sembol ile metin arasındaki hizalama
- Tutarlı çizgi kalınlığı
- Logonun etrafında temiz alan tanımı
Kullanacağınız basit bir dosya seti dışa aktarın: tam logo (sembol + isim), ikon versiyon ve tek renk versiyon gibi.
Ekranlarda İyi Çalışan Marka Renkleri Seçin
Renk, "uyumlu marka"nın ya hemen oturmasını sağlar ya da sessizce dağıtır. Ekranlarda paletiniz iki işi birden yapmalı: size ait hissettirmeli ve telefonlar, dizüstü bilgisayarlar ve farklı ışık koşullarında okunabilir olmalı.
Basit bir palet yapısı ile başlayın
Sıkı tutun. İyi tanımlanmış küçük bir renk seti, logonuz, web siteniz, sosyal gönderileriniz ve belgeleriniz arasında tutarlı uygulamayı kolaylaştırır.
- Birincil renk: ana marka sinyali (butonlar, bağlantılar, önemli vurgular için)
- 1–2 ikincil renk: birincile destek (bölümler, rozetler, illüstrasyonlar için)
- Nötr griler: metin, arka plan, çerçeve ve ince UI öğeleri için ana işçi seti
Hangi rengin “birincil” olması gerektiğinden emin değilseniz, hızlıca insanların sizi o renkle ilişkilendirmesini istediğiniz rengi seçin ve her seferinde aynı yerlerde kullanın.
Okunabilirlik için plan yapın (önce kontrast)
Hoş bir palet, metin ve butonlar okunaklı değilse işe yaramaz. Bir tonu sevmeden önce gerçek UI durumlarında test edin:
- Arka plan üzerindeki gövde metni (uzun paragraflar)
- Butonlar ve etiketleri (özellikle mobilde)
- Metin içindeki bağlantılar (göze batmadan net olmalı)
Pratik bir kural: kısık bakmanız gerekiyorsa, son renk değildir. Şüphede metni koyulaştırın, arka planı açın ve parlak/ doygun renkleri aksan için saklayın.
Renk “rolleri” tanımlayın (sitenin tutarlı kalması için)
"Mavi, yeşil, gri" diye düşünmek yerine renklerin yaptığı işleri düşünün:
- Arka plan: sayfa ve bölüm dolguları
- Metin: başlıklar, gövde, yardımcı metin
- Vurgular: ikonlar, bağlantı rengi, küçük UI noktaları
- Öne çıkanlar: çağrı kutuları, rozetler, seçili durumlar
- Çerçeveler: ayırıcılar, input kenarlıkları, ince çerçeveler
Böylece her sayfa aynı renkleri farklı amaçlar için "yorumlamamış" olur.
Açık mı koyu bir his mi istiyorsunuz bunu belirleyin
Çoğu küçük işletme sitesi açık varsayılan ile daha iyi çalışır (beyaz / neredeyse beyaz arka plan, koyu metin) çünkü temiz okunur ve tanıdıktır.
Markanız doğal olarak koyu bir tona eğilimliyse (lüks, gece hayatı, teknoloji), güçlü bir koyu versiyon tasarlayın—sadece renkleri tersine çevirmeyin. Koyu ve açık modlara ürününüz yazılım ağırlıklı değilse veya kitleniz beklemiyorsa aynı anda ihtiyacınız yoktur.
Kullanılabilir renk spesifikasyonlarını yazın
Renk seçimlerinizi tasarım aracınızda tutmayın. Mini stil rehberinizde paletinizi saklayın:
- HEX (web için varsayılan)
- RGB (dijital dışa aktarımlar için)
- Opsiyonel CMYK (baskı yapacaksanız)
Örnek format:
- Primary: #2F6BFF | RGB 47, 107, 255 | CMYK 82, 58, 0, 0
- Secondary: #19B37A | RGB 25, 179, 122
- Neutral 900 (metin): #111827 | RGB 17, 24, 39
Bunları belirledikten sonra logo, web butonları ve pazarlama materyalleri ayrı projeler gibi görünmeyi bırakır ve tek bir marka gibi görünür.
Yazı Tiplerini Seçin ve Basit Bir Tipografi Hiyerarjisi Oluşturun
Tipografi, markanızı kasıtlı hissettirmek için en hızlı yollardan biridir. Başlıklar, gövde metni ve butonlar net bir düzen izlediğinde, logo ve renkler özellikle web sitesinde daha rafine görünür.
1) İki yazı tipi (veya tek esnek aile) seçin
Başlıklar için bir ana yazı, gövde metni için ikincil bir yazı seçin. Basit tutun: en fazla iki yazı tipi, veya bir yazı tipi ailesi (Regular, Medium, Bold) seçip her yerde kullanın.
Pratik eşleştirme kuralı: başlık yazısı hafif karakter sahibi olsun, gövde yazısı okunması kolay ve nötr olsun. Emin değilseniz, her ikisi için iyi tasarlanmış bir iş yazı ailesi kullanın ve kontrastı ağırlık/boyutla oluşturun.
2) Tekrarlayacağınız küçük bir tip ölçeği belirleyin
Kocaman bir sistem gerekmez—sadece tutarlı bir sistem. Şunları tanımlayın:
- H1 (sayfa başlığı)
- H2 (bölüm başlıkları)
- H3 (alt bölümler)
- Gövde (ana paragraflar)
- Küçük (altyazılar, yardımcı metin)
Bu boyutları stil rehberinize yazın ki ana sayfa, ürün sayfaları ve blog sürüklenip farklılaşmasın.
3) Okunabilirlik için satır yüksekliği ve boşluk kuralları belirleyin
İyi boşluk, temel fontları bile premium gösterir. Başlangıç için öneriler:
- Gövde metni satır yüksekliği: 1.5–1.7
- Başlık satır yüksekliği: 1.1–1.3
- Paragraf aralıklarını tutarlı tutun (büyük boşluklarla sıkı blokları rastgele karıştırmayın)
Metniniz okunması zor hissediyorsa, genellikle sorun font değil boşluktur.
4) Yazı tipinin ihtiyaçlarınızı desteklediğinden emin olun
Kesinleşmeden önce fontların gerçekten kullanacağınız karakterleri içerdiğini kontrol edin: para birimi sembolleri, noktalama işaretleri, aksanlı harfler ve özel karakterler. Bu, sonradan çirkin yerine koymalardan kurtarır.
Bu seçimleri /brand-guidelines sayfanıza kilitleyin ki her yeni sayfa görsel olarak tutarlı kalsın.
Mini Stil Rehberi Oluşturun (UI + Görsel Kurallar)
Mini stil rehberi, web sitesi, sosyal gönderiler veya basılı malzemelerle uğraşırken takip edeceğiniz tek sayfalık bir kural kitabıdır. Amaç her olasılığı belgeleme değil—kazara tutarsızlığı engellemek.
1) Bir şekil stiline karar verin (ve buna bağlı kalın)
UI için varsayılan bir köşe yarıçapı seçin ve tutarlı kullanın.
- Yuvarlak dostça ve modern hissettirir.
- Keskin net, geleneksel veya teknik bir his verir.
Örneğin: “Tüm kartlar, inputlar ve butonlar 8px köşe yarıçapı kullanır.” Eğer logonuz çok geometrik ve keskinse, keskin köşelerle eşleştirmek daha kasıtlı görünür.
2) Buton stillerini tanımlayın: birincil, ikincil ve metin bağlantıları
Butonlar markaların hızla karıştığı yerlerdir. Bu üç stili belirleyin ve her yerde tekrar kullanın:
- Birincil buton: ana eylem rengi (genellikle güçlü marka renginiz), dolgu dolu.
- İkincil buton: daha sakin bir seçenek (çerçeveli veya hafif dolgu).
- Metin bağlantısı: bağlantı gibi görünen, düşük öncelikli eylemler için.
Her biri için bir satır: arka plan rengi, metin rengi, kenarlık (varsa) ve hover davranışı (hafif koyulaşma, altı çizgi vb.).
3) Sürdürülebilir bir ikon stili seçin
Çizgisel veya dolgu ikonlardan birini seçin—karıştırmayın. Çizgisel ikon kullanıyorsanız sabit bir çizgi kalınlığı (örn. 2px) ve köşe stili (yuvarlak vs kare) belirleyin. Bu küçük karar sayfalarınızı tasarlanmış hissettirir.
4) Boşluk kurallarını belirleyin (parlak görünmenin en kolay yolu)
Basit bir boşluk ölçeği kullanın, böylece marjinler ve dolgularda niyetli görünürsünüz. Yaygın bir seçim 8px sistemidir:
- Boşluk adımları: 8, 16, 24, 32, 48
Kural: rastgele değerliler kullanmayın; tutarlı boşluk anında uyum sağlar.
5) Fotoğraf/illüstrasyon stilini ve temel düzenleme kurallarını seçin
Bir görsel yön belirleyin:
- Fotoğraf: parlak ve ferah mı, yoksa koyu ve kontrastlı mı?
- İllüstrasyon: düz, el çizimi veya 3D mi?
Sonra hızlı düzenleme kuralları koyun: “Sıcak ton, orta kontrast, doğal ten tonları, ağır filtre yok.” Bu, ana sayfa ve Hakkımızda sayfasının farklı markalar gibi hissetmesini engeller.
Bunları “Style Guide v1” adlı tek bir belgede toplayın. Bir şeyi güncellediğinizde önce dokümanı güncelleyin—sonra değişikliği uygulayın.
Site Haritası: Sayfalar, Navigasyon ve Düzen Tutarlılığı
Markalaşma sadece logo ve renklerle bitmez—web sitesi markanızı insanların gerçekten deneyimlediği yerdir. Basit bir site haritası ve tekrarlanabilir bir düzen sistemi, sitenizin tasarlanmış hissettirmesini sağlar, hatta kendiniz inşa ediyorsanız bile.
Temel sayfaları planlayın (küçük başlayın)
Çoğu küçük işletme büyük bir menüye ihtiyaç duymaz. Birkaç net sayfa istenen soruları yanıtlamalı: ne yaptığınız, kimin için olduğu, neden değerli olduğu ve nasıl satın alınacağı/iletişime geçileceği.
Sağlam bir başlangıç seti:
- Ana sayfa: ne yaptığınızı en hızlı şekilde açıklayan + birincil CTA
- Hakkında: hikayeniz, değerleriniz ve güvenilirlik (müşteri odaklı tutun)
- Hizmetler/Ürünler: neler sunduğunuz, neler içerdiği, mümkünse başlangıç fiyatları veya "fiyatlar" aralığı
- İletişim: basit bir form + e-posta/telefon + konum/hizmet alanı
- SSS (isteğe bağlı ama güçlü): itirazları ele alır ve iletişimi azaltır
Birden fazla hizmet sunuyorsanız, başlangıçta bir ana Hizmetler sayfası ve ileride ayrı hizmet sayfaları düşünün—günün ilk gününde zorlamayın.
Ana sayfa yapısını markanıza uygun şekilde taslağlayın
Ana sayfa, öngörülebilir bir akış takip ettiğinde en iyi çalışır. Diğer siteleri kopyalamıyorsunuz—insanların zaten anladığı bir kalıbı kullanıyorsunuz.
Pratik yapı:
- Başlık + alt başlık (ne yaptığınız, kimin için ve sonuç)
- Faydalar (3–5 net madde, sade dil)
- Kanıt (referanslar, logo'lar, önce/sonra, kısa vaka çalışması)
- Birincil CTA (randevu al, satın al, teklif iste, katıl vb.)
- SSS (en önemli 4–6 soru)
CTA site genelinde tutarlı olsun. Ana eylem "Randevu al" ise diğer sayfalarda rastgele "Başlayın"a geçmeyin.
Düz yazı navigasyon etiketleri kullanın
Navigasyon kullanıcıya ne alacağını anlatmalı, iç isimlendirmelerinizi değil. Genellikle "Hizmetler" "Çözümler"den daha açıklayıcıdır. "Çalışmalar" belirsiz olabilir; kitlenize bağlı olarak "Portfolyo" daha net olabilir.
İpucu: üst nav'ı 4–6 öğe ile sınırlayın. Daha fazlası varsa bir açılır menü kullanın (az) veya ikincil sayfaları alt bilgiye taşıyın.
Tutarlılığı bir tasarım kuralı yapın, umut değil
İşte mini stil rehberinizin işe yaradığı yer. Birkaç düzen kararını seçin ve her yerde tekrarlayın:
- Her sayfada aynı header ve footer
- Aynı tip ölçeği (H1, H2, gövde, küçük metin)
- Aynı buton stilleri (birincil vs ikincil, dolgu, padding, köşe yarıçapı)
- Aynı boşluk ritmi (ör. bölüm padding ve öğe arası boşluk)
Her sayfa aynı ızgara, boşluk ve bileşenleri paylaştığında, markanız bağlı hissedilir—içerik değişse bile.
Hızlı kurarken; kurallarınızı yeniden kullanılabilir bileşenlere dönüştüren araçlar yardımcı olabilir. Örneğin Koder.ai ile stil rehberinizi (renkler, tipografi, buton varyantları, boşluk ölçeği) tanımlayarak tutarlı React tabanlı sayfalar ve bileşenler oluşturabilirsiniz—sonra her seferinde yeni UI yaratmak zorunda kalmadan yineleyebilirsiniz.
SSS
“Matching branding” aslında ne anlama geliyor?
Bu, görsellerinizin her yerde aynı kurallara uyması demektir—logo varyasyonları, renkler, yazı tipleri, boşluk ve UI bileşenleri—böylece her şey aynı markaya aitmiş gibi görünür.
Hedef tutarlılıktır; her platformda tamamen aynı düzenleri kullanmak değil.
Küçük işletme web sitesi için uyumlu marka neden önemlidir?
Tutarsız görseller sürtünme yaratır: insanlar tereddüt eder, size daha az güvenir ve işiniz "dağınık" hissedilebilir, her parça tek başına güzel olsa bile.
Tutarlı kurallar, insanların sizi daha hızlı tanımasını ve sitenizde daha az kafa karışıklığıyla ilerlemesini sağlar.
Tasarımcı değilsem gerçekçi bir DIY marka hedefi nedir?
Pratik bir DIY başlangıç şunlardır:
- 1 logo konsepti ve birkaç varyasyonu (yatay / üst üste / yalnız ikon gerekiyorsa)
- Ekran için uygun bir palet (birincil, 1–2 ikincil, nötrler)
- 1–2 yazı tipi ve basit bir hiyerarşi
- Yeniden kullanılabilir küçük bir UI bileşen seti (butonlar, formlar, kartlar)
Tekrarlanabildiğiniz sürece, çalışıyordur.
Herhangi bir şey tasarlamadan önce nasıl net bir marka yönü seçerim?
Bir cümlelik marka vaadiyle başlayın:
“Biz [hedef kitleye] [sonuç] sağlamaya yardımcı oluruz, [nasıl] yaparak, [yaygın sıkıntı] olmadan.”
Sonra 3–5 marka sıfatı seçin (örn. sakin, pratik, modern) ve her tasarım kararını bu filtreye göre değerlendirin.
DIY marka için hangi logo türünü seçmeliyim?
Emin değilseniz, wordmark (işletme adınızın metin olarak kullanımı) genellikle en güvenli DIY seçenektir: basit, esnek ve okunması kolay.
Kullanıma göre seçenekler:
- Wordmark (kısa, okunaklı isimler için)
- Lettermark (uzun isimler için baş harfler)
- İkon + wordmark (gerçekten bir ikon gerekiyorsa)
Logomun küçük boyutlarda (favicon gibi) işe yarayıp yaramadığını nasıl anlarım?
Logo’yu 16–32px (favicon boyutu) kadar küçültün. Eğer bulanıklaşıyorsa, basitleştirin.
Hızlı düzeltmeler:
- İnce çizgileri ve küçük boşlukları kaldırın
- Harfler arasındaki boşluğu artırın
- Logonun içinde slogan kullanmaktan kaçının
- Tek renkte de çalıştığından emin olun
Aslında kaç tane marka rengine ihtiyacım var?
Basit bir yapı kullanın:
- Birincil (ana butonlar/bağlantılar)
- 1–2 ikincil (destekleyici bölümler/rozetler)
- Nötr griler (metin, arka planlar, çerçeveler)
Renklerin işlerini (metin, arka plan, vurgu, kenarlık) belirleyin ve her zaman aynı şekilde kullanın—aksi takdirde sayfalar paleti farklı şekillerde “yorumlar”.
Renklerimin okunabilir ve erişilebilir olduğundan nasıl emin olurum?
Kontrastı ve okunabilirliği önceliklendirin. Gerçek UI durumlarında test edin:
- Arka plan üzerindeki gövde metni
- Butonlar ve etiketleri (özellikle mobilde)
- Paragraf içindeki bağlantılar
Eğer kısık gözle bakmanız gerekiyorsa, düzeltin: metni koyulaştırın, arka planı açın ve parlak renkleri küçük vurgu olarak saklayın.
Yazı tiplerini seçmenin ve basit bir tipografi hiyerarşisi oluşturmanın en kolay yolu nedir?
Basit tutun:
- Bir esnek yazı ailesi (farklı ağırlıklarla) veya maksimum iki yazı tipi kullanın
- H1/H2/H3, gövde ve küçük metin boyutlarını belirleyin
- Gövde için satır yüksekliğini yaklaşık 1.5–1.7, başlıklar için 1.1–1.3 olarak ayarlayın
Çoğu tipografi sorunu tutarsız boyutlar/boşluklardan kaynaklanır, font seçimi değil.
Web sitem ve pazarlamam büyüdükçe her şeyi nasıl tutarlı tutarım?
Kısa bir, güncellenebilir belge (Google Doc, Notion veya tek PDF) tutun ve günlük soruları yanıtlasın:
- Logo kullanımı: hangi versiyon ne zaman kullanılır, minimum boyut, boşluk kuralları
- Renkler: HEX kodları + roller (birincil, nötr metin, arka plan, vurgu)
- Tipografi: başlık yazı tipi, gövde yazı tipi, boyutlar, satır aralığı
- UI bileşenleri: buton stilleri, köşe yarıçapı, boşluk ölçeği (8/16/24/32)
- Foto/illüstrasyon kuralları
Her şeyi değiştirdiğinizde önce rehberi güncelleyin—sonra her yerde uygulayın.