Bir Web Sayfasının Anatomisi

Web sayfaları nelerden yapılmıştır? Bir web sitesini oluşturan tek tek öğeleri bilmek, etkili bir web sayfasını nasıl oluşturacağınızı anlamanıza gerçekten yardımcı olabilir. Web sitesi tasarımı veya geliştirmede yeniyseniz, size başlangıç için bir temel ve kontrol listesi sağlayabilir. Tüm web sitelerinin neler içerdiğini öğrenmenin zamanı geldi!

Header (Üstbilgi)

Başlamak için başlangıçtan daha iyi bir yer yoktur. Birçok web sitesi bir başlık veya menü ile açılır ve burası genellikle şirketinizin logosu veya web sitesi başlığıyla birlikte gezinme bağlantılarının gideceği yerdir. Dil değiştiriciler ve oturum açma bağlantıları gibi diğer önemli araçlar da buraya uygundur. İnsanların anında erişmesini istediğiniz her şey!

Bazı tasarımcılar başlığı “yapışkan” yapmayı seçer, böylece siz aşağı kaydırırken bile gezinme bağlantıları sizi takip eder. Başlık her web sayfasındaysa, logoya tıklamak sizi genellikle ana sayfaya geri götürür. Bu küçük kolaylıklar büyük bir fark yaratabilir.

Wordpress

Links(Bağlantılar)

Web sayfalarının% 99,9’u bağlantı içeriyor. Bu, web sitesinde nasıl dolaştığınızın temelidir. Bağlantıların altı çizilmeli, farklı renklendirilmeli veya normal metinden farklı olacak şekilde yapılmalıdır. Tüm etkileşimli öğeler gibi, ziyaretçilerin etkileşimli olduklarını bilmelerini sağlamak için adımlar atmalısınız.

Navigasyon

Tek sayfalık bir site yapmadığınız sürece, muhtemelen sitenizdeki ana sayfaların bağlantılarını veya gezinmeyi dahil edeceksiniz. Gezinme çubuğu oluşturmanın birçok yolu vardır. Başlıkta basit bir yatay liste, bir düğmeye bastığınızda açılan dikey menüler veya bir bağlantının üzerine geldiğinizde görünen açılır listeler oluşturabilirsiniz.

Kesin olan bir şey var: Navigasyonunuzu nasıl tasarlarsanız tasarlayın, açıkça görünür ve herhangi bir cihazdan erişilmesi kolay olmalıdır.

Bloglar gibi çok fazla içeriğe sahip siteler için, bir arama çubuğu eklemeniz ve içeriğinizi kategorize edip alt kategorilere ayırdığınızdan emin olmanız önerilir. Bulunduğunuz sitenin alt kategorisini gösteren içerik haritası gezintisini de dahil edebilirsiniz.

Resim

İyi web tasarımcıları, görsel içeriğin ilgiyi çekmek için gerekli olduğunu bilirler ve  resmi, ana sayfanın hemen üstüne bir afiş yapıştırarak yaparlar. Göze hitap etmenin yanı sıra, kahraman görüntüleri genellikle şirket hakkında küçük bir tanıtım ve hizmetleri için bir eylem çağrısı içerir.

Harekete geçirme ifadesi, ziyaretçilerinizden bir şeyler yapmalarını isteyen, genellikle bir bağlantı veya düğme olan basit bir ifadedir. “Şimdi İndirin”, “Ücretsiz Deneyin”; o bağlantıya tıkladıklarında ne olacağını açıkça gösterin!

Geleneksel bir kahraman resmi yerine, bazı siteler gezinme menüsünün hemen altında bir başlığa (büyük bir logo gibi) gider. Bu, ana sayfaya geri dönüş için uygun bir bağlantı görevi görebilir.

Netflix

Sidebar (Kenar Çubuğu)

Kenar çubuğu isteğe bağlı ancak paha biçilmez bir özelliktir, çünkü her şey için kullanılabilir! Blog arşivleri, gezinme, kayıt formları, kategori listeleri… Kenar çubuklarının bir ton potansiyeli var.

 Site içeriğinizin genişliği darsa, bir kenar çubuğu tüm bu beyaz alanı bölebilir ve sayfanın daha az sıkıcı görünmesine neden olabilir.

Footer (altbilgi)

Son fakat en son değil, altbilgi. Gizlilik politikanızı ve hizmet şartlarınızı, sosyal medya düğmelerinizi, şirketinizin bilgilerini buraya yapıştırırsınız. Bazıları altbilgiyi sıkıcı ama gerekli bağlantılar için kullanır. Ancak iyi tasarlanmışsa, sitenizi kapatmanın ve insanları sizi sosyal medyada ziyaret etmeye veya e-posta listesine kaydolmaya davet etmenin harika bir yolu olabilir. Altbilginizi ihmal etmeyin!

Amazon

Temel Bilgileri Öğrenmek

Yeni başlayan veya deneyimli bir tasarımcı, temel bilgilerinizin açık olması önemlidir. Bu öğelerin en azından bazılarını eklemeden bir web sitesi oluşturamazsınız, bu nedenle ne olduklarını ve nasıl uygulanacağını iyi anlamanız gerekir. Bunun web tasarımına iyi bir giriş veya bilgi tazeleme kursu olmasını umuyoruz!

Web programlamaya başlarken hangi dil ile başlayacağınızda kararsızsanız web programcılığında en çok kullanılan 3 programlama dilini karşılaştırdığımız yazımıza buradan ulaşabilirsiniz.

Leave a Reply