Arayüz geliştirme

Tasarımda kalan değil,ürüne dönüşen arayüzler.

Figma'da ne görüyorsanız tarayıcıda o çalışır. Ekibinizin hızla ürün geliştirmesi için temiz, bileşen tabanlı arayüz mimarileri kuruyoruz.

THE GRID
Kart
Varsayılan
Buton
Varsayılan
Kart / İlan
localhost:3000/kesfetDeneyin
LED ekran

Zincirlikuyu Büyükdere Cad. LED

Şişli, İstanbul

Görüntülenme, günlük
120.000+
Haftalık bedel
₺12.500

Tarayıcıdaki kart gerçek: gelin, tıklayın, klavyeyle gezin. Dosyadaki tasarım aynı duruma geçer.

Araçlar

  • React

    Bir kez yazılan bileşen her ekranda aynı davranır.

  • Next.js

    Arama motorunun okuyabildiği, ilk tıkta açılan sayfalar.

  • TypeScript

    Bileşenin hangi özelliği aldığı yazılı; yanlış kullanım daha yazarken yakalanır.

  • Storybook

    Bileşenleriniz canlı dokümantasyonla teslim edilir; her durum tarayıcıda görülür.

  • Figma

    Tasarım değişkenleri ile koddaki token'lar aynı adı taşır.

Ritim

Bileşen bileşen teslim

Kütüphane tek seferde değil parça parça gelir; ilk haftadan itibaren ekibiniz gerçek bileşenlerle ekran kurar.

İlke

Tek kaynak

Bir renk, bir boşluk, bir davranış tek yerde tanımlıdır. Figma ve kod aynı değişkeni okur; ikisi birbirinden ayrı düşmez.

Neyi çözüyoruz

Her yeni ekranda arayüz biraz daha dağılıyor,ürün tek parça görünmüyor.

  • Her yeni sayfada butonun rengi ve boyu değişiyor.
  • Tasarımı koda dökmek haftalar alıyor.
  • Frontend kodu çorbaya dönmüş, kimse dokunmak istemiyor.
  • Tasarımda görünen, tarayıcıda başka çıkıyor.

Ürün ekiplerinin arayüzde en büyük derdi tutarsızlık. Renk, boşluk ve davranış tek bir kaynağa yazılınca her ekran aynı parçalardan kuruluyor; yeni bir sayfa, var olan bileşenlerden saatler içinde çıkıyor ve tasarımcının çizdiği ile geliştiricinin kodladığı aynı şey oluyor.

Ölçüt

Görünüm kadar hız ve herkes için kullanılabilirlik.

Arayüz yalnızca nasıl göründüğüyle değil, ne kadar hızlı geldiği ve kimin kullanabildiğiyle ölçülür. İki ölçütü de tasarımın parçası olarak yazıyoruz, sonradan denetlemiyoruz.

Core Web Vitals

Google'ın hız eşikleri

  • LCP

    İlk büyük içerik 2,5 saniyenin altında ekranda.

  • INP

    Her dokunuşa 200 milisaniyenin altında tepki.

  • CLS

    Açılırken hiçbir şey zıplamıyor; kayma 0,1'in altında.

WCAG 2.2 AA

W3C'nin erişilebilirlik ölçütü

  • Klavye

    Fare olmadan her şey ulaşılır, sıra mantıklı.

  • Ekran okuyucu

    Her kontrolün adı ve durumu sesli okunur.

  • Kontrast

    Metin zemine karşı en az 4,5:1.

  • Görünür odak

    Nerede olduğunuz her zaman belli.

Deneyin

Bir değişken, bütün parçalar.

Dört ayar birer tasarım değişkeni; parçalar gerçek kontroller ve yalnızca o değişkenleri okuyor. Birini çevirin, hepsi birlikte döner. Sistemin işi tam olarak bu.

Tema
Vurgu
Köşe
Yoğunluk
--surface: #ffffff;
--accent: #161616;
--radius: 6px;
--unit: 9px;
TaslakYayında

Bildirimler bu adrese gider.

Haftalık raporHer pazartesi sabahı, tek e-posta.
  • Beşiktaş Barbaros BulvarıMegaboardRezerve
  • Kadıköy RıhtımLED ekranBoşta

Yaptığımız işlerden

Bunları biz yaptık.

Aynı ekip, farklı işler. Yazılımı yazan, içeriği çeken ve reklamı yöneten aynı masada oturduğu için işler birbirine bağlanıyor.

Bamp: Web sitesi ve Yönetim Paneli
  • Next.js
  • Node.js
  • UI/UX Geliştirme

Bampİndoor ve Outdoor Reklam AjansıWeb, 2026

Web sitesi ve Yönetim Paneli

Bamp web sitesi baştan sona kurgulanarak tüm sayfalarıyla beraber yeni tasarıma geçildi. Next.js ve Node.js gibi gelişmiş yazılım kütüphaneleri kullanılarak en iyi hıza ve optimizasyona kavuştu

  • Ürün tasarımı
  • Next.js
  • pazaryeri entegrasyonu
  • ödeme altyapıları entegrasyonu

Omni PanelE-ticaretWeb, 2026

Gelişmiş E-ticaret Paneli ve Mağazaları

Çekim, içerik ve reklam aynı takvimde; her ay tek bir görsel dil, tek rapor.

  • Vitrin tasarımı
  • tema
  • Omnipanel entegrasyonu

Etic CommerceModa perakendeWeb, 2026

Omnipanel üzerinde kurulmuş markalı vitrin

Omnipanel'in katalog ve stokundan beslenen, markanın kendi tasarımıyla kurulmuş vitrin. Ürün sayfaları panelden çıkıyor; sepet, kargo ve ödeme aynı akışta.

  • Marka sitesi
  • scroll kurgusu
  • UI/UX arayüz tasarımı
  • web paneli kodlanması

Çok Kalabalık RestoranRestoran ve franchiseWeb, 2026

Franchise ve toptan satış için marka sitesi

Üç ürünlük menü, Boğaz atmosferi ve franchise teklifi tek scroll'da; ürünler sabitlenmiş sahnede sırayla açılıyor, başvuru formu sayfanın sonunda bekliyor.

“Toplantıda konuştuğumuz şey yayına alınan sayfada aynen duruyordu. Arada kaybolan bir katman olmadı.”

Selin AksoyPazarlama direktörü, Kavim

Nasıl ilerliyor

  1. 01

    Envanter

    Var olan ekranlar ve Figma dosyası taranıyor; tekrar eden parçalar, on çeşit buton ve tutarsızlıklar tek listede.

  2. 02

    Sistem

    Renk, tipografi, boşluk ve durum kuralları tek kaynağa yazılıyor. Figma değişkenleri ile koddaki token'lar aynı adı, aynı değeri taşıyor.

  3. 03

    Bileşenler

    Buton, form, tablo, diyalog: her parça bütün durumları ve erişilebilirliğiyle kodlanıyor, Storybook'ta canlı belgeleniyor.

  4. 04

    Yaygınlaştırma

    Var olan ekranlar ekibinizle birlikte sisteme taşınıyor. Yeni ekranlar için kural artık kod; kütüphane sizin deponuzda.

Kapsam

Ne teslim ediyoruz

Yakın çözümler

Sıkça sorulan sorular

Başlamadan önce sorulanlar

Aklınızda bir iş mi var?

Aklınızdaki işikonuşalım.

Kısa bir görüşmede kapsamı, süreyi ve bütçeyi netleştirelim. İş bize uymuyorsa bunu ilk görüşmede söylüyoruz.

Projeyi başlat

[email protected]