İçeriğe geç
TREN
Proje konuşalım

Tasarım sistemi

Düğme, form ve kart gibi parçaları bir kez tasarlayıp her sayfada aynı markanın parçası gibi kullanırız.

Tipik hedefler; gerçek değer pilotta ölçülür.

  • Tek kaynaktasarım ve kod için ortak değerler
  • Daha az tekraryeni sayfada hazır parça kullanımı hedefi
  • Mobil önceliklibileşen yaklaşımı

Sorun

Sitenin her sayfası biraz farklı görünüyor. Yeni bir sayfa eklenince düğme, başlık ve boşluklar yeniden uğraştırıyor. Birkaç kişi çalışınca ortaya birbirine benzemeyen ekranlar çıkıyor.

Kimler için

  • Büyüyen site ve uygulamaları olanlar
  • Birden fazla sitesi ya da ürünü olan firmalar
  • Tasarımcı ve yazılımcı birlikte çalışan ekipler
  • Sık yeni sayfa ya da kampanya ekleyenler
  • Arayüzü dağınıklaşmış projeler

Ne yapıyor

  1. Tasarım değerleri

    Renk, yazı boyutu, boşluk ve köşe yuvarlaklığı gibi kararlar bir kez yazılır. Her yerde aynı değerler kullanılır.

  2. Bileşen kütüphanesi

    Düğme, form alanı, kart, menü ve uyarı gibi parçalar Figma'da hazır durur. Yeni ekran bunlardan kurulur.

  3. Kodda karşılığı

    Aynı parçalar kodda da hazır bileşen olarak yazılır. Tasarımdaki ile sitedeki aynı görünür.

  4. Açık ve koyu tema

    İstersen aynı sistem iki temayla çalışır. Kullanıcı kendi ekranına uygun olanı görür.

  5. Kullanım rehberi

    Hangi parçanın ne zaman kullanılacağını gösteren kısa bir rehber hazırlarız. Yeni gelen biri de uygular.

  6. Mevcut siteden çıkarma

    Sitende zaten kullandığın parçaları tarar, tutarsız olanları ayıklar ve sisteme toplarız.

Nasıl teslim ediyoruz

  1. 01

    Mevcut durumu görme

    Sitenin ve ekranlarının envanterini çıkarırız. Hangi parçaların tekrar ettiğini ve nerede tutarsızlık olduğunu gösteririz.

  2. 02

    Temel kurallar

    Renk, yazı, boşluk ve köşe kurallarını belirler, sana onaylatırız.

  3. 03

    Bileşenler

    Ortak parçaları Figma'da ve kodda hazırlarız. Birkaç gerçek sayfayı bunlarla yeniden kurarak test ederiz.

  4. 04

    Rehber ve devir

    Kullanım rehberini yazar, ekibine kısa bir tanıtım yaparız. Sistem bundan sonra sizin olur.

Birlikte çalıştığı araçlar

  • Figma
  • Storybook
  • Next.js
  • React
  • Tailwind CSS

Sık sorulanlar

Küçük bir site için gerekli mi?

Beş altı sayfalık bir site için çoğu zaman şart değil, hafif bir sürümü yeter. Site büyüdükçe ya da birden fazla ürünün olduğunda işe yarar.

Ne kadar sürer?

Kapsama göre değişir. Küçük bir sistem çoğunlukla 2 ile 4 hafta sürer. Parça sayısı arttıkça uzar.

Mevcut sitem bozulur mu?

Hayır. Önce sistemi ayrı kurarız, sonra sayfaları adım adım ona geçiririz. Her adımı test ederiz.

Başka bir ekip de kullanabilir mi?

Evet. Rehber ve düzenli dosya bu yüzden hazırlanır. Yeni gelen tasarımcı ya da yazılımcı sistemi kendi başına kullanabilir.

Aynı hizmetten diğer çözümler

Tasarım

Tasarım sistemi

Ücretsiz analiz iste