65 Bilmeniz Gereken Web Tasarım Terimleri

Web tasarımının dili, bilmeniz gereken birçok web tasarım terimini içerir. İster kendi blogunuzu veya web sitenizi kurun, ister bir web tasarımcısı veya web geliştiricisi ile çalışın ya da genel olarak web tasarımı hakkında daha fazla bilgi edinmek isteyin, bu gönderi web tasarımında kullanılan en önemli terimleri kapsayacaktır. Ayrıca problem çözme yöntemleri ve iş akışı dahil olmak üzere web tasarım sürecini neyin oluşturduğunun ayrıntılarına da gireceğiz.

Web tasarımı uzmanı Michelle Schulp ile yakın zamanda gerçekleştirilen bir web semineri sırasında web tasarımı terimleri hakkında fikir edindik ve web tasarımı hakkında nasıl daha iyi bir konuşma yapabileceğimizi öğrendik.

Web Tasarım Terimleri: Web Tasarımı için Kelime Bilgisi

Web tasarımının dilini nasıl konuşacağınızı bilmek, daha iyi sorular sormanıza, daha etkili iletişim kurmanıza ve daha iyi bir nihai ürün üretmenize yardımcı olacaktır. Bu şartların çok çeşitli web sitelerinde nasıl uygulandığını da fark edebilirsiniz (daha iyisi veya daha kötüsü için). Web tasarımı bütünsel bir süreç olduğundan, web tasarımcıları daha büyük resmi ve aynı zamanda detayları görmek için eğitilirler.

Marka Terimleri

Markalaşma, bir organizasyonun mesajının, değerlerinin ve deneyiminin iletilmesidir. Bir şirketin logosundan ve tanımlanabilir tasarım öğelerinden, insanların “içgüdüsel hissine” kadar her şey, bir web sitesinin arkasındaki nedenin bir organizasyon sürücüsü hakkında bilgi sahibi olur. Web tasarımı söz konusu olduğunda, şirketin markasını güçlendiren deneyimler oluşturma fırsatına sahipsiniz.

• 1. Kimlik : Markanızın tüm görsel temsili, logo, renk, tipografi, görüntü, ses vb. içerebilir. Sadece bir logo değil.
• 2. Harf İşareti/Kelime İşareti/Logotype : Stilize harflerle (IBM) veya kelimelerle (Coca-Cola) yapılmış bir logo türü
• 3. Marka Markası : Grafik gösterimi ile yapılmış bir Logo türü (Apple, Target)
• 4. Simge : Bir nesnenin veya kavramın basitleştirilmiş bir görüntüsü. Bir logo ve bir simge aynı şey değildir.
• 5. Tasarım Sistemi : Bir web sitesi oluşturmak için bir araya gelen yeniden kullanılabilir dijital bileşenlerin bir deposu.
• 6. Marka Rehberi : Bir markanın rengi, kişiliği ve sesi için görsel ve felsefi bir referans.

Kullanıcı Deneyimi Koşulları

Kullanıcı deneyimi , insanların bir web sitesiyle nasıl etkileşime girdiğini ve etkileşim kurduğunu kapsar. Kullanıcı deneyimi, kullanıcıları site üzerinden nasıl yönlendirdiğimizi etkiler ve onları belirli nihai hedeflere yönlendirir. Bir şeyin nasıl göründüğü ve çalıştığı da dahil olmak üzere birçok tasarım ve geliştirme unsurunu kapsar. İşlevsellik kararlarını kendi tercihinizi veya kullandığınız araçları değil, son kullanıcıyı göz önünde bulundurarak yapın.

• 7. Kişi : Sitenizin/ürününüzün birincil kullanıcısını temsil eden hayali karakter. Genellikle, kişiler çok iyi gelişmiştir çünkü gerçek motivasyonları olan gerçek insanları temsil etmelidirler.
• 8. Tel kafes : Bir sitenin aslına uygun düzeni, genel blok düzeyinde içeriğin ve etkileşimli öğelerin temsili.
• 9. Mockup : Bir sitenin aslına uygun düzeni, son rengin temsili, tipografi, görüntüler vb.
• 10. Prototip : Bir sitenin interaktif versiyonu, nihai kodla oluşturulamaz.
• 11. CTA : Genellikle bir düğmeyle eşleştirilen harekete geçirici mesaj.
• 12. Dönüştürme : Bir kullanıcı belirli bir istenen eylemi gerçekleştirdiğinde.
• 13. Açılış Sayfası : Belirli bir hedef kitle veya arama motoru sonucu için optimize edilmiş tek sayfa.
• 14. Kullanılabilirlik : Gerçek kullanıcıların sitenizle gerçekte nasıl etkileşime girdiği, genellikle bir dizi rehberli görev gözlemlenerek test edilir.

Kullanıcı Arayüzü Koşulları

Kullanıcı arabirimi (UX, UI), kullanıcının etkileşimde bulunduğu sayfadaki öğeleri içerir. Kullanıcı arayüzünüz, aynı şey olmasa da kullanıcı deneyiminizi etkiler. Kullanıcılarınızı düşündürmeyin; Modern kalıplardan yararlanan sezgisel bir arayüz tasarlayın.

• 15. Breadcrumb : Hiyerarşik içerik bağlantıları.
• 16. Menü : Birincil gezinme alanı, bazen alt menü öğelerinin bir açılır veya açılır menüsü ile.
• 17. Filtre : Görünür içeriğin çeşitli taksonomilere göre daraltılmasına izin veren önceden tanımlanmış öğeler (taksonomiler, kategorileri söylemenin süslü bir yoludur).
• 18. Arama : İçeriği sorgulayan ve bir sonuç listesi döndüren açık uçlu girdi.
• 19. Kaydırıcı : Muhtemelen kullanmamanız gereken bilgileri görüntülemenin modaya uygun, animasyonlu bir yolu.

Kompozisyon Terimleri

Kompozisyon , bir web sitesinin içeriğinin ve estetiğinin birlikte nasıl çalıştığını ifade eder. Web sayfasındaki her öğe, sonradan eklenmemiş, web sitesi düzenine aitmiş gibi hissettirmelidir.

• 20. Denge : Kompozisyonu eşit hissettirmek için benzer veya tamamlayıcı tasarım öğeleri kullanmak.
• 21. Tekrar : Kalıpları güçlendirmek veya tanıdık görsel ipuçları olarak hizmet etmek için yinelenen öğeleri kullanmak.
• 22. Boşluk : Her bir elementin ne kadar “nefes alma odası” var?
• 23. Izgara : Her şeyin nasıl düzenlendiğini belirleyen bir tasarımın altında yatan yapı.
• 24. Üçler Kuralı : En hoş odak noktalarının üç satır ve sütunun kesişiminde olduğunu belirten görsel bir kavram.

Hiyerarşi Terimleri

Hiyerarşi , bilgi parçalarının görünürlüğünün göreceli önemini içerir. Görsel hiyerarşi genellikle tipografi, renk, yakınlık ve denge gibi küçük detayların bir koleksiyonudur. İyi bir hiyerarşiye sahip olmak, bilgilerin taranabilirliğine yardımcı olur ve kullanıcıların sayfadaki bilgileri önem derecesine göre önceliklendirmesine yardımcı olur. Hiyerarşi ayrıca kullanıcıları bir web sitesi aracılığıyla yönlendirmeye yardımcı olur. Öğelerin stili ve konumu hakkında verilen kararlar, web sitesi deneyimi üzerinde büyük bir etkiye sahiptir.

• 25. Ölçek : Sayfadaki öğeler birbirine göre ne kadar büyük veya küçük?
• 26. Yakınlık/Hizalama : Sayfadaki hangi öğeler birbiriyle ilişkilidir?
• 27. Odak Noktası : Sayfada kullanıcının dikkatini çektiğimiz yer
• 28. Semantik İşaretleme : İçerik içinde hiyerarşi ve kullanımı ima etmek için HTML öğelerini doğru kullanmak.

Tipografi Terimleri

Tipografi , yazının düzenlenmesiyle ilgili estetik kararlardır. Boyut, boşluk, hizalama, sütun boyutu ve türün göreli boyutlandırması, yalnızca estetiğin yanı sıra kullanıcı deneyimi üzerinde de büyük bir etkiye sahiptir. Tipografik seçimler, hem büyük resim sistemlerini güçlendiren hem de estetik açıdan çekici ve okunması/anlaşılması kolay olacak şekilde bilinçli olmalıdır.

• 29. yazı tipi (yazı tipi) : Harfler ve glifler/semboller koleksiyonu
• 30. font-family : Hangi yazı tipini kullanıyorsunuz?
• 31. yazı tipi boyutu : Ne kadar büyük/küçük?
• 32. yazı tipi ağırlığı : Ne kadar ağır/hafif?
• 33. yazı tipi stili : İtalik, altı çizili, vuruş
• 34. line-height (önde gelen) : Satırlar arasında ne kadar boşluk var?
• 35. harf aralığı (izleme) : Harf grupları/metin blokları arasındaki boşluğu ayarlama.
• 36. karakter aralığı : Harfler arasındaki boşluk.
• 37. metin-dekorasyon : Metnin altı çizili mi yoksa ek bir stili var mı?
• 38. serif/sans serif : Serif yazı tiplerinde, Sans Serif yazı tipi yokken, harflerin sonunda ekstra dekoratif bir çizgi veya çizgi bulunur.

Renk Terimleri

Renk , bir kompozisyonda rengin kullanımıyla ilgili estetik kararları kapsar. Renk, duygu uyandırmak, vurgu yapmak, bölmek veya öğeleri gruplandırmak için kullanılabilir; renk görsel birlik ve denge yaratabilir. Renk genellikle marka ile ilgilidir. Renk seçimleri bilinçli olmalı ve tüm web sitesinde tutarlı bir şekilde kullanılmalıdır.

• 39. HEX : Web sitelerinde, HTML/CSS'de rengi temsil etmek için kullanılan altı basamaklı onaltılık renk.
• 40. RGB : Ekranlar için kullanılan eklemeli renk modeli, kırmızı/yeşil/mavi ışık değerlerinin birleşerek renkleri oluşturması.
• 41. CMYK : Baskı için, mürekkep için kullanılan eksiltici renk modeli, camgöbeği/macenta/sarı/siyah mürekkebin renkleri oluşturmak için birleştirilmesi.
• 42. Pantone/spot renk : Belirli bir rengin özel özel mürekkepleri. Büyük markaların genellikle kendi özel Pantone rengi vardır.
• 43. Ton : Renk tayfının neresinde?
• 44. Doygunluk : Renk ne kadar canlı veya donuk?
• 45. Kontrast : Ne kadar öne çıkıyor?
• 46. Opaklık: Katı mı şeffaf mı?

Görüntü Terimleri

Görüntü terimleri, bir web sitesinin görsel ve grafik öğelerini içerir. Görüntü, mesajınızı iletmek ve hedef kitlenizle bağlantı kurmak için önemlidir. Bununla birlikte, görüntüler yanlış kullanıldığında, kullanıcı deneyimi için fazla bir şey yapmazken bir web sitesinin yükleme süresine ekstra hacim katabilir. Mesajınızı desteklemek için görüntüleri kullanın; İçerik için doğru görüntü formatını kullanın.

• 47. Vektör : Matematikten yapılmış resimler (SVG, EPS).
• 48. Raster : Piksellerden oluşan görüntüler (JPG, TIFF, PNG, GIF).
• 49. Çözünürlük : Bir raster görüntünün kaç pikseli vardır (örn. 800×600 veya 2400×1200). Daha yüksek bir çözünürlük, genellikle daha büyük bir boyut, ancak daha yüksek ayrıntı olacaktır.
• 50. Sıkıştırma : Optimizasyon (büyük/küçük dosya boyutu).
• 51. JPG/JPEG : Fotoğraf ve ayrıntılı görüntüler için en iyisi.
• 52. PNG : Grafikler, basit renkler ve saydamlık içeren görüntüler için en iyisi.
• 53. GIF : Düşük detaylı grafikler veya animasyonlar için en iyisi.
• 54. TIFF : Baskı kalitesi için en iyisi, ekran görüntüsü için uygun değil.
• 55. SVG : Web'de görüntülenmeye uygun, grafikler ve logolar için en uygun vektör görüntü formatı.

Web Terminolojisi Terimleri

Web terminolojisi terimleri, web için tasarım yaparken genel kelimeleri kapsar. Web tasarımcıları sadece tasarım hakkında bilgi sahibi olmakla kalmaz, aynı zamanda tasarladıkları teknolojiyi de anlarlar.

• 56. Başlık : Başlıklar ve alt başlıklar, anlamsal olarak h1 – h6 etiketleri ile yazılır. Bilgileri bir hiyerarşi içinde düzenlemek için kullanışlıdır ve arama motorları ve ekran okuyucular tarafından kullanılır.
• 57. Gövde Kopyası/Gövde Metni : Birincil yazılı içerik, genellikle paragraflar, listeler, alıntılar vb.
• 58. Kahraman : Bir ana sayfadaki veya açılış sayfasındaki ana resim/grafik, genellikle birincil harekete geçirici mesajla birlikte.
• 59. Tek Kaydırma : İçeriğin çoğunluğunun tek bir sayfada yer aldığı bir web sitesi
• 60. Duyarlı Tasarım : Sabit olmayan ancak kullanıcının ekran boyutuna ve/veya cihazına uyum sağlayan tasarım.
• 61. Kesme Noktası : Bir web sitesinin içeriğinin/düzeninin farklı bir arayüze uyacak şekilde değişeceği belirli bir nokta (örneğin genişlik).
• 62. Erişilebilir : Bir web sitesinin, yardımcı teknoloji veya standart gezinme yoluyla görme, işitme veya motor işlev bozukluğu dahil olmak üzere tüm izleyiciler tarafından kullanılma yeteneği.
• 63. Ön Uç : Genel olarak, bir tarayıcıda çalışan ve neyin görüldüğünü ve etkileşime girildiğini kontrol eden kodla ilgilenir.
• 64. Back-End : Genel olarak, bir sunucu üzerinde çalışan ve içeriği ve mantığı kontrol eden kodlarla ilgilenir.
• 65. CMS : İçerik yönetim sistemi (WordPress gibi).

Web Tasarım Terimleri için Daha Fazla Kaynak

Web tasarımı terimleri hakkında daha fazla bilgi için, bu Web Tasarımının 4 Temel İlkesini ve Bilmeniz Gereken 99 Tanımlayıcı Tasarım Kelimesini inceleyin.

Web Seminerinin Tekrarını İzleyin: Tek Boynuzlu At Nasıl Konuşulur – Tasarımın Dilini Anlamak

Marktime Media'dan Michelle Schulp, Minneapolis'te bağımsız bir grafik tasarımcı ve ön uç geliştiricidir. Kariyerine başlamadan önce, Psikoloji ve Sosyoloji alanlarında yandallarla Görsel İletişim okudu. Çalışması ilerledikçe, beceri setini tamamlamak için ön uç geliştirme ve kullanıcı deneyimi tasarımına da daldı. Disiplinlerin bu birleşimi, onu, insanların nasıl düşündüğüne dayalı olarak somut sorunları çözmeye ve gerçek hedeflere ulaşmaya odaklanan, stratejiye dayalı bir tasarım yaklaşımı benimsemeye yönlendirdi. Web Tasarım Eğitim Kampı sırasında Michelle ile web tasarımı hakkında daha fazla bilgi edinin.

Kristen Wright

Kristen, 2011'den beri WordPress kullanıcılarına yardımcı olmak için eğitimler yazıyor. Onu genellikle iThemes blogu için yeni makaleler üzerinde çalışırken veya #WPprosper için kaynaklar geliştirirken bulabilirsiniz. Kristen iş dışında günlük tutmaktan (iki kitap yazdı!), doğa yürüyüşü yapmaktan ve kamp yapmaktan, yemek pişirmekten ve daha güncel bir hayat yaşamayı umarak ailesiyle günlük maceralardan hoşlanıyor.