UI/UX tasarim

UI/UX tasarim: kullanicinin urunla iliski temeli

UI/UX tasarim — kullanici arastirma, wireframe, prototip, tasarim sistemi, gelistirme handoff. Tasarim 'guzel olmasi' degil, urun degerini gosterme yolu.

Figma'da component-bazli tasarim sistemi, tiklanabilir prototip, accessibility uyumlu kontrast, dark mode standart — uctan uca UI/UX tasarim.

Tasarim projesi baslat Tum hizmetler

UI/UX tesliminde standart

Kullanici arastirma + persona
Wireframe + tiklanabilir prototip
Component-bazli tasarim sistemi
Accessibility (WCAG 2.1 AA) uyumu
Dark mode + responsive (mobile-first)

01.

UI ile UX farki

UI (User Interface) tasarim, kullanicinin gordugu yuzeydir — renkler, typography, layout, butonlar, kartlar. UX (User Experience) tasarim, kullanicinin urunle iliskisini sekillendiren akistir — kullanici akisi, information architecture, mikro etkilesimler.

Iyi tasarim her ikisini saglar; biri olmadan digeri eksik kalir. Sirketinizdeki ekiple birlikte calistigimizda hem UI hem UX'i belgeleyen tek bir tasarim sistemi cikiyor.

02.

Surec: arastirma, wireframe, prototip

1) Kullanici arastirma: hedef kullaniciyi, ihtiyaclarini, mevcut alternatifleri anlamak. Bunu hizli yapariz (3-5 kullanici interviews); cok detaylı arastirma butce baz�nda olabilir.

2) Wireframe + information architecture: ekran sayisi, navigasyon yapisi, kritik akislar. Low-fidelity wireframe ile teknik feasibility'yi de erken kontrol edebiliriz.

3) Tiklanabilir prototip: Figma'da yuksek-fidelity prototip; gercekci kullanim deneyimini tasarim asamasinda test ederiz.

03.

Tasarim sistemi ve component kit

Tasarim sistemi, urunun omru boyunca tasarim tutarliligini ve hizini saglar. Renkler (token), typography (scale), spacing (4px / 8px grid), motion (timing, easing) — hepsi token-bazli. Yeni ekran eklendiginde token'lardan yeniden olusur.

Component kit Figma'da: tum buton variant'lari, input'lar, kartlar, modal'lar, navigation. Tasarim sistemi tasarim ekibi ile gelistirme ekibi arasinda tek source of truth.

04.

Accessibility ve gelistirme handoff

WCAG 2.1 AA referans aliyoruz. Kontrast, focus state, keyboard navigation, screen reader uyumu, dynamic type. Bunlari tasarim asamasinda dahil ediyor; gelistirici tarafa hazir teslim ediyoruz.

Gelistirme handoff: design tokens'lerin Tailwind config'ine cevrilmesi, component spec dokumanlari, animasyon timing'leri, edge case ekranlari. Boylece gelistirici pixel-perfect uretir, sonradan duzeltme dongusu olmaz.

Sikca sorulan sorular

UI/UX tasarim suresi ne kadar?

Basit MVP icin 1-2 hafta, orta olcekli web/app icin 3-4 hafta, kurumsal kompleks urun icin 6-8 hafta. Gelistirme ile paralel iterasyon devam eder.

Mevcut tasarimimi gelistirebilir misiniz?

Evet. Figma dosyanizi inceleyip tasarim audit raporu paylasiyor; gerekli yerlerde dokunmasini onerip uygulamaya geciyoruz.

Web ve mobil ayni tasarim mi?

Component sistemi paylasilir; ama platform-spesifik kararlar farkli (touch targets, gestures, native conventions). Tek tasarim sistemi her iki platforma uyum saglar.

Accessibility nasil saglaniyor?

WCAG 2.1 AA contrast, keyboard navigation, screen reader uyumu, dynamic type, focus state. Bunlar tasarim asamasinda dahil; sonradan retro-fit yapilmiyor.