Bir web sitesine ihtiyacınız var. Muhtemelen internetteki diğer insanlardan ve makalelerden aynı şeyi duymuşsunuzdur. Doğru olduğunu biliyorsun. Ancak, bir web sitesini nasıl tasarlayacağınızı öğrenme olasılığı göz korkutucu olabilir.
İşte iyi haberler:
Eskiden profesyonel bir web tasarımcısı veya geliştiricisi gerektiren bir web sitesi oluşturmak için şuan artık durum böyle değil. Bugünlerde bir web sitesini nasıl tasarlayacağınızı kendi başınıza öğrenmek çok kolay .
Güzel görünen bir web sitesi oluşturmak için kodlama sihirbazı veya tasarım uzmanı olmanıza gerek yok. Herkes bir web sitesinin nasıl tasarlanacağını öğrenebilir ve bu kılavuzda bunu yapmak için temel adımlarda size yol göstereceğiz. Bu adımların çoğu, popüler CMS platformlarında benzerdir .
İçeri girelim!
Bir web sitesi nasıl tasarlanır
İşte geleceklerin içindekiler tablosu:
1. Adım: Web sitenizin amacını tanımlayın
Bir web sitesini nasıl tasarlayacağınızı öğrenirken, ilk adım web sitenizin amacını belirlemektir.
Açık olun:
Web siteniz kimin için
Web sitenizde yapmalarını istediğiniz şey
İstenilen eylemi gerçekleştirmek için bilmeleri gerekenler
İdeal ziyaretçinizi belirleyin
Bir web sitesini nasıl tasarlayacağınızı öğrenmeden önce, web sitenizi kimin için kurmanız gerektiğini öğrenmeniz gerekir.
İdeal ziyaretçiniz için bir profil oluşturun . Bunlar, web sitenizi ziyaret etmekten en çok yararlanacak kişilerdir – sorunlarını hizmetlerinizle veya ürünlerinizle çözebilirsiniz. Doğru web sitesi ziyaretçileri için doğru çözümlere sahipseniz, dönüşüm oranınızda bir artış göreceksiniz.
İdeal ziyaretçi profiliniz şunları içermelidir:
- Yaş, isim ve mevcut konum
- Eğitim seviyesi, meslek ve gelir
- Harcama alışkanlıkları
- Hobiler ve ilgi alanları
- Favori web siteleri veya diğer çevrimiçi yayınlar
- Tercih edilen sosyal medya platformları
Bu bilgiler, ziyaretçilerinizin kendileriyle kişisel olarak konuşuyormuşsunuz hissini vermenize yardımcı olabilir. Kişisel bir bağlantı oluşturmak, rastgele ziyaretçileri tekrar ziyaretçilere ve sonunda alıcılara dönüştürmeyi kolaylaştırır.
Web sitenizin kullanıcı deneyimini (UX) ve kullanıcı arayüzü (UI) tasarımını ideal ziyaretçinizin beklentilerine göre oluşturmaya çalışın.
İdeal hedef kitle profilinizi oluşturmaya başlamak için pazar araştırması yapın ve Facebook gibi sosyal medya platformlarını keşfedin. Bir süredir iş dünyasındaysanız, mevcut müşteri geri bildirimlerini de kullanabilirsiniz.
Ziyaretçilerinizin ne yapmasını istediğinizi tanımlayın
Web sitenizin kimin için olduğunu öğrendikten sonra, web sitenizin ziyaretçilerinin web sitenize geldiklerinde ne yapmalarını istediğinizi netleştirmeniz gerekir.
Onlardan şunları yapmalarını isteyebilirsiniz:
- Bülteninize kaydolun .
- Bir iletişim formu doldurun .
- Mağaza sayfanızı ziyaret edin.
- Rezervasyon yaptırmak.
Ziyaretçilerinizin bilmesi gerekenleri belirleyin
Aklınızda net bir hedef olduğunda, ziyaretçilerinizi istediğiniz eylemi gerçekleştirmeye hangi bilgilerin teşvik edeceğini belirleyin.
Yerel bir restoran sahibi olduğunuzu varsayalım : Müşterilerinize vermeniz gereken en önemli bilgiler konumunuzu, saatlerinizi ve ne tür yiyecekler sunduğunuzu içerir.
2. Adım: Web sitenizin içeriğini hazırlayın
Bir web sitesi tasarlamanın sonraki adımları, içeriğin hazırlanmasını içerir. Kopyanızı ve görsellerinizi ön plana çıkararak tüm web sitesi tasarım sürecini hızlandırın!
İşte birkaç hızlı metin yazarlığı ipucu:
- Çoğu ziyaretçi, web sitenizin sayfalarını okumak yerine gözden geçirecektir. Kopyanız kısa ve öz olmalıdır.
- Metninizi, onlar için neler yapabileceğinizle en çok ilgilenen ve ürününüzü veya hizmetinizi neden önemsemeleri gerektiğini düşünen insanlar etrafında ortalayın.
- Jargon veya teknik terimler kullanmaktan kaçının. Alanınızdaki diğer insanları çekmeye çalışmadığınız sürece, ziyaretçilerinizin sektöre özel dili anlamaları olası değildir.
- Metninizin okunmasını kolaylaştırmak için başlıklar, kısa paragraflar ve madde işaretleri kullanın.
Görsel öğeler hikayenizi daha iyi anlatmanıza yardımcı olacaktır. Ayrıca web sitenizi daha göz alıcı ve şık hale getirir.
Birkaç farklı türde görüntü hazırlamanız gerekecek:
- Sayfanın tüm genişliğine yayılan ve başlık alanında kullanılabilen banner veya hero images.
- Hakkında sayfası için sizin ve kilit çalışanların veya ortakların fotoğraflarını çekin .
- Çevrimiçi bir mağaza tasarlıyorsanız ürün resimleri.
- Sektörünüzü, çevrimiçi mağazanızı ve hizmetlerinizi yansıtan genel stok fotoğraflar.
- Görüşleriyle birlikte kullanabileceğiniz önceki müşteri veya müşteri fotoğrafları.
Bazı görseller için (ürün görselleriniz veya vesikalık fotoğraflar gibi), bir fotoğrafçı tutmanız veya kamera konusunda iyi olan bir arkadaşınızın yardımını almanız gerekir.
Daha genel fotoğraflar için, aşağıdaki gibi stok fotoğraf web sitelerine bakabilirsiniz:
- Ücretsiz stok fotoğrafları için Unsplash veya mystok
- Ücretli görseller için ShutterStock , iStockPhoto veya Adobe Stock
3. Adım: Alanınızı, barındırmanızı ve CMS’nizi ayarlayın
Web sitenizde çalışmaya başlamadan önce, bir alan adına, barındırma planına ve bir CMS’ye (içerik yönetim sistemi) ihtiyacınız vardır.
Bir alan adı çevrimiçi web sitenizin adresidir. Web siteniz bir ev olsaydı, alan adınız sokak adresi olurdu.
DomainWheel gibi bir araç , yaratıcı ve benzersiz alan adları bulmanıza yardımcı olabilir.
Alan adına karar verdikten sonra, bir barındırma planı satın almanız gerekecek.
İlk defa bir web sitesi tasarlamayı öğrenmek isteyen bir acemi iseniz, Bluehost gibi bir şirketten yararlanabilirsiniz .
Son olarak, web sitenizde gerekli olan belirli işlevleri ve hangi içerik yönetim sisteminin (CMS) bunu başarmanıza yardımcı olacağını düşünmek isteyeceksiniz. Bir CMS, web sitenizde güncellemeler yapabileceğiniz bir kullanıcı arayüzü sağlar, böylece kullanımı kolay olduğunu düşündüğünüz birine karar vermek istersiniz.
En sevdiğimiz CMS’lerimizden biri WordPress’tir çünkü tüm kodlama becerisi seviyelerindeki web sitesi yöneticilerine bir web sitesinin nasıl tasarlanacağını öğrenmeleri için güç verir. WordPress, peşinde olduğunuz tam tasarım estetiğine ulaşmak için esnek yöntemler sunar.
Piyasada bulunan diğer araçların neler olduğunu görmek isterseniz , piyasadaki en iyi CMS yazılımının bir karşılaştırmasına da sahibiz (buradan okuyun).
Bu makalenin geri kalanında, WordPress’in nasıl kurulduğuna atıfta bulunarak, kullandığınız CMS’den bağımsız olarak alakalı olacak kavramları açıklayan bir dil kullanacağız.
Peki her şey nasıl kurulur?
Bluehost – bir web barındırma şirketi – etki alanı, barındırma ve WordPress hesabı alma sürecini kolaylaştırır. Aynı zamanda resmi WordPress barındırma ortaklarından biridir.
Bluehost, bir barındırma planına kaydolduğunuzda size ücretsiz bir alan adı verir ve sizin için WordPress kurulumunu da tamamlar.
Bluehost’a kaydolmak için aşağıdaki adımları uygulamanız yeterlidir:
Hesabınız oluşturulduktan sonra, Bluehost sizin için WordPress’i kuracaktır – CMS Bluehost kullanır. İşlem tamamlandığında, barındırma paneliniz ve WordPress panonuz için oturum açma kimlik bilgilerinin yer aldığı bir e-posta onayı alacaksınız . Bir sonraki adımda ihtiyaç duyacağınız için bu bilgileri güvenli bir yerde saklayın.
4. Adım: Web sitenizi tasarlayın
Artık teknik ayrıntılarla ilgilendiğinize ve CMS’nizin kullanıma hazır olduğuna göre, bir web sitesi tasarlamak için daha yaratıcı adımlara geçme zamanı.
İlk iş emri: bir tema seçmek – web sitesi tasarımınız için yapı iskelesi. Web sitenizi onun etrafında tasarlamak için bu temayı kullanacağız.
Bir WordPress teması seçin ve yükleyin
Tema sadece başlangıç noktanız olsa da, düşündüğünüz temaların düzenine özellikle dikkat edin:
- Mantıksal bir görsel hiyerarşileri var mı?
- Gezinme çubuğu ve menü yapısı anlaşılır mı?
- Tema, takip etmesi kolay taranabilir bir düzen içeriyor mu?
WordPress için bol miktarda ücretsiz ve premium temalar mevcuttur, bu harika bir şey.
Bütçeniz varsa ücretsiz temalar iyi bir başlangıç noktasıdır. Bununla birlikte, daha fazla özelleştirme seçeneği istiyorsanız premium seçenekleri tercih edebilirsiniz.
Belirli bir WordPress teması seçerken bakmanız gereken birkaç özellik vardır:
- Düzenli güncellemeler: Eski bir tema, web sitenizi kötü amaçlı yazılımlara maruz bırakabilir.
- Estetik ve özelleştirme seçenekleri: Markanızın renklerini ve yazı tiplerini kullanabileceğinizden ve logonuzu yükleyebileceğinizden emin olun.
- Duyarlı web tasarımı: Web sitenizin hem mobil hem de masaüstü cihazlarda iyi görünmesini sağlayın. Tüm internet trafiğinin [3] yarısından fazlasının mobil cihazlardan geldiği düşünüldüğünde, duyarlı bir web sitesine sahip olmak çok önemlidir.
Resmi tema deposunda birçok tema bulabilirsiniz . Dikkate alınacak bazı ücretsiz temalar arasında Hestia , Neve , Astra ve OceanWP bulunur . Hepsi modern tasarımlar ve çok sayıda özelleştirme seçeneği sunar.
İşte Neve’den bir örnek tasarım :
Bir WordPress teması kurmak için:
- Adresine giderek WordPress kontrol panelinize giriş yapın YOURDOMAIN.com/wp-login.php.
- Oturum açma kimlik bilgilerini girin ve Log In .
- Sol kenar çubuğuna bakın ve Görünüm → Temalar’a tıklayın .
- Yeni ekle’ye tıklayın ve tema havuzuna göz atın.
- Beğendiğiniz bir tema bulduğunuzda, Yükle’ye ve ardından Etkinleştir’e tıklayın
Tema hazır ve beklerken, şimdi tasarım öğelerinizi etrafına nasıl yerleştireceğinizi görelim.
Güncel görsel tasarım trendlerini düşünün
İlk kez bir web sitesi tasarlamayı öğrendiğinizde, sıfırdan başlamanın avantajına sahip olursunuz. En güncel tasarım trendlerini araştırarak güncel, görsel olarak çekici bir web sitesi oluşturabilirsiniz .
Beğen ya da beğenme, tasarım önemlidir. Blue Corona [1] tarafından derlenen istatistiklere göre , insanların % 48’i bir web sitesinin tasarımının bir işletmenin ne kadar güvenilir olduğuna karar vermede 1 numaralı faktör olduğunu söylüyor. Bu nedenle, web tasarımında şu anda neyin trend olduğunu bilmek işe yarar.
İçin basit bir Google aramasıyla başlayın web design trends CURRENT_YEAR
.
Örneğin, 2021’deki bu arama, trendlerin şunları içerdiğini ortaya koyuyor:
- Fotoğrafları ve grafikleri karıştırmak
- Minimalist gezinme
- Harekete geçirici mesajları (CTA’lar) temizleyin
- Parlak ve ışıltılı renk şemaları
- Karanlık mod seçenekleri
Gibi web siteleri Awwwards ve CSS Design Awards ilk kez bir web sitesi tasarım öğrenmek isteyen bir acemi iseniz ayrıca en sıcak tasarım trendleri hakkında fikir verebilir.
Ancak, bir şeyin trend olması, onu web sitenize dahil etmeniz gerektiği anlamına gelmez.
Örneğin, gıda endüstrisindeyseniz, koyu modla eşleştirilmiş parlak bir renk şeması, bir e-Ticaret mağazasında olduğu kadar iyi çalışmayabilir . Bununla birlikte, fotoğrafları ve grafikleri karıştırmak ve bol miktarda beyaz alan kullanmak, menü öğelerinizin öne çıkmasına yardımcı olmak için harika bir yoldur.
Tüm trendler tüm sektörlere uymaz – sektörünüzdeki diğer web sitelerine bakın ve rakiplerinizin ne yaptığını görün.
Tasarım trendlerini araştırırken ve sektörünüzdeki diğer web sitelerine göz atarken, beğendiğiniz örnekleri bilgisayarınızdaki bir klasöre kaydedin. Ardından, web sitenizin tasarımı üzerinde çalışırken bunlara başvurabilirsiniz.
Markanıza karar verin
Web sitenizi tasarlamanın tüm adımları arasında, ziyaretçilerinizin markanızla etkileşime girdiklerinde nasıl hissetmelerini istediğinizi düşünün – bu duygu markanızın özünde yer alır.
En basit haliyle, web sitesi markalaşması aşağıdakilerden oluşur:
- Renk uyumu
- Yazı tipi seti
- Görüntü seçimi
Bu unsurların aynı mesajı ve duyguyu iletmesi gerekir çünkü hepsi markanızın hikayesini paylaşmada ve web sitenize doğru ziyaretçileri çekmede rol oynar.
Bir renk şeması seçin
Renk , marka olarak sahip olabileceğiniz en önemli iletişim araçlarından biridir.
Tipik olarak, web sitenizde ve logonuzda bir ana marka rengi kullanmalısınız. CTA’lar ve dahili veya harici bağlantılar için ek bir vurgu rengi seçin ve düğmeleriniz için bir renk daha kullanabilirsiniz.
Coolors , web siteniz için kolay ve eğlenceli bir şekilde bir renk şeması geliştirmenize yardımcı olabilecek bir araçtır.
Yazı tiplerinizi seçin
Renkler gibi yazı tipleri de ziyaretçilerin web sitenizi ve işinizi nasıl algıladıklarında büyük rol oynar. Geleneksel olarak, Georgia gibi serif yazı tipleri geleneksel, zamansız ve zarif bir hava verir. Helvetica gibi Sans serif yazı tipleri daha modern bir görünüm ve his verecektir.
Web siteniz için iki yazı tipi seçin: biri başlıklar ve diğeri gövde metni için. FontJoy gibi bir araç , web siteniz için estetik açıdan hoş bir yazı tipi çifti oluşturmanıza yardımcı olabilir.
İyi görüntüleri unutma
Web sitenize fotoğraf eklemek, marka hikayenizi anlatmanın ve daha akılda kalıcı hale getirmenin güçlü bir yoludur. Brain Rules [2] tarafından yürütülen bir araştırmaya göre, bir içeriğe görüntü eklemek okuyucuların bilgilerin% 65’ini üç gün sonra korumalarına yardımcı olabilir. Resimler ayrıca ziyaretçileri CTA’larınıza tıklamaya teşvik eder.
Bununla birlikte, resimlerle aşırıya kaçmayın ve bunları optimize ettiğinizden emin olun, böylece web sitenizin hızı düşmez.
5. Adım: Web sitenizin tasarımını özelleştirin
Bu aşamada, önceki adımda öğrendiğiniz her şeyi alın ve temanızı özelleştirirken uygulayın.
Bu eğitimde Neve temasını kullanacağız . WordPress temaları, Tema Özelleştirici aracılığıyla özelleştirilebilir. Başka bir web sitesi oluşturucu / CMS kullanıyorsanız, süreç muhtemelen benzer bir akışı izleyecektir.
Bazı temalarda , stil ayarlarının bulunduğu ayrı bir Tema Seçenekleri paneli bulunur. Bunu genellikle Görünüm sekmesinin altında bulabilirsiniz .
Seçtiğiniz temayı özelleştirmek için Görünüm → Özelleştir’e tıklayın . Özelleştirici yüklendikten sonra, kullanabileceğiniz tüm farklı stil ayarlarını göreceksiniz.
Temanızın renklerini özelleştirmek için Renkler ve Arka Plan bölümüne tıklayın. Yazı tiplerinizi özelleştirmek için Tipografi sekmesine vb. Tıklayın .
Logonuzu yüklemek için, Başlık sekmesine ve ardından Logoyu Değiştir seçeneğine tıklayın . Daha sonra logo resminizi yükleyebileceksiniz.
Web sitenizi daha ayrıntılı bir şekilde özelleştirmek için Elementor gibi bir sayfa oluşturucu eklentisi de kullanabilirsiniz . Bir sayfa oluşturucu eklentisi, sayfanıza metin, resim ve diğer blokları eklemek ve düzenlemek için sürükle ve bırak arayüzü kullanmanızı sağlar.
Bir web sitesinin nasıl tasarlanacağını öğrenmek istiyorsanız, hepsi görsel temelli olduğu için sürükle ve bırak editörleri bunu daha da kolaylaştırır.
6. Adım: Web sitenizin sayfalarını oluşturun
Artık temanızı yüklediğinize göre, web sitesi sayfalarınızı oluşturmanın zamanı geldi.
Her web sitesinde genellikle aşağıdaki sayfalar bulunur:
- Ev
- hakkında
- Hizmetler veya Ürünler (herhangi bir şey satmayı planlıyorsanız)
- İletişim
- Blog
Ayrıca gizlilik politikanızı veya hizmet şartlarınızı içeren yasal sayfalara da ihtiyacınız olacak . Oluşturmanız gereken sayfalar, bir web sitesini nasıl tasarlayacağınızı öğrenmek istediğiniz nedene bağlıdır – iş, hobi veya aradaki herhangi bir site olsun.
WordPress’te sayfa ekleme
Bir sayfa oluşturmak için Sayfalar → Yeni ekle üzerine tıklayın . Sayfanız için bir ad ve içeriği ekleyebileceğiniz bir ekrana yönlendirileceksiniz.
İçeriğinizi ilgili düzenleyici bloklarla ekleyin. Örneğin, metin eklemek için + işaretine tıklayın ve paragraf bloğunu seçin . Bir görüntü eklemek için bir görüntü bloğu ekleyin .
İçerik eklemeyi bitirdiğinizde, Yayınla’ya tıklayın ve sayfanız yayınlanacaktır. Ardından, bu işlemi web sitenizdeki diğer her sayfa için tekrarlayın.
Son olarak, ana sayfanızı ve blog sayfanızı ayarlamanız gerekir. Git Ayarlar → Reading . Ana sayfanızın görüntüleri etiketinin yanındaki Statik sayfa seçeneğini işaretlediğinizden emin olun . Ardından, açılır menülerden uygun ana sayfayı ve blog sayfasını seçin. İşiniz bittiğinde Değişiklikleri kaydet seçeneğine tıklayın .
WordPress’te gezinme menüsü nasıl oluşturulur
- Git Menüler → Görünüm .
- Menünüze bir ad verin ve Kaydet Menüsüne tıklayın .
- Ardından, Sayfalar sekmesinin altında Tümünü Görüntüle’ye tıklayın ve menüye eklemek istediğiniz sayfaların yanındaki kutuları işaretleyin.
- Click menü için Ekle düğmesini ve ardından olarak atayın İlköğretim konumda .
- Menüyü Kaydet’e tıklayın .
7. Adım: Web sitenizin gezinme menüsünü ayarlayın
Tasarımınızı özelleştirip sayfalarınızı ekledikten sonra, gezinme menünüzü oluşturma zamanı.
Gezinme menünüz dağınıklık içermemeli ve anlaşılması kolay olmalıdır. Sevimli veya belirsiz isimler kullanmaktan kaçının ve 5-7 bağlantı arasında tutun.
WordPress’te gezinme menüsü nasıl oluşturulur
- Git Menüler → Görünüm .
- Menünüze bir ad verin ve Kaydet Menüsüne tıklayın .
- Ardından, Sayfalar sekmesinin altında Tümünü Görüntüle’ye tıklayın ve menüye eklemek istediğiniz sayfaların yanındaki kutuları işaretleyin.
- Click menü için Ekle düğmesini ve ardından olarak atayın İlköğretim konumda .
- Menüyü Kaydet’e tıklayın .
8. Adım: Eklentilerle ekstra işlevsellik ekleyin
Bir web sitesi tasarlama adımlarının sonuncusu, eklentilerle işlevselliğini genişletmektir. Eklentiler, web sitenizi, belirli hedeflere ulaşmanıza ve istenen belirli görevleri gerçekleştirmenize yardımcı olabilecek diğer hizmetlere ve kodlara bağlar.
İletişim formları ve düğmeler gibi şeyler eklemek, arama motoru optimizasyonu ( SEO ) için içeriğinizi geliştirmek ve web sitenizi yedeklemek için eklentileri kullanabilirsiniz .
Eklentilerle WordPress’teki işlevselliği genişletin
WordPress web siteleri için eklentiler, web siteniz için küçük uygulamalar gibidir – çok sayıda ücretsiz ve premium eklenti vardır . Eklentileri resmi depodan indirebilirsiniz .
Eklentileri seçerken ve kurarken, seçtiğiniz herhangi bir eklentiden emin olun:
- Düzenli olarak güncellenir
- En az 4 yıldızlı derecelendirmeye sahip
- Yapman gerekeni yapıyor
Ek olarak, kaç eklenti yüklediğinize dikkat edin. Çok fazla eklenti web sitenizi yavaşlatabilir.
Başlamanız için önerilen birkaç eklenti:
- Yoast SEO : Web sitenizin arama motorları aracılığıyla bulunabilmesini sağlar.
- WPForms : Ziyaretçilerden bilgi toplamak için bir iletişim formu ekler.
- Sassy Social Share : Size ve ziyaretçilerinize blog yayınlarınızı veya makalelerinizi sosyal medyada paylaşmanıza yardımcı olur.
- UpdraftPlus : Web sitenizi otomatik olarak yedekler .
- Wordfence : Web sitenizi bilgisayar korsanlarından korur .
- Optimole : Web sitenizin görsellerini daha hızlı yüklenecek ve web sunucunuzda daha az yer kaplayacak şekilde optimize eder.
Bir web sitesini nasıl tasarlanacağınız a dair son düşünceler
Bir web sitesi oluşturmak göz korkutucu görünebilir, ancak bir kılavuza sahip olduğunuzda çok daha kolay hale gelir. Web sitesi tasarımına yönelik bu kolay adımlar, süreci ilerletmenize yardımcı olabilir.
Unutmayın: Web sitesi tasarımınıza başlamadan önce bir alan adına, barındırma planına, CMS’ye ve web siteniz için yazılı kopya ve görseller dahil içeriğe ihtiyacınız olacak.
WordPress veya başka bir platform ile bir web sitesinin nasıl tasarlanacağını öğrenmek karmaşık değildir. Bu makalede ana hatları verilen bir web sitesi tasarlama adımlarını izleyerek şimdi başlayın ve sonuçtan memnun kalacaksınız.
Mutlu tasarım! Ve bir web sitesinin nasıl tasarlanacağı konusunda daha derinlemesine bir rehberliğe ihtiyacınız varsa , CodeinWP size yardımcı olur.
Kaçırdığımız harika web tasarım ipuçlarınız var mı? Ardından, aşağıdaki yorumlarda bizimle paylaşın!