Fikrin Doğuşu
Bu projeye başlamadan önce elimde sadece bir fikir vardı: Rainbow Six Extraction oynayan biri olarak, oyun içindeki karmaşık yapıyı bir yerde düzgünce görmek istiyordum. Karakterler, mekanlar, cihazlar — bunların hepsini bir araya getirecek kapsamlı bir Türkçe kaynak yoktu. O boşluğu doldurmak için kolları sıvadım.
Projeyi sıfırdan planlarken kendime şu soruyu sordum: "Bu siteyi bir kullanıcı olarak açsaydım, ne görmek isterdim?" Cevap netti — hızlı yüklensin, okunması kolay olsun, her bilgi tek tık uzakta olsun. Geri kalanı bu üç kural üzerine inşa edildi.
Yaptığım sitenin resimlerine Buradan, Bakabilirsiniz
Tasarım Süreci
Bu tasarım da oyunun kendisi gibi temiz, fonksiyonel ve temaya uygun olmalıydı. Amacım, oyuncuların siteye girdiklerinde oyunun atmosferini hemen hissetmelerini sağlamaktı. Bu yüzden görsel hiyerarşi, renk paleti ve tipografi seçimlerimi bu hedefe göre yaptım. ve Outlast Trials Projemdeki gibi karanlık ve gergin bir atmosfer yerine, Rainbow Six Extraction'ın daha bilim kurgu ve gizemli havasını yansıtacak bir tasarım dili benimsedim. ve Outlast Trials Projemdeki gibi karakterler, mekanlar ve onların hikayesini ele aldım.
Tema kararında oyunun kendisinden ilham aldım: sarı renk tonu, yayılan bir virüs teması, soğuk. Renk paleti Sarı-Siyah oyunun teması eksen üzerine kuruldu. Tipografide ise iki farklı aileden font seçtim — biri başlıklar için keskin ve baskın, diğeri gövde metinler için okunabilir ve sakin. Bu iki zıt karakter bir arada çalışınca hiyerarşi kendiliğinden oluştu.
CSS tarafında her şeyi sıfırdan yazdım; hazır UI kütüphanesi kullanmadım. Bunun sebebi basit: hazır bileşenler hız kazandırır ama özgürlük kısıtlar. Ben her piksel üzerinde kontrolü elinde tutmak istedim.
HTML ve CSS ve PHP ile Bileşen Mimarisi
Arayüzü HTML ve CSS ile geliştirdim. Sayfa yapısını anlamlı semantik etiketlerle kurdum: her bölüm kendi <section> bloğuna, navigasyon <nav> içine, ana içerik <article> etiketine girdi. Bu yaklaşım hem erişilebilirliği artırdı hem de CSS seçicilerini temiz tutmamı sağladı.
Operatörler, Mekanlar, ve Mutasyonlu Bireyler, hakkında uzun metinleri ve PHP dilini kullanarak yaptım. Mekanlar için tek php, denekler için tek php, karakterler için tek php dosyası oluşturdum. ve her butona tıklandığında ilgili php dosyasına yönlendirdim. Böylece içerik yönetimi kolaylaştı, yeni bir karakter eklemek istediğimde sadece ilgili php dosyasına ekleme yapmam yeterli oldu.
CSS Grid ve Flexbox'ı birlikte kullandım: Grid üst düzey sayfa düzenini yönetirken, Flexbox içerik bileşenlerinin hizalamasını üstlendi. İkisi arasındaki sınırı net tutmak, ileride düzeltme yaparken nereye bakacağımı bilmemi kolaylaştırdı.
PHP ve Sunucu Tarafı
Sunucu tarafında PHP'yi iki farklı amaçla kullandım: Uzun metinler ve her karakter ve mekan için ilgili yere yönlendirme.
Responsive Tasarım
Responsive yaklaşımı "mobil önce" prensibiyle uyguladım. Önce küçük ekran için temel düzeni kurdum, ardından media query'lerle genişleyerek masaüstü görünümüne ulaştım. Bu yöntem, mobil deneyimi ikincil bir düşünce değil, tasarımın çekirdeği haline getirdi.
Kenar çubuğu ve çok sütunlu düzenler belirli kırılma noktalarında tek sütuna düşecek biçimde ayarlandı. Yazı boyutları için sabit piksel değilleri yerine clamp() fonksiyonunu tercih ettim — böylece tipografi ekran genişliğiyle orantılı olarak akıcı bir şekilde ölçekleniyor. Dokunmatik ekranlar için buton ve bağlantı alanları yeterince geniş tutuldu.
Karşılaştığım Zorluklar
Tek kişi olduğumdan, Karakterlerin, mekanların, ve mutasyonlu bireylerin, detaylı bilgilerini ve görsellerin boyutunu ve konumunu ayarlamak uzun sürdü, ama sonunda buna değdi.
CSS tarafında ise renk tonunu ayarlamak uzun sürdü, oyunun atmosferini yansıtacak ama göz yormayacak bir palet bulmak için birçok deneme yaptım. Sonunda, sarı ve siyah dengesi istediğim etkiyi verdi.
PHP ise daha uzun metinler ve görselliği aynı anda yönettim, hem hikaye bazlı, hem de görsel olarak zengin bir deneyim yaratmak için kodu düzenlemek zor oldu, ama sonunda istediğim sonucu aldım.
Öğrendiklerim
Bu proje sadece bir oyun rehberi değil, aynı zamanda web geliştirme becerilerimi pekiştiren bir öğrenme deneyimi oldu. HTML ve CSS ile bileşen mimarisi oluşturmanın temellerini öğrendim, ve PHP dili dahil bu da kodun sürdürülebilirliğini ve genişletilebilirliğini artırdı.
PHP ile sunucu tarafı mantığını anlamak, frontend'i daha bilinçli yazmamı sağladı. Verinin nereden geldiğini, nasıl işlendiğini ve HTML'e nasıl dönüştüğünü görmek; full-stack düşünmeyi somutlaştırdı. Artık bir arayüz tasarlarken aynı anda sunucuda ne olduğunu da zihnimde canlandırabiliyorum.
Son olarak: tamamlamak, mükemmelleştirmekten daha değerlidir. İki hafta içinde yayına almak için bazı özelliklerden vazgeçtim — ve bu doğru karardı. Çalışan bir ürün, kafamda kalan mükemmel ürünün çok önünde. Bir sonraki projede bu denklemi daha erken kurmayı hedefliyorum.