Tüm işler

Spex Software · Case study · 3 dk okuma

Spex: Türk yazılım ve siber güvenlik şirketi için kurumsal web sitesi tasarımı

Spex, kritik sistemler işleten kurumlar için özel yazılım ve siber güvenlik çözümleri geliştiren, İzmir merkezli bir şirket. Kurumsal sitelerini, markayı fütüristik ve dağınık bir görüntüden sade, modern ve kurumsal düzeyde güven veren bir görüntüye taşımak için yeniden tasarladım; logodaki “X”in 55° açısını arayüzün imzası yaptım.

Müşteri
Spex Software
Yıl
2025
Rol
Baş tasarımcı (UX/UI ve marka)
Süre
1 Month
Sektör
Cyber security, Software development, B2B
Araçlar
Figma, Framer, Miro, Creative Cloud, Loom
  • User Experience Research
  • User Interface Design
  • Landing Page Design
  • Brand & Logo Design
  • Design System

Bir bakışta

Sorun

Eski site fütüristik ama güvensiz ve tutarsız görünüyordu; kurumsal müşterilere satış yapan bir siber güvenlik şirketi için yanlış bir mesaj.

Çözüm

Sade, responsive, çok sayfalı bir site ve imza bir detay: Logodaki “X”in 55° açısı kartlara, köşelere ve ikonlara taşındı.

Sonuç

Daha net bir gezinme yapısına ve özgün bir kimliğe sahip, profesyonel ve kurumsala hazır bir site; bir ayda tasarlandı.

Teslim edilenler

  • Ana sayfa + 5–6 sayfa şablonu
  • Masaüstü + mobil
  • Arayüz tasarım sistemi
  • 55° marka motifi
  • Logo ve uygulama ikonu
  • Görüşme planlama akışı
Spex ana sayfa hero: köşeleri açılı kesilmiş bir fotoğraf üzerinde “Secure, Scalable Software & Cyber Security for Enterprises”
Yeni Spex ana sayfası: sakin, kurumsal ve logonun 55° açısıyla işaretli.

Genel bakış

Spex (SPEX Yazılım ve Siber Güvenlik Hizmetleri A.Ş.), 2020'de kurulan, merkezi İzmir'de olan bir yazılım ve siber güvenlik şirketi. [2] Kritik görev ortamlarında çalışan kurumlar için güvenli yazılımlar, siber savunma çözümleri ve gelişmiş sistemler tasarlayıp geliştiriyor; hizmetleri özel yazılımdan BT danışmanlığına, sunucu ve ağ çözümlerinden siber güvenliğe, yapay zekâya ve bulut altyapısına uzanıyor. [1] [3]

Stüdyom Beew üzerinden şirketin kurumsal sitesini 2025'te bir ayda yeniden tasarladım: masaüstü ve mobil için bir ana sayfa ve beş-altı iç sayfa, geliştirmeye hazır UI/UX olarak teslim edildi. Spex logosunu Beew daha önce tasarlamıştı; bu yüzden brifin bir parçası da o işareti tüm sitenin paylaştığı bir tasarım sistemine dönüştürmekti.

Sorun

Siber güvenlik, güvene dayanarak satın alınır. Spex'in önceki sitesi fütüristik görünüyordu, ama kurumsal bir alıcının gözünde tutarsız ve amatör duruyordu; bir güvenlik ortağının vermesi gereken mesajın tam tersi.

  • Güven: Eski site fütüristik ama güvensiz, tutarsız ve amatör hissettiriyordu.
  • Konumlandırma: Kurumlara yönelik siber güvenlik daha kurumsal ve profesyonel bir görsel dil gerektiriyordu.
  • Marka mantığı: Markanın öğelerini, özellikle “X”i, arayüze bağlayan bir tasarım mantığı yoktu.
  • Netlik: Responsive bir yapının hizmetleri, işleri ve güvenilirliği hızla göstermesi gerekiyordu.

Hedefler

  • Modern, sade ve kurumsal, tamamen responsive bir tanıtım sitesi tasarlamak: bir ana sayfa ve yaklaşık beş-altı sayfa.
  • Güçlü hiyerarşi, boşluk kullanımı, tipografi ve özenli bileşenlerle güven inşa etmek.
  • Logodaki “X”in 55° açısını arayüz detaylarına uygulayarak imza niteliğinde bir sistem kurmak.
  • Spex'in sürekli tasarım ortağı olarak markayı zaman içinde tutarlı tutmak.
  • Geliştirme olmadan, teslime hazır UI/UX sunmak.

Yaklaşım

1. Tek bir açı, her yerde

Spex logosundaki “X” 55° açıyla çiziliyor. Bu açıyı sitenin imzası yaptım: Hero görselleri, kartlar ve çerçeveler aynı açıyla kesilmiş köşelere sahip; böylece logo ekranda olmasa bile marka tanınıyor.

2. Siber klişeler yerine kurumsal sakinlik

Neon ışıklar ve akan kodlar yerine site açık bir zemin, koyu mavi vurgular, çalışan gerçek insanlar ve bol boşluk kullanıyor. Koyu bölümler kanıta, iş ortakları ve müşteri yorumlarına, ayrıldı; böylece öne çıkıyorlar.

3. Hizmetleri süreç olarak anlat

Kurumsal alıcılar gerçekte ne olacağını bilmek ister. Sızma testi gibi hizmet sayfaları, moda kelimeler sıralamak yerine kapsam belirleme, test, raporlama ve iyileştirme adımlarını tek tek anlatıyor.

4. Bir sonraki adım form değil, takvim olsun

Her sayfa aynı görüşme davetiyle bitiyor ve randevu sayfanın içinde alınıyor: tarih ve saat seç, bilgilerini ekle, onayı al.

Çözüm

Logo ve 55° sistemi

Bir yapı ızgarası üzerine kurulan Spex yazı logosu ve uygulama ikonu, sistemin kaynağı. “X”in kesişen çizgileri, sitedeki köşelerde ve detaylarda kullanılan açıyı belirliyor.

Siyah Spex yazı logosu ve yapı ızgarası üzerine çizilmiş “X” uygulama ikonu
Siyah Spex yazı logosu ve yapı ızgarası üzerine çizilmiş “X” uygulama ikonu
Logo ve uygulama ikonu: Tüm arayüzü şekillendiren 55°'lik “X”.

Ana sayfa

Hero bölümü Spex'in ne yaptığını ve kimin için yaptığını tek satırda söylüyor; tek bir eylem var: “Book a demo”. Hemen altında rakamlar ve gerçekler bölümü, hizmetlere geçmeden önce ölçek ve kapsam hakkında hızlı bir fikir veriyor.

Menü, dil seçici, “Contact us” düğmesi ve köşeleri 55° kesilmiş mavi tonlu fotoğrafla masaüstü hero
Masaüstü hero: tek cümlelik konumlandırma, tek eylem.
Açılır hizmet listeli mobil menü, mobil hero ve “Spex in Numbers & Facts” bölümü
Açılır hizmet listeli mobil menü, mobil hero ve “Spex in Numbers & Facts” bölümü
Açılır hizmet listeli mobil menü, mobil hero ve “Spex in Numbers & Facts” bölümü
Mobilde tüm hizmet listesi menüde bir dokunuş uzakta.
Bir başlık ve giriş metninin altında dört kısa bilgiyle “Spex in Numbers & Facts” bölümü
Dört kısa satırda, kolay taranan bilgiler.

Hizmetler ve sızma testi

Altı temel hizmet, her biri kendi görseline sahip bir bento ızgarasında sunuluyor. Sızma testi gibi hizmet sayfaları daha derine iniyor: neyin test edildiği, aşamalara ayrılmış uçtan uca bir süreç ve müşterilerin aldığı raporlama ve iyileştirme desteği.

Özel yazılımdan buluta altı temel hizmetten oluşan “Secure Technology, Built for the Real World” bento ızgarası
Altı hizmet, tek ızgara: Her kartın kendi görseli ve net bir bağlantısı var.
Kod ve bulut görselli mobil hizmet kartları ve şirket içi ürünler bölümü
Kod ve bulut görselli mobil hizmet kartları ve şirket içi ürünler bölümü
Kod ve bulut görselli mobil hizmet kartları ve şirket içi ürünler bölümü
Mobilde kartlar hâlinde dizilen hizmetler ve şirket içi ürünler.
Mobil sızma testi sayfaları: hizmet girişi, gerçek dünya güvenlik testi ve aşamalara ayrılmış uçtan uca test süreci
Mobil sızma testi sayfaları: hizmet girişi, gerçek dünya güvenlik testi ve aşamalara ayrılmış uçtan uca test süreci
Mobil sızma testi sayfaları: hizmet girişi, gerçek dünya güvenlik testi ve aşamalara ayrılmış uçtan uca test süreci
Sızma testi, aşama aşama bir süreç olarak anlatılıyor.
Mobil rakamlar bölümü, uygulanabilir raporlama ve iyileştirme desteği ve “Securing Today’s Critical Systems” bölümü
Mobil rakamlar bölümü, uygulanabilir raporlama ve iyileştirme desteği ve “Securing Today’s Critical Systems” bölümü
Mobil rakamlar bölümü, uygulanabilir raporlama ve iyileştirme desteği ve “Securing Today’s Critical Systems” bölümü
Sonunda müşterinin eline geçen: net raporlar ve sorunları çözmek için destek.

Hakkımızda, ekip ve değerler

Hakkımızda sayfası Spex'in arkasındaki misyonu, insanları ve ilkeleri tanıtıyor. Değerler, güvenlik ve sorumluluk, mühendislik mükemmelliği, hassasiyet, şeffaflık ve uzun vadeli etki, koyu bir bento ızgarasında; slogan gibi değil, taahhüt gibi okunuyor.

Mobil hakkımızda sayfası: “We build secure technologies for real-world operations”, biz kimiz ve “Expert Minds” ekip bölümü
Mobil hakkımızda sayfası: “We build secure technologies for real-world operations”, biz kimiz ve “Expert Minds” ekip bölümü
Mobil hakkımızda sayfası: “We build secure technologies for real-world operations”, biz kimiz ve “Expert Minds” ekip bölümü
Mobilde hakkımızda: misyon, biz kimiz ve ekip.
Şirket değerlerinin koyu bento ızgarası: güvenlik ve sorumluluk, hassasiyet ve disiplin, mühendislik mükemmelliği, şeffaflık, uzun vadeli etki
Bento ızgarasında değerler; gerçekten okunacak kadar kısa.

İş ortakları, müşteri yorumları ve içgörüler

Kanıt kendi koyu bölümlerine sahip: sektöre göre etiketlenmiş bir iş ortağı ızgarası, isim ve unvanlarla müşteri yorumları ve Spex mühendislerinin yazıları için bir içgörüler alanı. Her biri, her kurumsal alıcının sorduğu soruya cevap veriyor: Onlara başka kimler güveniyor?

Sektöre göre etiketlenmiş iş ortağı logoları ve “See all partners” düğmesiyle koyu “Trusted Technology & Security Partners” ızgarası
Sektöre göre gruplanmış iş ortakları; her biri kısa bir açıklamayla.
Mobil koyu bölümler: güvenilir iş ortakları, alıntılı müşteri yorumları ve yazılım, güvenlik ve altyapı üzerine içgörüler
Mobil koyu bölümler: güvenilir iş ortakları, alıntılı müşteri yorumları ve yazılım, güvenlik ve altyapı üzerine içgörüler
Mobil koyu bölümler: güvenilir iş ortakları, alıntılı müşteri yorumları ve yazılım, güvenlik ve altyapı üzerine içgörüler
Mobilde iş ortakları, müşteri yorumları ve içgörüler.

SSS, iletişim ve görüşme planlama

Kısa bir SSS, kimse sormak zorunda kalmadan Spex'in müşterilerle nasıl çalıştığını cevaplıyor. Kapanıştaki eylem çağrısı ziyaretçileri sistemlerini güvenli ve modern hâle getirmeye davet ediyor; üç adımlı randevu aracı, tarih ve saat, bilgiler, onay, hem sayfada hem alt bilgide duruyor.

Açık bir cevap ve “Still have a question?” destek bağlantısıyla “Clear Answers For Our Operations” SSS bölümü
SSS, ilk görüşmede gelecek soruları önceden cevaplıyor.
Mobil SSS, telefon, e-posta ve haritalı “Get in touch with us” iletişim sayfası ve “Building Trusted Technologies” bölümü
Mobil SSS, telefon, e-posta ve haritalı “Get in touch with us” iletişim sayfası ve “Building Trusted Technologies” bölümü
Mobil SSS, telefon, e-posta ve haritalı “Get in touch with us” iletişim sayfası ve “Building Trusted Technologies” bölümü
Mobilde SSS ve iletişim: Spex'e ulaşmanın tüm yolları tek ekranda.
Noktalı dünya haritası üzerinde “Book a call” düğmeli “Ready to Secure and Modernise Your Systems?” eylem çağrısı
Kapanışta tek soru, tek eylem.
Üç adımlı “Book a Call with SPEX Technology” aracı: takvim ve saat seçimi, iletişim formu ve toplantı onayı
Sayfadan çıkmadan üç adımda randevu.
Açık cevaplı mobil SSS, randevulu kapanış çağrısı ve saat seçenekli randevu takvimi
Açık cevaplı mobil SSS, randevulu kapanış çağrısı ve saat seçenekli randevu takvimi
Açık cevaplı mobil SSS, randevulu kapanış çağrısı ve saat seçenekli randevu takvimi
Aynı randevu akışı, telefona göre boyutlandırıldı.
Randevu aracı, şirket tanımı, hızlı bağlantılar, hizmetler, sosyal medya ve büyük soluk Spex logosuyla alt bilgi
Alt bilgi bile görüşme planlanacak bir yer.

Sonuçlar

  • Profesyonel, güvenilir ve kurumsala hazır görünen, yenilenmiş bir site.
  • Hizmetler, projeler ve şirket konumlandırması için daha net bir gezinme ve sayfa yapısı.
  • 55° motifinin temel arayüz öğelerine taşındığı özgün bir görsel kimlik.
  • Logodan bu yana Spex'in uzun vadeli tasarım ortağı olan Beew ile marka sürekliliği.

Yeni site, Türkçe ve İngilizce olarak spex.com.tr adresinde yayında. [1]

Çıkarımlar

  • Tutarlı kullanılan tek bir marka detayı, bir düzine süs efektinden iyidir.
  • Güvenlik sektöründe sakin tasarım, yetkinlik olarak okunur.
  • Hizmetleri süreç olarak anlat ki alıcı işi gözünde canlandırabilsin.
  • Randevuyu sayfanın içine koy; her fazladan adım bir potansiyel müşteri kaybettirir.

Sık sorulan sorular

Spex nedir?

Spex (SPEX Yazılım ve Siber Güvenlik Hizmetleri A.Ş.), 2020'de kurulan, merkezi İzmir'de olan bir yazılım ve siber güvenlik şirketi. Özel yazılım geliştirme, BT stratejisi ve danışmanlığı, sunucu ve ağ çözümleri, siber güvenlik, yapay zekâ destekli çözümler ile altyapı ve bulut hizmetleri sunuyor.

Spex için ne tasarladın?

Kurumsal siteyi: masaüstü ve mobil için bir ana sayfa ve beş-altı iç sayfa (hizmetler, sızma testi, hakkımızda, iletişim ve diğerleri), logonun 55° açısı etrafında kurulan bir arayüz sistemi ve görüşme planlama akışı. Spex logosunu stüdyom daha önce tasarlamıştı; site o çalışmanın devamı.

Proje ne kadar sürdü?

2025'te yaklaşık bir ay; araştırma ve yapıdan geliştirmeye hazır masaüstü ve mobil tasarımlara kadar. Kapsam yalnızca UI/UX'ti, geliştirme dahil değildi.

Kurumların güvendiği bir siber güvenlik şirketi sitesi nasıl tasarlanır?

Hacker klişelerini bırak ve ciddi bir iş ortağı gibi tasarla: sakin renkler, güçlü bir hiyerarşi ve bol boşluk. Her hizmeti net bir süreç olarak anlat, güvenilirliği (ekip, değerler, iş ortakları, müşteri yorumları) görünür kıl, sık sorulan soruları baştan cevapla ve görüşme planlamayı tek adımlık bir işe dönüştür.

Benim teknoloji şirketim için web sitesi ya da marka tasarlayabilir misin?

Evet. Erken aşama AI, SaaS, fintech ve Web3 ekipleriyle web sitesi, ürün arayüzü, marka ve tasarım sistemi üzerinde çalışıyorum. İletişim sayfasından bir görüşme ayarla ya da mesaj gönder.

Kaynaklar

  1. [1] Spex, official website
  2. [2] LinkedIn, SPEX Yazılım ve Siber Güvenlik Hizmetleri A.Ş.
  3. [3] Spex, About

Tasarlanacak bir ürünün mü var?

Ekiplerin karmaşık ürünlerini saniyeler içinde anlaşılan web sitelerine ve arayüzlere dönüştürüyorum. Bana ürününü anlat.

Sıradaki proje

RedCyber

Projeyi incele
RedCyber

Araçlar

Sosyal medya


© 2026 | Merak ve kafeinle yapıldı.

TR