Web tasarımı, World Wide Web’de görüntülenen belgelerin oluşturulması ve görsel tasarımıdır. Müşterileri çekmek ve elde tutmak için ilgi çekici ve görsel olarak çekici web siteleri oluşturmak önemlidir. Bir web sitesi tasarlanırken birçok faktör dikkate alınmalıdır. Bu makale, Web tasarımındaki adımları ve dinamik ve etkileşimli bir web sitesi oluşturmak için gereken programlama dillerini araştıracaktır.
Web Sitesi Tasarımı Tanımı
Günde kaç web sitesini ziyaret ediyorsunuz? Hiç kendi web sitenizi oluşturmayı düşündünüz mü? Birçok kişi ve kuruluş, ürün ve hizmetleri paylaşmak, eğitmek, satın almak ve satmak için web siteleri oluşturur.
Web tasarımı, World Wide Web’de görüntülenen belgelerin oluşturulması ve görsel tasarımıdır. Kuruluşlar, tüketicileri çekmek ve elde tutmak için ilgi çekici ve görsel olarak teşvik edici içeriğe sahip web sitelerine güvenmektedir. Web tasarımının kalitesi, bir web sitesi oluştururken veya revize ederken önemli bir faktördür. Bir web sitesi geliştirmeye hazırlanan herkes, başarı planlamak için çeşitli faktörleri dikkate almalıdır. Hangi faktörlerin önemli olacağını düşünüyorsunuz? Son zamanlarda ziyaret ettiğiniz bazı web sitelerini düşünün. Bu web siteleri hakkında gerçekten beğendiğiniz veya beğenmediğiniz şeyler oldu mu?
İlgili Makale: İntranet ve Extranet: Bilgi ve Veri Dağıtımını Karşılaştırma
Web Sitenizi Planlama
Bir web sitesi inşa etmek bir ev inşa etmek gibidir. İlk adım uygun planlama gerektirir. Bir evi tasarlamak için bir mimara, evi inşa etmek için bir yükleniciye ve evi dekore etmek için bir iç tasarımcıya ihtiyacınız olacak. Kendi başınıza bir web sitesi kurabilirsiniz, ancak birçok kuruluş çekici ve iyi işleyen bir web sitesi yapmak için beceri ve yeteneğe sahip profesyonelleri işe alır. Bir web sitesi oluşturmak için mimar olarak çalışan bir yaratıcı yönetmene, müteahhit olarak hareket eden bir Web yönetmenine ve iç tasarımcı olarak hareket eden bir içerik yönetmenine ihtiyacınız olacaktır.
Bir web sitesi planlarken, kitlenizi tanımalı ve onların ihtiyaçlarına, ilgi alanlarına ve görüntüleme tercihlerine uygun bir web sitesi tasarlamalısınız. Web siteleri tasarlarken, bilgisayar ekranında görüntüleneceklerini akılda tutmak önemlidir. Bu ortam için uygun şekilde tasarlanmalıdırlar. İçerik anlamlı ve gezinmesi kolay olacak şekilde düzenlenmelidir. Hipermetin gücünden faydalanmak önemlidir. Bunu gerçekleştirmenin bir yolu, kullanıcıların kendi bilgi yollarını oluşturmaları için web sayfalarının içeriği içinde bağlantılar sağlamaktır.
Web sitesi tasarımcıları, erişilebilirliği sağlamak için farklı Web tarayıcılarına, işletim sistemlerine ve bilgisayar platformlarına sahip kullanıcıları dikkate almalıdır. Sayfalar da bağlantı hızları dikkate alınarak planlanmalıdır. Düşük bant genişliği için tasarım yapmak faydalıdır. Bant genişliği, belirli bir süre içinde iletilebilen veri miktarıdır. Hiç kimse büyük grafikler veya karmaşık animasyonlar nedeniyle bir sayfanın yavaş indirilmesini beklemek istemez. Aslında, ortalama bir kullanıcı, bir sayfadan çıkmadan önce bir sayfanın yüklenmesi için yalnızca 10-20 saniye bekleyecektir. Bu, bir rakibe kaybetmiş potansiyel bir müşteri olabilir!
Web Sitenizin Temelini Oluşturma
Planlama tamamlandıktan ve mimari planlar tamamlandıktan sonra bina başlayabilir. HTML, XML ve XHTML gibi web programlama dilleri, çerçevenin tüm evi inşa etmek ve tasarlamak için temel ancak temel yapıyı sağladığı gibi temeli oluşturmak için araçlar sağlar.
Köprü Metni İşaretleme Dili (HTML), diğer belgelere dinamik bağlantılar oluşturmak için köprü metni kullanan bir programlama aracıdır. Web’in programlama dili olarak bilinir ve web sayfaları oluşturmak için genel bir yapı sağlar. Tüm web sayfaları aslında HTML dosyalarıdır. HTML dokümanları, web sayfanızın içeriğini içeren etiketler ve etiket adı verilen özel talimatlardır. Etiketler metin veya grafik görüntüleme ve kullanıcı girişlerini kontrol etme konusunda talimatlar sağlar. Etiketler parantez içine alınmıştır: <>. Tipik olarak, metnin etrafında bir başlangıç ve bitiş etiketi bulunur. Örneğin, bir başlığı kalınlaştırmak istersek, başlangıç etiketimiz parantez içinde bir ‘b’ olur ve ardından parantez içinde ‘/ b’ bitiş etiketi ile sonuçlanır: <b> Başlık </b>. Tüm HTML belgeleri köşeli parantez içinde HTML ile başlar ve köşeli parantez içinde eğik çizgi ve HTML ile biter: <html> ve </html>. Bu etiketler Web tarayıcısına, etiketler arasındaki içeriğin bir HTML belgesine birleştirilmesi gerektiğini bildirir. Bir web sayfası için HTML kodu oluşturmanıza yardımcı olmak üzere tasarlanmış Dreamweaver gibi programlar vardır. Uygulama, bir web sayfasının bölümlerini tıklamak, sürüklemek ve kopyalamak için bir grafik kullanıcı arayüzü sağlar. Uygulama, kullanıcının HTML kodunu oluşturur. Ancak, aslında HTML öğrenmek istiyorsanız, Not Defteri gibi basit bir metin düzenleyici programı açmak ve HTML kodunu kendiniz yazmak daha iyidir.
Genişletilebilir İşaretleme Dili (XML), önceden tanımlanmış öğeleri olmayan HTML gibi bir işaretleme programlama dilidir. HTML’nin yerini alamaz ancak tamamlar. HTML, bir Web tarayıcısında bilgilerin görünümünü yönetirken XML, verileri tanımlamak için etiketler ekleyerek HTML’yi tamamlar. Meta dilde XML diyoruz. Meta dil, bir dil hakkında veya başka bir deyişle XML, kullanıcının belirli ihtiyaçları karşılamak için bir biçimlendirme dili tanımlamasına izin verir. XML, yazdığınız belge türü için ihtiyaçlarınıza uygun özelleştirilmiş etiketler ve özellikler oluşturmanıza veya icat etmenize olanak tanır. XML, HTML özelliklerini genişletecek yeni öğeler ve özellikler eklemek için daha fazla esneklik sağlar. Ayrıca yeni tarayıcılar veya uygulamalar tasarlama yeteneği de sağlar.
HTML ilk olarak 1993 yılında İnternet standardı olarak tanıtıldı. Yıllar boyunca, birçok özellik ek özellikler ile piyasaya sürüldü. Bugün, Genişletilebilir Köprü Metni Biçimlendirme Dili (XHTML), HTML’yi İnternet standardı olarak değiştiriyor. XHTML HTML’ye benzer ancak XML kullanılarak yazılmış bir biçimlendirme programlama dilidir. Temel olarak, XHTML kullanarak, önceden belirlenmiş bir dizi öğeye dayalı kısıtlamalar içeren XML kodu yazıyorsunuz. Güçlü ve esnek bir programlama dili oluşturmak için HTML ve XML’nin en iyi bölümlerini birleştirir. XHTML temelde XML sözdizimi kullanılarak HTML’nin yeniden formüle edilmesidir. Bu programlama dilleri arasındaki temel fark XHTML belgelerinin, XHTML belgeleri olarak kabul edilebilmeleri için belirli kurallara göre iyi biçimlendirilmeleri veya geliştirilmeleridir. XHTML büyük / küçük harfe duyarlıdır, HTML HTML değildir. XHTML, veritabanı ve iş akışı uygulamalarıyla sorunsuz çalışır. XHTML, tasarımcıların yaratıcı olmasını ve yeni öğeler eklemesini kolaylaştırır. İçerik hakkında daha yapısal ve kavramsal bir düşünme yöntemi sağlar.
İlgili Makale: World Wide Web Nedir? – Web Nasıl Çalışır
Web Sitenizi Tasarlama
Sunum önemlidir, çünkü iyi ve kalıcı bir izlenim bırakmak için sadece bir şans vardır. Tüketiciler, web sitesi üzerinden iş ve ürünleri veya hizmetleri hakkında varsayımlar yapacaklardır. Bir ev almayı düşünün. Sadece yapısal sağlamlığa sahip olmakla kalmaz, aynı zamanda dış görünüş ve görsel çekicilikten de endişe duyarsınız. Evin yerleştirilme şekli, zemin tipi, duvarlardaki renk ve hatta dışarıdaki çalılar, ev ve değeri hakkında nasıl hissettiğinizde bir fark yaratabilir.
Web sitesi tasarımında kullanılan ve bir web sitesinin dekorasyonunda yardımcı olabilecek iki araç basamaklı stil sayfaları ve JavaScript’tir.
Basamaklı stil sayfaları (CSS), kullanıcılara web sitelerinin görünümünü değiştirmek için tanıdık masaüstü yayıncılık terminolojisi sağlayan basit bir stil dili kullanır. CSS, web sayfalarının tarayıcıda nasıl görünmesi gerektiğini açıklar. CSS’yi eviniz için süslemeler olarak düşünebilirsiniz. Herhangi bir dekorasyon olmadan, oldukça yumuşak ve sıkıcı, ancak dekor eklediğinizde gerçekten çevreyi baharatlıyor ve daha davetkar hale getiriyor. CSS, World Wide Web Konsorsiyumu (W3C) tarafından geliştirilmiştir. Tipografi, renkler, arka planlar ve diğer tasarım özelliklerini kontrol edebilir.
CSS, okunması ve yazılması kolay sözdizimi kullanır. İki bölümden oluşur: bir seçici ve bir bildirim. Seçici olurken, kural uygulandığı elemanın üzerine karar beyan belirtir tam olarak ne olduğunu elemana yapılmalıdır. Başlığınızı mor olarak ayarlamak isterseniz stil kuralınız şuna benzer: h1 {color: purple;}. ‘H1’ seçicidir ve ‘renk: purple’ bildirgedir. Bildirim iki bölüme ayrılabilir: özellik ve değer. Özelliği, renk gibi kalite veya niteliğe olduğu; değer purple gibi mülkün kesin spesifikasyonudur. Stil kuralları bir stil sayfasına yerleştirilir. Stil sayfası, birkaç web sayfası tarafından paylaşılan harici, bağımsız bir belgedir. Web sitesi boyunca stilleri rahatça kontrol eder. Alternatif olarak, stil sayfasının tek bir web sayfasına yalnızca o sayfanın kullanımı için dahil edilmesidir. CSS kuralları HTML kodu ile birleştirilebilir. CSS, XHTML’de sunum bilgilerini oluşturmak için kullanılmalıdır.
JavaScript, etkileşimli Web içeriği sağlamak için tasarlanmış bir programlama dilidir. Web sayfası tasarımının önemli bir bileşenidir. JavaScript, HTML koduna entegre edilmiştir ve web sayfalarını dinamik hale getirir. HTML kodunda bulunan JavaScript’e genellikle komut dosyası denir. JavaScript statik HTML belgeleri alıp etkileşimli hale getirerek kullanıcı deneyimini geliştirebilir. Bir sayfa tarayıcıya yüklendikten sonra Web içeriğinin değiştirilmesini sağlar. Bu, web sayfasının formlar ve denetimler aracılığıyla bir kullanıcıyla etkileşime girmesini mümkün kılar. JavaScript ayrıca animasyon ve görsel efektler sağlar. JavaScript işleri web sayfanızda gerçekleştirir. JavaScript, bir web sayfasına kapıların açılıp kapanmasına izin veren menteşeler veya bir evin ışıkları açıp kapatmasına izin veren ışık anahtarlarıdır.
Görsel olarak çekici bir web sitesi oluşturmak için ekranda görünecek düzenleri, yazı tiplerini ve renkleri göz önünde bulundurmalısınız. Web sitenizi tasarlarken, sayfaları bir arada tutan birleştirici temaları ve yapıları kullanın. Ziyaretçiler, birleştirilmiş temanın sağladığı tutarlılığı ve aşinalığı beğeneceklerdir. Web sayfasını parlak bir görünüm için sütunlar ve satırlar halinde düzenlemek için bir ızgara veya kavramsal düzen cihazı kullanmayı düşünün. Metnin sunumu, web sitesi tasarımının önemli bir bileşenidir. Kullanılan yazı tipi sayısını sınırlamak, yazı tipinizi yeterince boyutlandırmak, yeterince beyaz boşluk bırakmak ve koyu renkli açık arka plan gibi kontrast renkler kullanmak isteyeceksiniz. Beyaz boşluk sayfanızdaki boş alanları oluşturur. Beyaz boşluk, okuyucuları yönlendirmek ve sayfanın alanlarını tanımlamak için kasıtlı olarak kullanılabilir.
Web Sitenizi Tamamlama
Planlama, inşaat ve dekorasyondan sonra son bir inceleme gereklidir. Bir evin kodlamaya uygun olduğundan ve spesifikasyonlara göre tamamlandığından emin olmak için bir web sitesinin incelenmesi gibi, bir web sitesinin incelenmesi ve gözden geçirilmesi gerekir. Planlama aşamasında oluşturulan spesifikasyonları karşılamalıdır. İçerik açısından doğru olmalıdır. Görsel olarak çekici, ilgi çekici ve gezinmesi kolay olmalıdır. Web sitesi, amaçlandığı gibi görünmesini ve çalışmasını sağlamak için İnternet Explorer, Mozilla Firefox, Google Chrome veya Safari gibi birden çok Web tarayıcısında test edilmelidir. Web Sitesinin Windows ve Mac gibi birden çok platformda işlevselliği kontrol edilmelidir. Müşteri web sitesini inceleyecek ve memnuniyetini karşıladığından emin olacaktır. Yapılması gereken değişiklikler veya düzeltmeler bu noktada yapılacaktır.
Makale Özeti
Özetlemek gerekirse, Web tasarımı, World Wide Web’de görüntülenen belgelerin oluşturulması ve görsel tasarımıdır. İlk adım uygun planlama gerektirir. Bu, düzeni, görüntüleme ortamını, gezinme kolaylığını, köprü metninin kullanımını ve bant genişliği hususlarını içerir.
Sıradaki bina aşaması. Web siteleri HTML, XML ve XHTML ile oluşturulur. Köprü Metni İşaretleme Dili (HTML), diğer belgelere dinamik bağlantılar oluşturmak için köprü metni kullanan bir programlama aracıdır. Genişletilebilir İşaretleme Dili (XML), önceden tanımlanmış öğeleri olmayan HTML gibi bir işaretleme programlama dilidir. XHTML, HTML’ye benzer ancak XML kullanılarak yazılmış bir biçimlendirme programlama dilidir.
Web sitesinin yapısı tamamlandığında, tasarım ve dekorasyon bölümünün zamanı geldi. Buna bilgi tasarımı, birleştirici temalar, beyaz alan kullanımı ve genel görünüm ve cazibe dahildir. Web sayfalarını süslemek için CSS ve JavaScript’e güveniyoruz. Basamaklı Stil Sayfaları (CSS), kullanıcılara bir web sayfasının görünümünü değiştirmek için tanıdık masaüstü yayıncılık terminolojisi sağlayan basit bir stil dili kullanır. JavaScript, etkileşimli Web içeriği sağlamak için tasarlanmış bir programlama dilidir. Son olarak, doğruluğu sağlamak için test ve inceleme yapılır. Sonra web sitesi açılır.
İlgili Akademik Makaleler:
- Web tasarımı öğretiminde proje tabanlı öğrenme yaklaşımının öğrencilerin akademik başarısı ve görüşlerine etkisi
- Eğitsel web sitelerinin görsel tasarım kriterlerine ve kullanıcılara sunulan hizmetlere göre değerlendirilmesi
- Elektronik yayıncılık ve web tasarım
- Duyarlı Web Tasarımı
- Web tasarımı eğitiminin mobil uygulama ile desteklenmesine yönelik uygulama örneği ve sonuçları
Sık Sorulan Sorular:
HTML, diğer belgelere dinamik bağlantılar oluşturmak için köprü metni kullanan bir programlama aracıdır.
JavaScript, etkileşimli Web içeriği sağlamak için tasarlanmış bir programlama dilidir.
CSS, kullanıcılara bir web sayfasının görünümünü değiştirmek için tanıdık masaüstü yayıncılık terminolojisi sağlayan basit bir stil dilidir.
