İ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.
- dokunun, hissedin.
- aynı buton, iki his.
- bir kez karar verin, her yerde geçerli olsun.
- ürününüz de böyle hissettirsin.

TASARIM, KODDA BİTER.

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

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

DOKUNUN, HİSSEDİN.

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

Temsili arayüz verisi

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

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

AYNI BUTON, İKİ HİS.

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

Temsili arayüz verisi

Sepete eklendi

- body: Kablosuz kulaklık · ₺4.990

Ç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

Temsili arayüz verisi

Kablosuz kulaklık

- price: ₺4.990

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

BİR KEZ KARAR VERİN, HER YERDE GEÇERLİ 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ı

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

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

ÜRÜNÜNÜZ DE BÖYLE HİSSETTİRSİN.

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")

İLGİLİ SAYFALAR

- Oxarus Studio <https://oxarus.com/tr/studio>