Bir Web Tasarım Sürecinin 8 Emri (Yeni Başlayanlar İçin ve Kodsuz)

Yapılandırılmış bir web sitesi tasarım sürecini izleyerek nasıl başarılı bir web sitesi oluşturabileceğinizi öğrenin.

Hipotezimiz, zaten bir alan adı ve bir barındırma sağlayıcısı bulmuş olmanızdır.

Henüz sunucunuzu seçmediyseniz, iş ortağımız Cloudways'i gerçekten öneriyoruz .

Aşağıdaki örnekte, kendiniz için bir web sitesi oluşturduğunuz durum için adımlar sunulmaktadır. Web sitesi bir müşteri içinse, proje planlaması, son teslim tarihleri ​​kurulumu, sözleşme ve daha fazlası açısından yeni adımlar ortaya çıkabilir. Ancak özünde, yine de aşağıda sunulan adımlara bağlı kalmanız gerekecek.

Şimdi, işte adımlar:

1. Kapsam belirleme : Web sitesinin hangi ihtiyaçları karşılaması gerekiyor? Web sitesi kiminle konuşuyor? Hedefleri ve motivasyonları nelerdir? Hangi işletmeler sizinle aynı kapsam ve hedef kitleye sahip?
2. Web sitesinin site haritasını tanımlama : İşletmenin ve hedef kitlenin hedeflerine ulaşmasına yardımcı olan web sayfaları ve özellikleri nelerdir?
3. İçerik oluşturma : web sitesinin sayfaları için kopyanın hazırlanması;
4. Görsel marka oluşturma : web sitesi tasarımınızda kullanılacak renk paletini, yazı tiplerini ve grafikleri hazırlamak, sonuçta görsel kimliğinizi şekillendirecek;
5. Tel çerçeveleme: web sayfalarınızın düzenini çizme;
6. Web sitesi tasarımı : gerçek web sitesini oluşturmak, kullandığınız araçların sınırlamalarının farkında olun;
7. Test etme : Bağlantılardan formlara ve düğmelere kadar her şeyin çalıştığından emin olun. Düzgün çalıştığından emin olmak için web sitesini çeşitli tarayıcılarda ve cihazlarda test edin;
8. Başlatma: Dikkatle planlanmış bir iletişim stratejisiyle canlı yayına geçmeden önce biraz gürültü yapın.

Onları birer birer ele alalım.

Bir web sitesi tasarım sürecinin adımları

1. Kapsam tanımlama

Bu aşamada, sizin ve ekibinizin aşağıdaki soruların bazılarının yanıtlarını bulmanız gerekecek:

• Site kimin için?

Göz alıcı bir web sitesinin avantajları olabilir, ancak web sitenizin ziyaretçilerinin paralarını veya zamanlarını ayırmalarını istiyorsanız, bu onları taahhüdün buna değdiğine ikna etmek için daha fazla kazmanız gerektiği anlamına gelir. İkna edici olmak için hedef kitlenizi anlamanız, ihtiyaçlarını, iç ve dış motivasyonları anlamanız gerekecektir.

Bu kazma aynı zamanda kullanışlı ve birinin ihtiyacını çözen bir ürün yaratmanız gerektiği anlamına gelir.

Örneğin kağıt çiçek aranjmanları yapmak gibi bir hobim var ve bunu daha da ileri götürüp işe dönüştürmek istiyorum. Kağıt çiçek yapan var mı? Bu kişileri nerede bulabilirim?

Düğün planlayıcılarının ve müstakbel gelinlerin böyle bir seçenek isteyebileceğini düşünebilirim.

Ama daha da ileri gitmeliyim. Her gelin kağıt çiçeklerimi mi ister yoksa sadece bir tür gelin mi?

Bu, biraz araştırma yapmanız ve rakiplerinizi kontrol etmeniz gerekeceği anlamına gelir. Başka kağıt çiçek tüccarları var mı? Ayrıca eski güzel çiçek dükkanlarıyla da rekabet ediyorsunuz. O halde katma değeriniz veya benzersiz değer teklifiniz hangisi olurdu?

• Web sitenizin ziyaretçileri web sitenizde ne bulmayı bekler?

Örneğimize geri dönersek, muhtemelen ziyaretçileriniz çeşitli ürünler, renkler, nakliye ile ilgili bilgiler (kağıt çiçekler kırılgan olduğu için biraz daha fazla özen göstermeleri gerekebilir) vb. görmek isteyecektir. Kağıdın geri dönüştürüldüğüne dair bazı ifadelere ne dersiniz? ? Belki müşterileriniz çevre üzerindeki etkilerinin çok farkındadır ve bu tür ayrıntılara önem verirler.

Biri de çiçekleri kiralayabilir mi?

Şimdi, bazı referanslar eklerseniz ne olur? Belki arkadaşlarınızın düğünleri için kağıt çiçek aranjmanları tasarladınız.

Nereye geldiğimi görüyor musun? Web sitesi tasarımına geçmeden önce araştırmanızı yapmanız gerekir.

• Dönüşümler nasıl görünüyor?

Kurs kaydından, ürün satın almaktan, haber bülteni aboneliğinden mi bahsediyoruz?

Pazartesi durumunda, dönüşümlerini ana sayfadan kolayca anlayabilirsiniz.

Ana dönüşüm, ekranın hemen üstünde, ortada yer alan "Başlayın" harekete geçirici mesajından açıkça görülüyor.

Başka bir mikro dönüşüm, sol üst köşedeki mesajdan fark edebileceğiniz bir konferans kaydıdır.

Başka bir mikro dönüşüm, “Satışlarla iletişime geçin”.

Peki ya web siteniz, bir ana dönüşüm var mı? Bazı ikincil olanlar var mı?

• Müşteri yolculuğu nasıl görünüyor?

Bir müşteri yolculuk haritası, bir ziyaretçinin web sitenize girişinden, istenen hedefe ulaşıp ayrılana kadar izlediği yolun görsel bir temsilidir.

Bir müşteri yolculuk haritası, ziyaret edilen sayfalar ve hangi sırayla ziyaret edildiği, bir web sitesi ziyaretçisinin hedeflerine ulaşabilmesi için gereken adımlar, şirketiniz ile web sitesi ziyaretçileri arasındaki etkileşim noktaları (formlar, sohbet, vb), potansiyel sürtünme noktaları.

Bir müşteri yolculuğu sabit değildir. Bir varsayımla başlarsınız, ardından yol boyunca uyum sağlarsınız. Web sitesi davranışını analiz etmek ve gerçek bilgilere dayalı optimizasyonlar yapmak için Google Analytics gibi araçları kullanabilirsiniz .

2. Web sitesinin site haritasını tanımlama

Kaynak

Artık müşteri yolculuğu açık olduğuna göre, site haritasını oluşturma zamanı. Bir web sitesinin site haritası, web sitesinin bilgi mimarisini oluşturmak için kullanılır ve çeşitli sayfalar arasındaki ilişkileri açıklar.

Excel'den Figma'ya kadar çeşitli araçlarda site haritaları oluşturabilirsiniz.

3. İçerik oluşturma

Web sitesinin yapısı oluşturulduğuna göre, şimdi tek tek sayfalar için içerik oluşturma zamanı.

Metin yazarlığı söz konusu olduğunda bazı en iyi vaka uygulamaları şunlardır:

• İdeal kullanıcılarınızın aşina olduğu kelimeleri ve kavramları kullanın;
• Kabartmak ve jargon ile gitmeyin;
• Normal bir yüz yüze görüşmede yaptığınız gibi iletişim kurmaya çalışın. Bu şekilde bir aşinalık hissi uyandıracaksınız;
• Şimdiki zamanda yazın ve pasif sesten kaçının;
• Her zaman okunabilirliğinizi kontrol edin. Bunun için Readable gibi araçları kullanabilirsiniz .
• Manşetlerinizi arkadaşlarınızla, yabancılarla, iş arkadaşlarınızla test edin. David Ogilvy'nin dediği gibi:

“Ortalama olarak, manşeti okuyanların sayısı ana metni okuyanların 5 katı. Başlığınızı yazdığınızda, dolarınızın seksen sentini harcadınız.”

Bu, başlıkların bir web sitesinde hayati önem taşıdığı anlamına gelir.

İçeriğinizi, kitleniz (SEO) için belirli alakalı anahtar kelimeler etrafında optimize etmeye çalışın. Google trendleri (ücretsiz), Ubersuggest (ücretsiz) veya Ahrefs (ücretli) gibi araçları kullanabilirsiniz .

• AIDA metin yazarlığı çerçevesinden yararlanın.

A – Dikkat : Dikkat çeken, merak uyandıran ve hedef kitlenizi markanız hakkında daha fazla bilgi edinmesi gerektiğine ikna eden içerik oluşturun.

I – İlgi : Ziyaretçilerinize etkileşimde kalmaları için bir neden verin. Buradaki anahtar, sorunu kişisel hale getirmektir, böylece yalnızca potansiyel müşteriyle konuşursunuz ve başka kimseyle konuşmazsınız.

D – Arzu : Bu, ana sayfa ziyaretçilerinize tekliflerinizin sorunlarına/acılarına nasıl bir çözüm sağladığını gösterdiğiniz yerdir. Burada, ürününüzün özelliklerini, bu özelliklerin yaşamlarını nasıl iyileştirebileceğine odaklanarak açıklamaya başlayabilirsiniz.

A – Eylem : şimdi potansiyel müşterileri harekete geçmeye ikna etme zamanı: satın alın, abone olun, bir ücretsiz ürün indirin, bir deneme başlatın, vb.

4. Görsel marka yaratmak

Bu adım her zaman 4. adımınız olmak zorunda değildir. Bununla süreçte daha da erken başlayabilirsiniz.

Görsel kimlik, markanızın etrafındaki algıyı şekillendirme şeklinizi ifade eder.

Bu başlı başına bir süreçtir.

Burada yapmanız gerekenler:

• Grafiklerinizin nasıl görünmesi gerektiğini tanımlayın. Şekiller, 3D grafikler, çizimler kullanacak mısınız?

Kaynak

• Web sitenizin tipografisini tanımlayın;

Kaynak

• Bir renk paleti seçin. Renk paletinden, bağlantıların, başlıkların, düğmelerin, arka planların vb. renklerini oluşturabileceğiniz bir stil kılavuzuna dönüşebilirsiniz. Bunun için Adobe renk tekerleği gibi araçları kullanabilirsiniz .

Kaynak

• Markanızın hikayesini anlatan görsellerin küratörlüğünü yapın;

Kaynak: https://convertsquad.com/blog/

• Logonuzu tasarlayın

Kaynak

• Fiziksel varlıkları hazırlayın (ürün ambalajı, vb.).

Kaynak

Yukarıdaki öğelerin çoğu bir ruh hali panosu oluşturmak için kullanılabilir. Yazı tiplerinizi, grafiklerinizi, renklerinizi bir ruh hali panosunda topladığınızda, genel web sitesi ruh hali vizyonunu daha iyi anlayabileceksiniz. Genel tonunuz ve sesiniz ne olacak: açık mı yoksa koyu mu? Resmi mi yoksa eğlenceli mi?

Kaynak

5. Tel çerçeveleme

Kaynak

Tel çerçeveler, bir web sayfasının veya uygulamanın çizimleridir. Web sitenizin karmaşıklığına bağlı olarak bunları elle çizebilir, Google Dokümanlar, Sketch veya Figma'da oluşturabilirsiniz. Bir sayfadaki içeriği ve işlevselliği düzenlemek için bir tel kafes kullanılır. Bir tasarımcıya bir videoyu, resimleri, başlıkları, içerik bloklarını, düğmeleri vb. nereye yerleştirmesi gerektiğini söylemelidir. Tasarıma geçmeden önce tel kafes kullanmak iyidir, çünkü bunlar daha esnek olmanızı sağlar. Bir tel çerçevenin yapısını değiştirmek, hazır tasarlanmış bir web sitesine göre daha kolaydır.

6. Web sitesi tasarımı

Kaynak

Şimdi iş konuşuyoruz!

İçeriğimiz, tel kafeslerimiz, görsel öğelerimiz var, şimdi işe koyulma zamanı.

Başlıkta belirtildiği gibi, bir web sitesi oluşturmak için bir web tasarımcısı veya kod meraklısı olmanıza gerek yoktur. Kodsuz bir web sitesi tasarlamanıza yardımcı olacak birçok araç var. Bunlara Sayfa Oluşturucu denir.

Çoğu, tasarımınızın her santimini özelleştirmenize ve onu duyarlı hale getirmenize olanak tanır.

WordPress'in içinde, örneğin kendi Colibri oluşturucumuz veya Elementor ile gidebilirsiniz. WordPress dışında Wix ve Squarespace gerçekten popüler. Bu araçlar size kendi bölümlerinizi, görsellerinizi ve içeriğinizi ekleyerek zenginleştirebileceğiniz şablonlar sağlayabilir.

Şimdi, tasarımınız belirli animasyonlar, efektler gerektiriyorsa, bazı kodlar eklemeniz gerekebilir.

7. Test

Tamam, diyelim ki içeriğiniz ve görselleriniz hazır. İşiniz henüz hazır değil. Her şeyin çalıştığından emin olmanın zamanı geldi: hiçbir yere götürmeyen bağlantılarınız (yani bozuk bağlantılar veya 404'ler) yok, tüm düğmeleriniz ve formlarınız çalışıyor, web sitesi çoğu tarayıcıda ve cihazda iyi görünüyor.

Şimdi, lansmandan önce, web sitenizin dış insanlar tarafından nasıl algılandığını biraz test edebilirsiniz. Bu şekilde kendi önyargılarınıza yakalanmaktan kaçınabilirsiniz. Bunun için basit bir kullanıcı araştırması yapabilirsiniz: 5 saniyelik test . Bu, örneğin bir ana sayfayı görüntüledikten sonraki ilk beş saniye içinde kullanıcıların aldığı ilk izlenimin ne olduğunu ölçmenize yardımcı olan bir yöntemdir.

8. Başlat

Şimdi, başlattığınızda yayınla'ya basın ve işiniz bitti. Hayır, biraz heyecan yaratmanız, bazı halkla ilişkiler kampanyaları başlatmanız, insanlara dışarıda olduğunuzu bildirmek için bir sosyal medya duyurusu yapmanız gerekiyor!

Ve bu bir şal millet. Artık bir web tasarım süreci için doğru adımlara sahipsiniz.

Mutlu web sitesi oluşturma!

Bu makaleyi beğendiyseniz ve bir WordPress web sitesi tasarlama hakkında daha fazla bilgi edinmek istiyorsanız, Colibri'nin Youtube kanalına abone olmayı ve bizi Twitter ve Facebook'ta takip etmeyi unutmayın!

İşinizi hızlı başlatmak ister misiniz?

Şu konularda iki ayda bir güncelleme alın:

• çarpıcı WordPress web siteleri tasarlama
• çevrimiçi bir varlık oluşturmak
• web sitenizi tanıtmak

E:

18 yaşından büyükseniz ve e-posta yoluyla özel hediyeler, WordPress ve ürünlerimiz hakkında haberler almak istiyorsanız işaretleyin. İstediğiniz zaman abonelikten çıkabilirsiniz. Daha fazla bilgi için Gizlilik Politikamıza ve Kullanım Koşullarımıza bakın.