8 Web Tasarım Süreci Komutları (Yeni Başlayanlar için & Amp; Kodsuz)
Yapılandırılmış bir web sitesi tasarım sürecini takip ederek nasıl başarılı bir web sitesi oluşturabileceğinizi öğrenin. Hipotezimiz, bir alan adı ve barındırma sağlayıcısı bulmuş olmanızdır. Ev sahibinizi seçmediyseniz, ortaklarımızın Cloudways’ini şiddetle tavsiye ederiz. Aşağıdaki örnekte, kendiniz için bir web sitesi oluşturduğunuz durumlar için adımlar sunulmaktadır. Web sitesi müşteriler için ise, proje planlaması, zaman tarihleri, sözleşmeler ve daha fazlası açısından yeni adımlar meydana gelebilir. Ama özünde, hala aşağıda sunulan adımları takip etmelisiniz.
Şimdi bunlar adımlar:
Kapsamın Tanımlanması: Web Sitesi tarafından hangi ihtiyaçlar karşılanmalıdır? Web sitesi kiminle konuşuyor? Amaç ve motive edici hangisi? Hangi işletme sizinle aynı kapsama ve hedef kitleye sahiptir?
Web sitesi sitelerinin haritalarını tanımlamak: Hangi web sayfaları ve özellikleri, hedeflerine ulaşmada işletme ve kitleye yardımcı olur?
İçerik Yapımı: Web sitesi sayfaları için kopya hazırlama;
Görsel bir marka yapın: Web siteniz tasarımında kullanılacak ve sonuçta görsel kimliğinizi oluşturacak bir renk paleti, yazı tipi ve grafikler hazırlayın;
Wire Framing: Web sayfası düzeninizi çizin;
Web Sitesi Tasarımı: Gerçek bir web sitesi oluşturmak, kullandığınız araçların sınırlamalarına dikkat edin;
Test: 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 çeşitli tarayıcılar ve cihazlardaki web sitelerini test edin;
Lansman: Planlanan bir iletişim stratejisi ile yayın yapmadan önce gürültü yapın.
Birer teker alalım.
Web Sitesi Tasarım Sürecinin Adımları 1. Bu aşamadaki kapsamı belirleyin Siz ve ekibiniz aşağıdaki soruların bazı cevaplarını bulmanız gerekir: Site kimdir?
İlginç bir web sitesinin kendi avantajları olabilir, ancak web sitenize ziyaretçilerin paralarını veya zamanını vermesini istiyorsanız, taahhüdün çok değerli olduğuna ikna etmek için daha fazla kazmanız gerektiği anlamına gelir. İkna etmek için, hedef kitlenizi anlamanız, ihtiyaçlarını, iç ve dış motivasyonlarını anlamanız gerekir. Bu kazı aynı zamanda yararlı bir ürün oluşturmanız ve kişinin ihtiyaçlarını cevaplamanız gerektiği anlamına gelir.
Örneğin, kağıt çiçek aranjmanları yapmak için bir hobim var ve daha fazla geliştirmek ve bir işe dönüştürmek istiyorum. Kağıt çiçek yapan var mı? Bu insanları nerede bulabilirim? Bir düğün planlayıcısı ve gelin ve damadın böyle bir seçim isteyebileceğini düşünebilirim. Ama daha ileri gitmeliyim. Her gelin kağıt çiçeğimi mi yoksa sadece bir gelin mi istiyor? Bu, birkaç çalışmadan geçmeniz ve rakiplerinizi kontrol etmeniz gerektiği anlamına gelir. Başka kağıt çiçek tüccarları var mı? Ayrıca iyi bir eski çiçek dükkanı ile rekabet ediyorsunuz. Katma değeriniz veya benzersiz değer teklifiniz hangisi olacak?
Web sitesi ziyaretçilerinizin web sitenizde ne bulmasını bekliyorsunuz?
Örneğimize geri dönelim, belki ziyaretçileriniz çeşitli ürünler, renkler, nakliye bilgileri (kırılgan kağıt çiçekler nedeniyle ekstra bakım gerektirebilir), vb. Görmek ister. Ya kağıdın geri dönüştürüldüğünü söyleyen bazıları ne olacak? Belki müşteriniz çevre üzerindeki etkisinin çok farkında ve bu tür ayrıntıları önemsiyorlar, birisi de çiçek kiralayabilir mi? Şimdi, bazı referanslar eklerseniz? Belki arkadaşınızın düğünü için bazı kağıt çiçek aranjmanları tasarladınız. Nerede olduğumu gördün mü? Web sitesi tasarımına dalmadan önce araştırma yapmanız gerekir.
Dönüşüm nasıl görünüyor?
Kursların kaydı, ürün alımları, bültene abone olmaktan mı bahsediyoruz? Pazartesi günü, verandadan dönüşümlerini kolayca öğrenebilirsiniz.
Ana dönüşüm, ortada üst yarıda konumlandırılan “başlangıç” davasından görülebilir. Başka bir mikro dönüşüm, sol üst köşedeki mesajlardan dikkat edebileceğiniz konferansların kaydedilmesidir. Başka bir mikro dönüşüm “satış iletişimi” dir. Web siteniz ne olacak, büyük bir dönüşüm var mı? İkincil bir tane var mı?
Müşterinin gezisi nasıl görünüyor? Müşteri Seyahat Haritası, istenen hedeflere ulaşıncaya ve gidip gitene kadar, web siteniz aracılığıyla ziyaretçiler tarafından alınan yolun görsel bir temsilidir. Müşterinin seyahat haritası, ziyaret edilen sayfa ve hangi sırayla, web sitesi ziyaretçilerinin hedeflerine ulaşması, şirketiniz ve web sitesi ziyaretçileriniz (formlar, sohbet, vb.), Potansiyel sürtünme arasındaki etkileşim noktasını içermesi gerekir. Müşterinin yolculuğu sabit değildir. Varsayımla başlayıp yol boyunca ayarlanırsınız. Web sitesinin davranışını analiz etmek ve gerçek içgörüye göre optimize etmek için Google Analytics gibi araçları kullanabilirsiniz. Web sitesi haritasını belirleyin
Müşterinin yolculuğundan sonra kaynak açık, bir site haritası oluşturma zamanı. Web sitesi sitesi haritaları, web sitesi bilgi mimarisi oluşturmak ve çeşitli sayfalar arasındaki ilişkiyi açıklamak için kullanılır. Excel’den Figma’ya kadar değişen araçlarda sitenin bir haritasını oluşturabilirsiniz. 3. İçerik yapmak
Artık web sitesi yapısı yapıldığına göre, bireysel sayfalar için içerik oluşturma zamanı. İşte metin yazarlığı açısından en iyi uygulamalardan bazıları:
İdeal kullanıcılarınıza aşina olan kelimeler ve kavramlar kullanın; Kürk ve jargon ile gitmeyin; Normal yüz -yüz toplantılarında yapacağınız gibi iletişim kurmaya çalışın. Bu şekilde tanıdık duygulara neden olacaksınız;
Şimdiki zamanla yazın ve pasif cümlelerden kaçının;
Her zaman okunabilirliğinizi kontrol edin. Bunun için okunabilir araçlar kullanabilirsiniz.
Başlıklarınızı arkadaşlarınızla, yabancılarla, meslektaşlarıyla test edin. David Ogilvy’nin dediği gibi:
“Ortalama olarak, 5 kat daha fazla insan, vücut kopyasını okumaktan daha fazla manşet okuyor. Başlığınızı yazdığınızda, dolarınızdan seksen sent harcadınız. “Bu, manşetlerin web sitesinde çok önemli olduğu anlamına gelir. İçeriğinizi kitleniz için (SEO) bazı ilgili anahtar kelimeler etrafında optimize etmeye çalışın. Google Trends (Ücretsiz), Ubersuggest (ÜCRETSİZ) veya AHREFS (Ücretli) gibi araçları kullanabilirsiniz.
AIDA Metin Yazımı Çerçevesinden yararlanın.
A – Dikkat: Dikkat çeken, merak uyandıran ve kitlenizi markanız hakkında daha fazla bilgi sahibi olmaları gerektiğine ikna eden içerik oluşturun.
I – Faiz: Ziyaretçilerinize dahil olmak için bir neden verin. Buradaki anahtar, kişisel sorunlar yaratmaktır, böylece sadece potansiyel müşterilerle ve başka hiç kimseyle konuşmazsınız.
D – Arzu: Ana sayfa ziyaretçilerinize teklifinizin sorunlarına/acılarına nasıl çözümler sunduğunu gösterdiğiniz yerdir. Burada, bu özelliklerin yaşamlarını nasıl iyileştirebileceğine odaklanarak ürününüzün özelliklerini açıklamaya başlayabilirsiniz. A – Eylem: Şimdi Potansiyel müşterileri harekete geçirmeye ikna etmenin zamanı geldi: satın alma, abone olun, ücretsiz indirme, denemelere başlama vb. 4. Görsel bir marka oluşturmak Bu adım her zaman 4. adımınız olmak zorunda değildir. Bu süreçte erken başlayabilirsiniz. Görsel kimlik, markanızla ilgili algıları oluşturma şeklinizi ifade eder.
Bu kendi başına tüm süreçtir. Burada:
Grafiğinizin nasıl görüleceğini belirleyin. Şekil, 3D grafik, illüstrasyon kullanacak mısınız?
Kaynak: https://convertsquad.com/blog/ Logo Tasarımınız
Kaynak Fiziksel varlıklar hazırlayın (ürün ambalajı vb.).
Yukarıdaki öğelerin çoğunun kaynağı, ruh hali panoları yapmak için kullanılabilir. Fontlar, grafikler, ruh hali panosundaki renkler topladığınızda, genel web sitesi atmosferinin vizyonunu daha iyi anlayabilirsiniz. Genel tonunuz ve sesiniz nedir: ışık mı yoksa karanlık mı? Resmi mi yoksa oyun oynamak mı? Kaynak 5. Tel çerçeveleme
Wire Frames kaynağı bir web sayfası taslağı veya uygulamasıdır. Web sitenizin karmaşıklığına bağlı olarak, elle çizebilir, Google belgelerinde, eskiz veya Figma’da yapabilirsiniz. Sayfadaki içerik ve işlevlerin düzeni için bir tel çerçeve kullanılır. Bu, bir tasarımcıya videolar, resimler, manşetler, içerik blokları, düğmeler vb. Yerleştirmesi gerektiğini söylemelidir. Tasarıma dalmadan önce tel çerçeveleri kullanmak daha iyidir, çünkü daha esnek olmanızı sağlar. Tel çerçevenin yapısını değiştirmek için hazır web sitelerinden birinden daha kolaydır. 6. Web Sitesi Tasarımı Kaynak Şimdi iş hakkında konuşuyoruz!
İçeriğimiz, çerçeve çizimlerimiz, görsel öğelerimiz var, şimdi çalışmaya başlama zamanı. Başlıkta belirtildiği gibi, bir web sitesi oluşturmak için bir web tasarımcısı veya kod geek olmanıza gerek yoktur. Kodsuz web siteleri tasarlamanıza yardımcı olacak birçok araç var. Onlara sayfa yapımcıları denir. Birçoğu tasarımınızın her santimini ayarlamanıza ve duyarlı hale getirmenize izin verir. WordPress’te, örneğin kendi Colibri Maker veya Elementor’umuzu kullanabilirsiniz. WordPress dışında Wix ve Squarespace çok popüler. Bu araçlar size kendi parçalarınızı, görsellerinizi ve içeriğinizi ekleyerek alabileceğiniz bir şablon verebilir. Şimdi, tasarımınızın animasyona, belirli efektlere ihtiyacı varsa, biraz kod eklemeniz gerekebilir. 7. Tamam test etmek, içeriğinizin ve görsellerinizin bittiğini söyleyin. İşiniz hazır değil. Her şeyin işlev görmesini sağlamanın zamanı geldi: her yere götüren bir bağlantınız yok (diğer aka hasarlı bağlantılar veya 404), tüm düğmelerinizin ve formlarınızın çalıştığı, web sitesinin çoğu tarayıcıda ve cihazlarda iyi göründüğü. Şimdi, lansmandan önce, web sitenizin yabancılar tarafından nasıl görüldüğünü biraz test edebilirsiniz. Bu şekilde kendi önyargınıza takılmaktan kaçınabilirsiniz. Bunun için basit kullanıcı araştırması yapabilirsiniz:
Şimdi bunlar adımlar:
Kapsamın Tanımlanması: Web Sitesi tarafından hangi ihtiyaçlar karşılanmalıdır? Web sitesi kiminle konuşuyor? Amaç ve motive edici hangisi? Hangi işletme sizinle aynı kapsama ve hedef kitleye sahiptir?
Web sitesi sitelerinin haritalarını tanımlamak: Hangi web sayfaları ve özellikleri, hedeflerine ulaşmada işletme ve kitleye yardımcı olur?
İçerik Yapımı: Web sitesi sayfaları için kopya hazırlama;
Görsel bir marka yapın: Web siteniz tasarımında kullanılacak ve sonuçta görsel kimliğinizi oluşturacak bir renk paleti, yazı tipi ve grafikler hazırlayın;
Wire Framing: Web sayfası düzeninizi çizin;
Web Sitesi Tasarımı: Gerçek bir web sitesi oluşturmak, kullandığınız araçların sınırlamalarına dikkat edin;
Test: 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 çeşitli tarayıcılar ve cihazlardaki web sitelerini test edin;
Lansman: Planlanan bir iletişim stratejisi ile yayın yapmadan önce gürültü yapın.
Birer teker alalım.
Web Sitesi Tasarım Sürecinin Adımları 1. Bu aşamadaki kapsamı belirleyin Siz ve ekibiniz aşağıdaki soruların bazı cevaplarını bulmanız gerekir: Site kimdir?
İlginç bir web sitesinin kendi avantajları olabilir, ancak web sitenize ziyaretçilerin paralarını veya zamanını vermesini istiyorsanız, taahhüdün çok değerli olduğuna ikna etmek için daha fazla kazmanız gerektiği anlamına gelir. İkna etmek için, hedef kitlenizi anlamanız, ihtiyaçlarını, iç ve dış motivasyonlarını anlamanız gerekir. Bu kazı aynı zamanda yararlı bir ürün oluşturmanız ve kişinin ihtiyaçlarını cevaplamanız gerektiği anlamına gelir.
Örneğin, kağıt çiçek aranjmanları yapmak için bir hobim var ve daha fazla geliştirmek ve bir işe dönüştürmek istiyorum. Kağıt çiçek yapan var mı? Bu insanları nerede bulabilirim? Bir düğün planlayıcısı ve gelin ve damadın böyle bir seçim isteyebileceğini düşünebilirim. Ama daha ileri gitmeliyim. Her gelin kağıt çiçeğimi mi yoksa sadece bir gelin mi istiyor? Bu, birkaç çalışmadan geçmeniz ve rakiplerinizi kontrol etmeniz gerektiği anlamına gelir. Başka kağıt çiçek tüccarları var mı? Ayrıca iyi bir eski çiçek dükkanı ile rekabet ediyorsunuz. Katma değeriniz veya benzersiz değer teklifiniz hangisi olacak?
Web sitesi ziyaretçilerinizin web sitenizde ne bulmasını bekliyorsunuz?
Örneğimize geri dönelim, belki ziyaretçileriniz çeşitli ürünler, renkler, nakliye bilgileri (kırılgan kağıt çiçekler nedeniyle ekstra bakım gerektirebilir), vb. Görmek ister. Ya kağıdın geri dönüştürüldüğünü söyleyen bazıları ne olacak? Belki müşteriniz çevre üzerindeki etkisinin çok farkında ve bu tür ayrıntıları önemsiyorlar, birisi de çiçek kiralayabilir mi? Şimdi, bazı referanslar eklerseniz? Belki arkadaşınızın düğünü için bazı kağıt çiçek aranjmanları tasarladınız. Nerede olduğumu gördün mü? Web sitesi tasarımına dalmadan önce araştırma yapmanız gerekir.
Dönüşüm nasıl görünüyor?
Kursların kaydı, ürün alımları, bültene abone olmaktan mı bahsediyoruz? Pazartesi günü, verandadan dönüşümlerini kolayca öğrenebilirsiniz.
Ana dönüşüm, ortada üst yarıda konumlandırılan “başlangıç” davasından görülebilir. Başka bir mikro dönüşüm, sol üst köşedeki mesajlardan dikkat edebileceğiniz konferansların kaydedilmesidir. Başka bir mikro dönüşüm “satış iletişimi” dir. Web siteniz ne olacak, büyük bir dönüşüm var mı? İkincil bir tane var mı?
Müşterinin gezisi nasıl görünüyor? Müşteri Seyahat Haritası, istenen hedeflere ulaşıncaya ve gidip gitene kadar, web siteniz aracılığıyla ziyaretçiler tarafından alınan yolun görsel bir temsilidir. Müşterinin seyahat haritası, ziyaret edilen sayfa ve hangi sırayla, web sitesi ziyaretçilerinin hedeflerine ulaşması, şirketiniz ve web sitesi ziyaretçileriniz (formlar, sohbet, vb.), Potansiyel sürtünme arasındaki etkileşim noktasını içermesi gerekir. Müşterinin yolculuğu sabit değildir. Varsayımla başlayıp yol boyunca ayarlanırsınız. Web sitesinin davranışını analiz etmek ve gerçek içgörüye göre optimize etmek için Google Analytics gibi araçları kullanabilirsiniz. Web sitesi haritasını belirleyin
Müşterinin yolculuğundan sonra kaynak açık, bir site haritası oluşturma zamanı. Web sitesi sitesi haritaları, web sitesi bilgi mimarisi oluşturmak ve çeşitli sayfalar arasındaki ilişkiyi açıklamak için kullanılır. Excel’den Figma’ya kadar değişen araçlarda sitenin bir haritasını oluşturabilirsiniz. 3. İçerik yapmak
Artık web sitesi yapısı yapıldığına göre, bireysel sayfalar için içerik oluşturma zamanı. İşte metin yazarlığı açısından en iyi uygulamalardan bazıları:
İdeal kullanıcılarınıza aşina olan kelimeler ve kavramlar kullanın; Kürk ve jargon ile gitmeyin; Normal yüz -yüz toplantılarında yapacağınız gibi iletişim kurmaya çalışın. Bu şekilde tanıdık duygulara neden olacaksınız;
Şimdiki zamanla yazın ve pasif cümlelerden kaçının;
Her zaman okunabilirliğinizi kontrol edin. Bunun için okunabilir araçlar kullanabilirsiniz.
Başlıklarınızı arkadaşlarınızla, yabancılarla, meslektaşlarıyla test edin. David Ogilvy’nin dediği gibi:
“Ortalama olarak, 5 kat daha fazla insan, vücut kopyasını okumaktan daha fazla manşet okuyor. Başlığınızı yazdığınızda, dolarınızdan seksen sent harcadınız. “Bu, manşetlerin web sitesinde çok önemli olduğu anlamına gelir. İçeriğinizi kitleniz için (SEO) bazı ilgili anahtar kelimeler etrafında optimize etmeye çalışın. Google Trends (Ücretsiz), Ubersuggest (ÜCRETSİZ) veya AHREFS (Ücretli) gibi araçları kullanabilirsiniz.
AIDA Metin Yazımı Çerçevesinden yararlanın.
A – Dikkat: Dikkat çeken, merak uyandıran ve kitlenizi markanız hakkında daha fazla bilgi sahibi olmaları gerektiğine ikna eden içerik oluşturun.
I – Faiz: Ziyaretçilerinize dahil olmak için bir neden verin. Buradaki anahtar, kişisel sorunlar yaratmaktır, böylece sadece potansiyel müşterilerle ve başka hiç kimseyle konuşmazsınız.
D – Arzu: Ana sayfa ziyaretçilerinize teklifinizin sorunlarına/acılarına nasıl çözümler sunduğunu gösterdiğiniz yerdir. Burada, bu özelliklerin yaşamlarını nasıl iyileştirebileceğine odaklanarak ürününüzün özelliklerini açıklamaya başlayabilirsiniz. A – Eylem: Şimdi Potansiyel müşterileri harekete geçirmeye ikna etmenin zamanı geldi: satın alma, abone olun, ücretsiz indirme, denemelere başlama vb. 4. Görsel bir marka oluşturmak Bu adım her zaman 4. adımınız olmak zorunda değildir. Bu süreçte erken başlayabilirsiniz. Görsel kimlik, markanızla ilgili algıları oluşturma şeklinizi ifade eder.
Bu kendi başına tüm süreçtir. Burada:
Grafiğinizin nasıl görüleceğini belirleyin. Şekil, 3D grafik, illüstrasyon kullanacak mısınız?
Kaynak
Web sitenizin tipografisini belirleyin;
Kaynak
Bir renk paleti seçin. Renk paletinden, bağlantının, ana başlık, düğme, arka plan vb. Bunun için Adobe gibi araçları kullanabilirsiniz. Kaynak
Kaynak: https://convertsquad.com/blog/ Logo Tasarımınız
Kaynak Fiziksel varlıklar hazırlayın (ürün ambalajı vb.).
Yukarıdaki öğelerin çoğunun kaynağı, ruh hali panoları yapmak için kullanılabilir. Fontlar, grafikler, ruh hali panosundaki renkler topladığınızda, genel web sitesi atmosferinin vizyonunu daha iyi anlayabilirsiniz. Genel tonunuz ve sesiniz nedir: ışık mı yoksa karanlık mı? Resmi mi yoksa oyun oynamak mı? Kaynak 5. Tel çerçeveleme
Wire Frames kaynağı bir web sayfası taslağı veya uygulamasıdır. Web sitenizin karmaşıklığına bağlı olarak, elle çizebilir, Google belgelerinde, eskiz veya Figma’da yapabilirsiniz. Sayfadaki içerik ve işlevlerin düzeni için bir tel çerçeve kullanılır. Bu, bir tasarımcıya videolar, resimler, manşetler, içerik blokları, düğmeler vb. Yerleştirmesi gerektiğini söylemelidir. Tasarıma dalmadan önce tel çerçeveleri kullanmak daha iyidir, çünkü daha esnek olmanızı sağlar. Tel çerçevenin yapısını değiştirmek için hazır web sitelerinden birinden daha kolaydır. 6. Web Sitesi Tasarımı Kaynak Şimdi iş hakkında konuşuyoruz!
İçeriğimiz, çerçeve çizimlerimiz, görsel öğelerimiz var, şimdi çalışmaya başlama zamanı. Başlıkta belirtildiği gibi, bir web sitesi oluşturmak için bir web tasarımcısı veya kod geek olmanıza gerek yoktur. Kodsuz web siteleri tasarlamanıza yardımcı olacak birçok araç var. Onlara sayfa yapımcıları denir. Birçoğu tasarımınızın her santimini ayarlamanıza ve duyarlı hale getirmenize izin verir. WordPress’te, örneğin kendi Colibri Maker veya Elementor’umuzu kullanabilirsiniz. WordPress dışında Wix ve Squarespace çok popüler. Bu araçlar size kendi parçalarınızı, görsellerinizi ve içeriğinizi ekleyerek alabileceğiniz bir şablon verebilir. Şimdi, tasarımınızın animasyona, belirli efektlere ihtiyacı varsa, biraz kod eklemeniz gerekebilir. 7. Tamam test etmek, içeriğinizin ve görsellerinizin bittiğini söyleyin. İşiniz hazır değil. Her şeyin işlev görmesini sağlamanın zamanı geldi: her yere götüren bir bağlantınız yok (diğer aka hasarlı bağlantılar veya 404), tüm düğmelerinizin ve formlarınızın çalıştığı, web sitesinin çoğu tarayıcıda ve cihazlarda iyi göründüğü. Şimdi, lansmandan önce, web sitenizin yabancılar tarafından nasıl görüldüğünü biraz test edebilirsiniz. Bu şekilde kendi önyargınıza takılmaktan kaçınabilirsiniz. Bunun için basit kullanıcı araştırması yapabilirsiniz:
