Design System ve Bileşen Kütüphanesi ile Web Geliştirme

Design system; “birkaç component çizimi” değil, tasarım kararlarının kodlanabilir kurallara dönüşmesidir. Üç temel katmanla düşünün:

1. Design tokens (renk, tipografi, spacing, radius, shadow)
2. Bileşenler (button, form, card, modal, navbar)
3. Dokümantasyon ve kullanım kuralları (Figma/Storybook, örnekler, do/don’t)

Bu yapı otel ve B2B’de ortak bir fayda üretir: “Yeni sayfa yapalım” dediğinizde sıfırdan başlamazsınız; hazır bloklarla hızlıca ilerlersiniz.

UI kit genelde “tasarım tarafındaki hazır parçalar”ı ifade eder; bileşen kütüphanesi ise bunların kod tarafındaki yaşayan karşılığıdır. İkisi birlikte çalışmazsa, UI kit vitrin olur; kod tarafında ise “bir daha benzerini yazalım” döngüsü başlar.

Temel bileşen seti (kurumsal minimum)

• •Button (primary/secondary/ghost)
• •Input + Select + Checkbox (form temeli)
• •Card (içerik kutusu)
• •Modal/Drawer (mobil kritik)
• •Badge/Tag (etiketleme)
• •Alert/Toast (geri bildirim)

Component gallery ve “tek yerde görme” etkisi

Büyük ekiplerde en büyük kayıp “zaten var mıydı?” sorusudur. Component gallery (Storybook gibi) bunun ilacıdır: herkes aynı parçayı görür, kullanır, varyantlarını bilir.

Kurumsal sitelerde tekrar eden bloklar şaşırtıcı derecede fazladır: hero section, özellik listesi, referanslar, CTA bandı, form bölümü, FAQ… Otel tarafında bunlara oda kartı, paket kartı, galeri blokları eklenir; B2B’de fiyat/plan kartı, case study blokları öne çıkar. Design system, bu tekrarları “şablon” değil bileşen olarak yönetir.

Tekrar kullanımın ölçülebilir çıktıları (KPI)

Sheet’teki veri noktası net: design system kullanan ekiplerde yeni sayfa geliştirme süreleri ve UI hataları azalır, revizyon maliyeti düşer. Bu etkiyi ölçmek için şu KPI’ları takip edin:

• •Yeni sayfa geliştirme süresi (gün/saat)
• •UI bug sayısı (release başına)
• •Component reuse oranı (sayfalarda)
• •Revizyon tur sayısı (tasarım→dev→QA)

Next.js + Tailwind, design system’i hayata geçirmek için pratik bir ikilidir: Tailwind ile token’ları class seviyesinde standardize edersiniz; Next.js ile komponentleri route’lar arasında tekrar kullanırsınız. Buradaki kritik nokta, “Tailwind’i serbest yazmak” değil, token’ları kurala bağlamaktır.

Design tokens → Tailwind theme eşlemesi

• •Renk paleti → theme.colors
• •Tipografi → fontFamily, fontSize
• •Spacing → spacing scale
• •Radius/shadow → borderRadius, boxShadow

Komponent standardı ve “variant” yönetimi

Button gibi bileşenlerde varyantları “herkes kafasına göre” üretirse sistem ölmez, ama dağılır. Varyantlar sınırlı ve dokümante olmalı.

TR’de design system daha çok mobil uygulama bağlamında konuşuluyor; oysa otel ve kurumsal web projelerinde “aynı problem” daha görünür: çok sayıda sayfa, çok sayıda kampanya, farklı ekipler ve sürekli revizyon.

Otel örnekleri (oda kartı, paket kartı, promo band)

• •Oda kartı: fotoğraf, özellikler, fiyat, CTA
• •Paket kartı: dahil olanlar, tarih aralığı, avantaj
• •Promo band: erken rezervasyon, esnek iptal, transfer

Mini örnek (otel): Antalya/Side gibi destinasyon sayfalarında “oda kartı” varyantları çok artar; design system burada kart varyantlarını sınırlayıp tutarlılık sağlar.

B2B örnekleri (fiyat/plan kartları, case blokları)

• •Fiyat/plan kartı: özellikler, karşılaştırma, CTA
• •Case study blokları: problem–çözüm–sonuç
• •Demo/teklif form bileşenleri

Design system’in başarısı “ilk kurulum” değil, bakımdır. Marka kimliği değişir, kampanyalar artar, teknoloji stack’i güncellenir; sistem buna dayanmalı. Bu yüzden basit bir versiyon yönetimi ve değişiklik süreci gerekir.

Design system hangi bölümlerden oluşmalı?

Minimum olarak: design tokens (renk/tipografi/spacing), temel bileşen seti (button/form/card/modal), layout kuralları (grid/breakpoints), dokümantasyon (Figma/Storybook) ve sürüm/karar kayıtları (changelog) olmalıdır. Bu yapı, yeni sayfaları hızlı üretirken marka tutarlılığını korur.

Component kütüphanesi nasıl dokümante edilir?

Her bileşen için amaç, varyantlar, kullanım örnekleri, erişilebilirlik notları ve “do/don’t” maddeleri yazılmalıdır. Storybook’ta canlı örnek, Figma’da tasarım karşılığı bulunmalı; isimlendirme aynı olmalıdır.

Her sayfayı ayrı proje gibi ele almak kısa vadede hızlı görünse de uzun vadede revizyon maliyetini, UI hatalarını ve ekip içi kopukluğu büyütür. Design system yaklaşımı; token, component ve dokümantasyon katmanlarıyla bu dağınıklığı kontrol altına alır.

Otel ve B2B projelerinde tekrar eden kartlar, CTA alanları, form bileşenleri ve bilgi blokları sistemin en görünür faydasını üretir. Next.js + Tailwind ile bunu teknik olarak da sürdürülebilir hale getirdiğinizde yeni sayfa üretimi hızlanır, marka dili korunur ve ekipler aynı dili konuşur.