Çarpıcı Bir Web Sayfası Oluşturma Kılavuzu

Trendler. Onlardan kaçış yok. Bazıları saçma olsa da- kovboy botları ve Shakira kemeri gibi, çok kullanışlı olanları da yok diyemeyiz- eşofman ve yüksek bel pantolon gibi. Web tasarımı dünyasında da işlevselliği sebebiyle tek sayfadan oluşan web siteleri trendde. Aslında tüm içeriğinizi bir çatı altında, yani tek sayfada sunan bir siteden bahsediyoruz. Diğer sayfalardan ayrılan bir ana sayfa yerine içeriğiniz, şeritlerle farklı bölümlere ayrılır ve menü ögeleri, farklı sayfalar yerine bu bölümlerin her birine bağlanır.

Web sayfası formatında web sitesi kurma trendi, web tasarımcıları arasında gitgide daha çok moda oluyor. Neden mi? Basit, temiz ve kompakt bir tasarım deneyimi sunuyor da ondan. Bu rehberde kendi web sayfanızı oluşturmanın önemini ve yollarını açıklayacağız.

Web sayfası oluşturma adımları:

1. İşiniz için uygunluğuna karar verin

2. İçeriğinizin planını çıkarın

3. Site şablonu seçin

4. İçeriğinizi bölümlere ayırın

5. Paralaks efektlerle yenilik katın

6. Her bir bölüm için bir çapa menü oluşturun

7. Kullanıcıların sitenizi kaydırmasını kolaylaştırın

8. Harekete geçirici mesajınız güçlü olsun

9. Zengin bir alt bilgi alanı ekleyin

10. Sosyal medya hesaplarınızı dahil edin

11. Arama motoru optimizasyonunu (SEO) unutmayın

12. Sitenizi mobil dostu hale getirin

01. İşiniz için uygunluğuna karar verin

Web site tasarımında iki temel tarz vardır: tek parçadan oluşan bir web sayfası veya klasik birçok sayfadan oluşan bir site. İşinizin türüne, sitenizin özelliklerine ve önceliklerine göre bunlardan biri size daha çok uyabilir. Seçiminizi seçeneklerinizi ölçüp tarttıktan sonra yapmakta fayda var.

Web sayfası olarak tasarlanmış web siteleri, kompakt görünen ve önemli detayları etkili bir şekilde ileten güçlü bir tasarım sunar. Genellikle görsel ağırlıklıdır ve metin içeriği sınırlıdır. Sayfa kaydırma deneyiminin daha uzun olması, hikayenizi oluştururken yaratıcılığınızı konuşturmanıza ve bu sırada ziyaretçilerinizin içeriğinizi göreceği sırayı belirlemenize yardımcı olur.

Sayfalar arasında kaybolmaya son veren bir sayfa düzeni, içeriğinizin doğrusal olarak incelenebilmesine imkan sağlayarak kullanıcı deneyimini zenginleştirir. Bu format, mobil siteler ve tabletlere de uyarlanabilir. Tahmin edersiniz ki bir adet web sayfasına sahip olmanın bakımı da daha kolaydır ve klasik web sitelerine göre daha az kaynak gerektirir.

Bunu okurken muhtemelen kendi web sitenizi bu formatta canlandırdınız. Ama önce kendinize şu soruyu sorun: “Her şeyi tek sayfaya sığdırmak özellikle benim işim için iyi bir seçim mi?” Bu format, en yaratıcıdan en geleneksel iş modeline kadar her sektörde etkili olarak kullanılabilir. Landing page (varış sayfası), freelancer sitesi, fotoğrafçılık portfolyosu, düğün sitesi veya farklı etkinlik odaklı bir site gibi sınırlı bir içeriğe sahipseniz bu seçeneği göz önünde bulundurabilirsiniz.

Web sitesi dendiğinde çoğu insanın gözüne iletişim, mağaza, sıkça sorulan sorular, hakkında, ana sayfa gibi birçok farklı web sayfasını bir arada bulunduran klasik web siteleri gelir.

E-ticaret sitenizin mağaza kısmında geniş bir ürün yelpazesine sahip olmanız veya birçok farklı hizmet sunmanız gibi, sitede mutlaka bulunmasını istediğiniz yüklü miktarda içeriğe sahip olmak, web sayfası formatı yerine klasik bir web sitesi formatı seçmek için mantıklı bir sebeptir. Böylece web sitenizde her önemli detayı kendi özel web sayfasında uzun ve kapsamlı bir şekilde açıklayabilirsiniz. Örneğin bir blog başlatıyorsanız ziyaretçilerin yazılarınızı tek tek rahatlıkla görüntüleyebilmesi için bu formatı kullanmak okuyucu deneyimini iyileştirecektir.

02. İçeriğinizin planını çıkarın

Bu formatın size uyduğuna karar verdiyseniz şık bir web sayfası oluşturmaya geçebilirsiniz. Sıfırdan bir web sitesi kurarken öncelikle tüm içeriğinizi stratejik bir şekilde planlamalısınız. Web sayfası oluşturmak, içeriğinizin görüntülenme sırasını kararlaştırmanız için mükemmel bir fırsattır, bu yüzden mantıklı ve anlaşılır olmasına özen gösterin.

Ziyaretçilerinizin sitenizde hangi sırayla gezeceğini hayal etmekle başlayın. Ziyaretçiler ilk olarak aktarmak istediğiniz ana mesajla karşılaşmalıdır. Başka bir deyişle bu, manşet kısmıdır (ziyaretçinin sitenizi aşağı kaydırmadan önce gördüğü ilk kısım.)

Her web sitesinde bir “hakkında” alanı ve iletişim bilgilerinizin yer aldığı bir bölüm olmalıdır. Bu iki bölüm arasında, ne sunmak istediğiniz size kalmış. Örneğin, bir CTA (harekete geçirici mesaj) butonuna, tekliflerinize, pazarlama mesajınıza, ekibinizi tanıtmaya, hizmet ve ürünlerinize, referanslarınıza, bir S.S.S bölümüne ve fotoğraf galerisine yer verebilirsiniz.

Daha sonra son derece önemli olan içerik sırasına öncelik vermelisiniz. Ayrıca gereksiz tüm bilgileri çıkarmayı ihmal etmeyin. Güçlü bir tasarımın temeli, olabildiğince az kelime kullanmaktır. Özetle planınız, her şeyi mümkün olduğunca düzenli ve sade tutmak olmalıdır.

03. Site şablonu seçin

İçerik planınızı çıkardıktan sonra çapa menü, şerit ve sütunlar, sosyal ağ çubuğu, zengin bir alt bilgi gibi bir web sayfası için gereken tüm unsurları içeren ve size sağlam bir temel sağlayacak şablona ihtiyacınız olacak.

Tasarımcılarımızın her sektöre özel olarak olarak oluşturduğu yüzlerce web sayfası şablonunu tamamen kişiselleştirebilir ve her türlü amaca yönelik kullanabilirsiniz. Bu şablonların en iyi yanı, üst bilgiden alt bilgiye kadar her şeyi kolayca değiştirebilmeniz, kişiselleştirebilmeniz ve tamamen size ait bir düzene sokabilmeniz. Bu durumda size kalan tek şey hayal gücünüzün yaratıcılığını konuşturmak!

04. İçeriğinizi bölümlere ayırın

Şimdi sıra planlanan içeriğinizi şeritler kullanarak web sitenize yerleştirmede. Web sitenize şerit eklemek için şu adımları izleyin:

1. Wix Editör'ü açın.
   

2. Ana menüden “Ekle” seçeneğine tıklayın.
   

3. “Şerit” seçeneğini seçin.

Burada tamamıyla kişiselleştirilebilir hazır tasarımlar arasından seçim yapabilirsiniz. Her bir şeride metin, video, görsel, iletişim formu, referans ve daha pek çok şey ekleyebilirsiniz. Sayfanıza dilediğiniz kadar şerit ekleyin ve sunmak istediğiniz içerik sırasına göre şeritlerinizi düzenleyin. Geleneksel çizgide kalmak istiyorsanız “Hakkımda” bölümüyle başlayıp “İletişim” bölümünüzü oluşturacak zengin alt bilgi alanı oluşturmaya doğru yukarıdan aşağıya ilerleyebilirsiniz.

05. Paralaks efektlerle yenilik katın

Dikkat çeken ve müşteri kazanmanızı sağlayacak popüler web tasarımı trendlerinden biri de paralaks kaydırmadır. Bu efekt sayesinde, bir önceki adımda eklediğiniz farklı şeritlerle web sitenize üç boyutlu bir tasarım kazandırabilirsiniz. Bu paralaks etki aslında ziyaretçiler web sitenizi aşağı doğru kaydırırken arka ve ön plandaki katmanların farklı hızlarda hareket etmesiyle oluşur.

Web sayfası tek boyutlu olarak algılandığı için paralaks kaydırma gibi efektler eklemek, sitenizi güçlendirir ve akılda kalıcı olmasını sağlar. Paralaks efekt oluşturmak için editörde şeritlerinize yakınlaş, göster ve gizle gibi ufak animasyonlar ekleyebilirsiniz. Bu profesyonel web sitesi tekniği, ziyaretçilerinizin sitenizi en alta kadar kaydırmasını sağlamanın şaşmaz yollarından biridir.

06. Her bir bölüm için bir çapa menü oluşturun

Site menülerini daha önce duydunuz ama bu, alıştıklarınızdan biraz daha farklı. Web sayfası menüsüne tutturulmuş her öge, kendi özel sayfası yerine aynı sayfanın farklı bir bölümüne bağlanır.

Öncelikle web sayfanızın her bölümünü istediğiniz yere “çapalayarak” tanımlamalısınız. Bir çapa menüsü oluşturarak düzenli bir web sayfası tasarımı elde etmenin vazgeçilmez ve önemli üç adımı vardır:

• Bir çapa (bağlantı) ekleyin: Bu sayede ziyaretçiler sayfanızda doğrudan istedikleri bölüme gidebilir ve web sayfanızın farklı kısımlarında kolaylıkla gezinebilirler. Pek çok şablonda çapalar zaten mevcuttur ve bunları dilediğiniz zaman yeniden adlandırabilir, taşıyabilir veya silebilirsiniz.
  

• Sitenizin menüsünü çapaya bağlayın: Bu sayede ziyaretçileriniz menünüze tıklayarak sayfanızda istedikleri bir bölümüne gidebilirler. Çapa eklerken, çapanızı bağlayacağınız bölümü seçmeli ve çapanıza bu bölümün adını vermelisiniz . Başka bir deyişle, her bir çapaya vermeyi seçtiğiniz başlık, menünüzde o isimle görünecektir ve böylece ziyaretçiler için temiz bir gezinti deneyimi oluşturacaktır.
  

• Menü içinde sıralama yapın. Kaydırma kolaylığı ve gezinti dostu bir tasarım için menü sıralamanız, bölüm sıralamanızla tutarlı olmalıdır. Örneğin menünüz yataysa, menüdeki ilk öğe (“Hakkımda”) sayfanızın ilk bölümüyle aynı sıralamada olmalıdır (yine “Hakkımda”). Web sayfalarında kaydırarak gezinti genellikle uzun bir süreç olduğundan menünüzü sabitleyerek her an görünür kılmalısınız. Yüzer bir çapa menüsü oluşturabilir veya menünüzü üst bilgi kısmına ekleyerek ‘üst bilgiyi sabitle’ seçeneğine geçebilirsiniz.

07. Kullanıcıların sitenizi kaydırmasını kolaylaştırın

Web sayfasının uzun formatı sebebiyle ziyaretçiler, sitenizi bir aşağı bir yukarı kaydırırken dikkat çekici içeriğiniz içinde kaybolabilir.

Ziyaretçilerinize zahmetsiz bir gezinti deneyimi sunmak için, bir aşağı bir yukarı kaydırmaktansa tek tıkla sitenizin başına dönmelerini sağlayacak bir en üste dön butonu eklemeniz yeterli. Bu buton, ziyaretçiniz sitede en aşağı kaydırdığında bile görünecek şekilde sabit konumda kalır.

08. Harekete geçirici mesajınız (CTA) güçlü olsun

Tüm içeriğiniz tek yerde toplandığı için ziyaretçilerin dikkatini bülten aboneliği, fiyat talebi veya hizmet satın alma gibi önceliklerinize çekecek bir amaç oluşturmalısınız.

Harekete geçirici mesaj (CTA) işte burada devreye giriyor. CTA'lar internetteki hedef kitlenizi o an yapmalarını istediğiniz eyleme teşvik eden kısa bir cümledir. Mesajınızı, en yüksek görünürlüğü yakalamak adına ilk şeritin üzerindeki manşet kısmına ekleyebilir ve ziyaretçilerinizi daha önceden planladığınız amaca uyan bir bölüme yönlendirebilirsiniz.

Bunun için tıpkı 6. adımda farklı bölümlere bağlantı sağladığımız gibi CTA butonunuza köprü kurmanı yeterlidir. Ziyaretçilerinizi belli bir bölüme yönlendirmek için Editör’den bir CTA butonu ekledikten sonra CTA’nıza bir köprü (bağlantı) oluşturun. Örneğin CTA’nız “Benimle İletişime Geçin” metni içeriyor olsun. O halde butona tıklayanların “İletişim” bölümünüze yönlendirileceği bir bağlantı sağlamalısınız.

09. Zengin bir alt bilgi alanı ekleyin

Alt bilgi, web sitenizin en altındaki alandır. Çoğu insan, önemli bilgileri bulmak için doğrudan bu kısma göz atar, örneğin işletmenin iletişim bilgileri gibi. Bu yüzden güncel iletişim bilgileriniz, sosyal medya hesaplarınız, çalışma saatleriniz, gizlilik ilkeniz ve hizmet koşullarınızın burada bulunması önemlidir.

Fiziksel bir mağazaya sahipseniz alt bilgiye harita da ekleyebilirsiniz.

10. Sosyal medya hesaplarınızı dahil edin

Online kimliğinizi her açıdan bir araya getirmeniz ve bir bütünlük oluşturmanız önemlidir. Bunun yollarından biri de Facebook, Linked In ve Instagram hesaplarınızı web sitenize bağlamaktır. Neden mi? Sitenizin ziyaretçi trafiğini olabildiğince artırmak için!

Daha fazla tıklanmak ve ön plana çıkmak için sosyal medya hesaplarınızı web sitenizle birleştirmenin birkaç yolu vardır:

• Web sitenize sosyal ağ çubuğu ekleyin: Bu çubuk, tüm sosyal medya ağlarının simgelerini içerir. Wix’te sosyal ağ çubuğu sergilerken birden fazla düzen arasından seçim yapabilirsiniz. Tek yapmanız gereken aralarından birini seçmek, hesaplarınızın linklerini eklemek ve görünüşü zevkinize göre düzenlemek. Ziyaretçilerinizin bu öğeyi sitenizde gezinirken her an görebilmeleri için Editör’de ögenin üzerine tıklayın ve “Ekrana Sabitle”yi seçin.
  

• Instagram hesabınızı ekleyin: Instagram hesabınızı web sitenize bağlayarak daha da görünür kılmaya ve daha çok takipçi edinmeye ne dersiniz? Böylece kullanıcılar, güncel fotoğraflara ve konum bilgilerine kolayca ulaşabilir. Instagram hesabınızı eklediğinizde pek çok kişiselleştirilebilir düzen arasından hoşunuza gideni seçerek tasarımınızı şekillendirebilirsiniz.

11. Arama motoru optimizasyonunu (SEO) unutmayın

Arama motoru optimizasyonu (SEO), internette görünür olmak ve Google gibi arama motorlarının sonuç sayfalarında listelenmek isteyen her site için önemli bir unsurdur. SEO, belli anahtar kelime aramalarında daha üst sıralarda yer almanız için sitenizi optimize etmeniz anlamına gelir. Daha fazla trafik, sitenize daha çok ziyaretçi çekmek demektir.

Sitenizin Google'a indekslendiğinden, yani veri tabanına kayıtlı olduğundan emin olmakla başlayın. Neyseki Wix siteleri, yayınlandıktan sonra saniyeler içinde Google’a indekslenir ve sonuçlarda görünür hale gelir. İndekslendikten sonra doğru anahtar kelimeleri hedefleyerek daha üst sıralarda listelenebilir ve sitenizi ön plana çıkarabilirsiniz.

Bir Wix siteniz varsa işiniz bu noktada daha da kolaylaşır! Wix SEO Wiz, size özel bir kontrol listesi oluşturarak anahtar kelimelerden kişiselleştirilmiş SEO planı tavsiyelerine kadar yapmanız gerekenler konusunda size süreç boyunca rehberlik eder.

Bonus: En iyi sonucu elde etmek için web sitenizi Google arama sonuçlarında listeleme rehberimize göz atın.

12. Sitenizi mobil dostu hale getirin

Günümüzün trendi internette gezinmeyi bilgisayarlardan akıllı telefonlara doğru taşıyor. Bu yüzden arama motoru optimizasyonu sıralamasında pek çok web sitesinin ilk önce mobil sürümü dikkate alınıyor (bkz. Google’ın mobil öncelikli indekslemesi).

Peki web siteniz için bu ne anlama geliyor? Basitçe ifade etmek gerekirse sitenizin mobil hali bilgisayar sürümü kadar şık ve işlevsel olmalıdır. Bu süreçte okunabilirlik ve gezinme kolaylığının önemi göz önünde bulundurulduğunda web sayfası oluşturmayı seçerek doğru yolda ilerlediğinizi söyleyebiliriz.

Ayrıca bir Wix siteniz varsa şansınız devam ediyor çünkü Wix, sitenizin her cihazda mükemmel görünen bir mobil sürümünü otomatik olarak oluşturur. Editör’e gidin, Mobil Editör’e geçiş yapın ve sitenizin mobil görünümüne göz atın. Mobil sitenizde gezintiyi daha da kolaylaştırmak için bir hızlı eylem çubuğu ekleyebilirsiniz. Mobil sitelerde sosyal ağ çubuğu görünmediğinden bu çubuk, ziyaretçilerin diledikleri bilgiyi; örneğin iletişim bilgilerinizi arayabilmeleri için harika bir alternatif sunar.

Size ilham verecek web sayfası tasarımları:

Kapsamlı bir web sayfasının ilk evrede nasıl göründüğünü merak ediyorsanız bu üç Wix kullanıcısının sitelerine göz atın. Kendi sitenizi oluşturmada size bolca ilham verecekler.

Young Book Tasarım Ödülleri

Mutiny Creative Agency

Ed5M

Wix Ekibi