Web Tasarım Terimleri Sözlüğü

Genel Terminoloji

Her web sitesi, tasarımın amacı veya hedefleri ne olursa olsun, belirli ortak unsurları paylaşır. Bu genel terminoloji seti, sitenizin temellerini anlamak ve bir tasarımcıyla iletişim kurmak için size yardımcı olacaktır. Bu terimler, web sitenizin anatomisinden platformun bölümlerine kadar her şeyi kapsar.

• Header (Üst Bölüm): Header, bir web sayfasının en üst kısmıdır ve genellikle logo, navigasyon bağlantıları ve diğer önemli bilgileri içerir. Kullanıcıların site kimliğini hızlıca anlamasını ve ana bölümlere kolayca ulaşmasını sağlar.
• Landing Page (Hedef Sayfa): Genellikle belirli bir pazarlama kampanyası için tasarlanmış tek başına bir sayfadır. Kullanıcıları belli bir eyleme yönlendirir, örneğin haber bültenine kayıt olma veya bir ürün satın alma.
• Call to Action (CTA – Çağrı Hareketi): Kullanıcıları belirli bir eylemi yapmaya teşvik eden bir çağrıyı ifade eder, genellikle bir buton şeklinde görülür. Örnekler: “Kaydol”, “Şimdi Satın Al” veya “Daha Fazla Öğren”. İyi tasarlanmış bir CTA net, çekici ve stratejik olarak yerleştirilmiştir.
• Hero (Ana Bölüm): Hero, bir web sayfasının en üstünde bulunan ve dikkat çeken ana alandır. Genellikle büyük bir resim, video veya grafik içerir ve başlık ile bir CTA ile kullanıcıların dikkatini çeker.
• Responsive Design (Mobil Uyumlu Tasarım): Web sitenizin tasarım yaklaşımının farklı cihazlar ve ekran boyutlarına uyum sağladığı anlamına gelir. Telefonlar, tabletler ve masaüstü cihazlarda sorunsuz bir kullanıcı deneyimi sunmak için çok önemlidir.
• Accessibility (Erişilebilirlik): Erişilebilirlik, engelli kişiler de dahil olmak üzere herkesin web sitelerini kullanabilmesini sağlamayı ifade eder. Bu genellikle ARIA (Accessible Rich Internet Applications – Erişilebilir Zengin İnternet Uygulamaları) etiketleri eklemeyi, yeterli renk kontrastını sağlamayı ve WCAG (Web Content Accessibility Guidelines – Web İçeriği Erişilebilirlik Yönergeleri) standartlarını izlemeyi içerir. Bu çabalar, görme, işitme, motor veya bilişsel engeli olan kişiler için bir web sitesini kullanılabilir hale getirir.
• Front-End (Ön Yüz): Kullanıcıların doğrudan etkileşime girdiği web sitesinin ön yüz kısmıdır. Metin, resimler, butonlar ve genel düzen gibi öğeleri içerir. Front-end geliştiriciler, HTML, CSS ve JavaScript gibi diller kullanarak bu görsel ve etkileşimli bileşenleri oluştururlar.
• Back-End (Arka Yüz): Arka yüz, bir web sitesinin perde arkasında çalışan kısmıdır ve veritabanını, sunucuyu ve uygulama mantığını yönetir. Back-end geliştirme PHP ve Python gibi dilleri ve SQL gibi veritabanlarını içerir ve sitenin düzgün çalışmasını sağlar.
• User Experience (UX – Kullanıcı Deneyimi): Kullanıcı deneyimi, kullanıcıların bir web sitesinde gezinirken hissettiklerini ifade eder. İyi bir UX, siteyi sezgisel, keyifli ve verimli hale getirir ve düzen, erişilebilirlik ve kullanılabilirlik gibi unsurlara odaklanır.
• Above the Fold (Katlanma Üstü): Gazete terminolojisinden alınmıştır, kaydırmadan görünen web sayfasının bölümüdür. Tasarımcılar buraya ana bilgileri ve CTA’ları yerleştirmeyi önceliklendirir.
• Content Management System (CMS – İçerik Yönetim Sistemi): Kullanıcıların özel teknik bilgiye ihtiyaç duymadan web sitesi içeriğini oluşturmasına, yönetmesine ve değiştirmesine olanak tanıyan yazılımdır. Örneğin, WordPress popüler bir CMS’dir.
• Footer (Alt Bölüm): Footer, bir web sayfasının alt kısmıdır. Genellikle ek navigasyon bağlantıları, iletişim bilgileri, sosyal medya ikonları ve telif hakkı bildirimleri içerir. Genellikle sayfanın sonuna kadar kaydıran kullanıcılar için ikincil bilgiler içerir.
• Domain Name (Alan Adı): “example.com” gibi bir web sitesinin benzersiz adresidir ve kullanıcıların siteyi kolayca bulmasını ve erişmesini sağlar. Alan adı genellikle site markasını veya amacını yansıtır.

Web Sitesi Marka Terimleri

Markalaşma, bir kuruluşun mesajını, değerlerini ve genel deneyimini nasıl ilettiğidir. Bu, logodan ve görsel tasarım öğelerinden, insanlar markayla ilişkilendiklerinde hissettikleri duygulara kadar her şeyi kapsar. Web tasarımı içinde markalaşma, bu algıyı şekillendirmek için güçlü bir araçtır; her etkileşimde kimliğinizi ve hikayenizi sürekli olarak güçlendiren deneyimler yaratmanıza olanak tanır.

• Favicon (Sitenin Küçük Simgesi): Web sitenizi temsil eden küçük bir simge, genellikle tarayıcı sekmesinde görülür. Genellikle logo veya marka simgesinin basitleştirilmiş bir versiyonudur.
• Logo (Marka Logosu): İşletme/organizasyon/kişiyi temsil eden bir tasarım öğesi. Marka sembolleri ve tipografi gibi görsel öğeler içerebilir.
• Brandmark (Görsel Logo): Kelime içermeyen görsel bir logo.
• Icon (Simge): Markanızla ilgili bir nesne veya kavramın grafiksel temsili.
• Wordmark/Lettermark/Logotype (Yazı İçi Logo): Belirli stiller, yazı tipleri ve renkler kullanan okunabilir bir logo.
• Brand Identity (Marka Kimliği): Logolar, renkler gibi görsel öğelerden, markanın nasıl konuştuğuna ve iş yaptığına kadar uzanan tam marka temsili. Bir markanın kimliği sadece bir logodan ibaret değildir.
• Design System (Tasarım Sistemi): Bir web sitesi için yeniden kullanılabilir dijital varlıklar kitaplığı/grubu.
• Brand Guide (Marka Rehberi): Tüm marka bilgilerinizi içeren ve marka kimliğini (ses, renk, logolar ve kullanım yönergeleri) nasıl entegre edeceğinizi açıklayan bir belge.
• Typography (Tipografi): Markaya uygun yazı tipleri ve kullanım kuralları.
• Color Palette (Renk Paleti): Web sitesi veya markanın kullanabileceği renkler grubu. Renkler genellikle belirli bir amaca hizmet eder.
• Visual Hierarchy (Görsel Hiyerarşi): Marka öğelerinin tasarım projesinde bir araya getirilmesi durumunda, öğelerin düzeninin algıyı ve etkileşimi nasıl etkilediği.
• Mood Board (Havayı Belirleme Panosu): Tasarım için görsel ilham veya yön sunan öğeler seti.

Web Sitesi Tipografi Terimleri

Tipografi, tipografinin düzenlenmesiyle ilgili estetik kararlardır. Boyut, boşluk, hizalama, sütun boyutu ve tipografinin göreli boyutlandırılması, kullanıcı deneyimi ve estetik üzerinde büyük bir etkiye sahiptir. Tipografi seçimleri kasıtlı olmalı, büyük resimli sistemleri desteklerken aynı zamanda estetik açıdan çekici ve okunması/anlaşılması kolay olmalıdır.

• Font (Typeface – Yazı Tipi): Harfler, glifler ve semboller koleksiyonu.
• Font Family (Yazı Tipi Ailesi): Belirli bir yazı tipindeki tüm varyasyonlar, örneğin kalın, normal ve italik.
• Font Size (Yazı Tipi Boyutu): Bir tasarım içindeki yazı tipinin boyutu.
• Font Weight (Yazı Tipi Kalınlığı): Her yazı tipi vuruşunun açık veya koyu olması. İnce yazı tipleri hafif, kalın yazı tipleri ise daha ağırdır.
• Font Style (Yazı Tipi Stili): İtalik, alt çizgi veya üstü çizili gibi metin için özel özellikler.
• Line Height (Leading – Satır Yüksekliği): Metin satırları arasındaki boşluk miktarı.
• Letter Spacing (Tracking – Harf Aralığı): Harf grupları/blok metinler arasındaki boşluğu ayarlama.
• Kerning (Harf Aralığı Ayarı): Bireysel harfler arasındaki boşluğun ayarlanması.
• Text Decoration (Metin Dekorasyonu): Genellikle CSS ile yapılan metne ek stil uygulamaları.
• Serif/Sans Serif: Serif yazı tipleri, harflerin sonuna ekstra dekoratif bir vuruş veya çizgi içerir, sans serif ise bunlardan yoksundur.

Web Sitesi Renk Terimleri

Renk, bir kompozisyonda renk kullanımıyla ilgili estetik kararlardır. Renk, duyguyu çağrıştırabilir, vurgu yapabilir, öğeleri bölebilir veya gruplayabilir ya da görsel birlik ve denge yaratabilir. Renk genellikle markalaşma ile ilişkilidir. Renk seçimleri kasıtlı olmalı ve web sitesinin tamamında tutarlı bir şekilde kullanılmalıdır.

• HEX (Onaltılık Renk Kodu): HTML/CSS’de renkleri temsil etmek için kullanılan altı haneli bir sayı.
• RGB (Kırmızı-Yeşil-Mavi): Ekranlar için kullanılan toplamsal renk modeli, kırmızı, yeşil ve mavi ışık değerlerinin birleşmesiyle renkler oluşturur.
• CMYK (Camgöbeği-Magenta-Sarı-Siyah): Baskı için kullanılan çıkarmalı renk modeli, camgöbeği, magenta, sarı ve siyah mürekkeplerin birleşmesiyle renkler oluşturur.
• Pantone/Spot Color (Pantone/Özel Renk): Belirli bir renge ait özel mürekkepler. Büyük markalar genellikle özel bir Pantone rengine sahiptir.
• Hue (Ton): Bir rengin genel renk spektrumundaki yeri.
• Saturation (Doygunluk): Bir rengin canlılığını veya matlığını tanımlama şekli.
• Contrast (Kontrast): İki renk arasındaki fark, onları birbirinden ayırır. Örneğin, beyaz ve siyah arasında yüksek bir kontrast vardır.
• Opacity (Opaklık): Bir rengin ne kadar katı veya saydam olduğu. İçinden görülebilir mi?

Web Sitesi Görsel Terimleri

Görsel terimler, bir web sitesinin görsel ve grafik öğelerini içerir. Görseller, mesajınızı iletmek ve hedef kitlenizle bağlantı kurmak için önemlidir. Ancak görseller yanlış kullanıldığında, kullanıcı deneyimini olumsuz etkilemeden web sitesinin yükleme süresine ekstra yük getirebilir. Görselleri mesajınızı desteklemek için kullanın ve içeriğe uygun doğru resim formatını seçin.

• Vector (Vektör): Eğriler ve çizgilerden oluşan, boyut ne olursa olsun pikselleşmeyen görüntüler (SVG, EPS).
• Raster (Tarama Görüntüsü): Piksellerden oluşan ve sınırlı boyuta sahip görüntüler (JPG, TIFF, PNG, GIF).
• Resolution (Çözünürlük): Bir raster görüntüsündeki piksel sayısı (örneğin 800×600 veya 2400×1200). Daha yüksek çözünürlük genellikle daha büyük dosya boyutu anlamına gelir ancak daha fazla detay içerir.
• Optimization (Optimizasyon): Görüntüyü kullanılacağı yere göre boyutlandırma, bu sayede resimler ve videolar web sitenizde daha hızlı yüklenir.
• Compression (Sıkıştırma): Büyük dosya boyutunu küçülten bir optimizasyon türü.
• JPG/JPEG: Fotoğrafi ve detaylı görüntüler için en uygun format.
• PNG: Grafikler, basit renkler ve şeffaflık içeren görüntüler için en uygun format.
• GIF: Düşük detaylı grafikler veya animasyonlar için en uygun format.
• TIFF: Baskı için en uygun format, ekran görüntüleme için uygun değildir.
• SVG: Web üzerinde görüntülenebilen bir vektör resim formatı, grafikler ve logolar için en uygun seçenek.
• WebP: Kaliteyi feda etmeden üstün sıkıştırma sağlayan modern bir resim formatı.

Web Sitesi Kullanıcı Deneyimi Terimleri

Kullanıcı deneyimi, insanlar bir web sitesiyle nasıl etkileşimde bulunduklarını ve ilgilendiklerini kapsar. Kullanıcı deneyimi, kullanıcıları sitede nasıl yönlendirdiğimizi ve belirli son hedeflere ulaştırmamızı etkiler. Bu, bir şeyin nasıl göründüğü ve çalıştığı gibi tasarım ve geliştirme unsurlarının çoğunu içerir. İşlevsellik kararlarını kendi tercihleriniz veya kullandığınız araçlar yerine son kullanıcı aklınızda bulundurarak alın.

• Persona (Kişilik Profili): Web sitenizin/ürününüzün birincil kullanıcılarını temsil eden kurgusal bir karakter. İyi geliştirilmiş bir persona, gerçek motivasyonlara sahip gerçek insanları temsil eder.
• Wireframe (Taslak Tasarım): Genel blok düzeyinde içerik ve etkileşimli öğeleri temsil eden düşük kaliteli bir site düzeni.
• Mockup (Model Tasarım): Nihai renk, tipografi, görseller vb. gösteren yüksek kaliteli bir site düzeni.
• Prototype (Prototip): Nihai kodla inşa edilmemiş, etkileşimli bir site versiyonu.
• CTA (Call to Action – Çağrı Hareketi): Genellikle bir butonla eşleştirilen, kullanıcıyı belirli bir eylemi yapmaya teşvik eden çağrı.
• Conversion (Dönüşüm): Bir kullanıcının belirli bir istenen eylemi gerçekleştirmesi.
• Landing Page (Hedef Sayfa): Belirli bir kitle veya arama motoru sonucu için optimize edilmiş tek sayfa.
• Usability (Kullanılabilirlik): Kullanıcıların sitenizle ne kadar iyi etkileşimde bulundukları, genellikle bir dizi görev gözlemlenerek test edilir.

Web Sitesi Kullanıcı Arayüzü Terimleri

Kullanıcı arayüzü (UX/UI), kullanıcıların sayfadaki öğelerle etkileşimde bulunduğu unsurları içerir. Aynı şey olmasalar da, kullanıcı arayüzünüz kullanıcı deneyiminizi etkiler. Kullanıcılarınızı düşünmeye zorlamayın; modern desenlerden yararlanan sezgisel bir arayüz tasarlayın.

• Navigation (Navigasyon): Kullanıcıların bir web sitesindeki farklı bölümler ve sayfalar arasında gezinmesine ve etkileşim kurmasına izin veren sistemdir. Genellikle menüler, bağlantılar ve butonlar içerir ve kullanıcıların bilgiyi hızlıca bulmasını kolaylaştırır. Etkili navigasyon sezgiseldir, iyi organize edilmiştir ve duyarlıdır, böylece ziyaretçilerin hedeflerine ulaşmasını kolaylaştırır.
• Breadcrumb (İz Takibi): Üst-alt sayfa ilişkisini gösteren hiyerarşik içerik bağlantıları.
• Menu (Menü): Genellikle açılır veya yan menü öğeleri içeren birincil navigasyon alanı.
• Filter (Filtre): Görünen içeriği çeşitli kategorilere göre daraltmaya izin veren önceden tanımlanmış öğeler.
• Search (Arama): İçeriği sorgulayan ve sonuçlar listesi döndüren açık uçlu bir giriş.
• Slider (Kaydırıcı): Bilgiyi eğlenceli bir şekilde sunmanın modası geçmiş bir yolu—genellikle önerilmez.

Web Sitesi Kompozisyon ve Hiyerarşi Terimleri

Kompozisyon, bir web sitesinin içerik ve estetiğinin nasıl bir arada çalıştığını ifade eder. Bir web sayfasındaki her bir öğe, düzenin bir parçasıymış gibi hissettirilmeli, sonradan eklenmiş gibi görünmemelidir. Hiyerarşi, bilginin görünürlüğünün göreceli önemini içerir. Görsel hiyerarşi, tipografi, renk, yakınlık ve denge gibi küçük detayların bir koleksiyonudur. İyi bir hiyerarşi, bilginin taranabilirliğini artırır ve kullanıcıların sayfadaki bilgileri önem sırasına göre önceliklendirmesine yardımcı olur.

• Balance (Denge): Kompozisyonu eşit hissettirmek için benzer veya tamamlayıcı tasarım öğeleri kullanma.
• Repetition (Tekrar): Örüntüleri güçlendirmek veya tanıdık görsel ipuçları sağlamak için yinelenen öğeler kullanma.
• Whitespace (Boşluk): Bir öğenin etrafındaki açık alan veya nefes alma odası miktarı.
• Grid (Izgara): Her şeyin nasıl düzenleneceğini belirleyen tasarımın alt yapısı.
• Rule of Thirds (Üçte Bir Kuralı): En hoş odak noktalarının üç satır ve üç sütunun kesişiminde olduğu görsel bir kavram.
• Scale (Ölçek): Bir sayfadaki öğeler arasındaki ilişki ve birbirleriyle olan bağlantısı.
• Proximity/Alignment (Yakınlık/Hizalama): Benzer hizalamaya sahip öğeler birbirine ne kadar yakınsa, görsel olarak ilişkilendirilme olasılığı o kadar artar.
• Focal Point (Odak Noktası): Kullanıcı dikkatini ilk olarak çeken sayfa noktası.
• Semantic Markup (Anlamsal İşaretleme): İçerik içinde hiyerarşi ve kullanımını ima etmek için HTML öğelerini doğru şekilde kullanma.
• Z-Pattern Layout (Z Şekilli Düzen): Göz hareketinin doğal akışını takip eden, soldan sağa “Z” şeklinde bir düzen stratejisi.
• F-Pattern Layout (F Şekilli Düzen): Başlıklar ve görsellerle sol taraftaki içeriği hizalayarak dikkati “F” şeklinde yakalayan bir düzen.

Web Sitesi SEO Terimleri

Arama motoru optimizasyonu (SEO), sadece bir moda kelime değildir. Bir web sitesinin görsel, bağlamsal ve teknik unsurlarının tamamını içerir ve arama motorlarının web sitesini anlamasını kolaylaştırır. Güçlü bir SEO stratejisi, içerikle başlar ve kullanıcı deneyimini desteklemek için daha teknik unsurlara doğru ilerler.

• Algoritma (Arama Algoritması): Arama motoru algoritmaları, arama motorlarının bir sorgu girdiğinde hangi web sayfalarının gösterileceğine karar vermek için kullandıkları formüller ve kurallardır. Alaka düzeyi, kalite ve kullanıcı deneyimi gibi faktörleri analiz ederek arama sonuçlarını düzenler ve kullanıcıların en iyi yanıtları bulmalarına yardımcı olurlar.
• Sitemap (Site Haritası): Bir web sitesindeki tüm sayfaları içeren yapılandırılmış bir liste veya anahat, genellikle hiyerarşik bir düzende düzenlenir ve kullanıcılar ile arama motorlarının web sitesinin yapısını anlamasına yardımcı olur.
• Core Web Vitals (Temel Web Ölçümleri): Bir web sitesinin performansını ve kullanıcı deneyimini ölçen metrikler kümesi: sayfa yükleme hızı (sayfanın ne kadar hızlı yüklendiği), en büyük içerikli nokta (ana içerik yükleme süresi), ilk giriş gecikmesi (site ilk kullanıcı etkileşimine ne kadar hızlı yanıt veriyor) ve kümülatif yerleşim kayması (sayfa yüklendiğindeki stabilitenin ölçüsü).
• Meta Tags (Başlık ve Açıklamalar): Bir web sayfasının HTML’sinde bulunan kod parçacıkları, sayfa hakkında bilgi sağlar. İki en önemli meta etiket, arama sonuçlarında ve tarayıcı sekmelerinde görünen “title” (başlık) ve arama motoru sonuçlarında sayfa içeriğinin kısa bir özeti olarak gösterilen “meta description” (meta açıklama)’dır.
• SERP (Search Engine Results Page – Arama Motoru Sonuç Sayfası): Bir kullanıcının arama sorgusuna yanıt olarak arama motorlarının görüntülediği sayfa. Genellikle organik sonuçlar, ücretli reklamlar ve görüntüler, videolar ve snippet’ler gibi diğer özellikler içerir.
• Keywords (Anahtar Kelimeler): İnsanların arama motorlarına içerik bulmak için yazdığı belirli kelimeler
• Sayfa İçi SEO (On-Page SEO): Tek tek sayfaları optimize ederek arama motoru sıralamalarını artırmak için yapılan işlemlerdir. Bu, içerik kalitesi, anahtar kelime kullanımı, meta etiketler, başlıklar, iç bağlantılar ve görsel optimizasyon gibi unsurları içerir.
• Sayfa Dışı SEO (Off-Page SEO): Web sitenizin otoritesini ve sıralamasını artırmak için sitenizin dışında yapılan eylemlerdir. Bu, genellikle diğer güvenilir web sitelerinden geri bağlantılar oluşturmayı, sosyal medya etkileşimlerini ve etkileyici pazarlama stratejilerini içerir.
• Alt Metin (Alternative Text): Görsellere eklenen bir açıklama; bu, görme engelli kullanıcıların ekran okuyucular yardımıyla görselleri anlamasına yardımcı olur ve aynı zamanda arama motorları için bağlam sağlar.
• Alan Otoritesi (Domain Authority): SEO şirketi Moz tarafından geliştirilen, bir web sitesinin arama motorlarında ne kadar iyi sıralanabileceği konusunda tahmin yürüten bir puan. Bu puan, geri bağlantıların kalitesine ve miktarına dayanır; daha yüksek bir DA değeri genellikle daha güçlü bir sıralama yeteneğini gösterir.

Öğrendiğiniz Terimleri Pratikte Kullanın

Web tasarım dilini konuştuğunuzda, kendi web siteniz üzerinde çalışırken daha fazla özgüven duyabilir ve tasarımcılar veya geliştiricilerle iletişim kurarken daha etkili olabilirsiniz.