Bir web sitesi, yeni iş fırsatları için önemli bir geçit görevi görür. Yeni bir web sitesi oluşturmak veya yeniden tasarlamak zorlu bir yolculuk olabilir. Şirketimin web sitesinin yeniden tasarlanmasına öncülük ettikten sonra yolculuğumuzun bir kısmını paylaşmaya karar verdim. Yeni bir web sitesi oluşturmayı veya mevcut web sitenizi yeniden tasarlamayı düşünüyorsanız, bunun yolculuğunuzu daha sorunsuz hale getirerek size yardımcı olacağını umuyoruz.

Değerlendirme

Web sitemiz bizim için yeni işlere önemli bir giriş kapısıdır. Bir web geliştirme butiği olarak kendimizi çevrimiçi olarak nasıl sunduğumuz, işimiz ve müşterilerimizin bizimle çalışırken neler bekleyebilecekleri hakkında çok şey anlatıyor.

Yeni markamıza uygun yeni bir web sitesi oluşturmaya karar verdiğimizde, söylenenleri yerine getirmemiz ve müşterilerimize ve hedef kitlemize kaliteli bir web sitesi göstermemiz gerektiği bizim için açıktı. Ekibimiz işe başlamadan önce hazırlık aşamasına çok düşündü ve çaba harcadı.

• Basit bir soruyla başladık: Neden Bir Web Sitesine veya Yeniden Tasarıma İhtiyacımız Var? Bu, hedeflerinize odaklanmanın ve yoldan sapmaktan kaçınmanın mükemmel bir yoludur.
• Nedenimizi anladıktan sonra Hedef Kitlemizi Belirleme sürecine geçtik. Bu web sitesini kimin için oluşturuyorduk. Kime ulaşmaya çalıştığınızı ve onların markanız ve çalışmanız hakkında ne bilmesini istediğinizi açıkça anlamanız çok önemlidir.
• Daha sonra bu kitleye vermek istediğimiz mesajı, nasıl görünmek istediğimizi ve en önemlisi yaptığımız işte iyi olduğumuzu nasıl kanıtlayabileceğimizi düşünmeye başladık. Bu mesajın büyük bir kısmı marka yaratımı sırasında düşünülmüştü ( Yeni markamızı nasıl oluşturduğumuzu kontrol edin) ve bunu yeni web sitesine aktarmamız gerekiyordu.
• Zaten çevrimiçi bir varlığımız olduğundan, Eski Web Sitemizi Değerlendirmek için biraz zaman ayırdık ve iyi çalıştığını ve eksik olduğunu hissettiğimiz özellikleri ve yönleri listeledik.
• Tüm bu süreçte sektörümüzdeki şirketlerin ne yaptığını anlamaya çalışmak için Rakip Karşılaştırmasını takip etmek de çok önemliydi. Referans ve ilham almak için diğer web sitesi türlerine de bakıyoruz. Bu bize bazı değerli bilgiler verdi ve hataların tekrarlanmasını veya temel özelliklerin kaçırılmasını önlememize yardımcı oldu.
• Bu hazırlık aşamasının son adımı web sitemizde olmasını istediğimiz Özellikler ve İşlevler Listesiydi. Bu sanki istediğimiz her şeyi yapabilecekmişiz gibi bir istek listesi oluşturmak gibiydi. Listeye daha sonra öncelik verildi ve ZORUNLU olan ve SAHİP OLMASI GÜZEL olan ve daha sonra uygulanabilecek özellikleri seçtik. Öncelikle en kritik unsurlara odaklanmak önemlidir.

Bu adımlardan bazıları tüm ekiple birlikte atıldı. Küçük bir ekip olduğumuz için herkesin bu sürece bir ölçüde dahil olmasını istedik. Bu ilk değerlendirmeden sonra bölmeye ve fethetmeye başladık ve yeni web sitemizi gerçeğe dönüştürmekten sorumlu ekip üyelerimizi görevlendirdik.

Tasarım

Web projemiz için Tasarım Sürecine girmenin heyecanını yaşadık. UI/UX Tasarımı herhangi bir web projesinin kritik bir yönüdür. Çok disiplinli bir ekibimiz vardı, ancak tasarımcı gösterinin yıldızıydı ve izleyicilerimize iletmek istediğimiz mesajın görsel temsilini yaratmaktan sorumluydu.

Tasarımcının projenin ihtiyaçlarını ve beklentilerini net bir şekilde anlaması, mesajımızı görsel olarak iletmesi ve içeriği buna göre yapılandırması önemliydi. Doğru tonda, kısa ve ilgi çekici bir tasarım hedefledik.

Projenin bu aşamasında şu adımları izledik:

• Başlangıçtan itibaren kullanıcı odaklı bir yaklaşımı benimsedik. Hedef kitlemizin bizi nasıl algılayacağına ve bizimle nasıl etkileşim kuracağına odaklandık. Bu nedenle Bilgi Mimarisi üzerinde çalışarak, gerekli sayfalara, bölümlere ve bileşenlere karar vererek ve kopyanın ilk taslağını oluşturarak başladık.
• Daha sonra, düzen ve işlevselliğin kaba, düşük kaliteli bir temsilini sağlamak için düşük kaliteli tel çerçeveler oluşturduk. Tasarıma çok fazla zaman ve çaba harcamadan önce fikirleri test etmemize ve denemeler yapmamıza olanak sağladı. Bu aşamada genel kullanıcı akışını da göz önünde bulundurduk.
• Bu aşama, kullanılacak bileşenlerin tümünün temelini oluşturduğu için kritikti: Tasarım Sisteminin oluşturulması. Figma'yı kullanarak tasarım desenlerini, yönergeleri ve örnekleri içeren bir kütüphane oluşturduk. Bu kitaplık, tüm kullanıcı arayüzü öğeleri arasında tutarlılık sağlayan ve yeni bileşenlerin tanıtılması sırasında ölçeklenebilirliğin temelini oluşturan tek bir doğruluk kaynağıydı.
• Tasarım sistemi tanımlandıktan sonra düzenleri High Fidelity'de oluşturduk. O zamana kadar oluşturulan lo-fi tel çerçevelere kullanıcı arayüzünü uyguladık. Bu aşamada tasarımın erişilebilirlik gereksinimlerine uygunluğu tamamen test edildi ve içerik gösterimiyle ilgili daha ayrıntılı sonuçlara ulaştık.

Süreç boyunca Figma'yı kullandık, bu da ekiple iş birliği yapmayı ve yinelemeler yapmayı kolaylaştırdı. Birkaç yinelemeden sonra geliştiricilerimizin üzerinde çalışabileceği en uygun sürümü elde ettik.

Gelişim

Projenin geliştirme aşamasında teknoloji yığınını seçmeye ve tasarımları uygulamaya odaklandık. Proje yöneticimiz tarafından oluşturulan kullanıcı hikayeleri ile ürün biriktirme listesine dayalı olarak sprintlerde çalıştık.

Teknoloji yığınını seçme

Tasarım aşaması ilerledikçe oluşturmak istediğimiz web sitesine en uygun teknolojilerin hangilerini araştırdık. Geliştiricilerimiz bunu önceki aşamaların sonuçlarına göre belirleyebildiler.

Pek çok seçeneğin mevcut olması nedeniyle, günümüz dünyasında doğru teknoloji yığınını seçmek her zamankinden daha önemli hale geldi. Projenin gereksinimleri, ekibin uzmanlığı, kaynakların kullanılabilirliği, maliyetler, performans, güvenlik ve ölçeklenebilirlik gibi çeşitli kriterleri göz önünde bulundurduk.

Bu proje için basit, hızlı ve güzel bir web sitesi istedik.

Web sitesinin bileşenlerini, özelliklerini ve işlevselliğini daha küçük, yeniden kullanılabilir bileşenlere ayıran modüler bir yaklaşım benimsedik. Bu yaklaşım, web sitesinin farklı bölümlerindeki bileşenleri yeniden kullanmamıza olanak tanıdı, geliştiriciler ve tasarımcılar arasındaki işbirliğini kolaylaştırdı, geliştirilenlerin test edilmesini ve sürdürülmesini kolaylaştırdı ve sonuçta performansın artmasına ve sayfa yükleme sürelerinin azalmasına olanak sağladı.

Geliştiricilerimiz hızlı, içerik odaklı web siteleri için hepsi bir arada web çerçevesi olan Astro'yu savundu. Piyasadaki en hızlı içerik odaklı çerçeveyi denemek için sabırsızlanıyorlardı. Ekibimizin dikkatini üç şey çekti: sunucu tarafı oluşturma, performans sonuçları ve esneklik.

Hedeflediğimiz basit web sitesi ile tam teşekküllü bir İçerik Yönetim Sistemine (CMS) ihtiyacımız yoktu ancak teknik olmayan ekip üyelerinin web sitesinde çalışmasını sağlamak istedik. Farklı CMS seçeneklerini kapsamlı bir şekilde araştırdık ve sonunda sağlam özellikleri ve kullanım kolaylığı nedeniyle Sanity'yi seçtik. Sanity'nin ayrıca harika belgeleri ve çok cömert bir ücretsiz katmanı vardı.

Projemizde Astro ve Sanity'nin yanı sıra Netlify'ı da kullanmaya karar verdik. Eh, biz her zaman yaparız. Netlify'ın kusursuz dağıtım ve barındırma yetenekleri genellikle İçerik Dağıtım Ağımıza (CDN) tercih edilir. Ayrıca animasyonlar için çeşitli kütüphaneler kullandık ve bunu başka bir blog yazısında (yakında gelecek) daha ayrıntılı olarak ele aldık.

Potansiyel müşterilerin bize ulaşması için oluşturduğumuz form da iyileştirmeye açık yönlerimizden biriydi. Forms'un Astro ile ilgili sorunları nedeniyle en iyi seçenek olmadığı ortaya çıkan Netlify formunu kullandık. Bir çözüm bulduk (düzeltme) ve iletişim formumuz için tek bir sayfa oluşturduk. Bunu gelecekte nasıl değiştirebileceğimizi hâlâ düşünüyoruz.

Gelişme süreci

Geliştirme aşamasına başlamadan önce proje yöneticisi, ekip tarafından oluşturulacak tüm özellik ve işlevlere ilişkin ayrıntıları içeren bir ürün biriktirme listesi oluşturdu. Bu kullanıcı hikayeleri geliştirme sürecini sorunsuz ve şeffaf hale getirdi. Web sitesini oluşturmadan önce ekibin, ilk web sitesi sunumunun parçası olacak özelliklere ve işlevlere öncelik vermesi gerekiyordu.

Kod deposu için GitHub'u (GH) kullandık ve onun Proje Yönetim panolarından ve sprint planlama özelliklerinden faydalandık. GH genellikle Sürüm Kontrol Sistemi için tercihimizdir, ancak Notion Projects'i kullanmaya başladık ve proje yönetimi için onu seviyoruz.

Tasarımları uygulamaya başladık. Çevik metodolojiyi takip ettik ve doğru yolda olduğumuzdan ve sonuçları belirlenen zaman çizelgeleri dahilinde teslim ettiğimizden emin olmak için sprintlerde çalıştık. Küçük bir not: Bu şirket içi bir projeydi ve ana önceliğimiz müşterilerimizin projeleriydi. Bu, ekibimizin diğer projelere ara vermesinin hemen ardından sprintlerin gerçekleşeceği anlamına geliyor. Genelde bu şekilde çalışmıyoruz ama bunu bu şekilde başardık ve bunu tekrarlamamak için öğrenilen bir ders oldu.

Tüm geliştirme sürecini şeffaf ve çevik hale getirmenin bir diğer kritik noktası da projenin başlangıcından itibaren bir aşamalandırma bağlantısına sahip olmaktı. Projeye katılan herkesin erişimi vardı ve kaydedilen ilerlemeyi görebiliyor, geri bildirimde bulunabiliyor, ihtiyaç olduğunu hissettiğimizde değişiklikler ve küçük uyarlamalar yapabiliyorduk.

Geliştirme aşamasında pazarlama ekibi içerik eklemeye başlayabildi. Bu onların Sanity'ye alışmalarına yardımcı oldu ve daha gerçekçi geri bildirim turlarına katkıda bulundu. Genel olarak geliştirme aşaması, projenin hedeflerine ulaşmak için tüm ekibin birlikte çalışmasını içeren ortak bir çabaydı.

Kalite güvencesi

Geliştirme sırasında bir veya iki geliştirici her özelliği ve işlevselliği test etti. Tüm kodlar kod incelemesinden geçti ve sonunda test etmek ve web sitesinin olması gerektiği gibi çalıştığından emin olmak için son bir sprint yaptık.

Kullanılabilirlik ve erişilebilirlik testleri yukarıda açıklandığı gibi tasarım aşamasında zaten yapılmıştır. Genel testler için kullanıcı hikayelerini ve proje yöneticimizin oluşturduğu kabul kriterlerini bize yol göstermesi için kullandık.

• İşlevsel test: Tüm özelliklerin beklendiği gibi çalıştığını doğrulayın.
• Performans testi: Lighthouse'u kullanarak hız yükünü ve diğer puanları kontrol edin.
• Tarayıcılar Arası ve Cihazlar Arası Test: Uyumluluk ve tutarlı bir kullanıcı deneyimi sağlamak için web sitesini çeşitli web tarayıcılarında (örn. Chrome, Firefox, Safari, Edge) ve cihazlarda (masaüstü, mobil, tablet) test edin. Bunun için TarayıcıStack'ı kullandık. Ürünlerinin kullanımı çok sezgiseldir ve birçok teste izin verir.

Canlıya Geçiş Hazırlığı

Hepimiz web sitesini hazırlama bağlantısında yayınlamaya hazırdık, ancak buna devam etmeden önce iki önemli şeyin dikkatlice değerlendirilmesi gerekiyordu: yeni alan adına yönlendirme ve SEO. Alan adını değiştirmeyi planladığımız için SEO sıralamamızın olumsuz etkilenmemesini sağlamak çok önemliydi.

Bu nedenle, arama motorlarına ve tarayıcılara orijinal URL'nin kalıcı olarak yenisiyle değiştirildiğini bildirmek için 301 yönlendirmelerini kullanmaya karar verdik. İşte yaptığımız:

• Mevcut web sitesindeki tüm sayfaların listesi:
• Bir sayfanın URL yapısı aynı tutulduysa 301 yönlendirmesinin çalıştığını doğrulayın.
• Eski sayfa URL'si yeni web sitesinde olmadığında en uygun sayfaya yönlendirme oluşturun.
• Hepsi için yönlendirmelerin mevcut olduğundan emin olmak amacıyla Google'da dizine eklenen sayfaları listeleyin.
• Her şeyi yeniden yönlendirmek için Netlify'ı kullanın ve aşağıdaki adımları izleyin. Netlify Belgeleri .
• Konsoldaki değişikliği Google'a bildirin Adres değişikliği alet.
• Eski sayfaların görünmemesi için Google'dan yeni alan adını yeniden dizine eklemesini isteyin. Bu, şu adreste bulunan adımlar izlenerek doğrudan Google Konsolunda yapıldı: Google Konsol Dokümantasyonu.

Son fakat kesinlikle en önemlisi, daha iyi SEO sıralaması için en iyi uygulamaları dikkate aldığımızdan ve nelerin iyileştirilmesi gerektiğini tam olarak belirlediğimizden emin olmak için çalışmaya zaman ayırdık. Pazarlama ekibi aşağıdakilerin üzerinden geçtiğinden emin oldu:

• Yeni web sitesini, arama motoru sonuçlarında daha üst sıralarda yer almak ve organik trafik çekmek isteyen alakalı anahtar kelimeler için optimize etmek amacıyla, popüler ve daha az rekabetçi anahtar kelimeleri keşfetmek üzere Google Anahtar Kelime Planlayıcı veya SEMrush gibi araçları kullanarak bir anahtar kelime araması yapıyoruz.
• Kullanıcıları arama motoru sonuç sayfalarından (SERP'ler) tıklamaya teşvik etmek için alakalı anahtar kelimeleri ve ilgi çekici harekete geçirici mesajları dahil ederek her web sayfasındaki meta başlık etiketlerini ve meta açıklamalarını optimize etmeye mümkün olduğunca çalıştık.
• URL'lerin temiz, kısa ve öz olmasını ve hedeflenen anahtar kelimeleri içermesini sağladık
• Alternatif Metin: Uygun yerlerde anahtar kelimeler kullanarak görseller için açıklayıcı alternatif metin sağlayın
• Sayfa Hızı Optimizasyonunu onaylayın (kullandığımız yığınla burada harika bir sonuç elde etmemek zordu).

Sonuç

Web sitemizi yayına alana kadar uzun bir yolculuktu. Ama tahmin et ne oldu? Çalışma lansman sonrasında da devam etti.

İlk aşama, başarmak istediklerimiz için güçlü bir temel oluşturdu. Bunu modüler bir yaklaşımla oluşturmak bize web sitesini yineleme, değiştirme ve yeni trendlere ve ihtiyaçlara uyarlama esnekliği de verdi. Sonuçtan mutluyuz ve buraya gelmemizden gurur duyuyoruz. Yolculuğumuzu paylaşarak yeni bir web sitesi oluştururken veya yeniden tasarlarken nelerle karşılaşacağınızı bildiğinizi umuyoruz.

Burada paylaştığımız her şeyi özetlemek gerekirse, bunu projenizde kullanabilmeniz için küçük bir yardımcı sayfa hazırladık.