Web Sitesi Tasarımı: Eksiksiz Kılavuz

Yayınlanan: 2022-05-20

Açıklama: Bu içerik okuyucu desteklidir, yani bazı bağlantılarımıza tıklarsanız bir komisyon kazanabiliriz.

Web sitesi tasarımı eskiden çok zordu ama bu artık doğru değil.

Yıllar önce, web sitelerimi tasarlamaya başladığımda tonlarca kaynak yoktu. Temel olarak iki seçenek vardı - web sitesi programlama dillerinin temellerini öğrenin veya bir tasarımcı işe alın. İlk seçim zor ve zaman alıcıdır. İkincisi pahalıdır.

Her şeyi kendi başıma tasarlamaya çalışmak gibi kısa bir denemeden sonra, bir tasarımcıya en yüksek doları harcadım. Harcamak istediğimden daha fazlaydı, ama gerçekten fazla seçeneğim yoktu.

Bugün, yeni web sitesi sahiplerinin emrinde daha fazla kaynak var. Bir tasarımcı tutmadan veya kodlamayı öğrenmeden profesyonel bir web sitesi tasarlamak mümkündür.

İster başlangıç ​​seviyesinde olun, ister web siteleri tasarlamak için alternatif bir yol arıyorsanız, doğru yere geldiniz. Bu adım adım kılavuzda aşağıda bir web sitesinin nasıl tasarlanacağını açıklayacağım.

Web Sitesi Tasarımı İçin Favori Aracım

Wix, web sitesi tasarımı için en sevdiğim araçtır. Esasen web tasarımından tamamen uzaklaşmak için alternatif bir yöntemdir.

Ücretsiz bir web sitesi oluşturucu olarak Wix, herhangi bir deneyim, geliştirme becerisi veya tasarım bilgisi gerektirmeden herkesin sıfırdan bir web sitesi oluşturmasını ve tasarlamasını kolaylaştırır.

Wix'i bu kadar çok sevmemin nedeni, çok zahmetsiz olması. Bu kadar basit bir alet için bile, nihai tasarım her zaman profesyonelce yapılmış görünüyor. İnsanlar bir tasarımcı tuttuğunuzu varsayacak - bu o kadar iyi.

Bu zahmetsizlik, güvenlik ve güvenilirlik gibi kendi başınıza uğraşmak istemediğiniz önemli şeylere kadar uzanır.

Wix, her iki taraf için de optimizasyonu yönetir, böylece siteniz her zaman korunur ve sunucuları web sitenizi her zaman ziyaretçilere sunabilir.

Ayrıca, korkunç bir şey olması durumunda sıfırdan başlamak zorunda kalmamanızı sağlayan otomatik site veri yedeklemeleriyle ekstra yol kat ederler.

Wix'i bu kadar çok önermemin bir başka nedeni de çok yönlülüğü. Güneşin altındaki hemen hemen her tür web sitesinin tasarım ihtiyaçlarını karşılayabilir.

Basit bloglardan portföy sitelerine, çevrimiçi mağazalara, restoran web sitelerine, küçük işletme sitelerine ve daha fazlasına kadar Wix her şeyi yapabilir. Piyasadaki diğer web sitesi kurucuları aynı çok yönlülüğe sahip değil.

Aşağıdan devam edin, size Wix kullanarak ücretsiz bir web sitesi tasarlamayı öğreteceğim.

Yapmanız gereken ilk şey Wix'e kaydolmak. Wix.com'a gidin ve bir hesap oluşturun. Bunu yapmak %100 ücretsizdir ve kredi kartı bilgilerinizi vermenize bile gerek yoktur.

Ana sayfadaki veya sitenin herhangi bir yerindeki birçok "Başlayın" düğmesinden birini tıklamanız yeterlidir.

Diğer platformlardan farklı olarak, Wix kayıt işlemi birkaç saniye içinde tamamlanabilir. Doldurulması gereken karmaşık form alanları yoktur. Sadece e-postanıza ve şifrenize ihtiyaçları var.

Hatta herhangi bir şey yazmayı atlayabilir ve Google veya Facebook'u kullanarak tek bir tıklamayla kaydolabilirsiniz.

Kaydolduğunuzda, Wix otomatik olarak web sitesi tasarım sürecinde size yol gösterecektir.

Adım #2: Web Sitenizin Türünü Seçin

Ardından, ne tür bir web sitesi tasarlamak istediğinizi bulmanız gerekecek. Cevabınız tasarım seçimleriniz üzerinde önemli bir etkiye sahip olacaktır.

Örneğin, kişisel bir blog ve bir e-ticaret web sitesi, tasarım seçimlerinde büyük farklılıklara sahip olacaktır. Fotoğraf veya özel sanat eserlerini sergilemek için kullanılan bir portföy sitesi, yerel bir restoran web sitesiyle aynı tasarıma sahip olmayacaktır.

Wix bu adımı sizin için kolaylaştırıyor. Çok çeşitli potansiyel seçenekler arasından web sitenizin türünü seçmeniz istenecektir.

Cevabınıza bağlı olarak, Wix size o kategorideki uygun şablonları otomatik olarak sunacaktır. Örneğin, "çevrimiçi mağaza"yı seçerseniz, düzen ürün sayfalarını, ürün kategorilerini içerecek ve bir ödeme süreci tasarlamanızı kolaylaştıracaktır.

Bir web sitesi türü seçtiğinizde, Wix size tasarımınız için iki seçenek sunar:

  • Wix ADI'nin sizin için bir web sitesi oluşturmasına izin verin.
  • Editör ile web sitenizi oluşturun.

İlk seçenek basittir ve acelesi olan insanlar için mükemmeldir. Sadece birkaç basit soruyu yanıtlayacaksınız ve Wix yanıtlarınıza göre sizin için bir site tasarlayacaktır. Sürecin ne kadar hızlı sürdüğü etkileyici.

Bir dakikadan kısa sürede yepyeni bir özel web sitesi tasarımına sahip olacaksınız. Tasarım güzel çıkıyor ve sayfaları kendi içeriğinizle özelleştirmenin yanı sıra işiniz bitti.

Bu öğreticinin amaçları doğrultusunda, ikinci seçeneğe bağlı kalacağız: Wix düzenleyiciyle bir site oluşturmak. Bu size tasarım seçeneklerinin her yönü üzerinde daha fazla özgürlük ve kontrol sağlayacaktır.

Adım #3: Bir Şablon Seçin

Boş bir tuval ile bir web sitesi tasarlamaya çalışmak yerine, bir şablonla başlamak çok daha kolaydır.

Farklı seçeneklere göz atmak için birkaç dakikanızı ayırın. Hangi tarzları seversin? Hangi şablonlar marka imajınızı taklit ediyor? Wix, aralarından seçim yapabileceğiniz binlerce şablona sahiptir. İlk başta biraz bunaltıcı olabilir. Ancak, web sitenizin türüne göre odağınızı daraltın.

Bu örnek için bir “işletme” web sitesi seçiyorum. Ama bu gerçekten geniş bir kategori. Ekranın sol tarafına bakarsanız, odağınızı işletme türlerine göre daha da daraltabilirsiniz.

Wix'in danışmanlar, emlak şirketleri, finans ve hukuk gibi profesyonel hizmetler, pazarlama ve çok daha fazlası için özel şablonları vardır. Her web sitesi türünün şablonlarla farklı alt kategorileri vardır.

Örneğin, "çevrimiçi mağaza"yı seçerseniz giyim, mücevher, elektronik, ev dekorasyonu, güzellik malzemeleri, spor malzemeleri ve daha fazlası için şablonlar görürsünüz. Bir blog web sitesi tasarlıyorsanız, Wix'in kişisel bloglar, seyahat blogları, moda blogları, podcast'ler vb. için şablonları vardır.

Şablonunuz, web sitesi tasarımınızın geri kalanının temeli olacaktır. Bu nedenle, zaman ayırmanız ve bu adımı aceleye getirmemeniz önemlidir. Yine de farklı tasarım öğelerini beğeninize göre özelleştirebileceksiniz, ancak bu, doğru şablonla çok daha kolay.

4. Adım: Düzeninizi Düzenleyin

Web sitesi ziyaretçileri, ana sayfaya geldikten sonra bir saniyeden daha kısa bir sürede web siteniz hakkında bir fikir edineceklerdir. Bu yüzden tasarım çok önemlidir ve her şey doğru yerleşim ile başlar.

Wix şablonları, kullanıcı dostu bir tasarım için zaten optimize edilmiştir. Ancak burada bazı değişiklikler yapma özgürlüğüne ve esnekliğine sahipsiniz.

Bu örnekte, “İş Danışmanı” şablonunu düzenliyorum. Diyelim ki bu ana sayfadaki başlığın konumunu taşımak istedim. Wix düzenleyicideki kutuyu tıklayıp sayfada başka bir yere sürüklemem yeterli.

Veya belki de ekranın sağ yarısında bu "Daha Fazla Bilgi Edinin" harekete geçirici mesajını yeniden konumlandırmak istiyorum. Üzerine tıklayıp düğmeyi istediğim yere sürükleyebilirim.

İlk başladığınızda birkaç şeyi hareket ettirmenizi tavsiye ederim. Bu sizi Wix düzenleyicisiyle tanıştıracak, böylece yolda rahat edeceksiniz. Sonunda herhangi bir düzen değişikliği yapmak istemiyorsanız, her zaman orijinal tasarıma geri dönebilirsiniz.

Adım #5: İçeriğinizi Hazırlayın

İçerik, sitenizin tasarımının önemli bir bileşenidir. Web sitesinde hangi materyallerin yer alacağını tam olarak anlamadan tasarımı tamamen sonuçlandıramazsınız.

Resimler, videolar, GIF'ler, logolar, sloganlar, metin (kopya) ve sitenizde görüntülemek istediğiniz her şeyi toplayın.

Size amacımı açıklamak için bir örnek göstereyim.

Hala aynı iş danışmanı şablonunu düzenliyorum. Sayfanın bu bölümünde yapacağım ilk şeylerden biri, resmi kendi resmimle değiştirmek. Ancak bunu yapmadan önce, ekranın sol alt tarafındaki ilgili metin kopyasını da düşünmem gerekir.

Varsayılan olarak, yukarıda vurguladığım gibi, şablonda burada biraz boşluk var. Boş alan önemli bir web tasarım özelliği olsa da, bu durumda nasıl kullanıldığını sevmiyorum.

Yani bunlar benim seçeneklerim:

  • Tam uzunlukta bir fotoğraf kullanın (yukarıdaki gibi) ve boş alana bir paragraf ekleyin.
  • Daha küçük bir fotoğraf kullanın (bir vesikalık fotoğraf gibi) ve sadece tek bir metin paragrafı kullanın.

Her ikisi de sayfanın o boş bölümünü ortadan kaldırma hedefime ulaşacak. Bir bileşenin diğerini nasıl etkilediğini görüyor musunuz? Bunların hepsi tasarımla ilgilidir ve içeriğinizi önceden hazırlarsanız çok daha kolaydır.

Adım #6: Marka Stratejinizi Tanımlayın

Ziyaretçilerin web sitenizi nasıl algılayacağını düşünmeye başlayın. Renk düzeni, yazı tipleri ve diğer tasarım bileşenleri gibi şeyler marka imajınızı doğrudan etkiler.

Wix düzenleyicinizin sol tarafındaki “Tema Yöneticisi”ne tıklayın. Bu, üzerinde "A" bulunan ve yağmur damlası veya boya damlası gibi görünen düğmedir.

Buradan sitenizin tema renklerini değiştirebilirsiniz. Ayrıca başlıklar ve paragraflar için varsayılan metin temalarınızı düzenleme olanağına da sahip olacaksınız.

Bu durumda, mevcut renk şeması bir iş danışmanı için iyi sonuç verir. Modern ve profesyonel. Ama diyelim ki çocuklar için bir web sitesi tasarlıyorsunuz. Parlak renkler ve büyük, kalın yazı tipleri ile biraz daha eğlenebilirsiniz.

5. adımda şirket logolarınızı ve diğer malzemelerinizi eklediyseniz, renk düzeninin içeriğinizin geri kalanıyla uyumlu olduğundan emin olmak istersiniz.

Adım #7: Açılış Sayfaları Ekleyin

Açılış sayfalarınızın her biri benzersiz tasarımlara sahip olacaktır. Hepsi aynı marka ilkelerini ve ana sayfanızın temasını takip etmeli olsa da, tasarım seçeneklerinin bazı varyasyonları olacaktır.

Bir sayfa eklemek için Wix düzenleyicinizin sol tarafındaki üstteki simgeye tıklayın. Ardından, aşağıda vurguladığım gibi “sayfa ekle”yi tıklayın.

Yeni sayfalar, üstbilginiz ve altbilginiz dışında, esasen boş bir tuval olacaktır. Ancak sıfırdan başlamak yerine, hangi içeriği içereceğine bağlı olarak herhangi bir sayfaya “şerit ekleyebilirsiniz”.

Bazı seçeneklere göz atmak için düzenleyicideki “+” düğmesini tıklamanız yeterlidir.

Bunu mini bir şablon olarak düşünün. Genel site şablonunuzu ilk seçtiğinizde 3. adımda kullandığınız ilkelerin aynısını uygulayın.

Bu, yeni açılış sayfaları tasarlamanın daha kolay bir yoludur. Wix zaten o kadar çok harika seçeneğe sahip ki sayfalarınızı sıfırdan oluşturmaya çalışmaya değmez.

8. Adım: Kullanılabilirliğe Odaklanın

Bazen tasarım sürecinde, ziyaretçilerin sitenizle nasıl etkileşim kuracağına odaklanmayı kaybetmeye başlayabilirsiniz. Ancak kullanıcı deneyimi (UX) göz ardı edilemez.

İnsanların bir web sitesini ziyaret ettiklerinde bekledikleri belirli tasarım en iyi uygulamaları vardır. Örneğin, gezinme menüsünün sayfanın en üstünde olmasını beklerler. Altbilginin iletişim bilgilerini içermesini beklerler. Logonun onları ana sayfaya geri götürmesini bekliyorlar.

Gezinme menüsü gibi basit bir şeye bakalım:

Bu örnekte, menüde yalnızca dört sayfa bulunmaktadır. Belki bir veya iki tane daha ekleyerek kurtulabilirsin. Ama bunun ötesinde, çok fazla.

Bu web sitesinin menüsünde 10 veya 20 sayfa olduğunu hayal edin. Bir felaket olurdu. Sayfanın üst kısmı çok karmaşık olurdu ve ziyaretçiler aradıklarını asla bulamazlardı. Genel olarak, bu kötü bir tasarım seçimi olurdu.

CTA yerleşiminden kaydırma efektlerine, beyaz alana, mimariye ve aradaki her şeye kadar yaptığınız her tasarım seçiminde kullanılabilirliği düşünün.

Burada tekerleği yeniden icat etmeye çalışmayın. Web tasarımı en iyi uygulamalarını takip edin ve UX iyi olacaktır.

9. Adım: Mobil Cihazların Tasarımını Optimize Edin

Statista'ya göre, tüm küresel web trafiğinin yaklaşık yarısı mobil cihazlardan geliyor. Bu nedenle, sitenizdeki her ziyaretçinin bir akıllı telefon veya tabletten göz atması gibi bir yazı tura şansı var.

Web sitenizin tasarımının mobil uyumlu olduğundan emin olmanız gerekir. Aksi takdirde, ziyaretçiler hemen geri döner ve asla mobil dönüşüm elde edemezsiniz.

Neyse ki Wix bu süreci sizin için kolaylaştırıyor.

Web sitenizin masaüstü görünümünden çıkmak için düzenleyici veya önizleyici sayfasından mobil simgeye tıklamanız yeterlidir.

Wix, web sitenizi mobil cihazlar için otomatik olarak optimize eder. Ancak herhangi bir değişiklik yapmak isteyip istemediğinizi görmek için her şeyi kendiniz kontrol etmek yine de iyi bir fikirdir. Değiştirmek istediğiniz bir şey görürseniz, masaüstü sürümünü değiştirmeden sitenizin mobil tasarımını düzenleyebilirsiniz.

Adım 10: Web Sitenizi Yayınlayın

Tasarımı tamamladığınızda, sitenizi web'de yayınlamanın zamanı geldi.

Sitenizin yayınlamak için %100 bitmiş olması gerekmediğini belirtmekte fayda var. Her zaman geri dönüp sayfaları daha sonra ekleyebilirsiniz. Ancak bir ana sayfanız, hakkında sayfanız, iletişim sayfanız ve bir avuç site öğesine sahip olduğunuzda, biraz trafik oluşturmaya başlayabilmeniz için yayınlamasını sağlayın. Sadece eksik sayfaları yayınlamadığınızdan emin olun.

Devam etmek için Wix kontrol panelinizin sağ üst köşesindeki mavi "Yayınla" düğmesini tıklayın.

Daha önce de söylediğim gibi Wix %100 ile ücretsiz bir site tasarlayabilir ve yayınlayabilirsiniz. Ama bir yakalama var.

Ücretsiz Wix kullanıcıları alanlarını özelleştiremez. Tüm alan adları, Wix hesap adınızı, ardından Wix'in markasını ve ardından sitenizin adını içerir. Yukarıdaki örnekten de görebileceğiniz gibi, buradaki etki alanı şöyle olacaktır:

http://neilpatelsample.wixsite.com/mysite-1

Bu, işle ilgili herhangi bir web sitesi için uygun bir seçenek değildir. Siteyi yalnızca web tasarım ilkeleriyle oynamak için kullanıyorsanız sorun değil. Ancak gerçek ziyaretçileri olan meşru bir site istiyorsanız, premium bir Wix planına geçmeniz gerekir.

Artık doğrudan Wix üzerinden veya bir üçüncü taraf alan adı kayıt kuruluşundan satın alınan özel bir alan adı kullanabileceksiniz. Halihazırda bir alan adınız yoksa, Wix'ten alın. Her şeyi tek bir platform üzerinden yönetmek daha kolay.

Çözüm

Web sitesi tasarımı yıllar içinde gerçekten gelişti. Yeni site sahipleri için bir zamanlar büyük bir zorluk veya pahalı bir girişim olan şey, artık kolaylıkla gerçekleştirilebilir.

Wix gibi web sitesi oluşturucular, web sitelerini sıfırdan tasarlama ihtiyacını ortadan kaldırır.

Teknik bilgisi olmayan kullanıcılar ve sıfır tasarım deneyimine sahip kişiler bir şablon seçebilir ve sitelerini özel içerikle doldurabilir. Herhangi bir web programlama dili öğrenmenize veya bir tasarımcı tutmanıza gerek yok.

Wix'e kaydolun, yukarıda listelenen adım adım süreci izleyin ve birkaç dakika içinde profesyonelce tasarlanmış bir web sitesine sahip olacaksınız. Bu kadar basit!

Neil Patel ile Danışmanlık

Ajansımın Web Sitenize Nasıl Büyük Miktarlarda Trafik Çekebileceğini Görün

  • SEO – büyük miktarda SEO trafiğinin kilidini açın. Gerçek sonuçları görün.
  • İçerik Pazarlama – ekibimiz, paylaşılacak, bağlantılar alacak ve trafik çekecek epik içerik oluşturur.
  • Ücretli Medya – net ROI ile etkili ücretli stratejiler.

Arama Yap