Şirketimizin pazarlama sitesini tasarlama ve uygulama: İçerikten uygulamaya yolculuğum

Eğer bir Logto kullanıcısıysanız, şirketimizin web sitesinin yakın zamanda yenilendiğini fark etmiş olabilirsiniz. Eğer değilseniz, web sitemize logto.io adresinden göz atın ve bunu gerçekleştirmek için ne kadar kaynak ayırdığımızı tahmin edin.

Şöyle düşünmüş olabilirsiniz, sadece mükemmel işleyişimizi sergilemek için çok fazla iş, çaba ve dikkatli tasarım gerektiren bir çalışma mı yapıyorsunuz?

Hayır!

Aksine, ürün kalitemizi nasıl akıllıca artırdığımızı ve kullanıcılarımıza en iyi ürün ve hizmetleri nasıl sunduğumuzu göstermek istiyoruz.

Topluluğumuzdan olumlu geri bildirimler aldık ve bunu nasıl başardığımızı merak ettik. Bu güncelleme turu farklıydı çünkü hızla hareket eden bir ortamda tamamen yeni bir iş akışı oluşturduk. En iyi uygulamalarımızı tanıtmak ve ekip çalışması ve iş birliği kültürümüze daha yakından bakmak istiyoruz.

Arka plan#

Müşteri kimliği ile ilgili geniş bir geliştirme hizmetleri ve altyapı çalışmaları sunmaya odaklanmış bir teknoloji ekibiyiz. Sunum baskısı büyük. Aynı zamanda, markalı pazarlama web siteleri oluşturma, blog yazma, projelerimizi tanıtma ve kullanıcılarımızla etkileşim kurma gibi çeşitli hikaye anlatımı ve operasyonel görevleri desteklememiz gerekiyor.

Çekici bir açılış web sitesi, genellikle izleyicinizin ürününüz hakkında ilk izlenimi oluşturduğu için hayati önem taşır, onların ürününüzün çözmeyi amaçladığı sorunları anlamalarına yardımcı olur, fiyatlandırma ve sosyal kanıt için dikkate değer müşterileri içerir.

Ayrıca, birden fazla iş hedefine ulaşabilir:

• Ürününüzün markasını ve değer önerisini sergileyin.
• Potansiyel müşteri oluşturun.
• Ürün odaklı ya da geliştirici odaklı büyümeye odaklanan bir şirket için özellikle önemli olan bir içerik merkezi işlevi görün.
• SEO'yu optimize etmek, kullanıcıları kazanmak ve düzenli trafiği izlemek için bir yer sağlayın.

Önceki işimde, bir web sitesi projesine bir kez dahil olmuştum. Bir tipik iş akışının neleri içerdiğine bakalım:

1. İlk olarak, ürün pazarlama yöneticileri ve ürün yöneticileri içerik ve gereksinimleri tanımlar.
2. Ürün tasarımcıları ve bir UX yazarı içeriği iyileştirirler.
3. Üzerinde çalışılan iş genellikle düşük çözünürlüklü bir sürüm olarak görsel ve marka tasarımcılarına üretim öncesi son dokunuşlar için aktarılır.
4. Mühendisler ve ürün yöneticileri ardından animasyonlara ve duyarlı web tasarımına odaklanarak uygulamaya başlar.

Bu süreç yorucudur ve pek çok kişi ve paydaş içerir, bu da hızlı hareket eden bir ortam için uygun değildir.

Başlangıçta bu işi sadece iki kişi sürdürüyorsa—bir ürün tasarımcısı ve bir mühendis—bile, web performansını yönetmek, resim yüklemek, duyarlı tasarımı sağlamak, resim formatlarıyla ilgilenmek ve içeriği güncellemek gibi görevler yine de bol miktarda karşılıklı iletişimi gerektirir.

Bu iş akışı verimsizdir. Mühendislik kaynaklarını temel ürün işleri üzerine yoğunlaştırırken geri kalanını nasıl yöneteceğimi sürekli olarak düşünüyorum.

Üretkenliği artırmak için araçları kullanmak ekibimizin temel felsefesidir. Bu nedenle, bu süreçleri sadeleştirmeye yardımcı olabilecek araçları araştırmaya başladım.

İhtiyaçların Analizi#

Başarılı bir SaaS pazarlama web sitesi geliştirmek için ihtiyaç duyulan temel unsurları inceleyelim:

1. İçerik: Herhangi bir pazarlama sitesinin temeli neyin gösterileceğini tam olarak bilmektir. Bu, hedef müşterilerinizi, genel kullanım senaryolarını ve ürününüzün değer önerisini derinlemesine anlamayı gerektirir. Hiçbir araç bu anlayışın yerini alamaz. Neyse ki, ürün tasarımı ve pazara çıkış stratejilerinde yer almam nedeniyle, kullanıcıların ihtiyaçlarını karşılayan içerikler oluşturma konusunda donanımlıyım.
2. Tasarım: Site, şık ve cilalı bir görsel çekiciliğe sahip olmalıdır. UX/ürün tasarımında bir geçmişim var, ancak profesyonel bir tasarımcının sahip olduğu kadar kapsamlı değil, bu beni bu açıdan yeterince yetkin kılıyor.
3. Mühendislik: Teknik açıdan önemli hususlar arasında sitenin barındırılması, duyarlı tasarımın sağlanması ve sorunsuz mikro etkileşimlerin etkinleştirilmesi yer alır. Ayrıca, siteyi diğer bileşenlerle, örneğin bağlantı yönlendirmeleri ve ürünün kimlik doğrulama sayfası gibi, sorunsuz bir şekilde entegre etmek de önemlidir.

Biraz araştırma yaptıktan sonra, tasarım yönleri için kullanmayı planladığım araçlar şunlardır:

Ürün ve Pazarlama İçeriği#

Pazarlama içeriklerimi ve mesajlarımı optimize etmek için ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper veya benzeri AI uygulamalarını yardımcı olarak kullanıyorum.

Bu, pazarlama içeriklerimi ve mesajlarımı incelemek ve optimize etmek içindir. Ancak, hedefin ve amacın net olması önemlidir. AI sadece bir yardımcıdır, karar verici değil. Herhangi bir pazarlama mesajı yazmadan önce kendime birkaç soru sorarım:

1. Mesajı kimler okuyacak?
2. Ekstra bir bağlama ihtiyaçları var mı?
3. Mesajda ele almak istediğiniz ana nokta nedir?
4. Kullanıcının bir sonraki adım olarak ne yapmasını bekliyorsunuz?
5. Bu mesaj eğitici mi yoksa belirli bir harekete geçirmeyi mi hedefliyor?
6. Bu mesaj yanıltıcı veya abartılı olma potansiyeli taşıyor mu?

Daha sonra iletmek istediğim noktaların ilk taslağını yazarım.

Bazı durumlarda, AI bazen bayat gibi görünen kelimeler ekleyebilir veya orijinal amacınızı mantıksal olarak doğru gibi görünen bir şekilde bükebilir. Bununla birlikte, amacınıza tekrar vurgu yapmalı ve hedeflerinize bağlı kalmalısınız. Hedef kitlenize iletilen kelimelerin net, doğrudan, öz ve şeffaf olmasını sağlamak için standartlar oluşturmalısınız. Bu, özellikle birçok işletme ve geliştiriciye hizmet veren ürün alanımızda özellikle önemlidir.

Tasarım#

Etkileşim ve görsel tasarım, animasyon ve prototip oluşturma için Figma, Framer

Tasarım alanında bir geçmişe sahibim, ağırlıklı olarak UI ve UX tasarımını içeriyor. Cilalı bir arayüz tasarlamak benim için bir zorluk değil, fakat işim profesyonel birinin işleyişi kadar şık görünmese de, bazı temel görsel tasarım ve illüstrasyon becerileri ile, doğru araçları seçerek işinizin kalitesini artırabilirsiniz. Ben bu yaratıcı süreçte Framer ve Figma kullanıyorum.

Bu tamamen Figma ile oluşturulmuş eski tasarımımız

Orijinal tasarımımız Figma'da oluşturuldu. Framer'ın resmi eklentisi olan "Framer to HTML" ile temel tasarımı Framer'a kopyalayıp yapıştırdım, bu da iyi bir başlangıç noktası sağladı.

Sonraki adım tasarım. Daha önce Figma kullandıysanız, Framer'a geçiş yapmak pürüzsüz bir süreç, çünkü genel kullanıcı deneyimi oldukça benzer. Üretkenliği önemli ölçüde artıran bazı ilginç etkileşimleri vurgulamak istiyorum.

Layout#

Figma kullanıcıları, otomatik layout sayesinde zaman kazanır çünkü bu, elemanları yerleştirmede çok zaman kazandırır. Ancak, Framer'daki layout fonksiyonları daha akıllıdır ve frontend zihniyetiyle daha yakından uyum sağlar. Framer'da grid veya stack layout kullanmayı, sütunları tanımlamayı, maksimum genişliği belirlemeyi seçebilir ve gerektiğinde başka bir satıra otomatik olarak geçmesini sağlayabilirsiniz. Bu işlev, canlı bir web ortamında elemanların nasıl davranacağını göstererek tasarım sürecini daha uygun hale getirir.

Duyarlı tasarım için kırılma noktaları#

Kırılma noktaları ve genişlik ayarlarını (örneğin, fill, fixed, relative ve fit to content) ayarlayarak ve farklı tuvalleri tanımlayarak, çeşitli duyarlı tasarımlara kolayca ve doğru bir şekilde ulaşabilirsiniz. Bu yaklaşım, layout'u farklı ekran boyutları ve cihazlar için verimli bir şekilde özel olarak ayarlamanıza olanak tanır.

Animasyon#

Framer, sitemizde yapılan işlerin sergilenmesi için yaygın olarak kullandığımız ticker animasyonu da dahil olmak üzere önceden oluşturulmuş çeşitli animasyonlar sunar. Bileşeni kurup bu widget içinde yerleştirebilirsiniz. Hız, yön, padding ve daha fazlası gibi çeşitli yapılandırmaları tanımlamanıza olanak tanır ve sitenizde animasyonun nasıl görüneceğini kontrol etmenizi sağlar.

Framer'daki bir diğer kullanışlı özellik, kaydırma animasyonlarını özelleştirme yeteneğidir. Örneğin, öğelerin kaydırma sırasında nasıl görüneceğini belirleyebilirsiniz. Kaydırma animasyonunuzu kurarak, öğelerin nasıl görüntüleneceğini zamanlama ve stil anlamında kontrol edebilir, kullanıcı deneyimini ve içeriğinizle olan etkileşimi artırabilirsiniz.

Hızlı Yayınlama#

Ana gereksinimlerimden biri şudur:

1. SEO optimizasyonu ve pazarlama kampanyaları için hızlı bir şekilde birden çok açılış sayfası tasarlamak. Hız bir zorunluluktur.
2. İçeriği sık sık kendi başıma güncellemek. Ürün açılış sayfanız en son gelişmeleri ve mevcut ürün konumlandırmanızı yansıtmalıdır. Güncel olmayan içerik, pazar fırsatlarını kaçırmak ve müşteri ihtiyaçlarını karşılamamak anlamına gelir.

Önceki iş akışımda, içeriği güncellemem gerektiğinde ya bir mühendise sormam ya da kendi başıma bir pull request göndermem gerekiyordu. Mühendislik ekibimiz, kod kalitesini sağlamak için titiz bir süreç izler, bu da zaman alıcı olabilir ve hızlı değişiklik yapma özgürlüğümü kısıtlar.

Framer bu sorunu benim için çözdü. Artık bir değişiklik yaptığımda ve yayına tıkladığımda, hemen canlı olarak üretime yansır. Bu yetenekle süreç büyük ölçüde hafifledi; güncellemeleri hızlıca yapabilme ve içeriği yönetme konusunda daha fazla özgürlük sağladı.

Mühendislik#

Framer tarafından barındırıldığı için, bizim tarafımızdan herhangi bir uygulama veya teknik çalışmaya gerek yoktur. Mühendislerimiz bunu web sitemizin geri kalanıyla entegre etmek için yaklaşık 10 dakika harcadılar.

Mevcut web sitemiz 20-30 sayfadan oluşuyor; bazıları Framer kullanılarak geliştirilmiş, diğerleri geleneksel yazılım geliştirme yöntemleriyle oluşturulmuştur. Sayfalarımızı sürdürmek için en iyi araçları seçme sürecindeyiz. Örneğin, geliştirici dokümantasyonu için, Framer ile yönetmenin zor olduğu bir durumda, geliştirici dostu bir dokümantasyon çerçevesi kullanarak içeriğinizi barındırmak en uygun seçenek olur. İlerleyen zamanlarda ihtiyaçlarımızı değerlendireceğiz ve ya kendi sitemizde barındırmaya devam edip etmeyeceğimize ya da tamamen Framer'a geçiş yapıp yapmayacağımıza karar vereceğiz.

İş Akışımızı Nasıl Değiştirdi?#

İş akışımızı tamamen dönüştürdük, pazarlama sitelerinin üretimini tamamen zahmetsiz hale getirdik. Güvenilir, sürdürülebilir ve son derece verimli.

Bu blogu en iyi uygulamaları paylaşmak için yazdım. Eğer Framer ve güzel web siteleri tasarlama konusunda deneyiminiz varsa, bunları duymaktan mutluluk duyarım. Gelin konuşalım ve birbirimizden öğrenelim.

Artık ürünümüzü kontrol etme zamanı! Bizi şu adreste ziyaret edin: logto.io.