Renk, tipografi ve arayüz öğeleri; görselleri öne çıkaran sade bir sistem içinde buluşuyor.
Siyah zemin. Mor vurgu. Görsellerin etrafında sade bir çerçeve.
Koyu yüzeyler işleri öne çıkarır; mor, arayüzün yönünü belirler.
Karakterli başlıklar ve okunaklı metinler. İki aile, ortak bir ritim.
Her pikselin
bir amacı var.
Ölçek ve boşluk; başlık, açıklama ve eylemleri birbirinden ayırır.
Menüler, butonlar ve sekmeler. Her sayfada tanıdık bir kullanım.
Seçili durumlar mor ile vurgulanır. Diğer seçenekler ince çizgilerle ayrılır.
Birbirini tamamlayan dört sayfa. İlk bölümden sayfa kapanışına kadar, bütün detaylarıyla.
İlk izlenimden seçili işlere, hizmetlerden sayfa kapanışına uzanan masaüstü deneyimi.
Tasarım yaklaşımı, deneyim ve yetkinliklerin bir araya geldiği kişisel anlatı.
Kategori filtreleri ve görsel odaklı kartlarla işlerin keşfi.
Çalışma alanlarından iletişime uzanan açık bir içerik akışı.
Tasarımın arkasındaki düşünce
Farklı disiplinlerde üretilen işleri, hizmetleri ve kişisel tasarım yaklaşımını tek bir web deneyiminde buluşturmak. Görsel çeşitlilik korunurken gezinmenin ve içerik hiyerarşisinin anlaşılır kalması hedeflendi.
Siyah yüzeyler proje görsellerine alan açıyor; mor vurgu, eylemleri ve seçili durumları belirginleştiriyor. Başlıklar, metinler, kartlar ve menüler sayfalar boyunca tutarlı bir görsel düzeni sürdürüyor.
Anasayfa, Portfolyo, Hakkımda ve Hizmetler birbirini tamamlayan bir gezinme yapısında düzenlendi.
Renk paleti, tipografi, menüler ve butonlar aynı tasarım dilinde bir araya getirildi.
Ortaya; projeleri öne çıkaran, tasarım yaklaşımını anlatan ve ziyaretçiyi ilgili hizmete yönlendiren bir portfolyo deneyimi çıktı. Bu sunum, dört masaüstü sayfasını ve seçili arayüz detaylarını belgeliyor.
Bu case study, arayüz tasarımı ile Next.js geliştirmesi ve CMS içeriğinin aynı sitede nasıl bir araya geldiğini gösteriyor. Kendi projenizde gerekli sayfalar, düzenlenecek içerikler, formlar ve teslim sorumlulukları ayrıca belirlenmeli. Yalnız UI/UX ihtiyacı ile tasarım ve geliştirmeyi birlikte içeren kapsamı ilk görüşmede ayırabiliriz.
designdmc, Onur Demircan’ın portfolyo, hizmet ve blog içeriklerini bir araya getiren kişisel web sitesidir. Next.js ile geliştirilen arayüz; proje kayıtları, görseller ve açıklamalar için CMS içeriğini kullanır. Kategori filtreleri ziyaretçinin işleri incelemesini, proje detayları ise çalışmanın kapsamını ve tasarım kararlarını anlamasını sağlar.
Site önce web üzerinde gelişti; Figma dosyası daha sonra mevcut arayüzü belgelemek için oluşturuldu. Anasayfa, Portfolyo, Hakkımda ve Hizmetler sayfaları 1440 px masaüstü artboard’ları olarak aktarıldı. İçerik varyasyonları dahil 55 component, bu dört sayfada 69 instance ile kullanılıyor. Sunumda menü durumları, butonlar ve sekmelerden seçili örnekler yer alıyor.
Bu sunumdaki arayüz görsellerinde siyaha yakın #08070B zemin ve #121212 kart yüzeyleri proje görsellerine alan açıyor. #5918F0 mor; birincil eylemlerde ve seçili durumlarda kullanılıyor. Sunumun belgelediği tasarımda Space Grotesk başlıklarda, Outfit gövde metinlerinde ve arayüz öğelerinde yer alıyor. Buton, sekme, proje kartı ve hizmet satırı gibi tekrar eden öğeler bu renk ve tipografi kararlarını paylaşıyor; bu açıklama sitenin daha sonra güncellenen canlı renk temasını değil, sunum görsellerini tarif ediyor.
26–27 Eylül 2026 güncellemesinde, hizmet başlıklarının sonuna eklenen ortak uzun unvan yerine 9 hizmetin Türkçe ve İngilizce sayfaları için ayrı, kısa SEO başlıkları tanımlandı. Görünen ana başlıklar ve ayrıntılı hizmet metinleri korundu. Web hizmetindeki koşulsuz yazılım vaadi tasarım / tasarım ve geliştirme ayrımıyla düzeltildi; görünen SSS ve FAQ şeması aynı yanıt kaynağını kullanıyor.
Kanonik URL, dil eşleri, HTTP yanıtı, HTML başlıkları ve yapılandırılmış veri yayın denetimiyle kontrol ediliyor. Hazırlık projeleri noindex olarak işaretleniyor ve sitemap dışında tutuluyor. Gamepad AI Film sayfasında tamamlanan 25 saniyelik bağımsız ANTRA filmi, storyboard kadrajları ve kısa hareket referansları bulunuyor. Final filmin VideoObject verisi özel film sayfasında yayınlanıyor. Güncel sitemap ve robots.txt bağlantıları aşağıda kontrol edilebilir.
Bu bölüm kod, içerik ve yayın kontrolünde yapılan somut değişiklikleri belgeliyor; Google sıralaması, organik trafik veya gelir artışı iddiası değil. Görünürlük ve tıklama etkisinin değerlendirilmesi için Search Console sorgu–sayfa verisi ve karşılaştırılabilir dönemler gerekir. Laboratuvar hız kontrolü ile gerçek kullanıcı Core Web Vitals verisi de ayrı değerlendirilir.
İkisini de kapsıyor. Proje; web UI/UX tasarımını, Next.js geliştirmesini, CMS ile içerik yönetimini ve mevcut arayüzün Figma tasarım sistemi olarak belgelenmesini bir araya getiriyor.
Anasayfa, Portfolyo, Hakkımda ve Hizmetler masaüstü sayfaları; renk paleti, tipografi, menü durumları, butonlar ve sekmelerle birlikte sunuluyor. Tam sayfa görselleri, sayfa kapanışları dahil bütün akışı gösteriyor.
Görseller web sitesinin masaüstü görünümünü belgeliyor. Tam sayfa ekranları, içerik sırasını ve sayfalar arasındaki ortak tasarım dilini incelemek için hazırlanmış sunum görselleridir.
Portfolyo, kurumsal web sitesi veya CMS tabanlı bir proje için sayfa kapsamını, tasarım sistemini ve geliştirme ihtiyacını konuşabiliriz.
Bu çalışmanın hizmeti: Web Tasarım ve Yazılım
Onur Demircan Web Site 2026 | Tüm Hakları Saklıdır
