Dijital Deneyim

Ne demek

Dijital deneyim tasarımı, bir şirketi ekranda okunur kılma disiplinidir: önce ne görünür, kişiden neyi anlaması istenir ve ardından ne yapabilir. Arayüz tasarımını, etkileşimi, editoryal düzeni ve bunların erişilebilirliğini kapsar.

Mekanizma

Ziyaretçinin verdiği kararların sırası olarak arayüz.

Yolculuk her biri tek bir işi olan aşamalar olarak, sayfa iddia, kanıt ve eylem hiyerarşisi olarak, her kontrol ise bir şeylerin ters gittiği anlar dahil bir durumlar kümesi olarak tasarlanır.

deneyim / arayüz mantığıEşgüdümlü

01Yolculuk haritası

Aşama başına tek iş

açılışVarışDoğru yerde olduğunu doğrularHazır
gezinmeYön bulmaNeyin nerede olduğunu gösterirYapılandırıldı
kanıtDeğerlendirmeHer iddianın yanına kanıt koyarDoğrulandı
karşılaştırmaKararSon itirazı yanıtlarEşlendi
contact_form_startEylemYalnızca gerekeni isterİzleniyor

02İçerik hiyerarşisi

Bir sayfanın sırasıyla nelerden oluştuğu

Sayfa

İddia
- Başlık
- Giriş
Kanıt
- Kanıt
- Örnekler
- Sınırlar
Eylem
- Birincil
- İkincil

03Etkileşim mantığı

Durumlarıyla bir form alanı

:placeholderBoşta
:focus-visibleDüzenleniyor
aria-busyDenetleniyor
aria-invalidHata
role=statusKabul edildi

Hata, girilen değer korunarak düzenlemeye döner

Bu disiplinin ürettiği yapının bir çizimi. İşin biçimini anlatır; bir ürün değildir ve hiçbir müşteri verisi göstermez.

Kimin için

Sitesi dizüstünde kabul edilebilir görünen, telefonda dağılan şirketler
Arayüzün ekran seti değil sistem olarak tasarlanmasını isteyen ürün ekipleri
Tasarımın tek tek yetişemeyeceği hızda sayfa yayınlayan pazarlama ekipleri

Genelde ne bozulur

Mobil düzen, küçültülmüş masaüstü düzeni; hiyerarşi yolda kayboluyor.
Bileşen kitaplığı olmadığı için her sayfa sıfırdan tasarlanıyor.
Erişilebilirlik yayından sonra uygulanan bir düzeltme, dolayısıyla kötü uygulanıyor.

Neyi değiştiriyoruz

Bileşeni tasarlarız, sayfayı kurarız

Önce en küçük tekrar eden birimleri tasarlıyoruz. Sayfa, yeni bir karar kümesi değil, verilmiş kararların düzeni hâline geliyor.

Mobil kendi tasarımıdır

Küçük ekranlar kendi düzen kararlarını alır — daraltılmış masaüstü ızgarası değil — çünkü okuma sırası ve başparmak erişimi farklıdır.

Erişilebilirlik ilk kareden itibaren

Kontrast, odak sırası, dokunma alanı ve azaltılmış hareket davranışı birer tasarım girdisidir. Sonradan eklemek tasarımı zaten değiştirdiğinden, en baştan yaparız.

Teslim edilenler

Durumlarıyla birlikte bileşen kitaplığı: varsayılan, üzerine gelme, odak, basılı, yükleniyor, boş, hata
Masaüstü, tablet ve telefon için sayfa kurguları
Hareket tanımı: ne hareket eder, ne kadar, ne hızda ve hareket azaltıldığında ne durur
Erişilebilirlik notları: başlık sırası, etiketler, odak davranışı
Mühendislik yapımıyla paylaşılan tasarım tokenları

Neyi yapmıyoruz

Dönüşüm oranı vaat etmiyoruz. Sayfayı, ziyaretçinin geldiği soruyu yanıtlayacak biçimde tasarlıyor ve ne olduğunu ölçüyoruz.
Erişilebilirlik, karşılanabildiği her yerde WCAG 2.2 AA’ya taşınır. Bir gereklilik marka kararıyla çeliştiğinde sessizce atlamak yerine bunu yazılı olarak bildiririz.
Kurmayacağımız ya da başkasının kurabileceği bir sistem olarak devretmeyeceğimiz ekranları tasarlamıyoruz.

Süreç

Yapı

Şablon başına içerik sırası ve hiyerarşi; görsel çalışmadan önce düz metinle kararlaştırılır.

Yön

Sanat yönetimi, stilize bir ana sayfada değil, en zor iki sayfada kanıtlanır.

Sistem

Bileşenler, durumlar ve tokenlar; yeni bir sayfa yeni tasarım gerektirmeyene kadar tamamlanır.

Kanıt

320px ve üzerinde gerçek cihazda, klavyeyle ve hareket azaltılmış hâlde gözden geçirilir.

Sorular

Bir web sitesi yenilemesi neleri kapsar?

En azından: içerik ve sayfa mimarisi, bileşen ve durumlarıyla bir tasarım sistemi, 320px’e kadar duyarlı kurgular, karşılanabildiği yerde WCAG 2.2 AA erişilebilirlik çalışması ve üretim yapımı. Yalnızca görselleri değiştiren bir yenileme, alttaki her sorunu yerinde bırakır.

Figma kullanıyor musunuz?

Evet; yapı, keşif ve devir için. Ancak tasarım sistemi kodda tamamlanır, çünkü yayına çıkan sürüm odur ve üretimle sessizce çelişemeyecek tek sürüm odur.

Performansı bozmadan animasyonu nasıl yönetiyorsunuz?

Yalnızca transform ve opacity animasyonu kullanıyoruz, hareket bütçesini sayfa bütçesinin içinde tutuyoruz ve açılışları büyük bir animasyon kütüphanesi yerine platformun kendisiyle kuruyoruz. Ziyaretçi istediğinde her şey hareketsize iner.

Siteyi tasarlamakla kalıyor musunuz, yapımını da üstleniyor musunuz?

Yapımını da üstleniyoruz. Tasarım ve mühendislik burada ayrı başlıklar, çünkü ayrı uzmanlıklar; ayrı işler oldukları için değil. Projelerin çoğu ikisini birlikte yürütür ve tasarımı, onun ekranda ne kadara mal olacağını bilen kişiler çizer.

03Konsept çalışması

işler / commerce-frame2026

01İtiraz sırasına göre düzen
02Kanıt iddianın yanında
03Tek yüzey olarak ödeme

Commerce Frame

Uzman bir perakendecinin ürün sayfasının alıcıya ne borçlu olduğuna — ve satış kaybetmeden alışıldık mağazanın ne kadarının çıkarılabileceğine dair kendi başlattığımız bir çalışma.

Uzman perakendeDeneyimE-ticaretArama

İşi incele

02Kendi sistemimiz

işler / atlas2025