Web Sitesi Tasarım Sistemi Nedir, Bir Stil Rehberinde Olması Gereken 9 Öğe

Web sitesi tasarım sistemi, bir sitenin bütün sayfalarının aynı kurallarla üretilmesini sağlayan ortak kurallar ve hazır parçalar bütünüdür. İçinde renk, yazı tipi, boşluk ölçüsü, ızgara, bileşenler, görsel dili, metin sesi, erişilebilirlik kuralları ve sürüm notu bulunur. Stil rehberi bu sistemin yazılı hâlidir. Tasarım sistemi olan sitede yeni sayfa eklemek tasarım kararı gerektirmez; hazır parçalar birleştirilir.

Bakın, ben bunu kendi sitelerimde zor yoldan öğrendim. Birden fazla siteyi aynı anda yönetirken her yeni sayfa için baştan karar vermek hem zaman yiyor hem de siteyi yamalı bohçaya çeviriyor. Bu yazıda 2026’da şirket sitelerinde uyguladığım dokuz öğelik asgari stil rehberini anlatıyorum.

Güncelleme: Ekim 2026 · Gürbüz Özdem

Tasarım sistemi ile stil rehberi aynı şey mi?

Değil, ama birbirine bağlıdır. Tasarım sistemi, sitenin tasarım dosyasında ve kodunda yaşayan kurallar ve parçalardır. Stil rehberi bu kuralların okunabilir belgesidir: hangi renk nerede kullanılır, başlıklar hangi boyutta, butonun kaç hâli var. Büyük markaların sistemleri yüzlerce sayfadır; bir şirket sitesi için dokuz öğelik sade bir rehber yeter.

Neden sade

Şirket sitesini çoğu zaman tek bir ajans ya da iki üç kişilik bir iç ekip yönetir. Kimsenin okumadığı kalın bir belge, hiç yazılmamış belgeden farksızdır.

Kimin işine yarar

Yeni sayfa açan editöre, kampanya görseli hazırlayan tasarımcıya ve siteyi devralacak başka bir ajansa. Rehber, sitenin hafızasıdır.

Öğe 1 ve 2: Renk ve yazı tipi

Renk bölümünde ana renk, ikincil renk, nötr tonlar ve uyarı renkleri kodlarıyla yazılır. Her rengin nerede kullanılacağı da yazılır; yalnızca palet vermek yetmez. Yazı tipi bölümünde en fazla iki aile, başlık ve gövde boyutları, satır aralığı ve kalınlıklar bulunur. Ben bu iki öğeyi tek sayfada tutuyorum.

Tek satırlık kural örneği

“Ana renk yalnızca birincil butonda ve bağlantılarda kullanılır; arka plan olarak kullanılmaz.” Bu tek cümle, sitenin yarısındaki tutarsızlığı önler.

Kontrast

Renk çiftleri okunurluk için kontrast kontrolünden geçmeli. Ölçüt W3C WCAG belgesinde tanımlıdır.

Öğe 3 ve 4: Boşluk ölçüsü ve ızgara

Boşluk ölçüsü, sayfadaki bütün mesafelerin aynı temel birimin katlarıyla verilmesidir. Diyelim ki temel birim 8 piksel; öğe arası 8, kart içi 16, bölüm arası 64 olur. Izgara ise içeriğin kaç sütuna oturacağını belirler. Masaüstü, tablet ve mobil için ayrı sütun sayısı yazılır. Bu iki öğe amatör görünümü en hızlı düzelten öğelerdir.

Neden 8 katları

Sekiz zorunlu değil; önemli olan tek bir temel birim seçip ona sadık kalmaktır. Dört ya da on da seçilebilir.

Amatör belirtiyle ilişkisi

Düzensiz boşluk, amatör web sitesi belirtileri listesinin ilk maddesi. Sistem bu maddeyi kökten çözer.

Öğe 5: Bileşenler, yani tekrar kullanılan parçalar

Bileşen, sitede birden fazla yerde kullanılan parçadır: buton, kart, form alanı, uyarı kutusu, tablo, menü. Her bileşenin hâlleri tanımlanır: normal, üzerine gelince, tıklanınca, pasif, hata. Şimdi şöyle düşünün: buton beş hâliyle bir kez tasarlanır, sonra yüz sayfada aynı görünür. Bu, hem hız hem tutarlılık demektir.

Asgari bileşen listesi

Buton, bağlantı, kart, form alanı, uyarı kutusu, tablo, menü ve alt bilgi. Çoğu şirket sitesi için bu sekiz parça yeterli bir başlangıçtır.

Panelde kilitleme

WordPress gibi panellerde bileşenleri hazır blok olarak kaydetmek, editörün renk ya da boşluk değiştirmesini engeller. Kural kodda korunur.

Öğe 6 ve 7: Görsel dili ve metin sesi

Görsel dili, fotoğraf ve illüstrasyonların hangi ışık, açı, oran ve renk düzeninde olacağını anlatır. Metin sesi ise şirketin nasıl konuştuğunu tarif eder: siz mi sen mi, kısa mı uzun cümle, hangi kelimeler kullanılmaz. Bu iki öğe genellikle unutulur; oysa tasarım ne kadar düzgün olursa olsun, uyumsuz görsel ve dağınık metin profesyonelliği bozar.

Görsel dili örneği

“Fotoğraflar doğal ışıkta, insan yüzü görünür, oran 4:3; filtre kullanılmaz.” Kısa ama bağlayıcı bir kural.

Metin sesi

Yapay zekâ ile içerik üreten şirketlerde ses kuralının önemi daha da artıyor; web sitesinde marka sesi yazısında sebeplerini anlattık.

Öğe 8 ve 9: Erişilebilirlik kuralları ve sürüm notu

Erişilebilirlik bölümünde kontrast, odak görünürlüğü, görsel alt metni ve form etiketleri için kurallar yazılır. Bu kurallar bileşenlere gömülürse her yeni sayfa kendiliğinden uyumlu doğar. Son öğe sürüm notudur: rehberin hangi tarihte, neyi değiştirerek güncellendiği. Sürüm notu olmayan rehber birkaç ay içinde sitenin gerisinde kalır.

Sürüm notu nasıl tutulur

Tarih, değişen öğe, değiştiren kişi, sebep. Dört sütunlu basit bir tablo yeterli.

Erişilebilirlik bağlantısı

Kuralların ayrıntısı web sitesi erişilebilirlik WCAG sayfasında.

Tasarım sistemi olmayan sitede zamanla ne olur?

Sistemsiz sitede her yeni sayfa, onu hazırlayan kişinin o günkü tercihine göre şekillenir. Bir yıl sonra sitede üç farklı buton, dört farklı başlık boyutu ve birbirine benzemeyen kartlar birikir. Şimdi şöyle düşünün: her sayfa tek başına fena görünmez, ama site bir bütün olarak dağınık görünür. Düzeltmek için de genellikle tüm sayfaları baştan elden geçirmek gerekir.

Birikim maliyeti

Tutarsızlık sessizce birikir. Fark edildiğinde düzeltme tek bir sayfanın değil, onlarca sayfanın işidir.

Marka etkisi

Tutarlı tasarımın markaya katkısını profesyonel web tasarımın markaya katkısı yazısında ele aldık.

Tasarım sistemi kurmaya nereden başlamalı?

Mevcut bir siteniz varsa en çok kullanılan beş sayfayı alın ve içlerindeki renk, yazı tipi, buton ve boşlukları sayın. Ortaya çıkan karmaşa, rehberin ilk taslağını verir. Sıfırdan site yapılıyorsa rehber tasarımla birlikte doğar. Profesyonel web tasarım sürecimizde dokuz öğe ilk tasarım onayından önce yazılı hâle gelir.

Hizmet kapsamı profesyonel web tasarım sayfasında. Kurumsal kimlikle uyumu kurumsal kimlik ve web tasarım uyumu yazısında.

İlgili yazılar

Sık Sorulan Sorular