Technochef Digital Agency

UX / UI Design & Full-Stack Development · 2026

Technochef Digital Agency için sıfırdan uçtan uca tasarladığım ve geliştirdiğim kurumsal web sitesi ve bu sitenin tüm içeriğinin (hizmetler, başarı hikayeleri/referanslar, blog, sunum sayfası, iletişim bilgileri) kod bilmeden yönetilebildiği özel admin panel. Tasarım, yazılım ve içerik yönetim sisteminin tek elden çıktığı bir vaka çalışması.

Technochef Digital Agency

Technochef Digital Agency Deneme deneme deme

UX/UI Design · Full-Stack Development · Custom Admin Panel · 2026

Technochef, web tasarım, e-ticaret, sosyal medya yönetimi ve prodüksiyon hizmetleri sunan bir dijital ajans. Bu projede tasarımcı şapkamı çıkarmadan geliştirici şapkamı da taktım: sitenin görsel kimliğinden bilgi mimarisine, ön yüz kodundan arka planda çalışan içerik yönetim sistemine ve ajans ekibinin kullandığı özel admin paneline kadar her katmanı tek başıma tasarladım ve geliştirdim.

Projeyi diğerlerinden ayıran nokta, sitenin statik bir tanıtım sayfası olmaktan çıkıp; ajans ekibinin hizmetlerini, referans projelerini, blog içeriklerini ve satış sunumunu tek bir panelden, geliştiriciye ihtiyaç duymadan güncelleyebildiği canlı bir sisteme dönüşmesiydi.

Technochef Digital Agency anasayfa görünümü

( Buraya sitenin anasayfasının hero alanını gösteren, tarayıcı çerçevesi içinde geniş bir ekran görüntüsü/mockup'ı gelmeli — proje kapağı olacağı için markanın sarı-siyah kimliğini net gösteren bir kadraj seç )

Sorunlar

Bir ajans sitesinin gerçek ihtiyacı neydi?

Bir dijital ajansın web sitesi, aslında kendi vitrini. Sürekli yeni bir referans projesi tamamlanıyor, yeni bir hizmet ekleniyor, blogda paylaşılacak bir içerik oluşuyor. Klasik bir kurumsal site yaklaşımında bu güncellemelerin her biri geliştiriciye geri dönmeyi, kod değişikliği yapmayı ve yeniden deploy etmeyi gerektirir. Bu hem yavaş hem de ekibin pazarlama hızına ayak uyduramamasına yol açar.

Yeni bir referans projesi eklemek geliştirici müdahalesi gerektiriyor
Hizmet listesi güncellemeleri kod değişikliğine bağlı
Blog içeriği yayınlamak için ayrı bir teknik süreç gerekiyor
Satış görüşmelerinde kullanılacak sunum sayfası statik ve güncellenmesi zor
İletişim bilgileri, tema rengi gibi temel ayarlar bile koda gömülü
Statik, kod bağımlı içerik güncelleme sürecini temsil eden görsel

( Buraya 'kod bağımlı güncelleme' fikrini temsil eden bir görsel gelmeli — örneğin geliştirici ile pazarlama ekibi arasındaki gidiş-geliş sürecini anlatan basit bir şema/illüstrasyon )

Çözüm: Tasarım

Sarı-siyah kurumsal kimlik, sade bilgi mimarisi

Marka kimliğinde ajansın enerjik ve yaratıcı tarafını yansıtan sıcak bir sarı tonu (#EBB02D) ana vurgu rengi olarak belirledim; koyu zemin üzerinde bu rengin öne çıkmasını sağlayan bir kontrast kurdum. Site mimarisini ziyaretçinin karar yolculuğuna göre kurguladım: Anasayfa → Hizmetlerimiz → Referanslar → Sunum → Hakkımızda → İletişim. Her sayfa, potansiyel müşteriyi bir sonraki adıma (teklif almaya) doğru yönlendirecek şekilde tasarlandı.

Anasayfada 'Başarı Hikayeleri' bölümü referans projeleri öne çıkarırken, 'Markanızı Zirveye Taşıyalım' başlıklı kapanış bölümü ziyaretçiyi doğrudan WhatsApp üzerinden iletişime yönlendiren net bir çağrı (call-to-action) ile bitiyor. Bu, ajansın hızlı ve doğrudan iletişim kurma alışkanlığını dijital deneyime birebir taşıdı.

Technochef marka kimliği ve sayfa mimarisi

( Buraya marka kimliği panosunu (logo, renk paleti, tipografi) ya da site haritasını gösteren bir görsel gelmeli — Figma stil rehberi ekran görüntüsü ideal olur )

Çözüm: Yazılım Altyapısı

Tasarımdan koda, tek elden

Sitenin ön yüzünü Next.js tabanlı bir yapı üzerinde geliştirdim; sayfa hızını ve SEO performansını önceliklendiren bir mimari kurdum. Anasayfadaki başarı hikayeleri, hizmetler ve blog gibi tüm dinamik bölümler, kendi yazdığım bir arka uç (backend) ve veritabanı üzerinden besleniyor — yani içerikler koddan değil, veriden geliyor. Bu, tasarım kararlarını (bileşen yapısı, veri modelleri) doğrudan yazılım mimarisiyle birlikte kurgulamamı gerektirdi; UX tarafında aldığım her karar aynı zamanda bir veri modeli kararıydı.

Technochef yazılım mimarisi şeması

( Buraya sistemin genel mimarisini gösteren basit bir şema gelmeli — frontend, backend/API ve admin panel arasındaki ilişkiyi gösteren bir diyagram olabilir )

Technochef — canlı site önizlemesi

Technochef — canlı site önizlemesi

Yönetim Paneli

Kod yazmadan, siteyi baştan sona yönetmek

Projenin bence en değerli parçası bu oldu: ajans ekibinin hiçbir teknik bilgiye ihtiyaç duymadan sitenin tamamını yönetebildiği özel bir admin panel tasarladım ve geliştirdim. Panel tasarlanırken UX önceliğim netti — form alanları sade, önizleme anlık, hata payı düşük olmalıydı. Bir ekip üyesi yeni bir proje tamamladığında, geliştiriciyi beklemeden birkaç dakika içinde o projeyi 'Başarı Hikayeleri' bölümüne ekleyebiliyor.

Başarı Hikayeleri / Referans Projeleri — görsel, açıklama ve sıralama yönetimi
Hizmetler — yeni hizmet ekleme, açıklama ve ikon düzenleme
Blog — yazı oluşturma, düzenleme ve yayına alma
Sunum sayfası — satış görüşmelerinde kullanılan içeriğin güncellenmesi
İletişim bilgileri ve WhatsApp/e-posta yönlendirmeleri
Tema rengi ve temel marka ayarları
SEO başlık/açıklama meta verileri sayfa bazında düzenlenebiliyor
Technochef admin panel — içerik yönetim ekranı

( Buraya admin panelin içerik listeleme/düzenleme ekranının mockup'ı ya da ekran görüntüsü gelmeli — örneğin 'Başarı Hikayeleri' veya 'Hizmetler' listesinin, ekle/düzenle/sil aksiyonlarıyla birlikte göründüğü bir dashboard görünümü ideal olur )

Technochef admin panel — içerik düzenleme formu

( Buraya admin panelde tek bir içeriğin (örneğin bir blog yazısı ya da referans projesi) düzenlendiği form ekranının mockup'ı gelmeli — görsel yükleme alanı, metin editörü ve kaydet butonunun göründüğü bir görünüm iyi olur )

Ziyaretçi Akışı

Keşiften teklif almaya

Ziyaretçi tarafındaki akışı, bir potansiyel müşterinin karar sürecine göre kurguladım: anasayfada ajansın öne çıkan referans projeleri ve sunduğu hizmetler özetle görülüyor; merak eden ziyaretçi 'Hizmetlerimiz' sayfasında detaylara iniyor, 'Referanslar' sayfasında tamamlanmış işleri inceliyor. Karar aşamasına yaklaşan ziyaretçi için ayrı bir 'Sunum' sayfası, satış görüşmelerinde paylaşılabilecek özet bir içerik sunuyor. Her sayfada tekrar eden 'Teklif Al' ve WhatsApp üzerinden anlık iletişim çağrıları, ziyaretçiyi hiçbir noktada kararsız bırakmıyor.

Anasayfa — öne çıkan projeler ve hizmetlerin özeti
Hizmetlerimiz — detaylı hizmet açıklamaları
Referanslar — tamamlanmış proje vitrini
Sunum — satış görüşmelerine özel özet içerik
Hakkımızda — ajans hikayesi ve ekip
İletişim — teklif formu ve WhatsApp yönlendirmesi
Ziyaretçi karar yolculuğu akış şeması

( Buraya ziyaretçinin anasayfadan iletişime kadar izlediği yolu gösteren bir akış şeması/flow diyagramı gelmeli )

Sonuç & Öğrenimler

Tasarımcı + geliştirici bakışının getirdiği kazanım

Technochef projesi, bir web sitesini yalnızca tasarlamanın değil; o tasarımı gerçek bir yazılım ürününe dönüştürmenin ne demek olduğunu deneyimlediğim bir çalışma oldu. Admin panelin var olması, sitenin canlıya alındığı gün değil, ajans ekibi ilk kez kendi başına bir referans projesi eklediği gün gerçek değerini gösterdi.

İçerik güncellemeleri artık geliştirici beklemeden, dakikalar içinde yapılabiliyor
Tasarım kararları ile veri modeli baştan uyumlu kurgulandığı için teknik borç oluşmadı
Marka kimliği, tema ayarları üzerinden bile kod değişmeden güncellenebiliyor
UX ve mühendislik kararlarının aynı kişiden çıkması, teslimatı hızlandırdı

Bu projeden çıkardığım en net ders, iyi bir UX kararının yalnızca ekranda değil; o kararı besleyen veri modelinde ve yönetim arayüzünde de doğru kurgulanması gerektiğiydi. Tasarım ile yazılımın aynı zihinden çıkması, ürünün büyüme hızını doğrudan belirledi.