Tema Bazlı Sayfalama: Kullanıcı Deneyimini İyileştirme devlog-ist/landing

Devlog-ist/landing projesi, özelleştirilebilir bir açılış sayfası deneyimi sunmayı amaçlamaktadır. Kullanıcı deneyiminin önemli bir yönü olan pagination, kullanıcıların içerik arasında kolayca gezinebilmesini sağlar. Bu yazıda, farklı portföy temalarıyla uyumlu temalı stiller ekleyerek pagination’ı nasıl geliştirdiğimizi inceleyeceğiz.

Zorluk

Önceki pagination, genel bir Laravel stiline dayanıyordu ve bu, farklı portföy temalarının estetiği ile her zaman uyumlu değildi. Bu tutarsızlık, genel kullanıcı deneyimini olumsuz etkiliyordu. Amaç, her tema ile uyumlu bir şekilde bütünleşen pagination stilleri oluşturmaktı; böylece daha şık ve tutarlı bir görünüm elde edilecekti.

Çözüm

Genel Laravel pagination’ını dört temalı parça ile değiştirdik:

• default: koyu arka plan, beyaz/mono metin, kırmızı aktif durum
• simple: açık mavi arka plan, mavi aktif durum
• retro: siyah kenarlar, sert gölgeler, basma etkisi
• nan: serif font, minimal gri kenarlar, ters aktif durum

Her kurumsal varyant, temel temasının pagination parçasını yeniden kullanarak, ilgili temalar arasında tutarlılığın sağlanmasını garanti eder.

Uygulama

Uygulama, her pagination stili için ayrı Blade şablonları oluşturmaktan oluşuyordu. Bu şablonlar, istenen görünümü elde etmek için gerekli HTML yapısını ve CSS sınıflarını tanımlar. Örneğin, retro teması, vintage bir his yaratmak için siyah kenarlar ve sert gölgeler kullanır:

Bu HTML parçası, retro pagination’ın temel yapısını göstermektedir. pagination retro sınıfı, bu tema için özel stilleri uygular. Her tema, benzer bir şekilde özel bir Blade bileşeni almıştır.

Faydalar

• Geliştirilmiş Kullanıcı Deneyimi: Temalı pagination, kullanıcılara daha tutarlı ve görsel olarak çekici bir deneyim sunar.
• Artan Özelleştirme: Her portföy teması artık uyumlu bir pagination stili ile daha da geliştirildi.
• Bakım Kolaylığı: Parçaları kullanarak, pagination stilleri modüler hale gelir ve kolayca bakım yapılabilir.

Sonuç

Temalı pagination uygulaması ile devlog-ist/landing projesindeki kullanıcı deneyimini önemli ölçüde geliştirdik. Bu yaklaşım, küçük detayların bir web uygulamasının genel kalitesi üzerinde büyük bir etki yaratabileceğini göstermektedir. UI tasarlarken, küçük bileşenler üzerinde temalandırma uygulamanın, büyük UX kazançları sağlayabileceğini göz önünde bulundurun.