Tasarım devri: tasarımın geliştiriciye eksiksiz ve anlaşılır aktarılması
Sözlük

Tasarım devri: tasarımın geliştiriciye eksiksiz ve anlaşılır aktarılması

Hazırlayan: Mindset Institute EditörlüğüGüncellendi: 3 dk okuma

Tasarım devri (design handoff), tamamlanan bir arayüz tasarımının geliştirici ekibin yorum yapmadan kodlayabileceği netlikte aktarılması sürecidir. Neyin devredildiğini, nasıl işlediğini ve nerede aksadığını anlatır.

Bir bakışta

  1. Devir bir dosya göndermek değil, ortak anlayış kurmaktır. Tasarım, davranış ve kabul ölçütü birlikte aktarılır.
  2. Yalnız ekran görüntüsü değil, durumlar ve davranış da gerekir. Boş, hata, yükleniyor ve etkileşim durumları belirsizlik bırakmamalı.
  3. En iyi devir tek seferde değil, sürekli bir iş birliğidir. Geliştirici erken katılır, sorular devirden önce sorulur.
  4. Kabul ölçütü tanımlı değilse tartışma sona kalır. Neyin doğru sayılacağı baştan yazılır.

Tasarım devri nedir?

Tasarım devri, bir UX ya da UI tasarımının geliştirici ekibe uygulamaya hazır biçimde aktarıldığı aşamadır. Aktarılan şey yalnızca ekranların görseli değildir; renkler, aralıklar, yazı tipleri, bileşenler, etkileşimler, durumlar ve tasarımın beklenen davranışı birlikte devredilir.

Geleneksel anlatımda bu bir duvarın üzerinden atılan paket gibi düşünülürdü. Güncel çalışma biçiminde ise devir tek bir anı değil, tasarımcı ile geliştiricinin süreç boyunca yürüttüğü bir iş birliğini ifade eder; bu yüzden "tasarımdan koda" ifadesi de kullanılır.

Devirde neler aktarılır?

İyi bir devir paketi, geliştiricinin tahmin yürütmesini en aza indirir. Genellikle şunlar yer alır:

  • Ekranlar ve akışlar: kullanıcının hangi yolu izleyeceği
  • Bileşen envanteri ve durumlar: normal, üzerine gelinmiş, devre dışı, hata, boş ve yükleniyor halleri
  • Boyut, aralık, renk ve tipografi değerleri; mümkünse tasarım sistemindeki adlarıyla
  • Etkileşim ve hareket kuralları: geçişler, süreler, kaydırma davranışı
  • Duyarlılık kuralları: farklı ekran genişliklerinde düzenin nasıl değiştiği
  • Erişilebilirlik notları: odak sırası, kontrast, ekran okuyucu etiketleri
  • Kabul kriterleri: işin ne zaman bitmiş sayılacağı

Figma gibi araçlarda geliştirici görünümü, seçilen katmanın ölçülerini ve uygulanan stil ile değişkenleri gösterir, "geliştirmeye hazır" durumu da hangi tasarımın devir için olgunlaştığını belirtir.

Devir nasıl işler?

Sağlıklı bir devir tasarım bittikten sonra değil, tasarım sürerken başlar. Geliştirici teknik kısıtları erken söyler, tasarımcı bunlara göre kararını gözden geçirir. Böylece devir günü sürpriz çıkmaz.

Devir anında tasarımcı, hazır olan kapsamı net biçimde işaretler: hangi ekranlar bitmiş, hangileri taslak. Geliştirici uygulama sırasında karşılaştığı belirsizlikleri tasarımcıya sorar ve cevaplar ortak bir yerde, örneğin tasarım dosyası ya da iş kaydı üzerinde tutulur. Uygulama bitince tasarımcı, canlıya ya da test ortamına bakarak tasarım kalite kontrolü yapar ve farkları kayda geçirir.

Bu döngü ritüel hâline geldiğinde devir, bir kriz anı olmaktan çıkar.

Sık yapılan hatalar ve doğrusu

En yaygın sorun tasarımın yalnızca mutlu yoldan ibaret olmasıdır. Geliştirici hata, boş ve uç durumları kendi tahminiyle doldurur, sonuç tasarımcının niyetinden uzaklaşır. Bir diğeri, her ekranda aynı bileşenin farklı değerlerle yeniden çizilmesidir; geliştirici hangisinin doğru olduğunu bilemez.

Dosya düzensizliği de devri zorlaştırır: adlandırılmamış katmanlar, kullanılmayan taslak sayfalar, güncel olup olmadığı belirsiz sürümler. Son olarak devirden sonra iletişimin kesilmesi, uygulama sırasında çıkan soruları cevapsız bırakır.

Şekil 1

Aynı iş, iki farklı devir

Sorunlu devir
Sağlıklı devir
Yalnız mutlu yol çizilmiş
Hata, boş ve yükleniyor durumları tanımlı
Aynı bileşen farklı değerlerle tekrarlanmış
Tasarım sistemindeki bileşen adı kullanılmış
Dosya düzensiz, güncellik belirsiz
Hazır kapsam işaretli, dosya temiz
Devirden sonra iletişim kesilmiş
Sorular ortak bir yerde cevaplanıyor
Kaynak: sayfa içeriğiMindset Institute

Kurgusal bir örnek

Bir mobil bankacılık uygulamasında yeni bir fatura ödeme ekranı tasarlanıyor. Tasarımcı ekranı yalnız başarılı ödeme senaryosuyla çizerse, geliştirici yetersiz bakiye, ağ kesintisi ve çift tıklama durumlarını kendi yorumuyla yazar.

Tasarımcı bunun yerine bileşenin tüm durumlarını, hata mesajı metinlerini ve düğmenin yükleniyor halini çizip kabul kriterlerini listeler. Geliştirici de devirden önce, tarih seçicinin sistem bileşeniyle sınırlı olduğunu bildirir. Tasarımcı bu kısıta göre ekranı düzeltir. Sonuçta uygulamada tasarımla uyumsuz çıkan öğe sayısı azalır ve düzeltme turları kısalır.

Komşu kavramlardan farkı

Tasarım sistemi, devrin nesnesini standartlaştırır; devir ise bu standardın belirli bir projeye aktarılması sürecidir. Tasarım kalite kontrolü (design QA), devirden sonra uygulamanın tasarıma uygunluğunu denetler. Spesifikasyon yazımı devrin bir parçasıdır, tamamı değildir.

İş birliği ritüelleri, örneğin ortak değerlendirme toplantıları, devrin sürdürülebilir olmasını sağlar. Hepsi aynı zincirin halkalarıdır.

Mindset programlarında bu konu

UX/UI Bootcamp, Geliştirici İş Birliği ve Tasarımdan Koda modülünü içerir. Tasarım-Geliştirici İş Birliği: Handoff ve Spesifikasyon Pratikleri eğitimi ise bileşen envanteri, spesifikasyon yazımı, kabul kriterleri ve iş birliği ritüellerini işler; tasarımcılar, ön yüz geliştiricileri ve ürün ekipleri için uygundur.

İlgili Mindset programı

Tasarım-Geliştirici İş Birliği: Handoff ve Spesifikasyon Pratikleri

Sık sorulanlar

Sık sorulan sorular

Design handoff yalnızca tasarımcının işi midir?

Hayır. Devir iki yönlü bir iş birliğidir. Tasarımcı hazır ve net bir paket sunar, geliştirici teknik kısıtları erken bildirir ve belirsizlikleri sorar. Ürün sahibi kabul kriterlerinin netleşmesine yardım eder. Tek taraflı devir genellikle geç fark edilen uyumsuzluklara yol açar.

Devir için hangi araçlar kullanılır?

Figma gibi tasarım araçlarının geliştirici görünümü, bileşen kütüphaneleri, iş takip sistemleri ve ortak bir bilgi alanı sık kullanılır. Araç seçimi ekibin düzenine bağlıdır. Hangi aracı kullanırsanız kullanın, belirleyici olan kapsamın, durumların ve kabul kriterlerinin yazılı ve güncel olmasıdır.

Tasarım sistemi olmadan iyi bir devir yapılabilir mi?

Yapılabilir, ama daha çok emek ister. Bileşenler ve değerler her projede yeniden anlatılmak zorunda kalır. Tasarım sistemi varsa bileşen adı ve davranışı ortak bir referanstan okunur ve devir paketi küçülür.

Devirden sonra tasarımcı ne yapar?

Uygulama sırasında soruları cevaplar, bitmiş işi tasarımla karşılaştırır ve farkları önem sırasına göre kayda geçirir. Kalite kontrol turu ile kabul kriterleri doğrulanır. Bu aşama atlanırsa küçük farklar birikir ve sonraki dönemde pahalı bir düzeltme yığınına dönüşür.

Tasarım Devri (Design Handoff) Nedir?