AnasayfaBlogWeb Sitesi Tasarım Terimleri
Kullanıcı Deneyimi Tasarımı

Web Sitesi Tasarım Terimleri

28 Ekim 2021
Bu görüntü, bir dizi canlı rengi gösteren bir bilgisayar ekranına aittir. Ekranda mavi ve mor bir kayanın yakın çekimi, bir manzaranın yakın çekimi ve bir bilgisayar monitörünün yakın çekimi yer almaktadır. Ayrıca bir kişinin kafasının bulanık bir görüntüsü ve arka planda bir kutu var. Ayrıca, ekranda bazıları bulanık, bazıları ise net ve berrak olan birden fazla görüntü bulunmaktadır. Monitördeki renkler yumuşak pastel tonlardan derin, canlı tonlara kadar değişiyor. Görüntü, doğada bulunabilecek çeşitli renk ve şekillerin harika bir örneğidir.
TerimTanımÖrnek/Notlar
UlaşılabilirlikWeb sitenizin, herkes için ulaşılabilir ve anlaşılabilir olması.Web sitenizi oluştururken özellikle göz ve işitme engelli ziyaretçilerinizi dikkate alın.
Elastik DüzenÖğeler ve bunların sayfadaki konumları yüzdesel olarak tanımlanan bir tasarım yaklaşımı.Tasarımınızı yazı tipi, boyut ve aralık tercihleri veya farklı cihaz türleri için optimize etme konusunda uyarlanabilir hale getirir.
Sabit GenişlikBir tasarımcının tasarlayacağı web sayfasının ne kadar büyük olduğunu ve öğelerin tam olarak nerede görüneceğini belirleyeceği tasarım yöntemi.Tasarımcılara kontrol sağlar ancak sayfaları farklı ekran boyutlarına daha az uyarlanabilir hale getirir.
Sonsuz KaydırmaKullanıcının sayfayı kaydırmaya devam ettikçe, sınırsız olarak yeni içeriğin yüklendiği bir görev.Facebook ve Instagram zaman çizelgeleri gibi sosyal medya platformlarında sıkça karşımıza çıkar.
Paralaks KaydırmaKullanıcı kaydırdıkça web sitesindeki öğelerin farklı mesafelerde ve farklı hızlarda hareket ediyor gibi görünen bir görsel etki yaratan bir tekniğe verilen isim.Web sitesine derinlik hissi verir.
ÇözünürlükBir ekranda görüntülenen piksel sayısı. Görüntülerin boyutunu belirtmek için kullanılan standart bir yöntem.Bir web sitesinde piksel oranı ne kadar yüksek olursa, o site kaliteli bir görüntü sunar.
Duyarlı / Mobil Uyumlu / Mobil OptimizeGörüntülendikleri cihaza veya ekrana uyum sağlayacak bir web sitesi tasarlamak.Mobilde de en iyi şekilde görünmesini sağlar.
KullanılabilirlikWeb sitenizin tasarımının ziyaretçiler için ne kadar kullanışlı olduğunu açıklayan bir kavram.Ziyaretçinin aradığı bilgiye kolayca ulaşabiliyor olması gerekir.
UX (Kullanıcı Deneyimi) / UI (Kullanıcı Ara yüzü)Kullanıcının deneyimini iyileştiren bir çalışma şekli.UI, bir ürünün görsel elementlerini, sayfalarını ve ekranlarını izlerken, UX kullanıcıların bu ürüne yanıt verme şeklini yönetir.

Web tasarımı işinden anlamayanlar için, sahip olduğu terimler oldukça karmaşık, jargonla dolu bir dil olarak görüldüğü kesin. Web tasarım dünyasına en ufak bir adım attığınız anda, “Hangi CMS’yi kullanmak istiyorsunuz?”, “Bunu ekranın üstünü mü yoksa alt kısmını mı istersiniz?”, “Sabit bir sistem mi istiyorsunuz? Düzen?”, “Hangi web barındırma hizmetini kullanmak istiyorsunuz?” ve tüm bunların ne anlama geldiğini merak ediyorsunuz. Özellikle tamamen yeniyse, tüm önemli web tasarım tanımlarını ve terimlerini anlamaya çalışmanın oldukça zor olabileceğini biliyoruz.

Web tasarımı, kod yazan web geliştiricilerinden, ara yüzler üzerinde çalışan UI ve UX tasarımcılarına, sitenizin görünümü ve hissi ile ilgilenen web tasarım uzmanlarına kadar geniş bir çalışma alanını kapsar. Web tasarımı ile uğraşan birçok insan var.

Alanında uzman olan Web Tasarımcıları ile çalışırken ya da kendi web sayfanızı yaparken işinizi kolaylaştıracak bir takım terimler vardır. Web tasarımında sadece birkaç kısaltmadan oluşan terimlerin ne anlama geldiğini öğrenmek, tasarımcınız ve geliştiricinizle çalışmayı çok daha kolay hale getirebilir.

Ayrıca kendi web sitenizin gerçekte nasıl çalıştığını anlamanıza da yardımcı olabilir. Bu nedenle, ister yardım alıyor olun, ister kendiniz yapıyor olun web tasarımı ve geliştirmede en sık kullanılan, üstelik en çok karıştırılan terimleri önceden bilmek işinize yarayacaktır. Ben de bunu dikkate alarak bazı web sitesi terimlerini, iki bölümden oluşacak bu yazının ilki ile başlıyorum.

Web Tasarım Tanımları

Bu kısımda web sitesi tasarımı için kullanılan tanımlardan başlayalım;

Ulaşılabilirlik

Erişilebilirlik, günümüzde oldukça önemlidir. Web sitenizin, işitme veya görme bozukluğu olan insanlar da dahil olmak üzere, herkes için ulaşılabilir ve anlaşılabilir olması gerekir. Web sitenizi oluşturmadan önce ve oluştururken bunu akılınızda muhakkak bulundurun. Nereden başlayacağınızdan emin değilseniz, uzman bir Web Tasarımcısına danışın.

Elastik Düzen

Elastik düzen, öğeler ve bunların sayfadaki konumlar arasındaki ilişkileri özel olarak tasarlanmış mesafeler ve boyutlar yerine, bunları yüzdesel olarak tanımlayan bir yaklaşımdır. Bu, web sayfalarının hem yazı tipi, boyutu ve aralığı açısından ziyaretçileriniz tarafından belirlenen tercihler için, hem de bir akıllı telefon veya tablette görüntülemek üzere sayfayı optimize etme konusunda daha uyarlanabilir olduğu anlamına gelir.

Günümüzde elastik düzenler, duyarlı tasarım yaklaşımlarının önemli bir parçasıdır. Ancak duyarlı tasarım fikri ortaya çıkmadan önce, elastik düzenler web sitelerini uyarlanabilir hale getirmek için basit bir yol sağladı.

Sabit Genişlik

Sabit genişlik düzeni, bir tasarımcının tasarlayacağı web sayfasının ne kadar büyük olduğunu ve öğelerin tam olarak nerede görüneceğini belirleyeceği sayfa tasarım yöntemidir. Sabit genişlik, tasarımcılara web sayfasının tasarımı üzerinde esnek bir düzenden çok daha fazla kontrol sağlamasına yardımcı olur. Tek sıkıntısı sayfaları farklı ekran boyutlarına daha az uyarlanabilir hale getirir.

Sonsuz Kaydırma

Sonsuz kaydırma, siz kaydırmaya devam ettikçe yeni içeriğin yüklendiği zamandır. "Sonsuz" hiç bitmeyen bir kaydırma durumudur. Bunun bazı popüler örnekleri Facebook, Instagram zaman çizelgeleri, Pinterest veya Twitter beslemeleri örnek olarak verilebilir.

Paralaks Kaydırma

Bu kaydırma yöntemi, site tasarımında bir derinlik hissi yaratır. Kullanıcı kaydırdıkça web sitesindeki öğeler farklı mesafelerde ve farklı hızlarda hareket ediyor gibi görünecektir. Bu uygulama da düz bir web sitesinde derinlik ve mesafe yanılsaması yaratır.

Çözünürlük

Bunu az çok herkes duymuştur. Çözünürlük, bir ekranda görüntülenen piksel sayısıdır. Görüntülerin boyutunu belirtmek için web tasarımında kullanılan standart bir yöntemdir. Bir görüntünün kalitesi genellikle inç başına piksel cinsinden tanımlanır. Bir web sitesinde piksel oranı ne kadar yüksek olursa, o site daha kaliteli bir görüntüyle sonuçlanır.

Duyarlı / Mobil Uyumlu / Mobil Optimize

Günümüzde bilgisayarlardan çok telefon ve tabletlerden de internet erişimi sağlanıyor ve bu sistem oldukça yoğun kullanılıyor. Bu durum da bir web sitesinin masaüstünde olduğu kadar, mobilde de en iyi şekilde görünmesini daha önemli hale getirmiştir. Web sitelerini duyarlı / mobil uyumlu / mobil optimize hale getirmek, görüntülendikleri cihaza veya ekrana uyum sağlayacak bir web sitesi tasarlamak, marka ya da kişisel web sitelerindeki erişim için oldukça önemlidir.

Kullanılabilirlik

Kullanılabilirlik, web sitenizin tasarımının ziyaretçiler için ne kadar kullanışlı olduğunu açıklayan bir kavramdır. İdeal olarak, bir ziyaretçi sitenizle ilk kez karşılaştığında, aradığına kolayca ulaşmalıdır. Kullanılabilirlik ilkelerini anlamak, harika bir web sitesi oluşturmanın önemli bir adımıdır.

UX (Kullanıcı Deneyimi) / UI (Kullanıcı Ara yüzü)

UX ve UI tasarımı, kullanıcının deneyimini iyileştiren bir çalışmadır. Birlikte nasıl çalıştıklarını bilmek için UX ve UI arasındaki farkları bilmek önemlidir. Peki bu farklar nedir?

UX, kullanıcı deneyimi, kullanıcının web sitesiyle etkileşiminin baştan sona tüm yönlerini içerir. Amaç, bir kullanıcı ile web sitesi arasındaki etkileşimin kalitesini artırmaktır.

UI, kullanıcı ara yüzü, bir web sitesinin düğmeler, simgeler, tipografi gibi görsel ve etkileşimli öğelerine odaklanır. Amaç, web sitesinin görünümünü ve işlevini iyileştirmektir. Bu alanda UI konusunda uzman olan bir Grafik Tasarımcı ile çalışabilirsiniz.

Front-End Web Sitesi Anatomisi

Front-end anatomisinin unsurlarını ele almak gerekirse;

Ekmek Kırıntısı (Bread Crumb)

Web sayfaları, kullanıcılara bir web sayfasında nasıl gezindiklerini ve ana sayfaya nasıl geri döneceklerini gösterdiğinde, bu genellikle bir kırıntı aracılığıyla yapılır. Bu genellikle Ana Sayfa > Kategori > Yıl > Ay > Gönderi gibi bir dizi iç içe kategori olarak gösterilir.

Favicon

Favicon, tarayıcınızın sekme çubuğunda görüntülenen küçük bir simgedir. Eski jargonla avatar olarak da kullanılabilir. Genellikle 16×16 pikseldir ve bir .ico, .gif veya.png görüntüsü olarak kaydedilirler. Doğru boyut ve biçimde kaydedildiği sürece, beğendiğiniz hemen hemen her resmi favicon olarak kullanabilirsiniz.

Odak Noktası (Focal Point)

Bir web sayfasındaki odak noktası, sayfanın gözünüzün çekildiği kısmıdır. Tasarımcılar , izleyicinin dikkatini gerçekten çeken bir odak noktası tasarlamak için çok zaman harcarlar ve ardından sayfadaki en önemli şeyi odak noktasına yerleştirirler. Web sitesinde belirlenen bu alan mümkün olan en fazla insan tarafından görülmesi istenilen konudan oluşmalıdır.

Başlangıç ​​Aşaması (Front End)

Başlangıç Aşaması insanların sitenizi ilk ziyaret ettiklerinde göreceği resimler, metinler, sayfalar gibi tüm görsel öğelerden oluşur. Esasen insanların bir web sitesinde etkileşimde bulunacağı aşamadır.

Hamburger İkon

Bir hamburger ikonu, daha yeni programlarda yaygın olarak bulunan menü simgesini ifade eder. Üç yatay çubuğa verilen bu ad, hamburger şekline benzediği için verilmiştir ve geleneksel gezinme menüsünü tek bir simgenin arkasına gizlenir.

Açılış sayfası (Landing Page)

Açılış sayfası, sitenizi ziyaret edenlerin göreceği ilk sayfadır. Birçok web sitesinde, bir ziyaretçiden bir şeyler elde etmek için özel bir açılış sayfası hazırlanması önemlidir. O yüzden açılış sayfasını iyi optimize etmek için çok zaman harcamanız gerekir .

Navigasyon

Navigasyon, web sayfanızın öğeleri arasında gezinmek için kullanılan sistemdir. Herhangi bir web sayfasının en önemli öğelerinden biridir. Bu alan aslında hepimizin de bildiği web sayfasında görünen menülerdir. Ancak sayfaların nasıl düzenlendiğine ve aralarındaki bağlantılara da çok dikkat etmek gerekir. Bunlar ayrıca ziyaretçiler için bir web sayfasında gezinmeyi çok daha kolay hale getirmektedir.

Back-End Web Sitesi Anatomisi

Bir web sitesindeki back-end anatomisi şunlardan oluşur;

İYS (İçerik Yönetim Sistemi)

İçerik Yönetim Sistemi, sitenizin içeriğini çalıştırmak, kullanıcı eklemek, yorumları yönetmek ve potansiyel olarak çok daha fazlasını yapmak için bir arka uç aracıdır. Bir web sitesi oluşturmak için WordPress kullandıysanız, bir CMS kullandınız. Bir CMS , web sitesinin üzerinde çalıştığı ham kodun çoğunu gizlediği için bir web sayfası tasarlamayı ve oluşturmayı çok daha kolaylaştırır .

E-ticaret

E-ticaret, “elektronik ticaret” anlamına gelir. Genellikle web sitenize ürün açıklamalarını, alım satımı ve ayrıca müşteri verilerini işleyecek bir e-ticaret mağazası olarak kullanılması anlamına gelir. Günümüzde de oldukça yaygın olarak kullanılır. E-ticaret eğitimi araştırıyorsanız "E-Ticaret Eğitimi" linkini incelemenizi öneririm.

HTTP / HTTPS

Tarayıcılar, sunucular ve web uygulamaları arasında veri alışverişini yöneten sistemdir. Verilerin nasıl paketlenmesi ve gönderilmesi gerektiğini tanımlar. HTTPS, SSL Güvenli Yuva Katmanı üzerinden bağlantı kurabilen bir HTTP uzantısıdır. Bu, çevrimiçi veri alışverişinde bulunmanın çok daha güvenli bir yoludur.

Bir web sitesi sahibi olarak, çeşitli sağlayıcılardan HTTPS kullanmak için gerekli olan SSL sertifikalarını satın alabilirsiniz. Eklendikten sonra bu uygulama, sitenizi daha güvenli hale getirecek ve müşterilerinizde güven oluşturacaktır.

Eklenti

Ek güvenlik işlevselliği sağlamak için temel sitenizin üstüne oturan küçük bir yazılım parçası. Eklentiler, çoğu popüler CMS platformu için mevcuttur ve blog gönderilerini otomatikleştirmekten müşteri adaylarını yönetmeye kadar çok çeşitli işlevler için kullanılabilir.

Ulaşılabilirlik, Web sitenizin, herkes için ulaşılabilir ve anlaşılabilir olması, Web sitenizi oluştururken özellikle göz ve işitme engelli ziyaretçilerinizi dikkate alın, Elastik Düzen, Öğeler ve bunların sayfadaki konumları yüzdesel olarak tanımlanan bir tasarım yaklaşımı, Tasarımınızı yazı tipi, boyut ve aralık tercihleri veya farklı cihaz türleri için optimize etme konusunda uyarlanabilir hale getirir, Sabit Genişlik, Bir tasarımcının tasarlayacağı web sayfasının ne kadar büyük olduğunu ve öğelerin tam olarak nerede görüneceğini belirleyeceği tasarım yöntemi, Tasarımcılara kontrol sağlar ancak sayfaları farklı ekran boyutlarına daha az uyarlanabilir hale getirir, Sonsuz Kaydırma, Kullanıcının sayfayı kaydırmaya devam ettikçe, sınırsız olarak yeni içeriğin yüklendiği bir görev, Facebook ve Instagram zaman çizelgeleri gibi sosyal medya platformlarında sıkça karşımıza çıkar, Paralaks Kaydırma, Kullanıcı kaydırdıkça web sitesindeki öğelerin farklı mesafelerde ve farklı hızlarda hareket ediyor gibi görünen bir görsel etki yaratan bir tekniğe verilen isim, Web sitesine derinlik hissi verir, Çözünürlük, Bir ekranda görüntülenen piksel sayısı Görüntülerin boyutunu belirtmek için kullanılan standart bir yöntem, Bir web sitesinde piksel oranı ne kadar yüksek olursa, o site kaliteli bir görüntü sunar, Duyarlı / Mobil Uyumlu / Mobil Optimize, Görüntülendikleri cihaza veya ekrana uyum sağlayacak bir web sitesi tasarlamak, Mobilde de en iyi şekilde görünmesini sağlar, Kullanılabilirlik, Web sitenizin tasarımının ziyaretçiler için ne kadar kullanışlı olduğunu açıklayan bir kavram, Ziyaretçinin aradığı bilgiye kolayca ulaşabiliyor olması gerekir, UX (Kullanıcı Deneyimi) / UI (Kullanıcı Ara yüzü), Kullanıcının deneyimini iyileştiren bir çalışma şekli, UI, bir ürünün görsel elementlerini, sayfalarını ve ekranlarını izlerken, UX kullanıcıların bu ürüne yanıt verme şeklini yönetir
web sitesi yasarımı web tasarım terimleri ux kullanıcı deneyimi ux
Gözlük takan ve genişçe gülümseyen genç bir kadın. Orta uzunlukta kahverengi saçları var ve gözleri parlak ve ışıltılı. Gülümsemesi geniş ve doğrudan kameraya bakıyor. Pembe yanakları ve dostça bir ifadesi var. Gözlükleri kahverenginin açık bir tonunda ve yüzünde hafifçe orantısız duruyor. Üzerinde gri bir gömlek ve boynunda siyah bir eşarp var. Rahat ve mutlu görünüyor.
Dilara Şimşek Yılmaz
Blog Yazarı

Kadir Has Üniversitesi Grafik Tasarım mezunudur. Yaklaşık on iki yıldır pazarlama, kurumsal iletişim ve perakende gibi büyük markaların direktörlüklerine bağlı olarak çalışmıştır. Yaklaşık üç sene öncesinde hobi olarak başladığı blog/içerik yazarlığının eğitimlerini almıştır. IIENSTITU başta olmak üzere, çeşitli blog sitelerinde karma ve mesleki konularda içerik yazarlığı yapmaktadır.

Benzer Yazılar
Doğru ve faydalı bilgiler sağlama konusunda kararlı olan uzman ekibimizle blogumuzu her zaman yeni makaleler ve videolarla güncelliyoruz. Güvenilir tavsiyeler ve bilgilendirici içerikler arıyorsanız, blog sayfamıza mutlaka göz atın.
Bu görüntü, düz beyaz bir arka plana sahip bir bilgisayar ekranını ve üzerinde görüntülenen metni göstermektedir. Metin siyah renkte görünmekte ve çeşitli boyut ve yazı tiplerinden oluşmaktadır. Metin düzgün, düzenli bir şekilde düzenlenmiş ve ekran boyunca organize bir desen oluşturuyor. Metin oldukça net ve keskin görünüyor ve kolayca okunabiliyor. Metin ve beyaz arka plan arasındaki kontrast temiz ve görsel olarak çekici bir görünüm yaratıyor. Metnin genel tasarımı estetik açıdan hoş ve bilgisayar ekranının profesyonel ve modern görünmesini sağlıyor.
5
(3)

Bootstrap Eğitimi

40 Konu10 Saat
Bu görsel dijital pazarlama alanında bir online kursu tasvir etmektedir. Sakallı ve bıyıklı bir adam çerçevenin ortasında parmağıyla işaret ediyor. Beyaz gömleği ve sarı arka planı parlak ve canlı bir kontrast oluşturuyor. Arka planda ayrıca bir bileziğin ve bir adamın yüzünün yakın çekimini görebiliyoruz. Bu görsel, dijital pazarlama kursunun ideal bir temsili olup, ön planda materyalin önemini gösteren bir erkek yer almaktadır. Renklerin, nesnelerin ve yüz ifadelerinin birleşimi, görsele dijital pazarlama için bir coşku ve heyecan hissi veriyor. Bu görsel, dijital pazarlamanın getirebileceği bilgi ve heyecanın mükemmel bir temsili.
4.9
(331)

Dijital Pazarlama Eğitimi

15 Konu5 Saat
Resimdeki adam ışıl ışıl gülümsüyor, gözleri neşe ve sevinçle kırışıyor. Dişleri tamamen düzgün ve beyaz, yanakları mutlulukla parlıyor. Açık mavi bir gömlek giymiş ve koyu renk saçları düzgünce taranmış. Ellerini önünde kavuşturmuş, yüzünde memnuniyet ve tatmin ifadesi var. Rahat bir duruşu var, rahatlık ve konfor hissi veriyor. Resmin arka planı açık gri, bu da onun parlak gülümsemesini daha da öne çıkarıyor. Görüntü mükemmel bir şekilde yakalanmış, neşe ve memnuniyet hissi yayıyor.Sedat Ateş
775519