Gezinme deneyiminizi iyileştirmek, site trafiğini analiz etmek ve içeriği kişiselleştirmek için çerezler ve benzeri teknolojiler kullanıyoruz. Tercihlerinizi istediğiniz zaman değiştirebilirsiniz.
Çerez onay tercihlerinizi yönetin.

Gezinme, güvenlik ve korumalı alanlara erişim gibi sitenin temel işlevleri için gereklidir. Bunlar devre dışı bırakılamaz.

Sitenin nasıl kullanıldığını anlamamıza yardımcı olur; performansı ölçüp iyileştirmemizi sağlar.

Valorant Türkiye

ESA E-Sports için Valorant Türkiye Ligi web sitesini tasarladık ve beraberinde lig ve eleme usülü çalışabilen özel bir turnuva yazılımı geliştirdik.

Ne Yaptık?
  • Back-End Geliştirme
  • Front-End Geliştirme
Ne Kullandık?
FigmaFigma, takımlar için bulut tabanlı bir tasarım ve prototipleme araçtır. Kullanıcı arayüzü tasarımlarını, wireframelerini ve prototiplerini oluşturmak için son yıllarda en yaygın kullanılan tasarım araçlarından birisidir.
EslintESLint, ECMAScript/JavaScript kodunda bulunan kalıpları tanımlayıp bildiren ve kodun daha tutarlı ve kolay bakım edilebilir hale getirilmesi amacıyla geliştirilen bir araçtır. Kod stilini zorunlu kılmak ve kod içinde potansiyel problemleri tespit etmek için kullanılır.
GitGit, dağıtık bir versiyon kontrol sistemidir. Git, çalışma alanınızda yaptığınız değişiklikleri (commit) bir depoya (repository) ekleyerek bu değişikliklerin tarihçesini tutar. Bu sayede, projeye katkıda bulunan tüm çalışanların yaptıkları değişiklikleri takip edebilir ve projenin gelişimini izleyebilirsiniz.
HTMLHTML bir metin işaretleme dilidir ve web sayfalarının içeriğini tanımlar. HTML, bir web sayfasında metinlerin, bağlantıların, resimlerin ve diğer öğelerin nasıl görüneceğini belirler. HTML dosyaları, bir web tarayıcısı tarafından açılarak görüntülenir.
JavascriptJavaScript, bir tarayıcı tabanlı programlama dilidir. Bu dil, web sayfalarında çalışan dinamik bir içerik oluşturulmasına yardımcı olur. Örneğin, JavaScript sayesinde bir web sayfasında bir formun doğruluğu kontrol edilebilir, bir sayfanın içeriği anında güncellenebilir ve kullanıcı etkileşimleri takip edilebilir.
LaravelLaravel, web uygulaması geliştirme için kullanılan ücretsiz ve açık kaynak bir PHP web framework'üdür. Modern, kolay bakım edilebilir ve skalable uygulamalar geliştirmeyi kolaylaştırmak amacıyla tasarlandı.
MysqlMySQL, bir veritabanı yönetim sistemidir. Bu sistem, verilerin depolanması, sorgulanması ve işlenmesi için kullanılır. MySQL, çeşitli işletim sistemlerinde çalışabilen ve yüksek performanslı bir veritabanıdır.
NpmNPM (Node Package Manager'ın kısaltması) JavaScript runtime ortamı Node.js için varsayılan bir paket yöneticisidir. Node.js projesi için gereken paketleri (kütüphaneler ve araçlar) yüklemek ve yönetmek için kullanılır.
PrettierPrettier, geliştiricilere temiz, tutarlı ve okunabilir kod yazma yardımcısı olan bir kod biçimleyicisidir. Kodun içeriğine odaklanmalarını sağlamak amacıyla, biçimlendirmeyi kendisi üstlenir.
Tailwind CSSTailwind CSS, geliştiricilere kolaylıkla özel kullanıcı arayüzleri oluşturma imkanı veren bir utility-first CSS framework'üdür. Özel stiller oluşturmak için karmaşık CSS kuralları yazmak zorunda kalmamak amacıyla tasarlanmıştır.
Vue.jsVue.js, kullanıcı arayüzleri inşa etmek için bir progressive JavaScript framework'üdür. Tek sayfa uygulamaları (SPAs) inşa etmek için kullanılır ve kolay öğrenilebilir, az kodla çalıştırılabilir ve büyük ölçekte uygulamaların inşasını ve bakımını kolaylaştırmak amacıyla tasarlanmıştır.
WebpackWebpack, JavaScript modüllerini ve diğer dosyaları (CSS, resimler, vb.) bir araya getirerek bir proje için optimize edilmiş bir dosya oluşturan bir modül bundler'dır. Web uygulamalarının geliştirilmesini ve dağıtılmasını kolaylaştırmak amacıyla tasarlanmıştır.
CSSCSS, web sayfalarının görünümünü (stilini) tanımlayan bir dildir. CSS, HTML veya XML gibi diller ile birlikte kullanılarak, bir web sayfasındaki metinlerin fontlarını, renklerini, boşluklarını ve diğer görünüm öğelerini belirlemenize yardımcı olur.
JSONJSON bir veri değişimi formattır. Bu formatta, veriler nesneler, diziler ve değerler şeklinde ifade edilir. Örneğin, bir web uygulamasında bir veri kaynağından alınan veriler, bir web sunucusu tarafından JSON formatına dönüştürülerek bir web tarayıcısına gönderilebilir.
PHPPHP bir sunucu taraflı programlama dilidir. Bu dil, web sunucuları üzerinde çalışarak dinamik bir içerik oluşturulmasına yardımcı olur. Örneğin, PHP sayesinde bir web formundan gönderilen verileri işleyebilir, veritabanı sorguları yapabilir ve web sayfalarının içeriğini oluşturabilirsiniz.
ESA E-Sports Logo

Türkiye merkezli olarak 2018 yılında kurulan ESA E-Sports, e-spor ve video oyunları sektöründe faaliyet gösteren, düzenlediği e-spor organizasyonları, ürettiği dijital içerikler ve eğlence sektörüne getirdiği yenilikçi bakış açısı ile Türkiye'de ve komşu coğrafyalarda pazar lideri olmayı vizyon edinmiş; aynı zamanda 2022 yılında Riot Games'in Türkiye bölgesi için 'Valorant Ekosistem Ortağı' olarak seçilmiş bir "yeni medya" şirketidir.

Valorant Türkiye Ligi'nin web sitesini tasarlamak ve geliştirmek için bambaşka bir süreç izledik. İlk olarak gereksinimleri topladık ve lig ve takımlar hakkındaki bilgi ekranları, maç planlama, puan durumu, turnuva görünümü, yönetim paneli ve kullanıcı ekranları gibi gerekli özelliklerin ve işlevlerin belirlenmesini web sitesinin ihtiyaçlarını belirledik. Ardından, genel estetik, kullanılabilirlik ve kullanıcı deneyimi gibi faktörleri göz önünde bulundurarak web sitesi için bir tasarım oluşturduk ve bu tasarımları çalışan bir web sitesine çevirebilmek için farklı teknolojiler kullandık. Süreç boyunca, her şeyin doğru çalıştığından ve gereksinimleri karşıladığından emin olmak için devamlı olarak uygulamayı test ettik ve hataları ayıkladık. Genel olarak, Valorant Türkiye Ligi web sitesinin tasarlanması ve geliştirilmesi diğer pek çok projeye kıyasla daha dikkatli bir planlama, ayrıntılara dikkat etme ve kapsamlı akışları ile özel, fakat bir o kadar da değerli bir proje oldu.

Valorant Türkiye Web Sitesi

Oyunseverler için bir arayüz tasarımı

Alışkın olduğumuzun aksine bizim gibi oyunseverler için bir arayüz tasarımı hazırlama fırsatını en iyi şekilde değerlendirebilmek için işe hedef kullanıcılardan geri bildirim ve içgörüleri toplayarak başladık ve mevcut oyun arayüzü tasarımlarını analiz ettik. Elde ettiğimiz çıktılara dayanarak oluşturduğumuz prototipler neticesinde hazırladığımız bu dinamik kullanıcı arayüzünün işlevsel, kullanıcı dostu ve görsel olarak çekici olmasını sağlamak öncelikli hedefimizdi.

Valorant Türkiye Web Sitesi Arayüz Tasarımı

Valorant Türkiye Web Sitesi Turnuva Sistemi Arayüz Tasarımı (UI Design)

Valorant Türkiye Web Sitesi Haberler Arayüz Tasarımı (UI Design)

Valorant Türkiye Web Sitesi Arayüz Bileşenleri (UI Components)

Maçlar ve Puan tablosundan çok daha fazlası...

Maç sonuçları ve puan tablolarının arkasında bir ucu akademik makalelere, matematiksel denklemlere kadar varabilecek pek çok detayın olduğunu biz de bu süreçte öğrendik.

Turnuva boyunca oluşturulan özel kuralları, lig ve farklı eleme modellerinden oluşan turnuva düzenlerinde uygulayarak tamamen kendine özel bir maç ve puanlama sistemi olan Valorant evrenindeki dinamiklere adapte olabilecek bir altyapı oluşturmak bizim için de adeta unutulmaz bir deneyim oldu.

Turnuva sistemi için bu özel gereksinimleri uygulayarak, sonunda takımları eşleştirmek için tanımlanabilecek neredeyse sınırsız özel kurallarla 5'ten fazla farklı modda çalışabilen esnek bir turnuva yazılımı teslim ettik.

Valorant Türkiye Web Sitesi Hero Section Arayüz (UI)
Valorant Türkiye Web Sitesi Haberler, Sıralamalar
Valorant Türkiye Tekrarlar
Valorant Türkiye Takım

Bir projeniz mi var?

Detayları görüşebilmek için sabırsızlanıyoruz.

Dijital projelerinizdeki ihtiyaçlarınızı karşılamak ve uzmanlık alanlarımızdaki tüm sorularınızı yanıtlamak için buradayız.