Yeni Başlayanlar İçin Basit Bir Tasarım Sistemi Kurma Rehberi

[sessiz_vedalar]

1. Tasarım sisteminin temel öğeleri nelerdir?

• Renk Paleti: Temel ve aksan renkleri.
• Boşluk (Spacing) Ölçeği: Küçük, orta, büyük boşluk değerleri.
• Tipografi: Font ailesi, boyut, satır yüksekliği.
• Bileşenler: Buton, input, kart gibi tekrar kullanılabilir UI parçaları.

2. Renk paleti nasıl oluşturulur ve değişkenlerle nasıl yönetilir?
Renkleri HEX, RGB veya HSL formatında seçin. CSS Custom Properties (--color-primary, --color-secondary, vb.) ile depolayın.

:root {
  --color-primary: #0066cc;
  --color-secondary: #ffcc00;
  --color-neutral-100: #f5f5f5;
  --color-neutral-900: #222222;
}

Bundan sonra tüm tasarımda var(--color-primary) kullanımıyle tutarlı renk yönetimi sağlanır.

3. Boşluk (spacing) ölçeklerini nasıl tanımlarsınız?
Genellikle 4, 8, 16, 32, 64 gibi katlanmış değerler tercih edilir.

$spacing: (
  xs: 4px,
  sm: 8px,
  md: 16px,
  lg: 32px,
  xl: 64px
);

Bunları margin, padding gibi yerlerde map-get($spacing, md) şeklinde çağırarak tutarlı yatay/ dikey boşluklar oluşturun.

4. Bileşenler nasıl tanımlanır ve dökümante edilir?
Her bileşen için ayrı bir dosya ve klasör oluşturun:

components/
│
├─ button/
│  ├─ button.html
│  ├─ button.css
│  └─ README.md   <-- Kullanım, props, örnekler
├─ alert/
│  ├─ alert.html
│  ├─ alert.css
│  └─ README.md

README.md içinde bileşenin ne yaptığı, hangi niteliklerinin (props) değiştirilebileceği ve örnek kodlar yer alır.

5. Takım içinde tutarlı kullanım için hangi araç veya yöntem önerilir?
Tasarımları Storybook veya Styleguidist ile belgeleyerek UI bileşenlerini interaktif olarak gösterin.

• Storybook: stories dosyalarıyla bileşenlerin farklı durumlarını test eder ve dokümantasyon sunar.
• CSS Lint veya Stylelint: Tanımladığınız değişkenlerin uyumunu kontrol eder.

Bu yöntem, tasarım sisteminin hem tasarımcılar hem de geliştiriciler tarafından okunabilir ve sürdürülür hale gelmesini sağlar.

Tasarım sistemini oluştururken, uygulamanızdaki görsel tutarlılığı korumak için hangi adımı önce ele almak isterdiniz?