Yeni Bir Web Sitesi Tasarlarken İzlenecek Adımlar

Yayınlanan: 2021-04-19

Harika web tasarımı, harika estetiği harika işlevsellik ile birleştirmekle ilgilidir. Zekice tasarlanmış bir web sitesi elde etmek için bir dizi beceriye, biraz yaratıcı yeteneğe ve başlangıçta biraz organizasyona ihtiyacınız var!

Bu kılavuz, mükemmel bir web sitesi oluşturmanıza yardımcı olmayı amaçlamaktadır. Harika görünen ve daha da iyi çalışan biri. Mümkün olan en iyi web sitesini elde etmek için atmanız gereken bazı önemli adımlardan bahsedeceğiz. Başlayalım!

Amaç ve Araştırma

Web tasarım sürecinin yaratıcı kısmına geçmeden önce belirlemeniz gereken birkaç şey var. Anahtar, hedef kitlenizi anlamaktır. Bu hayati önem taşıyor. Sonuçta, hedef demografinizin ihtiyaçlarını karşılamayan bir web sitesine zaman ve para harcamanın pek bir anlamı yoktur.

Bu ilk adım oldukça zor olabilir. Kitlenizin ne istediğini bildiğinizi varsaymak kolaydır. Bununla birlikte, başlangıçta bunu gerçekten araştırmak için zaman ayırmak, projede ileri geri çok fazla zaman kazandırabilir ve web sitenizin başarılı olma şansını artırır. Ve unutmayın, bir müşteri için bir web sitesi tasarlıyorsanız, onları bu sürece dahil ettiğinizden emin olun!

Özellikle web sitesi bir müşteri içinse, göz önünde bulundurmak isteyebileceğiniz bazı önemli noktalar şunlardır:

Web sitesi kendi başına bağımsız bir öğe mi yoksa daha kapsamlı bir pazarlama stratejisinin parçası mı?
Halihazırda güçlü bir marka var mı – varsa, web sitesinin bunu yansıtması önemlidir. Bu, bazen yapılması zor bir şey olabilir, çünkü bir marka tarafından halihazırda oluşturulmuş stilin yanında mutlaka rahat bir şekilde oturmayan modern tasarım trendlerine odaklanmak cazip gelebilir. Yeni bir sitenin en başından eskimiş gibi görünmemesi önemli olmakla birlikte, aynı zamanda bir marka tarafından halihazırda oluşturulmuş temel tasarım ilkelerinden çok da uzaklaşamaz (marka imajını baştan aşağı elden geçirmeye istekli değilse).
Sizin veya müşterilerinizin rakiplerine bakmak da çok önemlidir. Yeni sitenizin başarılı olması için gereken her şeyi içermesini sağlamak için güçlü ve zayıf yönlerini belirleyin. Potansiyel olarak hayati bir özelliği veya işlevi kaçırmamanızı sağlayabileceğinden, rekabete bakmak da yardımcı olabilir.

Araştırmanız bittiğinde, tasarladığınız herhangi bir yeni sitenin müşterinizin (veya elbette kendinizin!) gereksinimlerini karşılayacağından artık emin olmalısınız. Araştırma bazen can sıkıcı olabilir, özellikle de yaratıcı enerjilerle dolup taştığınızı hissettiğinizde ve ekranda somut bir şeyler elde etmeye başlama isteğiniz bunaltıcı olabilir. Ne kadar cazip gelse de bu adımı atlamayın. Gelecekte size ÇOK zaman kazandırabilir.

Zaman çizelgesi

Zorunlu olmamakla birlikte, web sitesini tamamlamak için gereken çalışma için bir zaman çizelgesi oluşturulması şiddetle tavsiye edilir. Bir zaman çizelgesindeki kilometre taşları, boş bir sayfadan bitmiş bir web sitesine geçmek için gereken süreçleri netleştirmenize yardımcı olabilir ve başlangıçta proje için doğru bir şekilde alıntı yapmanıza yardımcı olabilir. Daha büyük siteler için, kilometre taşlarını içeren bir zaman çizelgesi, işi ekip üyeleriniz arasında daha verimli bir şekilde bölmenize ve herkesin çalışmalarının (ve son teslim tarihlerinin!) genel resme nasıl uyduğunu görebilmesine olanak tanır.

Bu sürece yardımcı olması için Asana gibi bir araç kullanmak faydalı olabilir. Web sitesinin her bir unsurunu dikkatlice görevlere bölmek, hiçbir şeyin çatlaklardan kaçmamasını sağlar ve müşteriye web sitesi için daha güvenli bir şekilde bir tamamlanma tarihi vermenizi sağlar. Yeni web sitesi mevcut bir web sitesinin yerini alacaksa, eski sayfalardan yeni sayfalara yönlendirmeler koymanız gerekebilecek 'canlıya geç' geçişini yönetmek için zamanında oluşturmayı unutmayın.

Son olarak, her zaman sözünün altında ve üzerinde teslim etmeyi unutmayın. Web siteleri, çoğu proje gibi, başlangıçta tahmin edebileceğinizden her zaman daha uzun sürer, bu nedenle iyi bir kural, ilk tahmine% 20 değerinde bir zaman daha eklemek, kendinizi çalışırken bulma gibi eski bir tuzağa düşmemenizi sağlamaya yardımcı olmaktır. başlangıçtan kısa bir süre (ve dolayısıyla bir son tarihi kaçırma olasılığı).

site haritası

Tasarım sürecindeki bir sonraki adım, bir site haritası oluşturmaktır. Siteniz küçük olsa bile, bir tane olması güzel. Site haritaları yalnızca yeni bir sitenin düzenini tam olarak görselleştirmenize yardımcı olmakla kalmaz (ve bu nedenle önemli hiçbir şeyi kaçırmamanızı veya kafa karıştırıcı bir gezinme yapısına sahip olmamanızı sağlar) aynı zamanda Google'ın sitenizi yayına girdiğinde taramasına yardımcı olur ve bu da sitenizin performansını artırmanıza yardımcı olur. SEO.

Bazı tasarımcılar en sevdikleri çizim aracını kullanarak bir site haritası çizmekten mutlu olurlar, ancak hayatınızı kolaylaştırmak için WriteMaps gibi özel bir site haritası aracı kullanmayı düşünebilirsiniz.

Tel Çerçeveler, Modeller ve Prototipler

Wikipedia, bir web sitesi tel çerçevesini 'bir web sitesinin iskelet çerçevesini temsil eden görsel bir kılavuz' olarak tanımlar. Bir web sitesi tel çerçevesi oluşturmak, genellikle bir web sitesi tasarlarken ilk adımdır, çünkü sitenin düzeni hakkında bazı önemli netlik kazanmanıza yardımcı olurlar. Tel çerçeveler, önerilen tasarımın çok daha somut bir görselleştirmesini sağladıklarından, müşteri ve ekibinizle yeni bir siteyi tartışırken kullanmak için harika bir araçtır, ancak en önemlisi, bir sayfanın gerçek bir modelinden çok daha hızlı bir şekilde oluşturulabilir. Bu, paydaşların siteye gömülmeden bir ton saat önce bir tasarımı eleştirmesine olanak tanır.

Bir maket, bir sonraki seviyeye bir tel kafes alır. Bazı tasarımcılar, tel çerçevenin biraz daha ayrıntılı bir versiyonu olan (muhtemelen gri tonlamaya yapışan) bir sitenin 'çıplak' bir maketini oluşturmayı seçebilirken, diğerleri resimler, renkler ve hatta bazı işlevler içeren tam maketler oluşturmayı tercih edebilir. Modelinizi ne kadar ileri götürmek istediğiniz, önerdiğiniz tasarımdan ne kadar emin olduğunuza bağlı olacaktır. Müşterinin yine de site tasarımının önemli bir bölümünü değiştirmek isteyebileceğini düşünüyorsanız, önerilen tasarımı/özelliği iletmek için maketi gerektiği kadar basit tutmak açıkça mantıklıdır.

Siz ve müşteriniz tasarıma güvendikten sonra, bir sayfanın veya tüm web sitesinin tasarımını tam olarak gösteren tam bir maket oluşturabilirsiniz.

Modelleme sürecini önemli ölçüde hızlandırabilecek çok sayıda çevrimiçi araç vardır. Bunlara Mockflow ve Moqups dahildir ve her ikisi de sizi bir tel çerçeveden tam bir web sitesi maketine kadar götürebilir.

Bir maket, bir web sitesinin işlevini tam olarak aktarmanıza izin vermese bile, sitenin tasarımı söz konusu olduğunda sizin, ekibinizin ve müşterinizin %100 aynı sayfada olmasını sağlar. Ve yaşamak için siteleri kodlayan herhangi birimizin bileceği gibi, bir sitenin tasarımını bir makette değiştirmek, son sitenin kendisinden çok daha kolay!

Atmak isteyebileceğiniz son adım, bir prototip web sitesi oluşturmaktır. Geleneksel olarak bu, zaman alıcı olurdu (ve son sitenin kendisini inşa etmekle hemen hemen aynı). Ancak Framer gibi araçlar sayesinde, maket tasarımına işlevsel öğeler ekleyerek müşterinin sitenin nasıl çalışacağı konusunda gerçekten bir 'his' almasına olanak tanıyarak maketlerinizi bir sonraki seviyeye taşımak artık hiç olmadığı kadar kolay.

Bu bölüme son bir not olarak, çok fazla seçeneğin kötü bir şey olabileceğini hatırlamakta fayda var. Sonuç olarak, müşteri ne derse desin, tasarım uzmanı sizsiniz ve ekibinizle birlikte bir web sitesi tasarımında neyin en iyi sonucu vereceğini en iyi şekilde anlamanız muhtemeldir. Bu nedenle, bazen müşterinin seçebileceği bir dizi seçenek sunarak işleri karıştırmamak ve en iyi sonucu vereceğini düşündüğünüz renkleri ve düzeni sunmak daha iyidir. Bu, müşterinin bir araya geldiklerinde uyumlu olmayabilecek öğelerden 'seçme ve seçme' yapmasına engel olur. Daha az, kesinlikle bazen daha fazla olabilir!

Harika İçerik Yazmak

Bir web sitesi tasarımı ne kadar iyi olursa olsun, sitedeki kopya istenen mesajı iletmiyorsa sonuçta anlamsızdır. Bu nedenle, başlangıçtan itibaren projeye bir metin yazarı dahil etmek mükemmel bir uygulamadır. Okuyucuyu gerçekten meşgul edecek içeriği oluşturmaya yardımcı olabilirler ve ardından bunun siteye en uygun şekilde yerleştirilmesini sağlamak için onlarla birlikte çalışabilirsiniz.

Örneğin, metin yazarı ürünü/hizmeti tek bir cümlede aktaran harika bir slogan bulabilir. Bu açıkça önemli bir bilgidir, ancak metin yazarını yalnızca projenin son aşamasına dahil ederseniz, bu metni görüntülemek için uygun bir yerde tasarım yapmadığınızı görebilirsiniz. Bunun büyük bir hata olacağı açık.

Metin Yazarlığı, bir web sitesinin genellikle gözden kaçan bir öğesidir. Hepimiz görsel çekiciliğe kapılırız, ancak kopya, kimsenin lehine olmayan bir 'son dakika' ilavesi olabilir.

Metin yazarını baştan dahil etmenin bir başka nedeni (şüpheleriniz varsa), sitenin SEO açısından optimize edilmesini sağlamaktır. Kopyalama bir web sitesinin SEO'sunu yapabilir veya bozabilir, bu nedenle önemli olduğunu düşünmüyorsanız tekrar düşünün! Anahtar kelimeleri ve anahtar kelimeleri doğru şekilde kullanarak, arama motorlarının SERP'lerde size daha fazla öncelik vermesi daha olasıdır. Google Anahtar Kelime Planlayıcı, Screaming Frog's SEO Spider, Google Trends ve daha fazlası gibi SEO'nuzu geliştirmeye yardımcı olacak harika araçlar vardır.

Ve bir metin yazarı tutma lüksünüz yoksa ve 'tek başınıza gitmeyi' düşünüyorsanız, hayatınızı kolaylaştırabilecek birkaç yazma kaynağına ve aracına göz atmak isteyebilirsiniz. Göz atmaya değer ilk araç, kullanımı kolay bir yazma asistanı olan Grammarly'dir. Grammarly, yazım hatalarından kaçınmanıza yardımcı olabilir ve ayrıca metninizin biçimlendirilme biçimini (dilbilimsel açıdan) geliştirerek, kopyanızın olabildiğince okunabilir olmasını sağlamaya yardımcı olabilir.

Bakmayı önereceğimiz ikincisi, daha az bir araç ve daha çok Storybrand adlı bir pazarlama kaynağı. Storybrand, 'mesajınızı netleştirmenize' yardımcı olan atölyeler düzenler. Bunu yaparken, işletmeniz hakkında ilettiği mesajı açık ve net terimlerle güçlendirerek web sitenizin başarısını hızlandırmak mümkündür. Atölyeleri çok pahalıysa, pazarlama çerçeveleriyle ilgili kitaba bakın.

görseller

Bir web sitesi ziyaretçisinin beynine çarpması muhtemel ilk şey, web sitesindeki görsellerdir! Bunların bu nedenle oldukça önemli olduğunu söylemeye gerek yok.

Bir tasarımcı olarak, kullanmak istediğiniz görsellerin türü hakkında somut düşünceleriniz olacağından şüpheniz olmasın. Bunlar, animasyonlu çizimlerden ürün fotoğraflarına veya markayı ve ürünlerini temsil eden fotoğraflara kadar değişebilir. Hangisini kullanmayı seçerseniz seçin, bu görsellerin yüksek kalitede olduğundan emin olun, aksi takdirde diğer tüm çabalarınız boşa gidecektir.

Görseller, kendinizi rekabetten gerçekten ayırt etmeyi umabileceğiniz kilit alanlardır. Bu fırsatın boşa gitmesine izin vermeyin! Bir proje için teklif vermeden ve kabul etmeden önce, kullanmak istediğiniz görselleri müşteri ile tartıştığınızdan emin olun. Kullanabileceğiniz bir şirket içi resim kitaplığı olup olmadığını veya gerekli görüntüleri elde etmek için bir fotoğraf çekimi yapmayı planlayıp planlamadıklarını öğrenin. Değillerse ve elinizin altında uygun kalitede görseller yoksa Shutterstock gibi fotoğraf kitaplıklarından makul 'genel' görseller bulabilir misiniz?

Son olarak, geliştirme aşamasında, bu resimlerin boyutlarına dikkat ettiğinizden ve siteyi yavaşlatmamaları için optimize edildiklerinden emin olun. TinyPNG gibi bir araç kullanmak buna değerdir veya alternatif olarak sunucunuz Pressidium'da kullandığımız Image Smacking aracı gibi eşdeğer bir hizmet sağlayabilir.

Düzen tamamlandığında, yazılı ve uygun görüntüleri yerinde kopyalayın, heyecan verici bir dönüm noktasına ulaştınız… gelişme! Bunun ne anlama geldiğine ve dikkat edilmesi gereken bazı tuzaklara bir göz atalım.

Gelişim

Yapıyı kendiniz yapmıyorsanız, site tasarımını kendi işlerini yapmaları için geliştiricilerinize göndermenin zamanı gelecektir. Tasarımınız ve ayrıca ihtiyaç duyduğunuz ek özelliklerin açıklaması ne kadar net olursa, geliştiricilerin görselleştirdiğiniz siteyi teslim etmesi o kadar kolay olacaktır. Bu, Framer gibi bir araç kullanılarak oluşturulan bir prototip sitenin gerçekten kendine gelebileceği yerdir.

Oluşturma sırasında, birçok geliştirici, istemciye iletilebilecek geliştirme bağlantıları sağlar, böylece yapının nasıl ilerlediğini ön görebilirler. İlk bakışta bu iyi bir fikir gibi görünüyor çünkü işin devam ettiğini gösterebilmek her zaman güzeldir (özellikle müşteri siteyi yapmak için baskı yapıyorsa!). Pek çok geliştirici, müşteriye çalışmanın devam ettiğini göstermek için bazı geliştirme bağlantıları oluşturma eğilimindedir.

Bunu yapmak için cazip hissediyorsanız, belki duraklayın ve bunun gerçekten iyi bir fikir olup olmadığını düşünün. Çoğu müşteri, bir geliştiricinin izleyeceği iş akışını anlamayacak ve muhtemelen herhangi bir sayıda sorgu ve hatta belki de değişiklik istekleri ile size geri dönecektir. Bu aşamada bunlarla uğraşmak verimsizdir ve gerçek zamanlı bir özsu olabilir, bu nedenle tam bir çalışma için onlarla oturmadan önce son site hazır olana kadar beklemeniz en iyisidir.

Kalite Testi

Son site kullanıma hazır olduğundan, artık canlı yayına geçmeyi düşünmeden önce bazı kontrollerden geçmenin zamanı geldi. Bunlar oldukça kapsamlı olabilir ve hiçbir şeyin kaçırılmadığından emin olmak için işaretlenebilecek yeniden kullanılabilir bir kontrol listesi oluşturmaya değer. Kontrol etmek isteyebileceğiniz şeylerden bazıları (belirli bir sırayla) aşağıdaki gibidir:

HTML ve CSS Doğrulama: W3C HTML Doğrulayıcı ve CSS Doğrulayıcı gibi araçları kullanarak HTML ve CSS'nizi doğrulayın. W3C ayrıca, web sitenizin diğer dillere kolayca çevrilip çevrilemeyeceğini kontrol etmenize yardımcı olan bir Uluslararasılaştırma Denetleyicisi sağlar.
Bağlantılar: Bu adımda tüm dahili ve harici bağlantıların düzgün çalıştığını kontrol etmek önemlidir.
Dilbilgisi ve Yazım: Umarım metin, metin yazarınız tarafından sağlanan dokümanlardan kopyalanıp yapıştırılmıştır, bu sorun olmaz. Yine de, kaymalar meydana gelebilir, bu nedenle tekrar okumak zaman ayırmaya değer.
Formlar: Bu çalışmaları beklendiği gibi kontrol edin ve herhangi bir gönderi geldiğinde. Site yayına girdikten sonra bu formları yeniden test etmeniz ve ardından müşteriye gelecekteki testleri, belki de aylık olarak planlamasını söylemeniz önerilir.
Yükleme süreleri: Hızlı bir web sitesi şarttır. WebPageTest, GTMetrix, PageSpeed Insights veya Pingdom gibi araçlar, yükleme sürelerinin iyi ve hızlı olduğunu kontrol etmek için kullanılabilir. Siteniz, canlı sunucu olarak kullanılmayacak bir geliştirme sunucusunda barındırılıyorsa, site yayına girdiğinde yeniden test etmek isteyeceksiniz.
Mobil Duyarlılık: Web sitenizin her türlü cihazda doğru görüntülendiğinden emin olun. Bunu yapmak için BrowserStack gibi bir araç kullanabilirsiniz.
İşlevsellik: Sitenizde iletişim formu gibi şeylerin ötesinde daha gelişmiş bir işleve sahipseniz, bu işlevleri dikkatli bir şekilde test etmek isteyeceksiniz. Örneğin, bir WooCommerce sitesi kuruyorsanız, test süreciniz broşür tarzı bir web sitesine göre daha yoğun olmak zorunda olabilir. Örnek olarak WooCommerce'i kullanarak, ödeme ağ geçitlerini, alışveriş sepeti işlevselliğini, promosyon kodları gibi şeylerin nasıl çalıştığını vb. test edin. Test testi ve tekrar test edin!
Görsel Kontroller: Renk paletinizin ve boşlukların, kenar boşluklarının, dolguların vs. tutarlılığına bir göz atın. Aynı şey tipografi ve görüntü konumlandırma, çözünürlük ve optimizasyon için de geçerlidir.
Tarayıcı Davranışı: Listedeki bir sonraki adım, web sitesinin davranışını birden çok tarayıcı ve cihazda kontrol etmektir.
SEO: SEO'nuzu tekrar kontrol edin! Bu, başlıklar, paragraflar, listeler ve kullanabileceğiniz diğer etiket türleri gibi anlamsal yapınızın tüm öğelerinin yanı sıra meta başlıklar ve açıklamaların yanı sıra sosyal medya için Açık Grafik ayarlarını içerir.

Sitenizin beklendiği gibi çalıştığından ve umduğunuz kadar iyi göründüğünden memnun olduğunuzda, artık kullanıma hazır olduğunuzu düşünebilirsiniz. Aslında şimdi sitenizi test etmek için projeye dahil olmayan yaklaşık 5 kişi bulmanızı öneririz. İdeal olarak, bu kullanıcılar sizden daha az 'teknoloji yönelimli' olacaktır. Yeni bir çift gözün neler görebildiğine şaşıracaksınız. Bunu yapmak, lansmandan sonra 'gerçek' müşterilerle ilgili sorunları önleyebilir ve size sitenin akışını daha da iyileştirme fırsatı verebilir.

Başlatmak

Budur! İdeal olarak, sitenizi trafik hacimlerinin düşük olma ihtimalinin yüksek olduğu günün bir saatinde başlatın. Cloudflare gibi bir DNS sağlayıcısı kullanmak, herhangi bir DNS önbelleğe alma sorununun önlenmesine yardımcı olabilir. Ayrıca, geliştiriciniz hazır olduğunda başlatmak en iyisidir, böylece bir şeyler ters giderse devreye girip yardımcı olabilirler.

Artık yayındasınız, siteyi yeniden kontrol etmek için biraz zaman ayırdığınızdan emin olun ve herhangi bir hata bulursanız endişelenmeyin! Çatlaklardan bir şeyin düşmesini önlemek neredeyse imkansızdır, ancak umarız kapsamlı bir kontrol listesi kullanmak, çoğu ana öğenin beklendiği gibi çalışmasını sağlamaya yardımcı olur.

Çözüm

İyi bir web sitesi tasarlamak çok büyük bir iştir ve eldeki görevden biraz korkmanın kolay olduğu bir iştir. İşi yönetilebilir parçalara bölmek ve çok fazla takılmadan önce işleri gerçekten planlamak, süreci hem daha başarılı hem de eğlenceli hale getirmeye gerçekten yardımcı olabilir.

İyi şanlar!