---
title: "İnteraktif tasarım ve UI/UX · Oxarus Studio"
description: "Arayüzleri doğrudan kodda tasarlıyoruz: gerçek durumlar, akıcı geçişler ve ürününüzle birlikte büyüyen bir tasarım sistemi."
url: https://oxarus.com/tr/studio/design
key: studio-design
route: /studio/design
unit: studio
locale: tr
status: live
alternates:
  tr: https://oxarus.com/tr/studio/design
  en: https://oxarus.com/en/studio/design
documents:
  json: https://oxarus.com/machine/tr/studio/design.json
  jsonld: https://oxarus.com/machine/tr/studio/design.jsonld
  txt: https://oxarus.com/machine/tr/studio/design.txt
schema: oxarus.machine/2.0
---

# İnteraktif tasarım ve UI/UX · Oxarus Studio

> Arayüzleri doğrudan kodda tasarlıyoruz: gerçek durumlar, akıcı geçişler ve ürününüzle birlikte büyüyen bir tasarım sistemi.

Konum: [Oxarus ana sayfa](https://oxarus.com/tr) › [Oxarus Studio](https://oxarus.com/tr/studio) › [İnteraktif Tasarım](https://oxarus.com/tr/studio/design)

## Notlar

- Temsili olarak işaretlenen arayüz verileri örnektir; gerçek müşteri, sonuç ya da ölçüm değildir.

## Bölümler

- [tasarım, kodda biter.](#hero)
- [dokunun, hissedin.](#play)
- [aynı buton, iki his.](#feel)
- [bir kez karar verin, her yerde geçerli olsun.](#system)
- [ürününüz de böyle hissettirsin.](#cta)

<a id="hero"></a>
<!-- section:hero component:DesignHero kind:hero sources:messages:studioDesign.hero -->

## tasarım, kodda biter.

_STUDIO · İNTERAKTİF TASARIM_

Arayüzü baştan çalışan bileşenler olarak kuruyoruz; bekleme, hata ve başarı durumları dahil. Kullanıcı bastığı her şeyin karşılığını görür.

<https://oxarus.com/tr/studio/design>

- [Projenizi anlatın](https://oxarus.com/tr/studio/design#cta-heading) → `open_page(path="/studio/design", anchor="cta-heading")`
- [Kendiniz deneyin](https://oxarus.com/tr/studio/design#play) → `open_page(path="/studio/design", anchor="play")`

- Tasarım doğrudan kodda
- Her bileşenin bütün durumları
- Ürününüzle büyüyen tasarım sistemi

1. Çizim
2. Kod
3. Hareket

<!-- demo:start messages:studioDesign.hero.demo -->
_Temsili arayüz verisi_ · Temsili editör ve önizleme.

- **file:** CheckoutButton.tsx
- **preview:** Önizleme
- **product:** Kablosuz kulaklık
- **price:** ₺4.990

- **idle:** Ödemeyi tamamla
- **loading:** İşleniyor
- **success:** Ödendi

- 24
- 16
- 48

- **curve:** SPRING\_PRESS
- **stiffness:** stiffness
- **damping:** damping

- idle
- processing
- success

- **Ara toplam:** ₺4.990
- **Kargo:** Ücretsiz
- **totalLabel:** Toplam

- **spacing:** Boşluk ölçüleri
- **a11y:** Erişilebilirlik
- **motion:** Hareket

<!-- demo:end -->

<a id="play"></a>
<!-- section:play component:Playground kind:content anchor:#play sources:messages:studioDesign.play -->

## dokunun, hissedin.

_OYUN ALANI_

Aşağıdaki altı parça gerçekten çalışıyor: üzerine gelin, basın, sürükleyin. Kullanıcı bir ürünün özenle yapıldığını çoğu zaman bu küçük anlarda fark eder.

<https://oxarus.com/tr/studio/design#play>

- **Mıknatıs buton**
  **Başlayın**
- **Anahtar**
- **Beğeni**
  **Beğen**

**Sürükle, sırala**

- Tasarım incelemesi
- Müşteri görüşmesi
- Sürüm notları
- Haftalık rapor

- **Kaydırıcı** · _kişi_

<!-- demo:start messages:studioDesign.play.states -->
_Temsili arayüz verisi_

- üzerinde
- basılı
- odakta
- etkin

<!-- demo:end -->

_Arayüz metinleri:_ İmleci yaklaştırın · Tıklayın · Bildirimler açık · Bildirimler kapalı · Kalbe basın · Satırları taşıyın · Sürükleyin · Kopyala · Tıklayın · OXARUS-2026 · Kopyalandı · Davet kodunuz

<a id="feel"></a>
<!-- section:feel component:FeelCompare kind:content anchor:#feel-heading sources:messages:studioDesign.feel -->

## aynı buton, iki his.

_HİS_

İki sahnede de aynı sepete ekle butonu var. Solda hareket hiç ayarlanmamış, sağda ayarlanmış. Butonlara basın, değerleri değiştirin, farkı görün.

<https://oxarus.com/tr/studio/design#feel-heading>

- **flat:** Ayarsız
- **tuned:** Ayarlanmış
- **stiffness:** Sertlik
- **damping:** Sönüm

<!-- demo:start messages:studioDesign.feel.card -->
_Temsili arayüz verisi_

**Sepete eklendi**

- **body:** Kablosuz kulaklık · ₺4.990

<!-- demo:end -->

Çevik · Dengeli · Esnek · Yumuşak

- **curve:** Hareket eğrisi
- **overshoot:** Taşma
- **settle:** Oturma süresi

> Bir karede beliriyor

> Yaklaşıp yerine oturuyor

- **add:** Sepete ekle
- **frames:** Kare kare

<!-- demo:start messages:studioDesign.feel.product -->
_Temsili arayüz verisi_

**Kablosuz kulaklık**

- **price:** ₺4.990

<!-- demo:end -->

_Arayüz metinleri:_ Oynat · Varsayılana dön

<a id="system"></a>
<!-- section:system component:TokenPlayground kind:content anchor:#system-heading sources:messages:studioDesign.system -->

## bir kez karar verin, her yerde geçerli olsun.

_TASARIM SİSTEMİ_

Renk, köşe ve yoğunluk birer değişken. Birini değiştirdiğinizde bütün ürün aynı anda güncellenir. Soldan seçin, sağda izleyin.

<https://oxarus.com/tr/studio/design#system-heading>

- **accent:** Vurgu rengi
- **radius:** Köşeler
- **density:** Yoğunluk

- Keskin
- Yumuşak
- Yuvarlak

- Rahat
- Sıkı

<!-- demo:start messages:studioDesign.system.ui -->
_Temsili arayüz verisi_

**Ekip davet et**

- **email:** E-posta adresi
- **placeholder:** Ekip arkadaşınızın e-postası
- **role:** Rol

- Yönetici
- Üye

- **invite:** Davet gönder
- **badge:** 3 koltuk kaldı
- **cancel:** Vazgeç

**Ekip üyeleri**
- **Deniz Arslan**
  - **role:** Yönetici
- **Mert Kaya**
  - **role:** Üye
- **Ece Demir**
  - **role:** Üye

<!-- demo:end -->

#### tokens.css

- Mor
- Deniz yeşili
- Kiremit
- Şampanya
- Mürekkep

**Buton durumları**
- normal
- üzerinde
- basılı
- odakta
- pasif

- **changed:** değişti

_Arayüz metinleri:_ Kopyala · Kopyalandı · Varsayılana dön

<a id="cta"></a>
<!-- section:cta component:StudioCta kind:cta anchor:#cta sources:messages:studioDesign.cta -->

## ürününüz de böyle hissettirsin.

_TASARIM_

Mevcut arayüzünüzü ya da yeni fikrinizi anlatın. Nereden başlayacağımızı birlikte belirleyelim.

<https://oxarus.com/tr/studio/design#cta>

- [Projenizi anlatın](https://oxarus.com/tr/contact?start=studio) → `start_project_brief(topic="studio")`
- [info@oxarus.com](mailto:info@oxarus.com?subject=Aray%C3%BCz%20tasar%C4%B1m%C4%B1) → `contact(subject="Arayüz tasarımı")`

## Eylemler

- [Projenizi anlatın](https://oxarus.com/tr/studio/design#cta-heading) → `open_page(path="/studio/design", anchor="cta-heading")`
- [Kendiniz deneyin](https://oxarus.com/tr/studio/design#play) → `open_page(path="/studio/design", anchor="play")`
- [Projenizi anlatın](https://oxarus.com/tr/contact?start=studio) → `start_project_brief(topic="studio")`
- [info@oxarus.com](mailto:info@oxarus.com?subject=Aray%C3%BCz%20tasar%C4%B1m%C4%B1) → `contact(subject="Arayüz tasarımı")`
- [English](https://oxarus.com/en/studio/design) → `switch_locale(locale="en", path="/studio/design")`

## İlgili sayfalar

- [Oxarus Studio](https://oxarus.com/tr/studio)