1001renkWEB STÜDYO
Esc
    ↑↓ gezin↵ açCtrlK her yerden aç1001renk.net
    Özel tasarım referansı

    Gabile.net

    LGBTQ+ sohbet, eşleşme ve topluluk platformu

    • Topluluk
    • Eşleşme
    • Açık
    Hizmet
    Tasarım + kodlama
    Tema
    Açık
    Hız
    Lighthouse 95+
    98 Lighthouse Mobil uyumlu SEO hazır
    Genel bakış

    Gabile.net tasarım hikâyesi

    Gabile.net, LGBTQ+ topluluğu için sohbet, eşleşme ve paylaşımı bir araya getiren bir platform. Aynı markanın sohbet odaklı sitesi GabileSohbet.net'ten farklı olarak burada üyeler profil açıyor, eşleşiyor ve bir topluluk akışında paylaşım yapıyor; tasarımı da bir sosyal ağ gibi kurguladık.

    Kategori
    Topluluk
    Tema yapısı
    Açık tema
    Kapsam
    Arayüz + kodlama
    Tipografi
    Poppins
    Düzen
    Mobil öncelikli
    Performans
    Lighthouse 95+ hedefi

    Renk paleti

    • #F9FAFB
    • #0B0B0B
    • #EFAF37
    • #4D4D4E
    • #B3B3B2

    Tipografi

    Aa Poppins · 300 / 500 / 600 / 700

    Öne çıkanlar

    Tasarımın güçlü yanları

    Proje yazısı

    Proje künyesi

    • Alan adı: gabile.net
    • Proje türü: Topluluk, eşleşme ve sohbet platformu
    • Görünüm: Açık zemin, gökkuşağı gradyanlı vurgular
    • Altyapı: PHP tabanlı özel yazılım
    • Kapsam: Arayüz tasarımı ve kodlama

    Sosyal ağ düzeni: üç sütun, tek akış

    Gabile.net'in ana sayfası bir tanıtım sayfası değil, topluluğun kendisi. Masaüstünde üç sütunlu bir düzen kurduk: solda katılım kartı, popüler üyeler ve yeni katılanlar; ortada eşleşme alanı ve topluluk akışı; sağda Gold kulübü, tartışma konuları, makaleler ve SSS. Ziyaretçi sayfayı kaydırdıkça hem insanları hem konuşmaları görüyor.

    Açık zemin bilinçli bir tercih: koyu temalı sohbet sitelerinin aksine Gabile.net gündüz de rahat kullanılan, ferah bir sosyal alan gibi görünüyor. Topluluğun simgesi olan gökkuşağı ise yalnızca başlık çizgisinde, düğmelerde ve rozetlerde vurgu olarak kullanılıyor.

    Üst menüyü üç bağlantıyla sınırlı tuttuk: Keşfet ve Akış, Gold Ol ve Sohbete Bağlan. Giriş yapma ve ücretsiz üye olma düğmeleri sağ köşede; yeni gelen ziyaretçi neyi nerede bulacağını tek satırda görüyor.

    Eşleşme ve ruh hali etiketleri

    "Eşleşme Alanı", kartları kaydırarak ya da altındaki düğmelerle beğenip geçmeye dayanıyor; mobilde dokunmatik hareket, masaüstünde tıklama aynı sonucu veriyor. Topluluk akışındaki her paylaşımın yanında "Kafa dengi arayanlar", "Özgür ruh" ya da "Müzik ve sohbet" gibi bir ruh hali etiketi var. Bu küçük etiket, kişinin o an ne aradığını tek bakışta anlatıyor ve doğru insanların birbirini bulmasını kolaylaştırıyor.

    Gold üyelik ve içerik bölümleri

    Gold Üyeler Kulübü kartı, ücretli üyeliğin ayrıcalıklarını ana akışı bölmeden sağ sütunda sunuyor; aktif Gold üyeler ise sayfanın en üstündeki kaydırıcıda görünüyor. Tartışma konuları ve makaleler bölümü, topluluğa özgü sorular üzerine yazılmış içeriklerle hem okuru siteye bağlıyor hem de arama motorlarından ziyaretçi getiriyor. Aynı markanın sohbet sitesi için GabileSohbet.net referansımıza göz atabilirsiniz.

    Bir topluluk platformunda öğrendiklerimiz

    Eşleşme ve paylaşım bir arada olduğunda tasarımın işi, mahremiyet ile görünürlüğü dengelemek. Gabile.net'ten çıkan önerilerimiz:

    • Ruh halini göster, kimliği zorlama. Etiketler, kişinin kendini fazla açmadan ne aradığını söylemesini sağlar.
    • Ücretli üyeliği akışın dışında tut. Gold teklifi yan sütunda durduğunda topluluk deneyimi reklam gibi görünmez.
    • Kapsayıcılığı metinle de söyle. "Güvenli ve kapsayıcı alan" bölümü, renklerin anlattığını açık bir taahhüde dönüştürür.

    Benzer bir topluluk ürünü için özel tasarım sürecimizi inceleyebilir, güvenli bir PHP altyapısı için PHP güvenlik kurallarımızı okuyabilirsiniz.

    Bölüm bölüm

    Sayfa detayları

    01Gabile.net · içerik bölümü
    02Gabile.net · makale sayfası
    Teknik yaklaşım

    Hızlı, erişilebilir, aranabilir

    Platform PHP tabanlı özel bir yazılım üzerinde çalışıyor. Ana sayfadaki görsellerin hepsinin boyutu tanımlı ve büyük çoğunluğu tembel yükleniyor; SSS yerel açılır bölümlerle çalışıyor. Site ve SSS bilgileri yapılandırılmış veriyle işaretli, yazı tipleri önceden bağlanıyor.

    • Semantik HTML5
    • Mobil öncelikli CSS
    • Lazy yükleme + srcset
    • Schema işaretlemeleri
    • Açık/koyu tema
    • Erişilebilir odak durumları

    Benzer bir proje mi istiyorsun?

    Fikrini anlat; 24 saat içinde dönüş yapıp ücretsiz keşif görüşmesi ayarlayalım.

    Çalışma şekli

    Bu proje nasıl ilerledi

    1. KeşifHedef kitle, rakip ve içerik analizi yapıldı.
    2. TasarımFigma'da ana sayfa ve iç sayfalar çizildi.
    3. KodlamaTemiz, hızlı ve erişilebilir kodla hayata geçirildi.
    4. YayınSEO ve hız kontrolleriyle canlıya alındı.
    Keşfetmeye devam et

    Diğer referanslar

    ÜCRETSİZ KEŞİF

    Projen için premium bir tasarım ister misin?

    Fikrini anlat, 24 saat içinde dönüş yapalım. Keşif görüşmesi ve ilk teklif ücretsiz.