İçeriğe geç
DESTEK SİSTEMİ
UI/UX ve Ürün Tasarımı

Yapılan işe göre tasarlanmış arayüzler

Yazılımı kullanılacağı gibi tasarlıyoruz: yoğun bir günün üçüncü ekranında, İngilizcenin yanı sıra Arapçada ve bu görevi dört yüz kez yapmış biri tarafından. Tel çerçeveler, arayüz, tasarım sistemi ve geliştiricilerin üzerinden inşa edebileceği bir teslim.

Mühendislikle temasa dayanan tasarım

Sunumda güzel görünen ama inşa edilemeyen, ya da inşa edilip bakımı yapılamayan bir tasarım size para kazandırmaz, kaybettirir. Kısıtların içinde tasarlarız: gerçek içerik uzunlukları, gerçek hata durumları, gerçek yetkiler, gerçek yükleme durumları ve biri sağdan sola olmak üzere üç dil. Süreç ekranlardan değil işten başlar. Bu görevi kim yapıyor, ne sıklıkla, halihazırda ne biliyor, yanlış yaptığında ne oluyor. Sonra akışlar, sonra tel çerçeveler, sonra arayüz, sonra tek seferlik çalışma alanlarından oluşan bir klasör değil; token ve bileşenleri olan bir tasarım sistemi. Teslimi Figma’da yaparız: durumlar not düşülmüş, boşluklar bir geliştiricinin tahmin yürütmeden uygulayabileceği bir ölçekte. Yazılımı da biz geliştiriyorsak tasarım sistemi ile bileşen kütüphanesi birbirinden uzaklaşan iki belge değil, aynı şeydir.

Temel faydalar

Bunun işiniz için değiştirdiği şeyler.

Daha az destek talebi

Destek yükünün çoğu bir arayüz sorunudur. Kafa karıştıran adımı düzgün tasarlamak, ona insan ayırmaktan ucuzdur.

Daha hızlı geliştirme

Gerçek token ve bileşenleri olan bir tasarım sistemi, ikinci ekranın birincinin küçük bir kesri kadar maliyetli olması demektir.

Yapısı gereği erişilebilir

Kontrast, odak durumları, klavye yolları ve etiketleme tasarımda kararlaştırılır; değiştirmenin ucuz olduğu yerde.

Üç dilde tasarlanmış

Türkçe kelime uzunlukları ve Arapça sağdan sola akışıyla test edilmiş yerleşimler; sonradan çevrilmiş değil.

Neler teslim ediyoruz

Gerçekte elinize geçenler.

  • Keşif ve kullanıcı akışları

    Kim ne yapıyor, ne sıklıkla ve mevcut süreç gerçekte nerede tıkanıyor.

  • Tel çerçeveler

    Renk tartışılmadan önce mutabık kalınan yapı ve hiyerarşi.

  • Arayüz tasarımı

    Üretimde var olacak her durum: boş, yükleniyor, hata, yetkisiz, çok fazla veri.

  • Tasarım sistemleri

    Token’lar, bileşenler ve kurallar: kırkıncı ekranı birinciyle tutarlı tutan şey.

  • Etkileşimli prototipler

    Kullanıcı testi ya da bir yatırımcıya gösterim için tıklanabilir akış; akış mühendislik zamanına mal olmadan önce.

  • Geliştiriciye teslim

    Not düşülmüş durumlar, bir boşluk ölçeği ve bir ilham panosuna değil koda karşılık gelen token’lar.

Temel yetkinlikler

Bu hizmetin dayandığı mühendislik alanları.

Ürün keşfi
Kullanıcı araştırması
Bilgi mimarisi
Tel çerçeveleme
Görsel ve arayüz tasarımı
Duyarlı tasarım
RTL ve çok dilli yerleşim
Erişilebilirlik (WCAG)
Prototipleme
Tasarım sistemi yönetişimi

Kullandığımız teknolojiler

Başvuracağımız teknoloji yığını ve her parçanın ne işe yaradığı.

Figma

Arayüzün tasarlandığı, gözden geçirildiği ve devredildiği yer: tasarımın da geliştirmenin de baktığı tek dosya.

Tailwind

Büyüyen özel CSS yığını olmadan, geniş bir kod tabanında tasarımı tutarlı tutan yardımcı sınıf temelli bir stil sistemi.

React

Durum yönetimi yoğun arayüzler için bileşen kütüphanesi: panolar, editörler ve siz bakarken güncellenen her şey.

Vue.js

Mevcut bir uygulamayı baştan yazmadan tek bir sayfaya eklenebilen, kademeli olarak benimsenen arayüz çatısı.

TypeScript

JavaScript üzerine statik tipler. Birden fazla kişinin baktığı bir kod tabanında bir grup çalışma zamanı hatasını derleme zamanına taşır.

Teknoloji kullanımı

Bu yığındaki teknolojilerin, aşağıdakiler de dâhil olmak üzere çeşitli kuruluşlar tarafından kullanıldığı kamuya açık kaynaklarda belgelenmiştir.

GitLab

Vue.js

Kaynak

Slack

TypeScript

Kaynak

Bu kuruluşlar, listelenen teknolojilerin belgelenmiş kullanıcıları olarak anılmaktadır. Vertex Arc’ın müşterisi değildirler ve burada yer almaları Vertex Arc ile herhangi bir ilişki ya da onay anlamına gelmez.

Hizmet verdiğimiz sektörler

Bu hizmetin genellikle iyi oturduğu sektörler.

  • SaaS
  • FinTech
  • Sağlık
  • Eğitim
  • E-Ticaret
  • Profesyonel Hizmetler

Teslim sürecimiz

Bir işin ilk görüşmeden sürekli desteğe kadar nasıl ilerlediği.

  1. Keşif

    Yazılımın ne yapması gerektiğini, kimin kullandığını ve hangi kısıtların gerçek olduğunu çıkarırız. Çıktı bir teklif değil, yazılı bir kapsamdır.

  2. Mimari

    Veri modeli, sınırlar, entegrasyonlar ve altyapı; kimse uygulama kodu yazmadan önce kararlaştırılır ve mutabık kalınır.

  3. Tasarım

    Akışlar ve arayüz; ürünün gerçekte nasıl hissettirdiğini belirleyen boş, hatalı ve yetkisiz durumlar dâhil.

  4. Geliştirme

    Alışıldık bir yapı üzerinde gözden geçirilebilir artışlarla; bozulması pahalıya patlayacak yerlerde testlerle.

  5. Kalite ve güvenlik

    Yayına almadan önce işlevsel testler, performans kontrolleri ve kimlik doğrulama, yetkilendirme ile bağımlılık riskinin incelenmesi.

  6. Yayına alma

    Dağıtım, izleme ve gerçek trafiğin hazırlık ortamının bulamadığını bulduğu dönemde yakın takip.

  7. Sürekli iyileştirme

    Destek sistemi üzerinden yamalar, yükseltmeler ve yeni işler; böylece ürün sessizce yaşlanmak yerine bakımlı kalır.

Kullanım senaryoları

Bunun bitmiş bir ürün olarak görünüşü.

Çalışan bir ürünü yeniden tasarlamak

Kullanıcılarınızın zaten bildiklerini korurken destek yükü ve terk oranı üreten kısımları düzeltmek.

Yeni bir ürün tasarlamak

İlk akıştan tasarım sistemine kadar; böylece geliştirme bir tarifle değil, somut bir şeyle başlar.

Bir tasarım sistemi kurmak

Ekran ekran büyümüş bir ürünü, bir ekibin üzerinden geliştirebileceği bileşenlerde toplamak.

Neden Vertex Arc

Neyin inşa etmesi pahalı olduğunu bilen tasarımcılar

Üç haftaya mal olacak etkileşimi, henüz sayfadaki bir dikdörtgenken işaretleriz.

Yalnızca mutlu senaryo değil, her durum

Boş, hatalı ve yetkisiz durumlar tasarlanır. Aksi hâlde bir geliştirici bunları akşam altıda uydurur.

Arapça çevrilmez, tasarlanır

RTL yerleşim, aynalanmış navigasyon ve Arapça yazı tipi yığını tasarım dosyasının parçasıdır; sonradan açılan bir kayıt değil.

Geliştirmesini de yapabiliriz

Tasarım ve mühendisliğin tek ekipte olması, teslimin kimsenin okumadığı bir belge değil bir konuşma olması demektir.

Sıkça sorulan sorular

Geliştirmeden yalnızca tasarım yapabilir misiniz?
Evet. Yalnızca tasarım işleri bir Figma dosyası, bir tasarım sistemi ve mühendislerinizle bir devir oturumuyla sonlanır; geliştirmeleri sürerken soruları için erişilebilir kalırız.
Kullanıcı testi yapıyor musunuz?
Karar gerektirdiğinde. Beş ekranlık bir iç araç için onu kullanacak dört kişiyle konuşmak resmi bir çalışmadan daha değerlidir. Dönüşüm hedefi olan halka açık bir üründe ise yapılandırılmış oturumlar yürütürüz.
Zaten bir markamız var. Onun içinde çalışır mısınız?
Evet ve genellikle onu genişletiriz. Marka kılavuzu logo, renk ve tipografiyi kapsar; bir ürün ise boşluk ölçeği, bileşen durumları ve koyu mod ister. Bunları var olanı değiştirerek değil, üzerine ekleyerek kurarız.