Fikrin Doğuşu
Bu projeye başlamadan önce elimde sadece bir fikir vardı: Outlast Trials 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
Tasarıma Figma'da wireframe ile başladım. İlk amacım sayfanın iskeletini oturtmaktı — navigasyon nerede duracak, içerik nasıl ayrışacak, mobil görünüm nasıl davranacak. Wireframe aşamasında renk, font, görsel gibi detaylara hiç bakmadım. Çünkü yapıyı sağlamlaştırmadan üstüne dekor koymak, temelsiz bir binaya tavan süsü asmak gibi olurdu.
Tema kararında oyunun kendisinden ilham aldım: karanlık, klinik, soğuk. Renk paleti siyah-kırmızı 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ı.
Karakterler, Mekanlar, Denekler, 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.
Güvenlik tarafında kullanıcıdan gelen tüm girdiler htmlspecialchars() ile sanitize edildi. Doğrudan veritabanı sorgusu olmasa da bu alışkanlığı edinmek, ileride daha büyük projelere geçişte sağlam bir temel oluşturuyor.
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
En büyük zorluk, deneklerin saate göre durumunu değiştirmek oldu, yeni başladığım için, biraz zorlandım, daha sonra mantığını kavradım. her bir denek için ayrı ayrı metinler kullandım. Resimlerin konumunu ve pozisyonunu da ayarlamam gerekiyordu ana menüdeki üç başlık ve resimler.
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, koyu gri ve kırmızının 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 bana teknik becerilerden çok zihinsel alışkanlıklar kazandırdı. Bir özelliği kodlamadan önce kâğıda çizmek, geliştirme süresini önemli ölçüde kısalttığını bizzat yaşadım. Wireframe aşamasına harcanan her bir saat, sonradan yapılan düzeltmelerde üç saatlik tasarruf sağladı.
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.