Tasarımdan Koda: PSD / Figma to HTML

Tasarımdan koda hizmeti, Figma, Photoshop (PSD) ya da görsel formatında hazırlanmış bir web tasarımını tarayıcıda çalışan, mobil uyumlu ve temiz HTML, CSS ve JavaScript koduna dönüştürmektir. İstenirse bu kod bir içerik yönetim sistemine bağlanarak yönetilebilir bir siteye çevrilir. Kürekod olarak 2016–2018 yıllarında reklam ajanslarına "Ajans İşleri" başlığıyla verdiğimiz hizmetin bugünkü hâlidir.

Tasarımdan koda hizmeti kimler için?

Bu hizmet doğrudan son müşteriye değil, tasarımı kendisi yapan ekiplere yöneliktir:

• Reklam ajansları: Tasarım ekibi güçlü ama kadrosunda front-end geliştirici olmayan ya da yoğun dönemlerde ek kapasiteye ihtiyaç duyan ajanslar.
• Grafik tasarımcılar: Müşterisine web sitesi tasarlayıp kodlama kısmını dışarıya vermek isteyen serbest tasarımcılar.
• Kurum içi pazarlama ekipleri: Kampanya sayfasını kendisi tasarlayıp hızla yayına almak isteyen ekipler.

İş white-label yürür: kodlayan tarafın adı projede geçmez, ajans işi müşterisine kendi hizmeti olarak teslim eder. Son müşteriyle iletişim de ajans açıkça istemedikçe ajans üzerinden kurulur.

PSD to HTML'den Figma to HTML'e

Freelance yıllarımızda gelen tasarım dosyaları ağırlıklı olarak Photoshop'tu; hizmetin adları da buradan geliyordu: PSD to HTML, PSD to Bootstrap, HTML to PHP, hatta yalnız bir JPG görselden PHP'ye. Bugün arayüz tasarımı büyük ölçüde Figma'ya taşındı, ama işin özü değişmedi: tasarımcının niyetini bozmadan her ekranda düzgün çalışan bir koda ulaşmak.

Terimin geçmişini ve bugün neye karşılık geldiğini PSD to HTML nedir yazımızda ayrıntılı anlattık.

Neler dahil?

• Figma, PSD, XD ya da görsel dosyadan anlamsal (semantik) HTML5 yapısı
• Bootstrap 5 grid sistemiyle mobil, tablet ve masaüstünde responsive yerleşim
• Ek kütüphane gerektirmeyen JavaScript ile menü, slider, sekme ve akordeon gibi etkileşimler
• Güncel tarayıcılarda ve farklı ekran boyutlarında test
• Görsel optimizasyonu ve gereksiz dosyalardan arındırılmış, hızlı açılan kod
• Temel erişilebilirlik: doğru başlık hiyerarşisi, alternatif metinler, klavyeyle gezinme
• İstenirse PHP tabanlı bir içerik yönetim sistemine ya da mevcut bir panele entegrasyon

Grid tercihimizin nedenini merak eden ajanslar için Digital Küre'nin Bootstrap'i neden tercih ettiğini anlatan yazısı iyi bir özet. Kısacası: ortak bir grid dili, tasarımcı ile geliştirici arasındaki yorum farkını azaltır ve kodu sonradan devralacak ekibin işini kolaylaştırır.

Tasarım dosyasını gönderirken hazırlanması gerekenler

Kodlama sürecinin hızı ve sonucun tasarıma ne kadar sadık kalacağı, büyük ölçüde gelen dosyanın düzenine bağlıdır. İyi hazırlanmış bir teslim paketinde genellikle şunlar bulunur:

• Masaüstü ve mobil görünümler, mümkünse tablet ara ölçüsü
• Kullanılan fontların adı ve web kullanım lisansı
• Buton, bağlantı ve form alanlarının üzerine gelme ve hata durumları
• Renk, yazı boyutu ve boşluk değerlerini gösteren kısa bir stil rehberi ya da Figma bileşenleri
• Animasyon ve etkileşim beklentilerine dair birkaç satırlık not

Eksik parçalar olduğunda kodlayan taraf kendi yorumunu yapmak zorunda kalır; revizyon turlarının çoğu da bu yorum farklarından doğar.

Süreç ve süre

1. Dosya incelemesi: Katmanlar, fontlar, mobil görünümler ve etkileşim notları kontrol edilir. Mobil tasarım eksikse nasıl yorumlanacağı baştan konuşulur.
2. Kodlama: Önce ortak bileşenler (üst menü, alt bilgi, butonlar, form elemanları), ardından sayfalar kodlanır.
3. Önizleme: Çalışma bir test adresi üzerinden ajansa gösterilir, revizyonlar toplanır.
4. Teslim: Düzenli klasör yapısıyla kod paketi ya da CMS'e bağlanmış, yayına hazır site.

Tek sayfalık bir tasarım genellikle birkaç iş gününde, çok sayfalı kurumsal bir tasarım ise sayfa sayısına ve etkileşimlere göre bir iki haftada kodlanır. Süreyi en çok uzatan şey, mobil görünümün hiç çizilmemiş olmasıdır.

Fiyat nasıl belirlenir?

Tasarımdan koda işlerde fiyatı sayfa sayısı, mobil tasarımın hazır olup olmadığı, animasyon ve etkileşim yoğunluğu ve CMS entegrasyonu istenip istenmediği belirler. Tasarım hazır geldiği için toplam bütçe, tasarım dahil bir projenin altında kalır.

Karşılaştırma için bir fikir verelim: 2026'da tasarım dahil landing page işleri kabaca 10.000–25.000 TL, hazır temalı kurumsal siteler genellikle 15.000–35.000 TL aralığında. Kodlama işinin kesin fiyatı ise dosya görülmeden verilemez.

Sık sorulanlar

Mobil tasarım yoksa ne olur?

Masaüstü tasarımdan makul bir mobil yorum çıkarılabilir, ama bunun önceden konuşulması gerekir. En sağlıklısı, en azından ana sayfanın ve bir iç sayfanın mobil hâlinin çizilmesidir.

Kodu sonradan başka bir ekip geliştirebilir mi?

Evet, temiz ve düzenli yazılmış kodun asıl faydası budur. Standart bir grid sistemi, anlamlı sınıf adları ve açık bir klasör yapısı, işi devralan geliştiricinin hızla uyum sağlamasını sağlar.

Tasarımda kodlanamayacak bir şey olursa?

Nadiren de olsa bazı efektler tarayıcıda performans sorunu yaratır. Bu durumda tasarımcıyla birlikte aynı hissi veren, daha hafif bir alternatif bulunur.

Ajans işlerini bugün kim kodluyor?

Ajanslarla white-label çalışma, Kürekod'un freelance döneminin temel iş kollarından biriydi. 2018'den bu yana bu birikim Digital Küre'de devam ediyor ve tasarımdan koda projelerini bugün Digital Küre'nin web tasarım ekibiyle yürütüyoruz. Elinizde kodlanmayı bekleyen bir Figma dosyası varsa Digital Küre üzerinden teklif isteyebilirsiniz.