ÇEKÜL Vakfı

ÇEKÜL Vakfı

Navigasyon, Görsel Kimlik ve Arkasındaki Drupal Platformunun Yeniden Kurulması

Müşteri ÇEKÜL Vakfı (Çevre ve Kültür Değerlerini Koruma ve Tanıtma Vakfı)
Kapsam UX/UI Tasarım, Bilgi Mimarisi, Drupal Platform Mühendisliği
Yıl 2024
Teknoloji Drupal 10, Migrate API, özel içerik tipleri

ÇEKÜL Vakfı, on yılı aşkın süredir aynı platform üzerinden yayın yapıyordu. Yedi program alanı ve kırktan fazla sayfa boyunca içerik birikmiş, navigasyon ve görsel yapı bu birikime ayak uyduramamış, altyapıdaki Drupal 7 kod tabanı ise destek ömrünün sonuna yaklaşmıştı. OctoHaus siteyi uçtan uca yeniden kurdu: ön yüzde yeni bir bilgi mimarisi ve görsel dil, arka planda ise yeniden tasarlanmış bir içerik modeline ve tam kapsamlı bir içerik migrasyonuna sahip bir Drupal 10 platformu.

01 / Sorun

Mevcut site, onlarca yıllık içeriği destekleyecek bir yapıya sahip olmadan birikmişti. Her sayfanın üstünde birbiriyle rekabet eden iki navigasyon katmanı bulunuyordu. Tüm program sayfaları birbirinin aynısı görünüyordu; kullanıcıya nerede olduğuna veya programların birbirinden nasıl farklılaştığına dair görsel bir ipucu vermiyordu. İç sayfalar, içeriği taramayı ve gezinmeyi zorlaştıran ağır sol kenar çubuklarına dayanıyordu.

Yapısal sorunların ötesinde, ÇEKÜL yedi farklı program alanında faaliyet gösteriyor; her birinin kendi hedef kitlesi ve amacı var. Vakfın çalışmalarını anlamaya çalışan ilk kez gelen bir ziyaretçi ile bağış yapmak isteyen mevcut bir destekçi, aynı farklılaşmamış deneyimde geziniyordu. Site, ikisinden birini kaybetmeden her ikisine de hizmet etmeliydi.

Görünenin altında, platformun kendisi de sorunun bir parçasıydı. Site, Ocak 2025'te destek ömrü sona eren Drupal 7 üzerinde, on yılı aşkın süre boyunca tasarlanarak değil organik olarak büyümüş bir içerik modeliyle çalışıyordu. Platformu düzeltmeden yalnızca navigasyonu düzeltmek, aynı yapısal borcun üzerine daha iyi bir arayüz inşa etmek anlamına gelirdi.

Eski tasarım Eski Tasarım

Yeni tasarım Yeni Tasarım

02 / Yaklaşım

Proje, bir brief ve mevcut sitenin hem tasarım hem mühendislik tarafından yakından incelenmesiyle başladı. Biçimsel bir kullanıcı araştırması yürütmek yerine, vakfın kendi kitle ve içerik anlayışından ve eski sitenin açıkça ortaya koyduğu şeyden yararlandık: çok fazla bilgi, yeterli yapı yok, üstelik bunu artık rahatça taşıyamayan bir platform üzerinde.

Yeniden tasarıma paralel ilerleyen katmanlar halinde yaklaştık: navigasyon ve bilgi mimarisi, görsel dil ve altyapıdaki platform. Tek bir ekran tasarlanmadan önce tüm bilgi mimarisi haritalandı: yedi bölüm, kırktan fazla sayfa, her biri tanımlanmış bir içerik yapısıyla. Bu harita, hem yeni sayfa şablonlarının hem de 05. bölümde anlatılan yeni Drupal içerik modelinin temelini oluşturdu.

Bilgi mimarisi haritası Tek bir ekran tasarlanmadan önce tüm bilgi mimarisi haritalandı: yedi bölüm, kırktan fazla sayfa, her biri tanımlanmış içerik yapısıyla.

03 / Navigasyonu Sadeleştirmek

Mevcut sitede birbiriyle rekabet eden iki navigasyon katmanı vardı. Üst çubuk Hakkımızda, Haberler, Makaleler gibi ana menüyü taşıyordu. Altında, tam genişlikte ikinci bir çubuk ÇEKÜL'ün tüm bireysel programlarını listeliyor, aralarında net bir hiyerarşi olmadan paralel bir navigasyon oluşturuyordu. Kullanıcıların neyin birincil, neyin olmadığını anlamasının tutarlı bir yolu yoktu.

Bunu, dört gruplandırılmış kategoriye sahip tek bir birincil navigasyona indirdik. Sosyal medya bağlantıları, mağaza ve bülten gibi ikincil aksiyonlar, yön bulmayı hedeften ayırarak üstteki bir yardımcı çubuğa taşındı.

Navigasyon eski tasarım Eski Tasarım

Navigasyon yeni tasarım Yeni Tasarım

Aynı sorun, her iç sayfada

Her iç sayfa aynı deseni izliyordu: tam bölüm menüsünü taşıyan bir sol kenar çubuğu, ana içerikle dikkat için yarışıyordu. Kenar çubuğu kullanıcıların gezinmesine yardımcı olmuyor, aradıklarına ulaşmadan önce gürültü ekliyordu.

Akademi sayfası buna bir örnektir. Kenar çubuğu kaldırıldı, bölüm bağlamı kalıcı üst navigasyona taşındı ve sayfa içerikle başlayacak şekilde yeniden yapılandırıldı. Eğitim içeriği artık hedef kitle ve program türüne göre organize edilmiş olup sayfadan doğrudan erişilebilir durumda.

Akademi sayfası önce Önce

Akademi sayfası sonra Sonra

Bağlamsal içerik bileşenleri Kenar çubuğuna tüm menüyü taşıtmak yerine, kullanıcıların sıradaki ihtiyacına göre her sayfaya bağlamsal içerik bileşenleri eklendi.

Aynı yapı, farklı sayfa

Bağış sayfası aynı deseni izliyordu: her bağış seçeneğini listeleyen sarı bir kenar çubuğu, yoğun bir metin bloğu ve altta üst üste yığılmış banka hesap bilgileri. Sayfa, kullanıcıların harekete geçmeden önce çok fazla şeyi işlemesini istiyordu.

Yeni sayfa net bir başlıkla açılıyor, bağış seçeneklerini taranabilir kartlar olarak düzenliyor ve banka bilgilerini, en başından dikkat için rekabet etmek yerine ihtiyaç duyulduğunda görünür olacak şekilde sayfanın altına taşıyor.

Bağış sayfası önce Önce

Bağış sayfası sonra Sonra

04 / Program Renk Sistemi ve Bağlamsal Navigasyon

ÇEKÜL dokuz farklı program alanında faaliyet gösteriyor, ancak eski site hepsini birbirinin aynısı gösteriyordu. Aynı düzen, aynı vurgu rengi, programlar arasında görsel bir ayrım yok.

Program renkleri önce 1 Program renkleri önce 2 Önce

Her programa, başlığında, navigasyon öğelerinde ve aksiyon butonlarında tutarlı bir şekilde uygulanan ayrı bir renk atandı. Ağaçlandırma hakkında okuyan bir kullanıcı ile kültürel mirası keşfeden bir kullanıcı artık tamamen farklı görsel bağlamlara sahip ve her zaman tam olarak nerede olduklarını biliyorlar.

Program renkleri uygulanmış Her program; navigasyon, başlıklar ve kartlar genelinde tutarlı bir şekilde uygulanan kendi rengini taşır.

Program sayfası örneği 1 Program sayfası örneği 2

Sistem tüm sitede ölçekleniyor

Renk sisteminin ölçeklenmesi giriş

Renk sistemi program sayfalarıyla sınırlı kalmadı. Ana sayfadaki CTA'lar, promosyon blokları ve editoryal bölümler dahil her çapraz bağlantı bileşeni, işaret ettiği programın rengini devralıyor. Bilgi Ağacı içeriğini tanıtan bir blok turkuaz renkte görünüyor. Bir yayıncılık bölümü mavi renkte görünüyor. Kullanıcıların bağlamı anlamak için etiketi okumasına gerek yok; renk bunu önce yapıyor.

Renk sistemi örneği 1 Renk sistemi örneği 2 Renk sistemi örneği 3

Ana sayfa program renkleri Ana sayfa bileşenleri program renklerini devralıyor; sistem ekstra bir navigasyon ipucuna gerek kalmadan çalışıyor.

05 / Platform ve Migrasyon: Drupal 7'den Drupal 10'a

Görsel ve yapısal yeniden tasarım, ancak altındaki platform bunu taşıyabiliyorsa anlam kazanır. Bu yüzden CMS migrasyonu, sonraki bir aşama değil aynı projenin parçası olarak ele alındı.

Yerinde sürüm yükseltmesi gerçekçi değildi. Drupal 7'den Drupal 10'a geçmek kademeli bir güncelleme değil, fiilen bir yeniden inşadır: yeni bir tema katmanı, yeni bir modül ekosistemi ve bu projede zaten yeni bilgi mimarisini desteklemek için şekil değiştirmesi gereken bir içerik modeli. Birebir taşıma yapmak yerine migrasyonu, veritabanı şemasını yeni sitenin gerçekten ihtiyaç duyduğu yapı etrafında yeniden tasarlama fırsatı olarak ele aldık.

Eski şema, on yılı aşkın süre boyunca her seferinde bir alan ve bir içerik tipi eklenerek büyümüştü; program sayfaları, haberler ve makaleler birbiriyle örtüşen ve tutarsız yapılandırılmış node tiplerinde tutuluyordu. İçerik modelini, yeni bilgi mimarisinden dışarı doğru yeniden kurduk: yedi program alanının her biri, kendi rengini taşıyan, eğitim ve haber içerikleri için kendi taksonomisine sahip, her program için alanları tekrar tekrar tanımlamak yerine paylaşılan içerik tipleriyle (haberler, makaleler, etkinlikler) tanımlı ilişkilere sahip kendi yapılandırılmış içerik tipine dönüştü.

Yeni şema devreye alındıktan sonra, on yılı aşkın yayın geçmişine yayılan makaleleri, haberleri, program sayfalarını, personel ve eğitim içeriklerini taşımak için Drupal'ın Migrate API'sini kullandık. Eski taksonomi terimleri yeni program yapısına eşlendi; böylece mevcut içerik, elle yeniden etiketlenmek yerine kendi programının rengini ve konumunu otomatik olarak aldı. Migrasyon, tek seferde büyük bir geçiş yerine içerik tipi tipi aşamalı olarak yürütüldü; her geçiş öncesinde canlı siteye karşı doğrulandı.

Drupal tarafındaki sonuç: desteklenen, aktif olarak bakımı yapılan bir çekirdek üzerinde çalışan bir platform, editörlerin ve ziyaretçilerin siteyi bugün gerçekten nasıl kullandığına uyan bir içerik modeli ve taşıma sırasında kaybolmak yerine devam ettirilen her bir eski içerik.


Yeniden tasarıma değil, yeniden kuruluma ihtiyacı olan bir Drupal platformunuz mu var?

İster eski bir CMS, ister artık siteye uymayan bir içerik modeli, ister migrasyon bekleyen yıllar süren içerik olsun, yardımcı olabiliriz.

Bi'kahve?

Yeni bir fikir, mevcut bir platform veya teknik bir dönüşüm... İhtiyaçlarınızı dinlemek ve birlikte nasıl değer katabileceğimizi konuşmak için tanışalım.

30 dakikalık ücretsiz ön görüşme ayarlayın
iletişime
geçin
İstanbul
Caferağa Mah. Şair Nefi Sk. No:46/5
Moda / Kadıköy / İstanbul
yol tarifi
Bi'kahve?
30 dakikalık ücretsiz ön görüşme ayarlayın

OctoHaus, dijital ürünler ve e-ticaret çözümleri alanında faaliyet gösteren Türkiye merkezli bir yazılım ajansıdır. Deneyimli ekibimizle Drupal, Laravel, React.js, Vue.js ve diğer modern web teknolojilerini kullanarak özel web uygulamaları, e-ticaret platformları ve entegrasyonlar geliştiriyor; sürekli bakım ve destek hizmetleri sunuyoruz.

İşletmeler için güvenilir, ölçeklenebilir ve yüksek performanslı dijital altyapılar tasarlıyor; kullanıcı deneyimini, performansı ve uzun vadeli sürdürülebilirliği ön planda tutan çözümler üretiyoruz.

© 2026 OctoHaus Technology