RedCyber: kamu ve kurumlar için siber güvenlik sitesi, Framer ile tasarım ve geliştirme

Genel bakış

RedCyber, kamu kurumlarına ve şirketlere hizmet veren bir siber güvenlik şirketi. Hizmetleri saldırı tarafındaki işlerden, Red Team saldırı simülasyonları ve sızma testleri, savunmaya, Purple Team iş birliğine, kaynak kod analizine ve güvenlik danışmanlığına uzanıyor.

Sitelerini stüdyom Beew üzerinden, 2024'te yaklaşık dört ayda tasarlayıp geliştirdim: araştırma ve tel çerçeveler, arayüz tasarımı, tasarım sistemi, 3D kalkan görselleri ve Framer geliştirmesi; masaüstü ve mobil için. Hedef, müşterilerin ilk bakışta güvendiği ve yardım istemeyi kolaylaştıran bir siteydi.

Sorun

Kamu kurumlarında ve büyük şirketlerde güvenlik hizmeti alan kişiler temkinli. Site, doğası gereği teknik ve birbirine karıştırılması kolay hizmetleri anlatırken ciddi ve profesyonel görünmek zorundaydı.

• Güven: hem kamu hem özel sektördeki müşteriler için ciddi ve profesyonel bir marka duruşu kurmak.
• Yapı: Red, Blue ve Purple Team operasyonlarını net ve gezilebilir bir yolculuğa dönüştürmek.
• Teknik içerik: CVE veritabanlarını ve kaynak kod analizini modern ve sade bir arayüzle dengelemek.
• Büyüme: sürekli eklenecek içeriği, blog yazıları, SSS ve zafiyet analizleri, taşıyabilecek bileşenler tasarlamak.

Hedefler

• Müşterilerin ilk bakışta güvendiği, otorite sahibi bir platform kurmak.
• Red, Blue ve Purple Team arasındaki farkı jargonla değil, görsellerle anlatmak.
• Bir hizmeti anlamayı ve onunla ilgili talep göndermeyi kolaylaştırmak.
• Güvenilirliği ve deneyimi göstermek; profesyonel tonu kaybetmeden siteyi SEO'ya ve dönüşüme hazır tutmak.
• İleride gelecek tehdit raporları, webinarlar ve teknik dokümanlar için bir temel atmak.

Yaklaşım

İşe diğer siber güvenlik sitelerini inceleyerek başladım; kullanıcı akışlarını ve eylem çağrılarının nerede durması gerektiğini belirledim, ardından arayüze geçmeden önce yapıyı tel çerçevelerle kurdum.

1. Her ekibe bir renk

Her hizmetin kendi 3D kalkanı var: Red Team için kırmızı, Blue Team için mavi, Purple Team için mor, sızma testi için turuncu. Renk, hizmeti genel bakış kartından kendi sayfasına kadar takip ediyor; ziyaretçi sistemi bir tanım okumadan öğreniyor.

2. Korkutucu değil, ciddi

Kapüşonlu hacker'lar ve yeşil kod yağmuru yerine ana sayfalar bol boşluklu, aydınlık düzenler kullanıyor; koyu yüzeyler hero, blog ve alt bilgi için saklandı. Güvenlik rozetleri ve başarı sayaçları bağırmadan güvenilirlik katıyor.

3. Teknik derinliği göster

Güvenlik hizmeti alanlar, ekibin işini bildiğine dair kanıt görmek ister. Code Analysis kartı, işaretlenmiş bir SQL injection hatası içeren gerçek bir kod bloğu barındırıyor; CVE Analysis de ana menüde hizmetlerin yanında duruyor.

4. Tek şablon, her hizmet

Her hizmet sayfası aynı yapıyı izliyor: başlık, tek cümlelik vaat, Get in Touch butonu, hizmetin kalkanı ve yetkinlik kartları. Framer'da bunlar, müşterinin bir tasarımcıya ihtiyaç duymadan genişletebileceği CMS'e hazır bileşenlere dönüştü.

Çözüm

Ana sayfa hero

Ana sayfa, parlayan bir 3D blok, tek ve net bir vaat, dijital güvenliğin için kesintisiz koruma, ve tek bir Get in touch butonuyla koyu bir sahnede açılıyor. Menü; hizmetleri, CVE analizini, blogu, SSS'yi ve iletişimi bir tık uzakta tutuyor.

Hizmetlere genel bakış

Bir bento ızgarası altı hizmeti tanıtıyor. Her kartta hizmetin kalkanı, tek cümlelik bir açıklama ve sonuca göre adlandırılmış bir aksiyon var, Simulate Attack, Strengthen Defense, Optimize Strategy, Test Shield, Check Bugs, Contact Experts. Ardından bir sayaç bölümü, teklifi şirketin deneyimi ve ekip büyüklüğüyle destekliyor.

Red, Blue ve Purple Team sayfaları

Her ekibin, aynı şablon üzerine kurulmuş, kendi renginde bir sayfası var. Red Team saldırı simülasyonlarını, sosyal mühendislik taktiklerini, zafiyet raporlamayı ve eğitimi; Blue Team anlık izlemeyi, yama yönetimini, olay yönetimini ve proaktif savunmayı; Purple Team ise ortak saldırı-savunma testlerini ve performans değerlendirmesini anlatıyor.

Sızma testi ve danışmanlık

Aynı şablon kalan hizmetleri de taşıyor. Sızma testi sayfası ağ, uygulama ve fiziksel güvenlik testlerini ayrıntılı raporlamayla birlikte listeliyor; danışmanlık sayfası ise risk değerlendirmesi, eğitim, mevzuat uyumu ve güvenlik mimarisini kapsıyor.

Blog, SSS ve alt bilgi

Koyu bir blog bölümü; zero trust, yapay zekâ ile tehdit tespiti ve fidye yazılımları gibi konulardaki yazıları etiket ve tarihleriyle topluyor. SSS, sık sorulan soruları, Red ve Blue Team arasındaki fark dahil, cevaplıyor; alt bilgi ise tüm hizmetleri ve kaynakları listeliyor. Üçü de CMS üzerinden yönetiliyor; ekip düzene dokunmadan yayın yapabiliyor.

Sonuçlar

• Karmaşık güvenlik hizmetlerini net ve gezilebilir bir şekilde anlatan, ciddi ve güven veren bir web varlığı.
• Siber güvenlik uzmanlarından içeriğin netliği ve yapısı hakkında olumlu geri bildirim.
• Akıcı mikro etkileşimlere sahip, performanslı, modüler ve responsive bir Framer sitesi.
• Blog, CVE analizi ve hizmetler için CMS'e hazır bileşenler; Framer'da tam CMS kontrolüyle teslim edildi.

Çıkarımlar

• Güvenlikte sakin tasarım, dramatik tasarımdan daha fazla güven kurar.
• Her hizmete sabit bir renk, teklifi herhangi bir tanımdan daha hızlı öğretir.
• Uzmanlığı kanıtlamak için gerçek teknik örnekleri, kod, CVE, göster.
• Tek ve güçlü bir sayfa şablonu, bir hizmet sitesinin yeniden tasarıma gerek kalmadan büyümesini sağlar.