# Tasarımdan çalışan arayüze

https://ragipdiler.com/tr/hizmetler/tasarimdan-koda-gelistirme/

Hazır arayüz tasarımlarını koda taşıyor, belirlenen ekran ve işlemleri çalışır hale getiriyorum. Henüz tasarımınız yoksa tasarım ve geliştirmeyi birlikte kapsamlandırabiliriz. Bu tasarım ile uygulamayı birleştiren çalışma biçimi, Design Engineering olarak da adlandırılıyor.

## Ekranda ne görüneceği kadar, neyin çalışacağı da belli olmalı


Elinizde bir tasarım, mevcut bir arayüz veya denemek istediğiniz bir fikir olabilir. Önce hangi işlemin çalışır hale gelmesi gerektiğini ve teslimde ne beklediğinizi belirliyoruz.

Örneğin bir formda alanların görünmesiyle bilginin kaydedilmesi farklı sorumluluklardır. Tasarımın hangi davranışları tarif ettiğini, hangi kararların eksik olduğunu ve dışarıdan hangi bağlantıların gerektiğini birlikte ele alıyoruz.

Ürünün işlemleri ve ekranları henüz net değilse [uygulama öncesi ürün tasarımı](/tr/hizmetler/dijital-urun-tasarimi/) daha uygun bir başlangıç olabilir.

## Tasarımın davranışlarıyla birlikte uygulanması


Kararlaştırılan kapsama göre çalışma şunları içerebilir:

- Uygulanacak ekranlar ve işin tamamlandığını belirleyen ölçütler.
- Çalışan arayüz parçaları ve farklı ekran boyutlarındaki davranışları.
- İlgili işlemin yükleme, boş, hata ve başarı durumları.
- Açıkça belirtilmiş örnek veriler veya kararlaştırılan gerçek veri bağlantıları.
- Belirlenen ekran, cihaz ve etkileşim kontrolleri.
- Kapsamdaki kaynak kod, gerekli erişimler ve teslim açıklamaları.

Örneğin örnek verilerle çalışan bir panel, ekranlar arasındaki geçişleri incelemek için yeterli olabilir. Aynı panelin işletmenin gerçek kayıtlarını yönetmesi için veri, yetki ve kullanım gereksinimlerini ayrıca belirlemek gerekir.

## Prototip mi, ürünün çalışan bir parçası mı?


**Çalışan prototip:** Bir fikrin veya işlemin davranışını incelemek için hazırlanır. Hangi parçaların örnek veriyle çalışacağını ve nelerin gerçek bağlantı kullanacağını belirliyoruz.

**Belirli bir arayüzün geliştirilmesi:** Hazır tasarımlardaki ekranları, durumları ve kararlaştırılan bağlantıları uygulamaya taşıyorum. Mevcut kod ve yazılım ekibiyle ilgili gereksinimler başlangıçta değerlendirilir.

**Tasarım ve geliştirme:** Tasarım kararları da gerekiyorsa bunları geliştirmeyle birlikte kapsamlandırabiliriz. Yalnızca tasarım ihtiyacı ürün tasarımı hizmeti üzerinden ele alınabilir.

Bir demonun çalışması, gerçek kullanıcıya açılmak için gereken bütün işlerin tamamlandığını göstermez. Gerçek veriler, erişim yetkileri, yayın ortamı ve bakım sorumluluğu hedeflenen kullanıma göre ayrıca netleştirilir.

İşletmenizi anlatan bir site istiyorsanız [web sitesi tasarımı ve geliştirme](/tr/hizmetler/web-sitesi-tasarimi/); telefon üzerindeki bir deneyim için [mobil uygulama tasarımı ve geliştirme](/tr/hizmetler/mobil-uygulama-tasarimi/) hizmetini inceleyebilirsiniz.

## Geliştirme, kontrol ve teslim nasıl tanımlanıyor?


Geliştirme sırasında projeye göre Claude Code, Codex ve Cursor gibi araçlardan yararlanıyorum. Tasarım referansını, beklenen davranışı ve işin sınırlarını başlangıç noktası olarak alıyorum.

Çalışmaya başlamadan önce hangi ekranların karşılaştırılacağını, hangi işlemlerin deneneceğini ve hedeflenen kullanım için kimlerin kontrol yapması gerektiğini belirliyoruz. Çalışan akış üzerinden ortaya çıkan düzeltmeler de bu ölçütlerle değerlendirilir.

Teslim edilecek kodu, çalıştırma bilgilerini, bilinen sınırlamaları ve sonraki aşamanın sorumluluğunu kapsamda kayda alıyoruz. Kontrol yöntemi ve gerekiyorsa uzman incelemesi proje ihtiyacına göre ayrıca kararlaştırılır.

## Kod ve geliştirme hakkında sorular


### Hazır Figma tasarımımı geliştirebilir misiniz?

Tasarımı ve teknik gereksinimleri inceleyerek üstlenebileceğim kapsamı belirleyebiliriz. Eksik ekran durumlarını ve uygulamadan önce karar verilmesi gereken noktaları da değerlendiriyoruz.

### Önce küçük bir prototip yapabilir miyiz?

Evet. İncelenecek temel işlemi ve gerçekten çalışması gereken parçaları belirleyerek başlayabiliriz. Prototipin gerçek kullanıma taşınması ayrı gereksinimler ve kapsam gerektirebilir.

### Veri bağlantıları, giriş sistemi ve ödeme dahil mi?

Ancak teknik gereksinimleri değerlendirilip açıkça kararlaştırılan parçalar dahil olur. Bu özelliklerin tamamı genel geliştirme paketinin otomatik parçası olarak sunulmaz.

### Yapay zeka ile üretilen kod nasıl kontrol ediliyor?

Tasarım karşılaştırması, işlem durumları ve gerekli teknik inceleme sorumluluklarını işe başlamadan önce kapsamda tanımlıyoruz. Kullanımın gerektirdiği uzman kontrolü varsa ayrıca belirliyoruz. Bir aracın kod üretmiş olması, kontrollerin tamamlandığı anlamına gelmez.

### Kod ve hesaplar kimde kalacak?

Kaynak kodun nereye teslim edileceğini, hesap ve depo erişimlerini, varsa üçüncü taraf bağımlılıklarını anlaşmada belirliyoruz. Bakım ve yeni geliştirme sorumluluğu da ayrıca netleştiriliyor.

### Fiyat ve süreyi neye göre belirliyorsunuz?

Ekran ve işlem kapsamı, tasarımın hazır olma durumu, teknik bağlantılar, kontrol ihtiyacı ve teslim sorumluluğunu birlikte değerlendiriyoruz. Teklif bu çerçeve üzerinden hazırlanır.

## Hangi tasarımı veya işlemi çalışır hale getirelim?


Varsa tasarımınızı ya da mevcut arayüzü paylaşın. Hangi işlemin çalışmasını istediğinizi ve hedefinizin bir prototip mi, ürünün kullanılacak bir parçası mı olduğunu anlatın. Nereden başlayabileceğimizi birlikte değerlendirelim.


[Geliştirme ihtiyacınızı konuşalım](mailto:dilerragip@gmail.com?subject=Aray%C3%BCz%20geli%C5%9Ftirme%20projesi)

[Seçili işleri inceleyin](https://ragipdiler.com/tr/#isler)