Doküman Versiyonu: 1.0 Doküman Tipi: Production-Ready Product & Engineering Plan Hazırlayan Roller: Principal Software Architect · Senior Product Manager · Senior UX Designer · Senior Brand Designer · Booking Platform Uzmanı Hedef Kitle: AI Coding Agent (doğrudan geliştirme için), Stüdyo Yönetimi, Geliştirme Ekibi Dil: Türkçe (yalnızca teknoloji/ürün isimleri İngilizce bırakılmıştır)
- Executive Summary
- Ürün Vizyonu
- İş Analizi
- Marka Analizi
- Bilgi Mimarisi
- UX Tasarımı
- UI Tasarımı
- Design System
- Özellik Dokümanı
- Booking Sistemi
- Admin Paneli
- CRM
- SEO
- Blog Stratejisi
- Veritabanı Tasarımı
- API Planı
- Güvenlik
- Performans
- Analitik
- Yol Haritası
- Gelecek Sürümler
Bu doküman, Türkiye'de faaliyet gösteren premium bir dövme stüdyosu olan Blendz Ink için uçtan uca bir dijital platform inşa etmeyi hedefleyen production seviyesinde bir ürün ve mühendislik planıdır. Platform; markanın editoryal, sanatsal ve lüks kimliğini dijitale taşıyan bir vitrin (showcase) deneyimi ile, operasyonel yükü azaltan randevu tabanlı bir booking sistemini ve stüdyo yönetimini kolaylaştıran bir admin paneli / hafif CRM'i tek bir çatı altında birleştirir.
Platform kesinlikle bir "e-ticaret" veya "online ödeme" sistemi değildir. Tüm ödemeler stüdyoda, yüz yüze, işlem sonunda nakit veya kart ile tahsil edilir. Bu nedenle sistemin tamamı; randevu talebi oluşturma → yönetici onayı → bildirim → hatırlatma → işlem → yorum talebi akışına göre kurgulanmıştır. Hiçbir ödeme sağlayıcısı (Stripe, iyzico, PayTR vb.) entegre edilmeyecektir.
Türkiye'de dövme stüdyolarının büyük çoğunluğu randevu ve tanıtım süreçlerini yalnızca Instagram DM'i üzerinden yürütmektedir. Bu durum şu sorunları doğurur:
- Sanatçılar gün içinde onlarca DM'e cevap vermek zorunda kalır, bu da hem sanat üretim zamanını hem de müşteri deneyimini olumsuz etkiler.
- Randevu bilgileri (isim, telefon, referans görsel, bölge, boyut) dağınık şekilde DM geçmişinde kaybolur.
- Marka; Instagram algoritmasına ve üçüncü taraf bir platforma bağımlı kalır, kendi SEO değerini ve organik Google trafiğini biriktiremez.
- Potansiyel müşteri, fiyat, süreç, hijyen standartları, sanatçı uzmanlığı gibi güven inşa eden bilgilere kolayca ulaşamaz; bu da dönüşüm oranını düşürür.
- Studio, tekrar eden müşteriyi, VIP müşteriyi, iptal/no-show oranlarını sistematik olarak takip edemez.
Blendz Ink Dijital Platformu bu sorunların tamamını çözecek şekilde tasarlanmıştır: DM trafiğini yapılandırılmış bir randevu formuna yönlendirir, markanın sanatsal kimliğini yüksek çözünürlüklü bir dijital galeri deneyimiyle sergiler ve arka planda tam teşekküllü bir yönetim/CRM sistemiyle operasyonu destekler.
| Paydaş | Değer Önermesi |
|---|---|
| Potansiyel Müşteri | Instagram'dan mesaj yazmadan, 3 dakikada, adım adım rehberli bir akışla randevu talebi oluşturabilir; süreç şeffaftır, ne zaman geri dönüş alacağını bilir. |
| Mevcut Müşteri | Geçmiş randevularını, referans görsellerini, favori sanatçısını tek yerden yönetir; bakım rehberine ve hatırlatmalara kolayca erişir. |
| Sanatçı | Kendi portfolyosunu, takvimini, uzmanlık alanlarını sergiler; kendi çalışma kurallarına göre (min. randevu aralığı, çalışma günleri) yönetilen bir takvime sahiptir. |
| Stüdyo Yöneticisi | Tüm randevu taleplerini tek ekrandan onaylar/reddeder, müşteri geçmişini CRM mantığıyla izler, blog/portfolyo/galeri içeriklerini kod bilmeden yönetir. |
| Marka | Apple, Aesop, Acne Studios kalitesinde editoryal bir dijital vitrine sahip olur; Google'da yerel aramalarda üst sıralara çıkar; DM bağımlılığından kurtulur. |
- Online ödeme, kapora, hediye çeki satışı yoktur (gelecek sürümde hediye kartı planlanmıştır, ödeme değil "hediye kodu" mantığıyla).
- Gerçek zamanlı canlı chat / mesajlaşma sistemi ilk sürümde yoktur (iletişim formu ve WhatsApp/Instagram deep-link yeterlidir).
- Çoklu şube desteği ilk sürümde yoktur (mimari buna hazır bırakılacak, aktivasyonu v2'de yapılacaktır).
- Native mobil uygulama (iOS/Android) ilk sürümde yoktur; platform mobil web'de kusursuz çalışacak şekilde (PWA'ya yakın deneyim) inşa edilir.
- Ziyaretçi, DM atmadan, siteden bağımsız olarak eksiksiz bir randevu talebi oluşturabiliyor.
- Randevu talebi oluşturulduğunda hem müşteriye hem yöneticiye otomatik e-posta/SMS bildirimi gidiyor.
- Yönetici, admin panelinden randevuyu tek tıkla onaylayabiliyor/reddedebiliyor, onay sonrası otomatik bildirim tetikleniyor.
- Sanatçı portfolyoları, yüksek çözünürlüklü görsellerle, filtrelenebilir bir galeri deneyiminde sunuluyor.
- Site, Lighthouse Performance/SEO/Accessibility/Best Practices skorlarında 90+ değer alıyor.
- Mobil cihazda (375px genişlik) tüm akışlar (randevu dahil) pürüzsüz çalışıyor.
- Sayfa, ilk bakışta "AI/SaaS dashboard" hissi değil, "sanat galerisi / lüks moda markası" hissi veriyor.
"Blendz Ink dijital platformu; dövmeyi bir hizmet değil bir sanat eseri olarak sunan, müşteriyi DM karmaşasından kurtarıp saygın bir randevu deneyimine taşıyan ve stüdyonun kimliğini Türkiye'nin en editoryal, en premium tattoo dijital deneyimi hâline getiren bir sanat galerisi–booking platformu hibritidir."
- Sanat önce gelir. Her sayfa tasarımı, önce görseli, sonra metni, en son arayüz elemanını önceliklendirir. Fotoğraf ve dövme işi her zaman kompozisyonun kahramanıdır.
- Sürtünmesiz randevu. Randevu formu hiçbir zaman tek bir uzun form olarak sunulmaz; adım adım, bilişsel yükü düşük, ilerleme çubuklu bir "wizard" akışı olarak tasarlanır.
- Şeffaflık güven yaratır. Süreç adımları (onay bekleniyor, onaylandı, hatırlatma) her zaman müşteriye açıkça gösterilir; belirsizlik bırakılmaz.
- Sessiz lüks. Renk paleti kısıtlı, tipografi büyük ve iddialı, boşluk cömerttir. Hiçbir öğe "bağırmaz"; marka kendinden emin ve sakin bir ses tonu kullanır.
- Operasyonel gerçekçilik. Sistem, gerçek bir stüdyonun günlük ritmine göre kurgulanır: sanatçı bazlı çalışma saatleri, randevu çakışma kontrolü, iptal/no-show yönetimi, VIP müşteri etiketleme.
- Türkiye'ye özel SEO refleksi. İçerik mimarisi, yerel arama davranışlarına (şehir + hizmet + stil kombinasyonları) göre kurgulanır.
- Şablon hissi yasak. Her sayfa kendine özgü bir kompozisyona sahiptir; tekrarlayan "kart grid" düzenlerinden kaçınılır, editoryal dergi mizanpajı esas alınır.
- 22-35 yaş, İstanbul/Ankara/İzmir gibi büyük şehirde yaşıyor, sosyal medyada aktif. – İlk dövmesini yaptıracak ya da koleksiyonuna yenisini ekleyecek.
- Instagram'da stüdyoyu keşfetmiş, ama DM yazmadan önce "gerçek bir yer mi, hijyenik mi, fiyat aralığı ne, sanatçı kim" sorularının cevabını görmek istiyor.
- Mobilden geziniyor, akşam saatlerinde (21:00-24:00) araştırma yapıyor.
- 28-45 yaş, vücudunda birden fazla dövme var, belirli bir sanatçıya bağlı.
- Sanatçının yeni işlerini takip ediyor, bir sonraki projesi için ilham topluyor.
- Geçmiş randevularını, hangi sanatçıyla çalıştığını hatırlamak istiyor.
- Arkadaş grubu ile birlikte "eşleşen dövme" (matching tattoo) yaptırmak istiyor.
- Grup randevusu, aynı gün farklı saatlerde birden fazla kişi.
- Yurt dışından gelen, İstanbul'da tattoo yaptırmak isteyen turist.
- İngilizce içerik ve uluslararası ödeme yöntemleri (yüz yüze) bekliyor.
- Günlük 15-30 randevu talebini triaj etmesi gerekiyor.
- Sanatçı takvimlerini senkron tutmalı, çakışmaları önlemeli.
- Müşteri sadakatini ve VIP segmentini izlemeli.
- Kendi portfolyosunu güncel tutmak, yeni işlerini yüklemek istiyor.
- Kendi müsaitlik takvimini yönetmek istiyor.
- Hangi randevuların kendisine atandığını görmek istiyor.
Blendz Ink dijital platformu; Bosphorus Ink, Ink Blaze gibi çok şubeli/kurumsal görünen stüdyo sitelerinden daha butik, daha sanatsal, daha az "klinik" bir ton ile ayrışacaktır. Dünya çapındaki referans noktaları:
- Bang Bang NYC — Selebriteler tarafından tercih edilen, editoryal fotoğraf odaklı sunum.
- Sang Bleu (Londra/Zürih/Los Angeles) — Yüksek moda estetiği, tipografi odaklı, karanlık tema.
- State of Grace (Los Angeles) — Sanatçı bazlı portfolyo sistemi, dergi düzeni.
- Great Omi (Londra) — Minimal, çok fazla beyaz boşluk, güçlü tipografi.
- Fleur Noire (Paris) — Fine-line ve botanik tarzı, zarif ve feminen dokunuşlar. Bu stüdyoların ortak paydası: az sayıda ama çok güçlü görsel, cömert boşluk, iddialı serif/sans karışımı tipografi, karanlık zemin üzerine yüksek kontrastlı fotoğraf. Blendz Ink bu dili Türkiye pazarına, yerelleştirilmiş SEO ve booking mantığıyla taşıyacaktır.
Blendz Ink, hizmet bazlı bir stüdyo işletmesidir. Gelir modeli tamamen yüz yüze, işlem sonrası ödeme üzerine kuruludur (nakit/kart, stüdyoda POS cihazı ile). Dijital platformun iş modeline katkısı doğrudan gelir tahsilatı değil, aşağıdaki dolaylı değerler üzerinden ölçülür:
- Randevu dönüşüm oranı: Siteyi ziyaret edenlerin kaçta kaçının randevu talebi oluşturduğu.
- DM'den forma geçiş oranı: Instagram bio linkinden gelen trafiğin randevu formuna ulaşma oranı.
- No-show oranında azalma: Otomatik hatırlatma bildirimleri sayesinde randevuya gelmeme oranının düşmesi.
- Tekrar müşteri oranı: Müşteri panelindeki geçmiş randevu ve favori sanatçı özellikleri sayesinde artan sadakat.
- Organik arama trafiği: "İstanbul dövme stüdyosu", "Kadıköy dövme", "fine line dövme İstanbul" gibi aramalarda üst sıralarda yer alma.
Mevcut Durum (DM Bazlı): Müşteri Instagram'da profili keşfeder → DM atar → Sanatçı/yönetici manuel olarak soru-cevap yapar (fikir, bölge, boyut, referans) → Uygun tarih manuel not defterine/Google Calendar'a yazılır → Onay yine DM üzerinden verilir → Hatırlatma genellikle yapılmaz → Müşteri gelmeyebilir (no-show riski yüksek).
Hedef Durum (Platform Bazlı): Müşteri siteye girer → Sanatçı/stil/portfolyo inceler → "Randevu Oluştur" akışını başlatır → Yapılandırılmış adımlarla (hizmet, sanatçı, boyut, bölge, referans görsel, açıklama, takvim, saat, iletişim bilgisi) talebini oluşturur → Sistem otomatik onay maili/SMS'i gönderir ("talebiniz alındı") → Admin panelinde yönetici talebi inceler, gerekirse sanatçıya danışır, saatini teyit eder → Onay/red kararını verir → Sistem otomatik bildirim gönderir → Randevudan 48 saat ve 3 saat önce otomatik hatırlatma gönderilir → Randevu günü işlem yapılır → Admin randevuyu "Tamamlandı" olarak işaretler → Sistem otomatik yorum/değerlendirme talebi gönderir.
| Paydaş | Sorumluluk | Sistemdeki Rolü |
|---|---|---|
| Stüdyo Sahibi / Genel Yönetici | Marka stratejisi, fiyatlandırma, sanatçı kadrosu | admin (Super Admin) rolü |
| Ön Büro / Randevu Sorumlusu | Randevu triyajı, müşteri iletişimi | staff (Front Desk) rolü |
| Sanatçılar | Portfolyo, kendi takvimi, iş kabulü | artist rolü |
| Müşteriler | Randevu talebi, geri bildirim | customer rolü |
| Misafir Ziyaretçi | İçerik tüketimi, ilk randevu talebi | Kimliksiz (guest) |
| Risk | Etki | Azaltım |
|---|---|---|
| Spam/bot randevu talepleri | Orta-Yüksek | reCAPTCHA v3/Turnstile, honeypot alan, oran sınırlama (rate limiting), telefon doğrulama (OTP - v2) |
| Sanatçı takviminde çakışma | Yüksek | Randevu oluşturulurken sunucu tarafında çakışma kontrolü, admin onay adımı son güvenlik katmanı |
| No-show oranı | Orta | Otomatik çoklu hatırlatma (mail + SMS), "randevu kuralları" sayfasında net iptal politikası |
| Referans görsellerin telif/uygunsuz içerik riski | Düşük-Orta | Yükleme sırasında dosya tipi/boyut kısıtı, admin onay adımında görsel önizleme, admin tarafından reddetme imkânı |
| KVKK uyumsuzluğu | Yüksek (yasal) | Açık rıza metinleri, aydınlatma metni, veri saklama süresi politikası, silme talebi mekanizması |
| Marka algısının "sıradan template" görünmesi | Yüksek (marka) | Özgün editoryal tasarım sistemi, tekrarlayan kart düzenlerinden kaçınma (bkz. Bölüm 7) |
- Aylık randevu talebi sayısı
- Randevu talebi → onay oranı
- Onay → tamamlanma oranı (no-show hariç)
- No-show oranı (%)
- Ortalama yanıt süresi (talep oluşturma → admin onayı)
- Sanatçı bazlı doluluk oranı
- Organik arama trafiği (aylık tekil ziyaretçi)
- Blog sayfa görüntülenme sayısı ve ortalama okuma süresi
- Google Business Profile görüntülenme/yol tarifi/arama tıklama oranı
- Müşteri memnuniyet puanı (yorum ortalaması)
Bu bölüm, Blendz Ink Instagram hesabının (@blendz.ink) kamuya açık genel izlenimi, dövme stüdyosu sektöründeki premium konumlandırma pratikleri ve Türkiye'deki başarılı örnek stüdyoların (Bosphorus Ink, Ink Blaze vb.) kamuya açık marka dili incelenerek; sektör bazlı en iyi pratiklerin sentezlenmesiyle oluşturulmuştur. Instagram'ın otomatik veri erişimini kısıtlaması nedeniyle, marka dili analizinde isim çağrışımı (Blendz = "harman/karışım", Ink = "mürekkep"), sektör konvansiyonları ve premium tattoo stüdyolarının evrensel görsel dili baz alınmıştır. Geliştirme ekibi, canlı yayına almadan önce gerçek Instagram içeriğiyle (post görselleri, hikaye vurguları, profil rengi, öne çıkan çalışmalar) bu analiz doğrulanmalı ve gerekirse renk/görsel seçimleri gerçek marka varlıklarıyla (logo, gerçek dövme fotoğrafları) güncellenmelidir.
İsim Analizi — "Blendz Ink":
- "Blendz" kelimesi "blend" (harman, karışım, geçiş) kelimesinin sokak/stüdyo diline uyarlanmış hâlidir. Bu, stüdyonun stil karışımı (fine line, realism, blackwork, dövme geçiş teknikleri — "blending" shading tekniği) konusunda uzmanlaştığına işaret eder.
- "Ink" kelimesi doğrudan dövme mürekkebine referans verir; global tattoo stüdyo isimlendirme konvansiyonuna (Bang Bang, Sang Bleu, Kings Avenue) uygundur.
- Marka ismi kısa, akılda kalıcı, İngilizce-Türkçe karışık kullanıma uygun; bu nedenle dijital platformda da iki dilli (TR ana, EN opsiyonel) bir yapı düşünülebilir (v2 kapsamı).
Blendz Ink; "sokak stüdyosu" değil, randevulu, kürasyonlu, portfolyo bazlı çalışan butik bir sanat stüdyosu konumundadır. Hedef kitlesi:
- Şehirli, sosyal medya okur-yazarlığı yüksek, 20-40 yaş arası.
- Estetik farkındalığı yüksek, "ucuz ve hızlı dövme" değil "kişiye özel sanat eseri" arayan kitle.
- Instagram'ı keşif kanalı, ama nihai kararı görsel kalite + güven sinyalleri (hijyen, portfolyo derinliği, yorumlar) üzerinden veren kullanıcılar.
| Boyut | Blendz Ink Konumu |
|---|---|
| Ses Tonu | Sakin, kendinden emin, samimi ama gösterişsiz. Asla agresif satış dili kullanmaz. |
| Görsel Dil | Karanlık zemin, yüksek kontrast, minimal metin, büyük görsel. |
| Duygu | Güven, sanatsal saygınlık, kişisel dönüşüm hissi. |
| Ton Karşıtlıkları | "Ucuz/hızlı" değil → "özenli/randevulu". "Kalabalık salon" değil → "kürasyonlu atölye". |
Marka renk paletinin AI/SaaS mor-mavi paletlerinden tamamen uzak, dövme mürekkebi ve deri tonlarından ilham alan, editoryal bir karanlık tema olması hedeflenir:
| Rol | Renk Adı | Yaklaşık Hex | Kullanım |
|---|---|---|---|
| Zemin (Primary Background) | Mürekkep Siyahı | #0A0A0A |
Ana zemin, hero, tüm karanlık bölümler |
| İkincil Zemin | Kömür Grisi | #141414 |
Kart/panel arka planları, bölüm ayrımı |
| Yüzey / Ayraç | Duman Grisi | #1F1F1F |
Border, divider, subtle kart yüzeyleri |
| Ana Metin | Kırık Beyaz (Bone) | #F5F1EA |
Başlıklar, ana gövde metni |
| İkincil Metin | Sıcak Gri | #A8A29B |
Açıklama metinleri, meta bilgiler |
| Vurgu Rengi (Accent) | Pas/Bakır (Ember Copper) | #B5652B veya #C77B3E |
CTA butonları, aktif durumlar, ince çizgiler, hover vurguları |
| İkincil Vurgu (opsiyonel, çok az kullanım) | Kan Kırmızısı Tonu (Deep Crimson) | #7A1F1F |
Sadece çok özel vurgular (VIP rozet, "Sınırlı Randevu" uyarısı gibi) — aşırı kullanılmaz |
| Başarı | Zeytin Yeşili (Muted Olive) | #5B6B4E |
Onay/başarı durumları — parlak yeşil DEĞİL, doğal/toprak tonu |
| Hata/Uyarı | Toprak Kırmızısı | #9C3D3D |
Form hataları |
Not: Bakır/Ember tonu, tipik "AI mor-mavi" paletinden bilinçli olarak uzaklaşmak ve dövme mürekkebi/deri/ten rengi çağrışımı ile sıcak, insani, el işçiliği hissi vermek için seçilmiştir. Bu ton; buton, link, aktif sekme, form odak durumu gibi az sayıda ama tutarlı noktada kullanılır. Renk paleti asla "canlı/neon" olmayacak, her zaman "sourdued/muted" (bastırılmış, doygunluğu düşük) tonlarda kalacaktır.
- Başlık Fontu: Yüksek kontrastlı, editoryal bir serif veya "display sans" (ör.
Fraunces,Canelabenzeri karakterde bir serif ya daNeue Montreal,General Sansgibi geometrik bir sans-serif). Büyük punto (Hero'da 64-140px arası, mobilde 40-56px), dar harf aralığı (tracking negatif), dergi kapağı hissi. - Gövde Fontu: Yüksek okunabilirlikte bir grotesk sans-serif (ör.
Inter,Suisse Intlbenzeri,General Sans). Türkçe karakter desteği tam olmalı (ç, ğ, ı, ö, ş, ü). - Vurgu/Etiket Fontu: Küçük harflerle, geniş harf aralığıyla (letter-spacing +0.15em) yazılmış "kicker" etiketler ("SANATÇI", "PORTFOLYO", "01 — HİZMET SEÇ" gibi bölüm numaralandırmaları).
- Tipografi, mizanpajın kendisi hâline gelir: Büyük başlıklar sayfanın kompozisyonunu belirler, görselle iç içe geçer (görselin üzerine taşan başlıklar, negatif margin kullanımı).
- Tüm dövme fotoğrafları yüksek çözünürlüklü, doğal/stüdyo ışığında, teni gerçekçi gösteren kadrajlarla sunulur. Aşırı filtre veya doygunluk artırma kullanılmaz (deri tonu gerçekçiliği önemlidir).
- Kompozisyonlarda negatif alan bilinçli kullanılır — görsel her zaman nefes alır, kenarlara sıkıştırılmaz.
- Siyah-beyaz ve renkli görsel kullanımı bilinçli olarak karıştırılır: Editoryal derginin bir sayfasında siyah-beyaz portre, bir diğerinde renkli detay çekimi olabilir — bu tutarlı bir "galeri küratörlüğü" hissi yaratır.
- Sanatçı portre fotoğrafları stüdyo ortamında, çalışırken (candid, "iş başında sanatçı") çekilmiş hissi vermelidir; stüdyo/kurumsal fotoğraf klişelerinden kaçınılır.
- Hero başlığı örnek yaklaşım: iddialı, kısa, birinci tekil/çoğul değil; markanın kendine güvenini yansıtan cümleler. (Örnek ton — gerçek metin içerik ekibi tarafından yazılacaktır): "Ten senin. Hikaye bizim ustalığımız."
- CTA metinleri asla "Hemen Satın Al", "Şimdi Öde" gibi ifadeler içermez (ödeme yok). Bunun yerine: "Randevu Talebi Oluştur", "Sanatçınla Tanış", "Fikrini Paylaş" gibi davetkâr, süreç odaklı dil kullanılır.
- Hata mesajları bile marka sesini korur: "Bir şeyler ters gitti, tıpkı ilk taslak gibi — tekrar deneyelim." tonunda, robotik olmayan bir dil hedeflenir (ama netlik feda edilmez).
| Stüdyo | Güçlü Yönü | Blendz Ink'in Farklılaşma Noktası |
|---|---|---|
| Bosphorus Ink | Kurumsal güven, çok şube, ISO vurgusu | Blendz Ink daha butik, daha sanatsal, daha az "klinik" |
| Ink Blaze | İstatistik vurgusu (2000+ tasarım, 10 yıl deneyim) | Blendz Ink sayıdan çok "küratörlük" ve sanatçı hikâyesi vurgusu yapar |
| Sang Bleu (global) | Yüksek moda tipografisi | Blendz Ink bu dili yerelleştirir, Türkçe SEO ile birleştirir |
| Bang Bang NYC (global) | Selebriti/editoryal fotoğraf | Blendz Ink gerçek müşteri hikâyeleri ve süreç şeffaflığıyla güven kurar |
Yapılması Gerekenler:
- Her zaman bol negatif alan bırak.
- Görselleri tam ekran veya büyük format kullan, küçük thumbnail grid'lerden kaçın.
- Tipografiyi kompozisyonun bir parçası yap (görselle çakışan, üstüne binen başlıklar).
- Vurgu rengini (bakır/ember) tutarlı ve az kullan.
- Her sayfaya özgü bir mizanpaj kur.
Yapılmaması Gerekenler:
- Mor-mavi gradyanlar kullanma.
- Yuvarlak köşeli, gölgeli, "SaaS dashboard" kartları kullanma (bkz. Bölüm 7.2 — Design System'de radius kuralları sınırlıdır).
- Stok fotoğraf hissi veren jenerik görseller kullanma.
- Emoji ağırlıklı, "eğlenceli startup" dili kullanma.
- Aşırı animasyon/parıltı efekti (glow, neon) kullanma — ışık efektleri sadece çok ince, sinematik gölge/vurgu şeklinde olmalı.
/ (Ana Sayfa)
/hakkimizda
/sanatcilar
/sanatcilar/[slug] (Sanatçı Detayı)
/portfolyo
/portfolyo/[calisma-slug] (Opsiyonel — tekil çalışma detay lightbox/sayfası)
/dovme-stilleri
/dovme-stilleri/[stil-slug]
/sss (Sık Sorulan Sorular)
/bakim-rehberi
/blog
/blog/[yazi-slug]
/iletisim
/randevu (Randevu Oluştur - Wizard)
/randevu/onay/[randevu-kodu] (Randevu Durum Takip Sayfası)
/hesabim (Müşteri Paneli - Giriş gerektirir)
/hesabim/randevularim
/hesabim/gecmis
/hesabim/favoriler
/hesabim/profil
/hesabim/bildirimler
/kvkk
/cerez-politikasi
/gizlilik-politikasi
/giris (Müşteri girişi)
/kayit (Müşteri kaydı - opsiyonel, randevu misafir olarak da oluşturulabilir)
/404
/500 (Sunucu hata sayfası)
/admin (Admin Paneli - ayrı layout, korumalı)
/admin/giris
/admin/dashboard
/admin/randevular
/admin/randevular/[id]
/admin/takvim
/admin/sanatcilar
/admin/sanatcilar/[id]
/admin/musteriler
/admin/musteriler/[id]
/admin/portfolyo
/admin/blog
/admin/blog/[id]
/admin/galeri
/admin/iletisim-formlari
/admin/bildirimler
/admin/yorumlar
/admin/seo
/admin/site-ayarlari
/admin/roller-yetkiler
/admin/audit-log
- Üç tıklama kuralı: Herhangi bir sayfadan randevu formuna en fazla 1 tıklamayla (her yerde sabit "Randevu Oluştur" CTA'sı), herhangi bir içerikten sanatçı detayına en fazla 2 tıklamayla ulaşılabilmelidir.
- Editoryal navigasyon: Ana navigasyon 6 öğeyi geçmez (Sanatçılar, Portfolyo, Stiller, Hakkımızda, Blog, İletişim) + her zaman görünür "Randevu Oluştur" birincil CTA butonu.
- Footer, ikincil bilgi mimarisinin merkezi olur: KVKK, çerez politikası, gizlilik politikası, SSS, bakım rehberi gibi "destek" sayfaları footer'da 3 sütun halinde gruplanır.
- URL yapısı SEO odaklı ve Türkçe: Tüm slug'lar Türkçe, kısa, tire ile ayrılmış, karakter dönüşümü yapılmış (ör.
/dovme-stilleri/fine-line,/sanatcilar/ahmet-yildiz).
- Masaüstünde: Sayfanın en üstünde şeffaf/transparan header, aşağı kaydırıldığında
140msiçinde kömür grisi zemine geçiş yapan "sticky" davranış (blur efekti minimal, glassmorphism aşırıya kaçmadan sadece hafif bir opaklık geçişi). - Mobilde: Hamburger menü yerine, marka kimliğine uygun tam ekran açılan, büyük tipografili bir "overlay" menü (Awwwards tarzı, her menü öğesi büyük punto ile alt alta, sayfa geçişinde numaralandırılmış).
- Randevu CTA'sı header'da her zaman vurgu renginde (bakır/ember zeminli veya ince bakır çerçeveli) ayrışan tek buton olarak durur.
| Sayfa | Birincil Amaç | İkincil Amaç | Ana CTA |
|---|---|---|---|
| Ana Sayfa | Marka izlenimi + güven | Yönlendirme (sanatçı/portfolyo) | Randevu Oluştur |
| Hakkımızda | Hikaye + güven + hijyen | Ekip tanıtımı | Sanatçılarla Tanış |
| Sanatçılar | Sanatçı keşfi | Uzmanlık filtreleme | Sanatçı Detayına Git |
| Sanatçı Detayı | Derin güven + portfolyo | Takvim önizleme | Bu Sanatçıyla Randevu Al |
| Portfolyo | Sanatsal kalite kanıtı | Stil bazlı filtreleme | Randevu Oluştur |
| Dövme Stilleri | Eğitim + SEO | Stil bazlı sanatçı eşleştirme | İlgili Sanatçıları Gör |
| SSS | Objeksiyon giderme | Destek yükünü azaltma | Randevu Oluştur / İletişim |
| Bakım Rehberi | Güven + SEO + değer | Blog trafiği | Blogun devamını oku |
| Blog | SEO + otorite | İçerik pazarlaması | İlgili sayfaya link |
| İletişim | Genel sorular, iş birliği | Konum/harita | Mesaj Gönder |
| Randevu Oluştur | Dönüşüm | — | Talebi Gönder |
| KVKK/Çerez/Gizlilik | Yasal uyumluluk | Güven | — |
Blendz Ink dijital deneyimi, kullanıcıyı asla acele ettirmeyen ama süreç boyunca her zaman nerede olduğunu bilen bir yolculuk sunar. UX prensipleri:
- Bilişsel yük minimizasyonu: Randevu formu tek seferde 12 alan sormaz; 9 adıma bölünür, her adımda 1-2 karar noktası sunulur.
- İlerleme şeffaflığı: Her adımda ilerleme göstergesi (adım numarası + toplam adım, ince bir çizgi progress bar — dairesel/yüzdelik "SaaS" progress bar değil, editoryal bir çizgi/numara sistemi) gösterilir.
- Geri dönülebilirlik: Kullanıcı her adımda bir önceki adıma dönebilir, verdiği cevaplar korunur (state kaybı olmaz).
- Mikro-doğrulama: Her adımda sadece o adıma ait doğrulama yapılır (ör. telefon formatı yanlışsa sadece o alanda hata gösterilir, tüm form kırmızıya boyanmaz).
- Duygu durumları tasarlanır: Yükleme, hata, başarı, boş durum (empty state) senaryolarının her biri marka sesine uygun, sakin ve bilgilendirici şekilde tasarlanır (bkz. 6.7).
Aşama 1 — Farkındalık: Kullanıcı Instagram'da bir çalışmayı görür, bio linkinden siteye gelir. Landing deneyimi anında "bu bir sanat stüdyosu" hissi vermelidir (hero görseli 2 saniye içinde yüklenmiş ve etkileyici olmalı — bkz. Performans bölümü).
Aşama 2 — Keşif: Kullanıcı Sanatçılar veya Portfolyo sayfasına gider, stil filtreler, beğendiği bir sanatçıyı bulur. Bu aşamada güven sinyalleri (deneyim yılı, öne çıkan işler, yorumlar) kritik.
Aşama 3 — Değerlendirme: SSS sayfasını veya sanatçı detayındaki "Randevu Kuralları" bölümünü okur; fiyatlandırma mantığını (fiyatın seansta konuşulduğunu, boyuta göre değiştiğini) anlar.
Aşama 4 — Dönüşüm (Randevu): "Randevu Oluştur" akışına girer, 9 adımı tamamlar, onay ekranını görür.
Aşama 5 — Bekleme: Mail/SMS bildirimi alır, randevu durum takip sayfasından ("Onay Bekleniyor" durumu) sürecini izleyebilir.
Aşama 6 — Onay ve Hazırlık: Onay bildirimini alır, randevudan önce hatırlatma bildirimleri gelir (48 saat ve 3 saat önce), bakım rehberi/hazırlık önerileri (aç karnına gelmeyin, bol uyuyun vb.) otomatik mail içinde sunulur.
Aşama 7 — İşlem Günü: Stüdyoya gelir, işlem yapılır. Admin randevuyu "Tamamlandı" olarak işaretler.
Aşama 8 — Sadakat Döngüsü: 24 saat sonra otomatik yorum/değerlendirme talebi gelir; müşteri hesabı varsa geçmiş randevusu profilinde görünür, favori sanatçı olarak işaretleyebilir; 3-6 ay sonra "yeni bir fikrin var mı?" tarzı retention e-postası (v2 kapsamı — otomasyon kuralı olarak planlanır).
Randevu oluşturma akışı, kullanıcı isteğinde belirtilen sırayla, 9 ana ekrandan oluşan bir "wizard" (adım adım sihirbaz) olarak tasarlanır. Her adım kendi URL fragment'ine veya query state'ine sahip olmalı ki kullanıcı sayfayı yenilediğinde ilerlemesi kaybolmasın (client-side state + sessionStorage yedekleme önerilir).
- Sayfa büyük bir başlıkla açılır: süreç hakkında kısa bilgilendirme ("Bu bir ön talep formudur. Randevunuz stüdyomuz tarafından onaylandıktan sonra kesinleşir.")
- Ortalama yanıt süresi bilgisi gösterilir (ör. "Genellikle 24 saat içinde dönüş yapıyoruz").
- "Başla" birincil butonu.
- Zaten hesabı olan kullanıcılar için "Bilgilerim otomatik dolsun, giriş yap" ikincil linki.
- Kart bazlı değil, büyük yatay liste/segment seçim düzeni: Yeni Dövme, Kapatma (Cover-up), Renkli Çalışma, Fine Line, Realism, Piercing (eğer hizmet veriliyorsa), Danışmanlık Randevusu, Retuş/Bakım.
- Her hizmet seçeneğinin yanında kısa bir açıklama (1 cümle) ve ikon yerine ince çizgi illüstrasyon.
- Tek seçim (radio davranışı, ama görsel olarak büyük dokunulabilir alan — min. 64px yükseklik, mobil dokunma hedefi standardı).
- Sanatçı seçilmezse "Fark etmez, uygun sanatçıyı stüdyo önersin" seçeneği sunulur (bu, admin'in atama yapmasını sağlar).
- Sanatçı listesi: profil fotoğrafı, isim, uzmanlık etiketleri (ör. "Fine Line · Blackwork"), o anki müsaitlik durumu özeti ("Bu hafta müsait" / "Yoğun — 2 hafta sonrasına bakılabilir" gibi bir metinsel ipucu, gerçek zamanlı kesin bilgi değil, admin tarafından güncellenen bir durum alanı).
- Sanatçı kartına tıklanınca yan panelde (drawer) mini portfolyo önizlemesi açılır.
- Yaklaşık boyut aralığı segment seçimi: Küçük (5cm altı), Orta (5-15cm), Büyük (15-30cm), Çok Büyük / Sleeve-Parça (30cm+).
- Görsel referans olarak her segmentin yanında elle çizilmiş ölçek illüstrasyonu (SVG, örnek referans obje: kibrit kutusu, kredi kartı, A4 kağıdı ile karşılaştırma).
- Bilgilendirme notu: "Kesin fiyat ve süre, sanatçınızla görüşülerek belirlenir."
- İnsan vücudu silüeti üzerinde (basit, editoryal çizgi illüstrasyon — SVG, ön ve arka görünüm, cinsiyet nötr bir figür) tıklanabilir bölgeler: Kol, Ön Kol, Bilek, El, Omuz, Sırt, Göğüs, Karın, Bacak, Baldır, Ayak, Boyun, Kafa Derisi, Kaburga, Diğer.
- Mobilde silüet yerine dropdown/liste alternatifi de sunulur (erişilebilirlik ve dokunma hassasiyeti için).
- Seçilen bölge küçük bir etiketle (chip) teyit edilir, birden fazla bölge seçilebilir (ör. "kol ve omuz").
- Sürükle-bırak alanı + "Dosya Seç" butonu.
- Maksimum 5 görsel, her biri maksimum 10MB, kabul edilen formatlar: JPG, PNG, WEBP, HEIC (otomatik JPG'ye dönüştürme sunucu tarafında yapılır).
- Görsel yüklemek zorunlu değildir ("Referans görselim yok, fikrimi yazıyla anlatacağım" seçeneği ile adım atlanabilir).
- Yüklenen görseller küçük önizleme (thumbnail) ile listelenir, her birinin yanında silme ikonu.
- Gizlilik notu: "Yüklediğiniz görseller yalnızca stüdyo ekibi tarafından görüntülenir."
- Geniş bir metin alanı (textarea), placeholder ile yönlendirme: "Aklındaki fikri, ilham aldığın detayları veya istediğin tarzı anlat. Ne kadar çok bilgi verirsen, sanatçın o kadar hazırlıklı karşılar."
- Karakter sayacı (min. 10, max. 1000 karakter), zorunlu alan.
- Opsiyonel hızlı etiketler (chip önerileri): "İlk dövmem", "Kapatma çalışması", "Eşleşen dövme (arkadaşımla)", "Yara izi üzeri" gibi hızlı seçilebilir bağlam etiketleri (çoklu seçim, forma otomatik not olarak eklenir).
- Aylık takvim görünümü, editoryal tipografi ile (büyük gün numaraları, ince ayraç çizgileri — yuvarlak "chip" günler değil, kare/dikdörtgen hücreli sade bir takvim).
- Sanatçının çalışmadığı günler (kapalı günler) pasif gösterilir.
- Bugünden itibaren minimum 2 gün sonrasına randevu alınabilir (hazırlık süresi), maksimum 90 gün ileriye randevu açılabilir (admin panelinden yapılandırılabilir bir kural).
- Seçilen tarihin yanında o gün için "yoğunluk" bilgisi (Az Müsait / Orta / Yoğun) gösterilebilir — kesin saat bilgisini bir sonraki adımda gösterir.
- Seçilen tarih ve sanatçıya göre uygun saat aralıkları (30 veya 60 dakikalık slotlar, sanatçı ayarına göre) listelenir.
- Dolu/çakışan saatler pasif ve üstü çizili gösterilir.
- Saat seçimi olmadan da devam edilebilir seçeneği: "Kesin saat konusunda esnek değilim, stüdyo benimle iletişime geçip en uygun saati önersin" (bu durumda admin, onay sırasında saat belirler ve müşteriye bildirir).
- Ad Soyad (zorunlu)
- Telefon (zorunlu, Türkiye formatı doğrulaması +90, opsiyonel olarak uluslararası formata da izin verilir)
- E-posta (zorunlu, format doğrulaması)
- Instagram kullanıcı adı (opsiyonel, "@" prefiksi otomatik eklenir)
- Notlar (opsiyonel, ek serbest metin — ör. "Sol elim baskındır", "Ağrı toleransım düşük" gibi ekstra bilgiler)
- KVKK Aydınlatma Metni onay kutusu (zorunlu, tıklanabilir link ile tam metne erişim)
- Pazarlama/bilgilendirme e-postası izni onay kutusu (opsiyonel, ayrı checkbox — KVKK'dan bağımsız, açık rıza)
- Eğer kullanıcı giriş yapmışsa bu alanlar otomatik doldurulur (profil bilgilerinden).
- Tüm seçimlerin (hizmet, sanatçı, boyut, bölge, görsel sayısı, açıklama özeti, tarih, saat, kişisel bilgiler) düzenlenebilir bir özet kartında gösterilmesi (her satırın yanında "Düzenle" linki, ilgili adıma geri götürür).
- "Randevu Talebini Gönder" birincil CTA butonu.
- Buton altında küçük bir güven notu: "Bu bir kesin randevu değildir. Talebiniz incelendikten sonra size dönüş yapılacaktır."
- Büyük, sakin bir başarı görseli/animasyonu (konfeti değil — marka kimliğine uygun; ör. ince bir çizgi çiziminin tamamlanma animasyonu).
- Randevu takip kodu üretilir (ör.
BLZ-24X7K9) ve ekranda gösterilir, aynı zamanda mail ile gönderilir. - "Randevu durumumu takip et" linki
/randevu/onay/[randevu-kodu]sayfasına yönlendirir. - Sosyal paylaşım / Instagram takip CTA'sı (opsiyonel, ikincil önem).
Kullanıcı hesap oluşturmadan da bu koda ait randevu durumunu görebilir (kod + telefon/e-posta doğrulaması ile). Durumlar dikey bir zaman çizelgesi (timeline) olarak gösterilir:
- Talep Alındı (her zaman dolu/tamamlanmış görünür)
- İnceleniyor
- Onaylandı / Reddedildi (koşullu)
- Hatırlatma Gönderildi (randevu tarihine yaklaşınca aktifleşir)
- Tamamlandı
Reddedilme durumunda, red nedeni (varsa admin tarafından girilen kısa not, ör. "Seçilen tarihte sanatçımız müsait değil, alternatif tarih için bizimle iletişime geçin") nazik bir dille gösterilir ve yeniden randevu oluşturma CTA'sı sunulur.
- WCAG 2.1 AA uyumluluğu hedeflenir.
- Tüm görsellerde anlamlı
altmetni zorunludur (özellikle portfolyo görselleri: "Kadıköy'de yapılan blackwork aslan dövmesi, kol bölgesi" gibi açıklayıcı ve SEO'ya katkı sağlayan alt metinler). - Renk kontrast oranı: Metin/zemin arasında minimum 4.5:1 (bakır vurgu rengi küçük metinlerde değil, büyük başlık/buton gibi alanlarda kullanılacak; küçük gövde metinlerinde daima yüksek kontrastlı bone/beyaz renk kullanılacaktır).
- Tüm interaktif öğeler klavye ile erişilebilir olmalı (
Tabsırası mantıklı,focus-visibledurumları ince bir bakır alt çizgi/çerçeve ile belirgin, varsayılan tarayıcı mavi outline'ı yerine marka rengine uyarlanmış focus ring kullanılır). - Form alanlarında
labelher zaman görünür (placeholder tek başına label yerine geçmez). - Hareket azaltma tercihi olan kullanıcılar için (
prefers-reduced-motion) tüm sinematik geçiş animasyonları basit fade'e düşürülür. - Silüet/vücut bölgesi seçici gibi görsel-bağımlı bileşenlerin mutlaka metin/liste alternatifi bulunur.
- Ekran okuyucular için ARIA etiketleri (
aria-label,aria-livebildirim bölgeleri için) eksiksiz uygulanır.
- Tüm bileşenler önce 375px genişlik için tasarlanır, sonra tablet (768px) ve masaüstü (1280px+) için genişletilir.
- Dokunma hedefleri minimum 44x44px.
- Randevu wizard'ında her adım tek ekranda, scroll gerektirmeden (mümkün olduğunca) tamamlanabilir olmalı; uzun içerikli adımlarda (ör. sanatçı listesi) dikey scroll doğal kabul edilir ama CTA butonu her zaman sabit alt bar olarak (
sticky bottom) erişilebilir kalır. - Mobilde galeri/portfolyo görüntüleme yatay kaydırmalı (
horizontal swipe) "hikaye" tarzı gezinme destekler. - Görsel yükleme adımında mobil kamera erişimi (
captureattribute) desteklenir — kullanıcı doğrudan fotoğraf çekebilir.
- Sayfa geçişlerinde tam ekran spinner KULLANILMAZ. Bunun yerine ince bir üst progress çizgisi (bakır renkte, 2px, sayfa yüklenirken soldan sağa ilerleyen) kullanılır.
- İçerik iskeletleri (skeleton) kart yerine "blur-up" görsel yükleme tekniği (düşük çözünürlüklü placeholder'dan yüksek çözünürlüğe geçiş,
blurefektiyle) tercih edilir — bu, tipik gri dikdörtgen skeleton'lardan daha editoryal bir his verir. - Form gönderimlerinde buton içi durum değişimi: "Randevu Talebini Gönder" → tıklanınca buton metni "Gönderiliyor…" olur, ince bir yükleme çizgisi buton içinde soldan sağa akar, buton geçici olarak devre dışı kalır.
- Form doğrulama hataları: İlgili alanın altında, kırmızı değil "toprak kırmızısı" (
#9C3D3D) tonunda, ince bir metin ve alan kenarlığı ile gösterilir. İkon minimal (küçük ünlem çizgisi, dolgulu daire değil). - Sunucu hataları (500, ağ hatası): Sayfa içi bir bildirim şeridi (toast değil, sayfanın üstünde sabit bir "inline banner") ile "Bir sorun oluştu, lütfen tekrar deneyin" mesajı + "Tekrar Dene" butonu.
- 404 sayfası: Marka kimliğine uygun, büyük tipografi ile "Bu sayfa mürekkebini kaybetmiş görünüyor." tarzı yaratıcı ama net bir mesaj + Ana Sayfaya Dön / Randevu Oluştur CTA'ları. Arka planda stüdyodan soyutlanmış, karanlık atmosferli tek bir görsel.
- 500 sayfası: Sakin bir özür mesajı + iletişim bilgisi/WhatsApp linki (acil durumlarda alternatif iletişim kanalı).
- Randevu formu başarı ekranı (bkz. 6.3 Adım 11).
- İletişim formu gönderimi sonrası: Sayfa içinde formun yerini alan bir teşekkür bloğu (sayfa yönlendirmesi yapılmaz, kullanıcı bağlamda kalır).
- Admin panelinde işlem başarıları: Sağ üstte küçük, 3 saniye sonra otomatik kaybolan, ince bir toast bildirimi (bakır kenarlıklı, koyu zemin).
- Sanatçının portfolyosu henüz boşsa: "Bu sanatçı yakında yeni çalışmalarını burada paylaşacak." + genel portfolyoya yönlendirme linki.
- Müşteri panelinde geçmiş randevu yoksa: "Henüz bir randevu geçmişin yok. İlk adımı atmaya hazır mısın?" + Randevu Oluştur CTA.
- Admin panelinde filtre sonucu boşsa: "Bu kriterlere uyan kayıt bulunamadı." + filtreleri temizle butonu.
- Blog'da kategori/etiket sonucu boşsa: İlgili diğer kategorilere yönlendiren öneriler.
- Sayfa geçişleri: Sayfalar arası geçişte hafif bir "cross-fade + subtle vertical shift" (8-12px yukarı kayma + opaklık geçişi), süre 400-600ms, easing
cubic-bezier(0.16, 1, 0.3, 1)(Apple/Framer tarzı "ease-out-expo" hissi). - Görsel hover: Portfolyo görsellerinde hover'da çok hafif bir zoom (
scale(1.03)), 600-800ms yavaş geçiş — asla ani/sert değil, sinematik. - Metin reveal animasyonları: Başlıklar sayfaya girerken satır satır veya kelime kelime alttan yukarı kayarak belirir (stagger efekti, her kelime arası 30-50ms gecikme).
- Cursor davranışı (masaüstü): Portfolyo görsellerinin üzerine gelindiğinde özel bir cursor (ör. "Görüntüle" veya "İncele" yazan küçük bir etiket cursor'u takip eder) — Awwwards sitelerinde yaygın, editoryal galeri hissini güçlendirir.
- Parallax: Hero ve büyük görsel bölümlerinde çok hafif (10-20px) parallax kaydırma efekti — abartılı değil, zarif.
- Buton mikro-etkileşimi: Birincil butonlarda hover'da dolgu renginin ince bir "wipe" (soldan sağa dolan) efektiyle değişmesi; ikincil butonlarda alt çizginin genişleyerek belirmesi.
- Tüm animasyonlar
prefers-reduced-motion: reducetercihine saygı gösterir ve bu durumda anında (0-50ms) geçişlere düşer.
Blendz Ink arayüzü kesinlikle bir "AI SaaS dashboard" hissi vermeyecektir. Aşağıdaki kurallar tüm arayüz kararlarına üst düzey bir çerçeve sunar:
- Kaçınılacaklar: ChatGPT/Claude/Perplexity/Cursor/Vercel Dashboard/Linear/Notion/OpenAI Playground tarzı bileşen dili; aşırı yuvarlatılmış köşeler; yoğun glassmorphism; mor-mavi renk geçişleri; "AI hissi" veren ikon setleri (parlak yıldız/sparkle ikonları, nöral ağ motifleri); tek tip kart-grid yerleşimleri.
- Hedeflenen: Apple.com ürün sayfaları hissi (büyük görsel + net tipografi + cömert boşluk); Aesop.com'un minimalist, editoryal dokunuşu; Acne Studios/COS'un moda-dergi mizanpajı; Awwwards ödüllü yaratıcı stüdyo sitelerinin asimetrik ama dengeli grid yapısı.
- Her sayfa, "şablon değişkeni doldurulmuş" hissi vermemesi için kendine özgü bir kompozisyon mantığına sahip olmalıdır (bkz. 7.4 Sayfa Bazlı Kompozisyon Notları).
- Büyük Tipografi: Başlıklar viewport genişliğine duyarlı (
clamp()mantığıyla) ölçeklenir; masaüstünde hero başlıkları ekranın önemli bir bölümünü kaplayabilir (satır yüksekliği sıkı, harf aralığı negatif). - Asimetrik Ama Dengeli Grid: 12 kolonlu bir temel grid kullanılır, ancak içerik blokları her zaman ortalanmış/simetrik değildir — görsel bir kolonda 7 birim, metin bloğu 4 birimde başlayıp bitebilir, aralarında kasıtlı bir "offset" (kaydırma) olur.
- Bol Negatif Alan: Bölümler arası dikey boşluk masaüstünde minimum 120-180px, mobilde 64-96px. İçerik asla kenarlara yapışmaz (mobilde min. 20-24px kenar boşluğu, masaüstünde grid marjı min. 64-96px).
- Tam Ekran Görseller: Hero ve bölüm ayraçlarında görseller genellikle
100vwveya100vhyakınında, tam bleed (kenarlıksız) kullanılır. - Sinematik Geçişler: Bkz. Bölüm 6.8.
- Az Ama Etkili Renk: Sayfanın %90'ı nötr tonlarda (siyah, kömür, bone/beyaz, gri), vurgu rengi (bakır) toplam kompozisyonun sadece %5-10'unda, stratejik noktalarda (CTA, aktif durum, ince ayraç çizgisi, sayısal etiketler) kullanılır.
- Cam Efekti (Glassmorphism) Sadece Gerekli Yerde: Yalnızca sabit header'ın scroll sonrası arka plan geçişinde (çok hafif
backdrop-blur, %70-80 opaklık koyu zemin) ve modallerin arka plan overlay'inde (görselin altını tamamen kesmeyen, hafif bulanıklaştıran bir katman) kullanılır. Kart yüzeylerinde, butonlarda veya form alanlarında glassmorphism KULLANILMAZ. - Köşe Yarıçapı (Radius) Disiplini: Genel arayüzde köşeler ya keskin (0px, editoryal/mimari bir his için) ya da çok hafif yumuşatılmış (4-8px, sadece form alanları ve küçük butonlarda) olacaktır. Büyük, "pill-shaped" (hap biçimli) butonlar veya 16-24px'lik büyük radius'lu kartlar (tipik SaaS dili) KULLANILMAZ.
- Masaüstü: 12 kolon, kolon genişliği esnek (
frbirimleri), maksimum içerik genişliği 1440px (bazı tam genişlik görsel bölümleri hariç — onlar100vw), kenar marjı 80-96px (büyük ekranlarda 1920px+ için marj oranı korunur, içerik ortalanır). - Tablet: 8 kolon, kenar marjı 48px.
- Mobil: 4 kolon, kenar marjı 20-24px.
- Dikey Ritim (Vertical Rhythm): Temel spacing birimi 8px; bölüm boşlukları bu birimin katları olarak tanımlanır (8, 16, 24, 32, 48, 64, 96, 120, 160, 200).
- Kırılma Noktaları (Breakpoints):
sm: 480px,md: 768px,lg: 1024px,xl: 1280px,2xl: 1536px,3xl: 1920px(büyük masaüstü ekranlar için özel içerik genişliği kontrolü).
Her sayfanın benzersiz bir mizanpaj mantığı olmalı; aşağıda her ana sayfa için özgün kompozisyon yönergesi verilmiştir (bu notlar tasarımcı/geliştirici için bağlayıcıdır):
- Ana Sayfa: Hero tam ekran video/görsel + üstüne binen, sola hizalı dev başlık. Hemen altında asimetrik bir "öne çıkan işler" şeridi (bir büyük görsel + iki küçük görsel yan yana, klasik eşit-3'lü grid değil). Sanatçılar bölümü yatay kaydırmalı bir "editoryal şerit" (klasik kart grid değil, her sanatçı tam yükseklikte bir "panel" gibi, üzerine gelindiğinde genişleyen). İstatistikler bölümü büyük rakamlarla, arka planda ince bir çizgi illüstrasyonla desteklenir (kart kutuları içinde değil, serbest yerleşimli). Dövme stilleri bölümü, yatay kayan büyük görsel kartlarla ama boyutları eşit olmayan bir ritimde (biri geniş biri dar). Yorumlar bölümü, klasik "3 kart yan yana testimonial" yerine tek seferde bir yorumun büyük tipografiyle sunulduğu, altında ince noktalarla geçiş yapılan bir "alıntı vitrini". Instagram akışı sekizgen olmayan, düzensiz aralıklı bir mozaik grid.
- Hakkımızda: Uzun kaydırmalı, dergi röportajı hissi veren bir sayfa; sol tarafta sabit kalan (sticky) bir bölüm başlığı, sağ tarafta kayan içerik (masaüstünde). Ekip/sanatçı tanıtımı, kart grid değil, tam genişlikte alternatif hizalanan (soldan/sağdan) portre + metin blokları.
- Sanatçılar Listesi: Klasik "3'lü kart grid" DEĞİL. Bunun yerine dikey bir liste; her sanatçı satırı tam genişlikte, solda büyük bir portre/iş görseli, sağda isim + uzmanlık + kısa alıntı; üzerine gelindiğinde arka planda o sanatçının bir portfolyo görseli büyüyerek belirir (masaüstü). Mobilde bu, dikey kaydırmalı tam ekran panellere dönüşür.
- Sanatçı Detayı: Hero'da sanatçının kendi portresi + imza tarzı bir alıntı cümlesi. Portfolyo, Masonry (Pinterest tarzı düzensiz yükseklikli) grid ile sunulur — eşit kare kartlar DEĞİL. Biyografi ve uzmanlık bilgisi yan sütunda "sticky" kalır.
- Portfolyo (Genel Galeri): Tam ekran, filtrelenebilir bir Masonry galeri; filtre çubuğu üstte yapışkan ama minimal (sadece metin linkler, buton kutuları değil).
- Dövme Stilleri: Her stil için tam ekran bir "bölüm" (görsel arka plan + üstte stil adı dev tipografiyle + kısa açıklama), aşağı kaydırdıkça bir sonraki stile geçiş yapan bir "editoryal sayfalar" hissi (scroll-snap kullanılabilir).
- SSS: Akordiyon kullanılır ama tipik "kutu içinde kutu" değil; ince bir üst çizgi ile ayrılan, büyük tipografili sorular, açıldığında altında sade cevap metni.
- Bakım Rehberi: Adım adım, numaralandırılmış (01, 02, 03...) büyük başlıklı bir rehber sayfası, her adımın yanında ilgili görsel (yara bakımı, ürün önerisi vb. — gerçekçi/editoryal fotoğraf).
- Blog Listesi: İlk yazı büyük öne çıkan (featured) blok olarak üstte, geri kalanlar iki sütunlu asimetrik bir liste (kart değil, ince ayraç çizgili liste satırları — tarih, başlık, kategori, okuma süresi).
- Blog Detayı: Dergi tipografisi; geniş sütun genişliği yerine okunabilir 680-720px metin sütunu, büyük kapak görseli tam genişlikte üstte.
- İletişim: İki sütun; solda harita + adres + çalışma saatleri (statik, sade), sağda minimal iletişim formu (form kutu içinde değil, sade alt çizgili input alanları — "underline input" stili, kutu/border input değil).
- Randevu Wizard: Tam ekran, tek odaklı adım deneyimi; her adımda arka planda ilgili bir atmosferik görsel (ör. hizmet seçiminde stüdyo görseli, boyut seçiminde close-up dövme detayı) hafif karartılmış olarak yer alır.
- Admin Paneli: Burası istisnadır — admin paneli, kullanım kolaylığı ve verimlilik için daha "fonksiyonel" bir tasarım diline sahip olabilir (bkz. Bölüm 11), ancak yine de marka renk paletini (bakır vurgu, koyu zemin) kullanır; tipik mor-mavi SaaS admin şablonlarından uzak durulur, sade/nötr/profesyonel bir "kontrol paneli" hissi hedeflenir.
- Özel çizilmiş, ince çizgi kalınlıklı (1.25-1.5px stroke), köşeleri keskin veya çok hafif yuvarlatılmış (2px) bir ikon seti kullanılır (ör.
Lucideikon kütüphanesi baz alınabilir ama stroke ayarları markaya göre inceltilir). - "AI hissi" veren parlayan yıldız/sparkle, nöral ağ, robot gibi ikonlardan kesinlikle kaçınılır.
- Vücut bölgesi seçici, boyut karşılaştırma gibi özel ihtiyaçlar için özel çizilmiş SVG illüstrasyonlar kullanılır (jenerik ikon setinden değil).
- Sosyal medya ikonları minimal, tek renk (mevcut metin rengiyle aynı, hover'da bakır tonuna geçiş).
- Tüm sayfa hero'larında minimum 1920x1080 çözünürlükte, WebP/AVIF formatında optimize edilmiş görseller kullanılır.
- Portfolyo görselleri orijinal en-boy oranını korur (kırpılmış kare thumbnail'lara zorlanmaz), Masonry grid bu farklılığı bir tasarım avantajına çevirir.
- Görsellerin üstüne binen metinlerde her zaman yeterli kontrast için görsel üzerine ince bir gradyan overlay (
rgba(10,10,10,0.15) → rgba(10,10,10,0.65)) uygulanır — asla düz koyu kutu/panel arkası konulmaz.
Bu bölüm, geliştirme ekibinin (AI Coding Agent dahil) doğrudan uygulayabileceği somut tasarım token'larını ve bileşen kurallarını tanımlar.
| Token Adı | Değer | Kullanım Amacı |
|---|---|---|
color-bg-primary |
#0A0A0A |
Ana sayfa zemini |
color-bg-secondary |
#141414 |
İkincil bölüm zemini, panel |
color-surface |
#1F1F1F |
Kart/form yüzeyleri, border |
color-border |
#2A2A2A |
Ayraç çizgileri |
color-text-primary |
#F5F1EA |
Başlıklar, önemli metin |
color-text-secondary |
#A8A29B |
Açıklama, meta bilgi |
color-text-muted |
#6E6A63 |
Devre dışı, ipucu metni |
color-accent |
#C77B3E |
CTA, link, aktif durum |
color-accent-hover |
#DA9256 |
Hover durumu |
color-accent-dark |
#8F5322 |
Basılı/aktif koyu ton |
color-critical |
#9C3D3D |
Hata, red durumu |
color-success |
#5B6B4E |
Onay, başarı |
color-overlay |
rgba(10,10,10,0.65) |
Görsel üstü metin okunabilirliği |
color-focus-ring |
#C77B3E (opaklık %60) |
Klavye odak göstergesi |
Admin paneli için ek nötr paleti: color-admin-bg: #111214, color-admin-surface: #1A1B1E, color-admin-border: #2C2D31 — admin panelinde bakır vurgu daha ölçülü kullanılır, çoğunlukla durum etiketlerinde (badge) ve birincil eylem butonlarında.
| Token | Boyut (Masaüstü) | Boyut (Mobil) | Font Ağırlığı | Kullanım |
|---|---|---|---|---|
display-xl |
128px / satır yük. 0.95 | 48px | 500 (Serif/Display) | Hero başlıkları |
display-lg |
88px | 40px | 500 | Sayfa üst başlıkları |
display-md |
56px | 32px | 500 | Bölüm başlıkları |
heading-lg |
40px | 28px | 500 | Alt bölüm başlıkları |
heading-md |
28px | 22px | 500 | Kart/panel başlıkları |
heading-sm |
20px | 18px | 600 | Küçük başlıklar |
body-lg |
18px | 17px | 400 | Öne çıkan gövde metni |
body-md |
16px | 15px | 400 | Standart gövde metni |
body-sm |
14px | 13px | 400 | Yardımcı metin |
caption |
12px | 12px | 500 (uppercase, +0.15em tracking) | Etiketler, kicker metinler |
Font ailesi önerisi: Başlıklar için Fraunces (Google Fonts, değişken serif, editoryal karaktere sahip) veya Instrument Serif; gövde için General Sans ya da Inter (Türkçe karakter tam destek). Bu fontlar next/font ile self-host edilerek performans ve gizlilik (üçüncü taraf font CDN'lerine bağımlılık olmadan) sağlanır.
Temel birim: 4px. Ölçek: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120, 160, 200, 240. Bölüm arası boşluklar (section padding) için minimum değer masaüstünde 120px, mobilde 64px olarak standardize edilir.
- Container max-width:
1440px(geniş görsel bölümler100vw). - Kolon sayısı: Masaüstü 12, Tablet 8, Mobil 4.
- Gutter (kolon arası boşluk): Masaüstü
32px, Tablet24px, Mobil16px.
| Token | Değer | Kullanım |
|---|---|---|
radius-none |
0px | Görsel çerçeveleri, büyük paneller, hero bölümleri |
radius-sm |
2px | Badge, chip, küçük etiketler |
radius-md |
6px | Form input alanları, butonlar |
radius-lg |
10px | Modal, kart (yalnızca admin panelinde) |
Not: Müşteri yüzü (public site) genel olarak radius-none ve radius-sm kullanır; radius-md/lg ağırlıklı olarak form elemanları ve admin panelinde kullanılır. Bu, sitenin "SaaS kart" hissinden kaçınmasını sağlar.
Gölgeler minimal ve gerçekçi tutulur (parlak/renkli "glow" gölgeler KULLANILMAZ):
| Token | Değer | Kullanım |
|---|---|---|
shadow-xs |
0 1px 2px rgba(0,0,0,0.4) |
İnce ayraç hissi |
shadow-sm |
0 4px 12px rgba(0,0,0,0.35) |
Dropdown, tooltip |
shadow-md |
0 12px 32px rgba(0,0,0,0.45) |
Modal, drawer |
shadow-focus |
0 0 0 3px rgba(199,123,62,0.35) |
Form odak durumu |
Birincil Buton (Primary): Zemin color-accent, metin #0A0A0A (koyu, kontrast için), radius radius-md, dolgu (padding) 16px 32px, tipografi body-md + 600 ağırlık + +0.02em tracking. Hover: zemin color-accent-hover + içerik üzerinde soldan sağa akan ince "wipe" animasyonu. Disabled: opaklık %40, cursor not-allowed.
İkincil Buton (Secondary/Outline): Şeffaf zemin, 1px color-text-primary çerçeve, metin color-text-primary. Hover: çerçeve color-accent'a geçer, metin color-accent olur (arka plan dolmaz — "ghost" davranış korunur, SaaS'taki dolan buton davranışından kaçınılır).
Metin Butonu (Tertiary/Link Style): Arka plan yok, alt çizgi yok varsayılan, hover'da alt çizgi soldan sağa genişleyerek belirir (background-size trick veya ::after genişleme animasyonu). Kullanım: "Devamını Oku", "Tüm Sanatçıları Gör" gibi ikincil eylemler.
Buton Boyutları: sm (36px yükseklik, form içi ikincil eylemler), md (48px, standart), lg (56px, hero CTA'ları).
İkonlu Buton: İkon her zaman metnin sağında, 8px boşluklu; hover'da ikon 4px sağa kayar (ok ikonları için "ilerleme" hissi).
Genel kural: Kartlar public sitede minimal düzeyde kullanılır (bkz. 7.4). Kullanıldığında:
- Zemin:
color-bg-secondary, çerçeve yok veya1px solid color-border. - Radius:
radius-none(public) /radius-lg(admin). - İç boşluk:
32px(public, büyük kartlar),20px(admin, yoğun bilgi kartları). - Hover davranışı (public, portfolyo/sanatçı kartlarında): Gölge büyütme YOK; bunun yerine görselde hafif zoom + alt bilgi şeridinin yukarı kayarak belirmesi.
- Input alanları (public site): "Underline" stili esas alınır — üst/yan çerçeve yok, sadece alt çizgi (
1px color-border, odakta2px color-accent), zemin şeffaf/color-bg-primaryile aynı. Placeholder rengicolor-text-muted. Label her zaman input üstünde,captionstilinde (uppercase, geniş tracking). - Input alanları (admin panelinde): Standart kutu input (
1px solid color-admin-border,radius-md, zemincolor-admin-surface) — burada kullanım hızı önceliklidir, editoryal his ikinci plandadır. - Textarea: Aynı underline mantığı, otomatik yükseklik genişlemesi (
auto-resize). - Select / Dropdown: Native görünümden uzaklaşan, markaya uygun özel stillendirilmiş bir açılır liste; ok ikonu ince çizgi.
- Checkbox / Radio: Kare (checkbox) ve daire (radio) minimal çizgi tabanlı, seçili durumda ince bakır dolgu + beyaz check/dot işareti (kalın dolgulu "SaaS" checkbox'lardan kaçınılır).
- Dosya Yükleme (Dropzone): Kesikli çizgili (
dashed,1px color-border) dikdörtgen alan, ortada ikon + "Sürükle bırak veya seç" metni; sürükleme sırasında çerçevecolor-accentolur. - Form Doğrulama Mesajları: İlgili alanın hemen altında,
body-sm,color-critical, ikon + metin. - Takvim Bileşeni: Özel tasarlanmış, kare hücreli, seçili gün
color-accentdolgulu kare (yuvarlak değil), bugünün tarihi ince bir alt çizgiyle vurgulanır, kapalı günlercolor-text-muted+ üstü çizili.
- Modal: Ortada, maksimum genişlik
560px, zemincolor-bg-secondary,radius-lg, overlayrgba(10,10,10,0.75)+ hafifbackdrop-blur(4px)(glassmorphism'in tek meşru kullanım alanı). Kapatma: sağ üstte ince çizgi "×" ikonu +Esctuşu desteği. - Drawer (Yan Panel): Sanatçı mini portfolyo önizlemesi, admin randevu detay hızlı görünümü gibi kullanım alanları için sağdan açılan panel, genişlik masaüstünde
480px, mobilde tam ekran.
- Konum: Sağ üst (admin panelinde) / Sağ alt (public sitede, ör. "Favorilere eklendi").
- Tasarım: Koyu zemin (
color-bg-secondary), sol kenarda3pxrenkli durum çizgisi (başarı:color-success, hata:color-critical, bilgi:color-accent),radius-md, otomatik kapanma 4 saniye, üstünde ince bir "kalan süre" çizgisi.
- Sayfa içi bilgilendirme şeritleri (ör. "Stüdyomuz 29 Ekim'de kapalıdır") — tam genişlik, zemin
color-bg-secondary, sol kenarda durum rengi çizgisi, ikon + metin + opsiyonel kapatma butonu.
- CRM durum etiketleri (Yeni Talep, Onaylandı, VIP vb.) için küçük,
radius-sm,captiontipografili, ilgili duruma göre renklendirilmiş (aşağıdaki 12.3 CRM Durum Renk Haritası ile birebir uyumlu) etiketler. - Sanatçı uzmanlık etiketleri (Fine Line, Realism vb.) için çerçeveli, şeffaf zeminli, ince metin etiketler.
- Stroke width:
1.25px(24px ikon boyutunda),1.5px(16-20px ikon boyutunda). - Boyutlar:
16px(inline metin içi),20px(form/buton içi),24px(navigasyon),32-48px(özellik açıklama illüstrasyonları).
- Minimum dokunma alanı:
44x44px. - Focus ring:
2px solid color-accent,2px offset. - Kontrast oranları: Büyük başlık metni min. 3:1, gövde metni min. 4.5:1, form alanı çerçevesi min. 3:1.
| Modül | Kapsam |
|---|---|
| Kurumsal İçerik Sayfaları | Ana Sayfa, Hakkımızda, SSS, Bakım Rehberi, İletişim, Yasal sayfalar |
| Sanatçı Sistemi | Profil, portfolyo, takvim, uzmanlık, çalışma kuralları |
| Portfolyo & Galeri | Genel galeri, stil bazlı filtreleme, sanatçı bazlı galeri |
| Dövme Stilleri | Stil açıklama sayfaları, SEO odaklı içerik |
| Blog & İçerik Pazarlaması | Kategori/etiket bazlı blog sistemi |
| Randevu (Booking) Sistemi | 9 adımlı wizard, durum takibi, bildirimler |
| Müşteri Paneli | Hesap yönetimi, randevu geçmişi, favoriler |
| Admin Paneli | Operasyon yönetimi (bkz. Bölüm 11) |
| CRM | Müşteri ilişkileri ve durum yönetimi (bkz. Bölüm 12) |
| Bildirim Sistemi | E-posta + SMS otomasyonları |
| Yorum/Değerlendirme Sistemi | Google/site içi yorum toplama |
| SEO & İçerik Yönetimi | Meta veri yönetimi, sitemap, schema |
| Analitik Entegrasyonu | GA4, Clarity, Meta Pixel |
Her sanatçı profili şu bilgi bloklarından oluşur:
- Kimlik Bilgisi: Ad soyad / sanatçı ismi (mahlas olabilir), profil fotoğrafı, kapak görseli.
- Biyografi: Kısa biyografi (liste/kart görünümünde, max 150 karakter) ve uzun biyografi (detay sayfasında, serbest uzunlukta zengin metin — kariyer hikayesi, ilham kaynakları, eğitim/sertifikalar).
- Uzmanlık Alanları: Çoklu seçim etiketleri (Fine Line, Realism, Blackwork, Japon Stili, Old School, New School, Minimalist, Botanik, Geometrik, Portre, Lettering, Dövme Kapatma, Renkli Çalışma vb.).
- Instagram Hesabı: Kullanıcı adı, profile deep-link.
- Portfolyo: Sanatçıya bağlı görsel koleksiyonu (bkz. 9.3).
- Çalışma Saatleri: Haftanın her günü için açık/kapalı durumu ve saat aralığı (ör. Salı-Cumartesi 11:00-19:00, Pazar-Pazartesi kapalı). Sanatçı bazlı farklılık gösterebilir (her sanatçının kendi çalışma günü/saati olabilir).
- Takvim / Müsaitlik: Sanatçının bloke ettiği günler (izin, tatil, dolu günler), randevu başına ayrılan varsayılan süre (ör. minimum slot 60 dk, büyük projelerde tam gün blokaj admin tarafından manuel yapılabilir).
- Randevu Kuralları: Sanatçıya özel notlar (ör. "Bu sanatçı yalnızca 3 saat ve üzeri projeleri kabul eder", "Minimum boyut: Orta") — bu bilgi sanatçı detay sayfasında ve randevu formunda ilgili sanatçı seçildiğinde bilgilendirme olarak gösterilir.
- Durum: Aktif / Pasif (İzinli) / Yeni Katıldı (rozet) / Misafir Sanatçı (Guest Artist — belirli tarih aralığında stüdyoda çalışan konuk sanatçılar için).
- Sıralama Önceliği: Admin tarafından manuel sıralanabilir (kıdem/öncelik sırası).
- Filtreleme: Uzmanlık alanına göre filtre (çoklu seçim), müsaitlik durumuna göre sıralama opsiyonu ("En yakın müsaitlik" gibi bir meta bilgiyle, kesin takvim verisi göstermeden).
- Arama: İsimle arama (küçük stüdyolarda az sanatçı olacağından bu özellik düşük öncelikli, ama mimari destekler).
- Hero: Sanatçı portresi + isim + uzmanlık etiketleri + Instagram linki + "Bu Sanatçıyla Randevu Al" CTA'sı (tıklanınca randevu wizard'ı bu sanatçı önceden seçili olarak açılır).
- Biyografi bölümü.
- Portfolyo galerisi (Masonry, bu sanatçıya ait çalışmalarla filtrelenmiş).
- Çalışma saatleri özeti (kompakt tablo).
- Müşteri yorumları (bu sanatçıya özel yorumlar varsa filtrelenmiş gösterim).
- "Diğer Sanatçılar" önerisi (sayfa sonunda, keşfi teşvik etmek için).
- Her portfolyo öğesi: görsel(ler) (çoklu görsel olabilir — ör. iyileşme süreci öncesi/sonrası), başlık/kısa açıklama, ilişkili sanatçı, ilişkili stil(ler) (çoklu etiket), ilişkili vücut bölgesi, çekim tarihi, öne çıkan (featured) durumu (ana sayfada gösterilecek mi).
- Genel galeri sayfası: Stil filtresi, sanatçı filtresi, vücut bölgesi filtresi kombinasyonu (URL query parametreleriyle paylaşılabilir filtre durumu, ör.
/portfolyo?stil=fine-line&sanatci=ahmet-yildiz). - Lightbox görünümü: Görsele tıklanınca tam ekran, ok tuşlarıyla galeri içinde gezinme, ilgili sanatçı bilgisi ve "Bu Tarzda Randevu Al" CTA'sı görsel altında.
- Admin, her portfolyo öğesini yükleme sırasında sıkıştırma/optimize etme (otomatik sunucu tarafı image processing) ile yükler.
Her stil sayfası şu içerik bloklarına sahiptir: Stil adı, kısa tanım, tarihçe/köken bilgisi (SEO ve eğitim değeri için), bu stilde çalışan sanatçıların listesi, bu stile ait portfolyo örnekleri (galeri filtreli link), "Bu Stille İlgili Sıkça Sorulanlar" mini SSS bloğu, ilgili blog yazıları linki.
Planlanan Stil Sayfaları (İlk Sürüm): Fine Line, Blackwork, Realism (Gerçekçi), Old School / Traditional, New School, Japon Stili (Irezumi), Minimalist, Geometrik, Botanik / Fine Art, Lettering / Kaligrafi, Dövme Kapatma (Cover-up), Nokta Tekniği (Dotwork).
Müşteri hesabı oluşturmak zorunlu değildir (randevu misafir olarak da oluşturulabilir), ancak hesap oluşturan müşteriler ek değer görür. Kayıt, randevu tamamlandıktan sonra da "Sonuçlarını takip etmek için hesap oluştur" davetiyle teşvik edilebilir.
- Yaklaşan Randevular: Onay bekleyen ve onaylanmış gelecek randevuların listesi, her biri durum etiketiyle, düzenleme/iptal talebi CTA'sı (iptal talebi admin onayına düşer, otomatik iptal değildir — no-show/iptal politikasına uyum için).
- Geçmiş Randevular: Tamamlanmış/iptal edilmiş/gelinmemiş randevuların arşivi, her biri için "Tekrar Randevu Al" hızlı CTA'sı (aynı sanatçı/hizmet önceden dolu şekilde yeni wizard açılır).
- Referans Görseller: Kullanıcının geçmişte yüklediği tüm referans görsellerinin kişisel bir kütüphanesi (yeni randevu oluştururken buradan seçim yapabilme opsiyonu).
- Favori Sanatçılar: Kullanıcının favorilediği sanatçıların listesi, her birinin yeni portfolyo eklemesi olduğunda bildirim tercihine bağlı olarak bilgilendirme (v2 — retention özelliği).
- Profil Ayarları: Ad soyad, telefon, e-posta, Instagram kullanıcı adı güncelleme; şifre değiştirme; hesap silme talebi (KVKK "unutulma hakkı" ile uyumlu, talep admin panelinde işleme alınır).
- Bildirim Tercihleri: E-posta/SMS bildirim kanallarının açık/kapalı yönetimi (randevu bildirimleri zorunlu/kapatılamaz, pazarlama bildirimleri opsiyonel).
- Randevu "Tamamlandı" olarak işaretlendikten 24 saat sonra otomatik e-posta ile değerlendirme daveti gönderilir (link, kimlik doğrulamalı benzersiz bir token içerir, hesap gerektirmez).
- Değerlendirme formu: 1-5 yıldız puan + serbest metin yorum + (opsiyonel) sonucu gösteren fotoğraf yükleme izni.
- Yorum admin onayından geçmeden siteye yayınlanmaz (moderasyon adımı zorunlu — kötüye kullanım ve spam koruması).
- Onaylanan yorumlar hem ana sayfada hem ilgili sanatçının detay sayfasında gösterilir.
- Ayrıca Google Business Profile üzerinden de yorum bırakmaya yönlendiren ikincil bir CTA sunulur (yerel SEO'ya katkı — bkz. Bölüm 13).
- Genel iletişim formu (
/iletisim): Ad, e-posta, telefon (opsiyonel), konu (dropdown: Genel Soru, İş Birliği/Basın, Sanatçı Başvurusu, Diğer), mesaj. Randevu taleplerinden ayrı bir tabloya düşer (farklı CRM akışı — randevu değil, genel talep). - Sanatçı başvurusu özel bir konu seçeneği olarak işaretlenirse, admin panelinde ayrı bir "İş Başvuruları" etiketiyle filtrelenebilir.
- Stüdyo adresi, harita gömme (Google Maps embed, gizlilik dostu — kullanıcı onayına bağlı yükleme veya statik harita görseli + "Haritada Aç" linki tercih edilebilir; performans ve KVKK için statik görsel + dış link önerilir).
- Çalışma saatleri, telefon, WhatsApp deep-link, Instagram/diğer sosyal medya linkleri.
| # | Tetikleyici | Kanal | Alıcı | İçerik Özeti |
|---|---|---|---|---|
| 1 | Randevu talebi oluşturuldu | E-posta + SMS | Müşteri | "Talebiniz alındı, inceleniyor" + randevu kodu |
| 2 | Randevu talebi oluşturuldu | E-posta (+ opsiyonel anlık panel bildirimi) | Admin/İlgili Sanatçı | Yeni talep detayları + panel linki |
| 3 | Randevu onaylandı | E-posta + SMS | Müşteri | Tarih, saat, sanatçı, hazırlık önerileri, adres |
| 4 | Randevu reddedildi | E-posta + SMS | Müşteri | Nazik red mesajı + varsa alternatif öneri + yeniden randevu linki |
| 5 | Randevu hatırlatma (48 saat önce) | E-posta + SMS | Müşteri | Randevu detay hatırlatması + hazırlık tüyoları |
| 6 | Randevu hatırlatma (3 saat önce) | SMS | Müşteri | Kısa hatırlatma + adres linki |
| 7 | Randevu iptal edildi (müşteri veya admin tarafından) | E-posta + SMS | İlgili taraf(lar) | İptal onayı |
| 8 | Randevu "Gelmedi" (no-show) işaretlendi | E-posta (iç kayıt) | Admin (CRM notu) | Müşteri geçmişine otomatik not düşer |
| 9 | Randevu tamamlandı | Sistem içi (yorum daveti tetikleyici) | — | 24 saat sonra yorum daveti tetiklenir |
| 10 | Yorum daveti | E-posta | Müşteri | Değerlendirme formu linki |
| 11 | Yeni iletişim formu mesajı | E-posta | Admin | Mesaj detayları |
| 12 | Yeni müşteri kaydı | E-posta (hoşgeldin) | Müşteri | Hoşgeldin mesajı + hesap özellikleri tanıtımı |
| 13 | Şifre sıfırlama talebi | E-posta | Müşteri/Admin/Sanatçı | Şifre sıfırlama linki (süreli token) |
| 14 | Yeni blog yazısı yayınlandı (opsiyonel, pazarlama izni olanlara) | E-posta | Bülten aboneleri | Yeni içerik özeti (v2 kapsamı) |
Bildirim şablonları marka sesine uygun, sade HTML e-posta şablonları olarak tasarlanır (koyu zemin, bakır vurgulu buton, logo, minimal görsel). SMS şablonları 160 karakter sınırına uygun, kısa ve net yazılır, marka adı ile başlar (ör. "Blendz Ink: Randevu talebiniz alındı. Kod: BLZ-24X7K9").
Bu bölüm, AI Coding Agent'ın hangi teknoloji yığınıyla ilerleyeceğine dair net bir çerçeve sunar.
- Next.js 15 (App Router) — Sunucu bileşenleri (Server Components) ile SEO dostu render, dosya bazlı yönlendirme.
- React 19
- TypeScript — Uçtan uca tip güvenliği.
- TailwindCSS — Utility-first stil yönetimi, yukarıda tanımlanan design token'ların
tailwind.configiçinde tema olarak eşlenmesi. - shadcn/ui — Temel erişilebilir bileşen altyapısı (Radix UI tabanlı) olarak kullanılır, ancak tüm görsel stiller (renk, radius, tipografi, spacing) yukarıdaki Design System'e göre tamamen özelleştirilir — "vanilla shadcn" görünümünde bırakılmaz.
- Framer Motion — Sayfa geçişleri, scroll reveal, mikro-etkileşim animasyonları için.
- Görsel optimizasyonu için
next/image(otomatik boyutlandırma, lazy loading, blur placeholder). - Form yönetimi için
react-hook-form+zod(şema doğrulama, hem client hem server tarafında ortak doğrulama şeması).
- Bu proje ortamında veritabanı erişimi Drizzle ORM ile PostgreSQL üzerinden sağlanır (bkz. Bölüm 15 — Veritabanı Tasarımı). Şema
src/db/schema.tsiçindedrizzle-orm/pg-coreile tanımlanır. - API katmanı Next.js Route Handlers (
app/api/**/route.ts) ile REST tarzı uç noktalar olarak inşa edilir (bkz. Bölüm 16 — API Planı). - Kimlik doğrulama: Kendi JWT tabanlı oturum yönetimi (access token + refresh token,
httpOnlycookie ile saklama) — admin, sanatçı ve müşteri rolleri için tek bir kimlik doğrulama tablosu, rol bazlı yetkilendirme. - Dosya depolama: Randevu referans görselleri, portfolyo görselleri ve blog kapak görselleri için bulut depolama entegrasyonu (bkz. 9.9.4).
- Vercel üzerinde barındırma önerilir (Next.js ile birebir uyumlu, Edge/Serverless fonksiyon desteği, otomatik CDN).
- Cloudinary (veya benzeri bir görsel CDN/optimize servisi) — otomatik format dönüşümü (WebP/AVIF), responsive boyutlandırma, yükleme sırasında sıkıştırma. Ortam değişkeni olarak API anahtarları sunucu tarafında saklanır, hiçbir zaman client'a expose edilmez.
- Resend — Transactional e-posta gönderimi (randevu bildirimleri, yorum daveti, şifre sıfırlama). E-posta şablonları React tabanlı (
react-emailbenzeri bir yaklaşım) hazırlanabilir.
- Netgsm (Türkiye'de yaygın, yerel SMS API sağlayıcı) — Randevu bildirimleri ve hatırlatmalar için SMS gönderimi. API entegrasyonu sunucu tarafı bir servis katmanında soyutlanır (
lib/sms.tsbenzeri bir modül), böylece ileride sağlayıcı değişse dahi iş mantığı etkilenmez.
- Hatırlatma bildirimleri (48 saat / 3 saat önce) ve yorum daveti (tamamlanmadan 24 saat sonra) gibi zaman tetiklemeli işler için Vercel Cron Jobs (veya benzeri zamanlanmış görev mekanizması) kullanılır; her cron tetiklendiğinde ilgili zaman aralığındaki randevular taranır ve bildirim kuyruğuna eklenir.
- Cloudflare Turnstile veya Google reCAPTCHA v3 — Randevu formu ve iletişim formu gönderiminde görünmez doğrulama.
Bu sistemde hiçbir randevu otomatik olarak kesinleşmez. Her randevu talebi, admin/ilgili sanatçı onayından geçmek zorundadır. Bu, hem sanatçının gerçek müsaitliğini teyit etmesine hem de fiyat/kapsam görüşmesinin (ödeme sistemi olmadığı için) düzgün yapılmasına imkân tanır. Sistem bu nedenle bir "self-service kesin randevu" değil, "akıllı ön talep + insan onaylı randevu" modelidir.
Randevu kaydı yaşam döngüsü boyunca aşağıdaki durumlardan geçer (bu durumlar hem müşteri arayüzünde hem admin/CRM panelinde birebir kullanılır — bkz. Bölüm 12.2):
YENI_TALEP → INCELENIYOR → ONAY_BEKLIYOR → ONAYLANDI → TAMAMLANDI
↘ ↘
REDDEDILDI IPTAL
↘
GELMEDI
- YENI_TALEP: Müşteri formu doldurduğunda oluşan ilk durum. Sistem otomatik olarak "talep alındı" bildirimi gönderir.
- INCELENIYOR: Admin/sanatçı talebi görüntülediğinde veya manuel olarak bu duruma aldığında (talep havuzunda "okunmuş" işareti).
- ONAY_BEKLIYOR: Admin, sanatçıyla teyit sürecini başlattığında ara durum (opsiyonel kullanım, hızlı onaylarda atlanabilir).
- ONAYLANDI: Admin tarih/saat/sanatçı bilgisini teyit edip onayladığında. Otomatik bildirim tetiklenir. Takvimde bu slot "dolu" olarak işaretlenir.
- REDDEDILDI: Admin, müsaitlik/uygun olmama gibi bir nedenle talebi reddettiğinde. Red nedeni girilmesi zorunludur (iç not + opsiyonel müşteriye gösterilecek nazik mesaj).
- TAMAMLANDI: Randevu günü işlem gerçekleştiğinde admin tarafından işaretlenir. Yorum daveti otomasyonu bu durumla tetiklenir.
- IPTAL: Müşteri veya admin tarafından randevu iptal edildiğinde (iptal talebi eden taraf ve neden kayıt altına alınır).
- GELMEDI (No-show): Randevu saatinde müşteri gelmediğinde admin tarafından işaretlenir; CRM'de müşteri profiline otomatik "no-show" sayacı işler (VIP/güvenilirlik skoruna etki eder — bkz. Bölüm 12.5).
- Her sanatçının çalışma takviminde tanımlı olan gün/saat aralıkları dışında randevu talebi oluşturulamaz (randevu formu bu kısıtları saat seçimi adımında otomatik filtreler).
- Bir sanatçı için aynı zaman aralığında yalnızca bir "ONAYLANDI" durumunda randevu bulunabilir (sunucu tarafında onay anında çakışma kontrolü yapılır; iki talep aynı slotu isterse, admin ilk onayladığını kabul eder, ikincisi otomatik olarak "çakışma" uyarısıyla işaretlenir ve admin'in alternatif önermesi istenir).
- Randevu süresi, seçilen hizmet/boyut tahminine göre otomatik önerilir (ör. Küçük boyut → 1.5 saat, Orta → 3 saat, Büyük → 5+ saat / tam gün), ancak admin onay sırasında bu süreyi manuel olarak düzenleyebilir.
- Randevular arası otomatik tampon süre (buffer) tanımlanabilir (varsayılan 15-30 dakika, sanatçı bazlı yapılandırılabilir) — ardışık randevularda hazırlık/temizlik süresi için.
- Müşteri, randevu tarihinden minimum 48 saat öncesine kadar kendi panelinden veya randevu takip sayfasından "iptal talebi" oluşturabilir; bu talep admin'e düşer ve admin onayı ile kesin iptale döner (tam otomatik anlık iptal yerine, stüdyonun bilgilendirilmesi ve gerekirse yeniden pazarlanabilmesi için insan onaylı bırakılmıştır).
- 48 saatten az kalan iptal taleplerinde sistem, kullanıcıya "Bu süre içinde iptal, stüdyomuzu doğrudan aramanızı gerektirir" bilgilendirmesi ile stüdyo telefon numarasını/WhatsApp'ını gösterir (tamamen kendiliğinden iptali engelleyerek son dakika iptallerinin insan teması ile yönetilmesi sağlanır).
- No-show sonrası tekrar randevu oluşturmaya herhangi bir teknik engel konulmaz, ancak CRM'de "Dikkat: Bu müşterinin X adet no-show geçmişi var" uyarısı admin'e gösterilir (bkz. 12.5), gerekirse admin manuel olarak randevu onayını daha temkinli değerlendirebilir veya ön bilgilendirme (depozito/kapora sözlü olarak istemesi gibi — sistem dışı bir operasyonel karardır) uygulayabilir.
Kullanıcı "Fark etmez, uygun sanatçıyı öner" seçeneğini işaretlediğinde, talep "Atanmamış" (Sanatçı: Belirtilmedi) etiketiyle admin panelinde özel bir kuyrukta görünür. Admin, uzmanlık/müsaitlik uyumuna göre talebi ilgili sanatçıya manuel atar; atama yapıldığında talep artık o sanatçının kuyruğunda da görünür.
- Ad Soyad: min 3, max 80 karakter, yalnızca harf ve boşluk (Türkçe karakter desteği).
- Telefon: E.164 formatına normalize edilir, Türkiye numaraları için
05XXXXXXXXXveya+905XXXXXXXXXkabul edilir. - E-posta: RFC 5322 uyumlu format doğrulaması + tek kullanımlık/geçici e-posta servis alan adlarının (disposable email domain) engellenmesi (spam azaltımı).
- Instagram kullanıcı adı: opsiyonel,
@ile başlayabilir/başlamayabilir, otomatik normalize edilir. - Açıklama metni: min 10, max 1000 karakter; küfür/spam link filtresi (basit bir kelime/URL pattern kontrolü) uygulanır.
- Görsel yükleme: her dosya max 10MB, toplam max 5 dosya, yalnızca
image/jpeg, image/png, image/webp, image/heicMIME tipleri kabul edilir; sunucu tarafında dosya imzası (magic bytes) kontrolü yapılır (yalnızca uzantıya güvenilmez). - Tarih: geçmiş tarih seçilemez, minimum 2 gün sonrasına, admin panelinde tanımlı ileri randevu penceresi (varsayılan 90 gün) dışına randevu alınamaz.
- KVKK onay kutusu işaretlenmeden form gönderilemez (
requiredsunucu tarafında da doğrulanır, yalnızca client-side'a güvenilmez). - Bot koruması: Turnstile/reCAPTCHA token'ı sunucu tarafında doğrulanmadan form kabul edilmez; ayrıca gizli bir honeypot input alanı (
display:none, gerçek kullanıcılar tarafından doldurulamaz, botlar tarafından genellikle doldurulur) eklenir — dolu geldiğinde istek sessizce reddedilir. - Oran sınırlama (rate limiting): Aynı IP adresinden kısa sürede (ör. 10 dakikada 3'ten fazla) randevu talebi engellenir.
Format önerisi: BLZ- + 6 karakterlik büyük harf+rakam karışımı rastgele kod (ör. BLZ-24X7K9), çakışma ihtimaline karşı veritabanında unique kısıt ile korunur. Kod, hem e-posta/SMS bildirimlerinde hem /randevu/onay/[kod] sayfasında kullanılır. Takip sayfasına erişim için kod + (telefon son 4 hanesi veya e-posta) doğrulaması istenerek başka kişilerin kod tahmin ederek bilgi görmesi engellenir.
Sanatçı rolüne sahip kullanıcılar (admin panelinin kısıtlı bir görünümü — bkz. 11.9) yalnızca kendilerine atanmış randevu taleplerini görebilir, kendi takvimlerini (izin/kapalı gün) güncelleyebilir, ama başka sanatçıların randevularını veya genel müşteri/CRM verilerini göremez (rol bazlı erişim kısıtı — bkz. Bölüm 17).
Admin paneli, stüdyo operasyonunun komuta merkezidir. Tasarım dili public siteden farklı olarak daha yoğun bilgi içerir, ama marka renk paletini (koyu zemin + bakır vurgu) korur; hiçbir şekilde varsayılan/vanilya bir "admin template" hissi vermemesi için özel bir kimlik oluşturulur (sol taraf sabit ince navigasyon, üstte arama + bildirim + kullanıcı menüsü şeridi; kart yoğun dashboard yerine "liste + detay panel" düzenine öncelik verilir).
| Sayfa/Modül | Super Admin | Front Desk (Staff) | Sanatçı |
|---|---|---|---|
| Dashboard | ✔ Tam | ✔ Kısıtlı (genel istatistik) | ✔ Yalnızca kendi verisi |
| Randevular | ✔ Tüm randevular | ✔ Tüm randevular | ✔ Yalnızca kendi randevuları |
| Takvim | ✔ Tüm sanatçılar | ✔ Tüm sanatçılar | ✔ Yalnızca kendi takvimi |
| Sanatçılar | ✔ Ekle/Düzenle/Sil | ✔ Yalnızca görüntüle/düzenle | ✔ Yalnızca kendi profili |
| Müşteriler | ✔ Tam CRM | ✔ Tam CRM | ✘ Erişim yok |
| Portfolyo | ✔ Tam | ✔ Tam | ✔ Yalnızca kendi çalışmaları |
| Blog | ✔ Tam | ✔ Tam | ✘ Erişim yok |
| Galeri | ✔ Tam | ✔ Tam | ✔ Yalnızca kendi galerisi |
| İletişim Formları | ✔ Tam | ✔ Tam | ✘ Erişim yok |
| Bildirimler | ✔ Tam (şablon düzenleme dahil) | ✔ Yalnızca görüntüleme | ✘ Erişim yok |
| Yorumlar | ✔ Onay/Red | ✔ Onay/Red | ✔ Yalnızca kendi yorumlarını görüntüleme |
| SEO | ✔ Tam | ✘ Erişim yok | ✘ Erişim yok |
| Site Ayarları | ✔ Tam | ✘ Erişim yok | ✘ Erişim yok |
| Roller/Yetkiler | ✔ Tam | ✘ Erişim yok | ✘ Erişim yok |
| Audit Log | ✔ Tam | ✘ Erişim yok | ✘ Erişim yok |
Ana ekranda sakin, okunması hızlı, "kart yığını" hissi vermeyen ama fonksiyonel bir özet sunulur:
- Üst Şerit — Bugünün Özeti: Bugünkü randevu sayısı, bugün onay bekleyen talep sayısı, bugün için "Gelmedi" riski taşıyan (hatırlatma gönderilmiş ama teyit edilmemiş) randevu sayısı.
- Haftalık Randevu Akışı: Basit bir çizgi/bar grafik (yoğun renkli değil, tek renk bakır tonunda ince çizgi grafik) — son 7/30/90 gün seçilebilir.
- Bekleyen Aksiyonlar Listesi: "Yeni Talep" durumundaki randevuların en üstte, en eski talep en önce olacak şekilde sıralı listesi (öncelik kuyruğu mantığı) — her satırda hızlı onay/red aksiyon butonları (satırdan çıkmadan işlem yapılabilir).
- Sanatçı Doluluk Özeti: Her sanatçının bu haftaki doluluk yüzdesi, basit yatay çubuklarla (ince, minimal, "gauge" veya "donut chart" gibi SaaS motifi değil).
- Son Aktiviteler: Son 10 sistem olayının (yeni talep, onay, iptal, yeni yorum) kısa akış listesi.
- Hızlı Aksiyonlar: "Yeni Randevu Oluştur (Manuel)", "Yeni Blog Yazısı", "Yeni Portfolyo Öğesi Ekle" kısayolları.
- Liste Görünümü: Filtrelenebilir (durum, sanatçı, tarih aralığı, hizmet türü), aranabilir (müşteri adı/telefon/randevu kodu) tablo. Her satırda: randevu kodu, müşteri adı, sanatçı, hizmet, tarih/saat, durum rozeti (badge), hızlı aksiyon menüsü (⋮).
- Kanban Görünümü (Alternatif): Durum bazlı sütunlar (Yeni Talep / İnceleniyor / Onaylandı / Tamamlandı) halinde sürükle-bırak ile durum güncelleme (opsiyonel, liste görünümüne ek bir görünüm modu olarak sunulabilir).
- Randevu Detay Sayfası (
/admin/randevular/[id]): Müşterinin girdiği tüm bilgiler (hizmet, sanatçı, boyut, bölge, referans görseller — büyütülebilir galeri, açıklama, tarih/saat, iletişim bilgileri, notlar), durum değiştirme aksiyonları (Onayla / Reddet — red nedeni zorunlu alanla / Tamamlandı İşaretle / Gelmedi İşaretle / İptal Et), iç notlar bölümü (yalnızca admin ekibinin gördüğü, müşteriye gösterilmeyen serbest metin alanı, zaman damgalı not geçmişi), bu müşterinin geçmiş randevu özeti (mini CRM kartı, sağ panelde sabit). - Manuel Randevu Oluşturma: Admin, telefonla/DM'den gelen bir talebi sisteme manuel girebilir (aynı wizard alanlarının admin tarafından tek sayfada doldurulabilen kompakt versiyonu).
- Toplu İşlemler: Birden fazla randevu seçip toplu durum güncelleme veya toplu hatırlatma gönderme.
- Aylık/haftalık/günlük görünüm arasında geçiş yapılabilen bir operasyonel takvim; her sanatçı farklı bir renk/ikonla ayırt edilir (ama palet nötr tonlarda kalır, her sanatçıya bir "etiket rengi" atanabilir — bakır tonunun tonlamaları veya nötr gri tonlar kullanılır, canlı/rastgele renk karmaşasından kaçınılır).
- Sanatçı bazlı filtre (tek sanatçı görünümüne geçiş).
- Takvimden doğrudan bir güne/saate tıklayarak manuel randevu oluşturma.
- Sanatçı izin/kapalı gün tanımlama (tek tıkla "bu günü kapat" işaretleme, tekrarlayan kapalı günler — ör. her Pazartesi kapalı — kural bazlı tanımlanabilir).
- Sanatçı listesi (aktif/pasif filtre, sürükle-bırak ile sıralama önceliği belirleme).
- Sanatçı ekleme/düzenleme formu: Kimlik bilgileri, biyografi (zengin metin editörü), uzmanlık etiketleri, profil/kapak görseli yükleme, çalışma saatleri tanımı (haftanın günleri bazında), randevu kuralları (min. proje süresi, min. boyut vb. serbest metin + yapılandırılmış alanlar), Instagram hesabı, durum (Aktif/Pasif/Misafir Sanatçı — misafir sanatçı için başlangıç/bitiş tarihi alanı).
- Sanatçı hesabı oluşturma: Süper admin, sanatçıya panel giriş yetkisi (e-posta + geçici şifre, ilk girişte şifre değiştirme zorunluluğu) tanımlayabilir.
Detaylar Bölüm 12'de (CRM) genişletilmiştir. Bu modülde temel olarak: Müşteri listesi (arama, VIP filtresi, "tekrar gelen" filtresi, no-show sayısına göre sıralama), müşteri detay sayfası (iletişim bilgileri, tüm randevu geçmişi zaman çizelgesi, iç notlar, etiketler, toplam harcama tahmini — opsiyonel manuel giriş alanı, sistem ödeme almadığı için bu alan admin tarafından bilgi amaçlı serbestçe girilir).
- Görsel yükleme (çoklu, sürükle-bırak, otomatik sıkıştırma), her görsele başlık, sanatçı ataması, stil etiketleri, vücut bölgesi etiketi, öne çıkan (featured) işaretleme.
- Toplu düzenleme ve sıralama (drag & drop sıralama, ana sayfada/galeri sayfasında görünüm sırasını belirler).
- Görsel durumları: Taslak (henüz yayınlanmamış) / Yayında / Arşiv.
- Zengin metin editörü (başlık, kapak görseli, özet, içerik, kategori, etiketler, SEO meta başlık/açıklama alanları, slug — otomatik oluşturulur ama manuel düzenlenebilir).
- Durum: Taslak / Yayında / Zamanlanmış (ileri tarihli otomatik yayın).
- Önizleme modu (yayınlamadan önce sitede nasıl görüneceğini görme).
- İlişkili içerik önerisi (yazının altında gösterilecek "ilgili yazılar" manuel veya otomatik — aynı kategori/etiket bazlı — seçimi).
Bu modül; stüdyo ortamı, ekip, etkinlikler gibi "portfolyo dışı" görsel içeriklerin (ör. stüdyo içi fotoğraflar, hijyen/ekipman görselleri, Instagram akışı için kullanılacak seçili görseller) yönetildiği ayrı bir medya kütüphanesidir. Tüm yüklenen medyalar merkezi bir "Medya Kütüphanesi" içinde saklanır ve portfolyo/blog/sanatçı modüllerinden bu kütüphaneye referans verilebilir (tekrar yükleme yapılmadan mevcut görseli seçme).
- Genel iletişim formundan (
/iletisim) gelen taleplerin listesi (randevu taleplerinden ayrı bir kuyruk). - Durum: Yeni / Okundu / Yanıtlandı / Kapatıldı.
- Konu bazlı filtre (Genel Soru, İş Birliği, Sanatçı Başvurusu, Diğer).
- Her talebe iç not ekleme ve durum güncelleme.
- Gönderilen tüm otomatik bildirimlerin (e-posta/SMS) logu — hangi randevuya, hangi müşteriye, ne zaman, hangi kanal üzerinden, başarılı/başarısız durumuyla.
- Bildirim şablonlarının düzenlenmesi (yalnızca Super Admin): Her bildirim türü için konu/metin şablonu, değişken alanlar (
{{musteri_adi}},{{tarih}},{{sanatci_adi}},{{randevu_kodu}}gibi placeholder'lar) ile özelleştirilebilir. - Başarısız gönderim durumunda yeniden gönderme (retry) butonu.
- Bekleyen yorumlar (onay bekliyor) listesi, her biri için Onayla/Reddet aksiyonu.
- Onaylanmış yorumların listesi, öne çıkan (featured — ana sayfada gösterilecek) olarak işaretleme imkânı.
- Yorum bazlı ilişkili randevu/sanatçı/müşteri bilgisine hızlı erişim linki.
- Sayfa bazlı meta başlık/açıklama override imkânı (ana sayfa, sanatçı sayfaları, stil sayfaları, blog yazıları için varsayılan otomatik üretilen meta verilerin manuel düzenlenmesi).
robots.txtvesitemap.xmlotomatik üretim durumunun görüntülenmesi (bu dosyalar kod seviyesinde otomatik üretilir, admin panelinden yalnızca son güncellenme/durum bilgisi izlenir).- Yapısal veri (Schema.org) önizleme aracı — bir sayfanın hangi structured data ile işaretlendiğini gösteren salt okunur bir görünüm (bkz. Bölüm 13).
- Google Search Console/Analytics bağlantı durumu bilgisi (dış entegrasyon linki, doğrudan API entegrasyonu ilk sürümde opsiyonel).
- Genel stüdyo bilgileri: Adres, telefon, WhatsApp numarası, e-posta, çalışma saatleri, sosyal medya linkleri.
- Randevu kuralları: Minimum ileri randevu süresi (varsayılan 2 gün), maksimum ileri randevu penceresi (varsayılan 90 gün), varsayılan randevu süreleri (boyut bazlı), iptal politikası metni.
- Bildirim ayarları: Hangi bildirim kanallarının (e-posta/SMS) aktif olduğu, hatırlatma zamanlamaları (48 saat/3 saat varsayılan, admin tarafından değiştirilebilir).
- Yasal metinler: KVKK aydınlatma metni, gizlilik politikası, çerez politikası içeriklerinin zengin metin editörüyle güncellenmesi.
- Bakım modu: Site genelinde geçici bakım sayfası açma anahtarı (acil durumlar için).
- Sistemde tanımlı roller:
super_admin,staff(front desk),artist(sanatçı),customer(müşteri — panel dışı, genel kullanıcı rolü). - Super admin, yeni
staffveyaartistkullanıcı hesabı oluşturabilir, mevcutların yetkisini değiştirebilir/pasif edebilir. - Her modül için (Randevular, Müşteriler, Blog, SEO, Ayarlar vb.) rol bazlı görüntüleme/düzenleme/silme yetkisi matris şeklinde yönetilebilir (ileri seviye — ilk sürümde sabit rol şablonları yeterlidir, granüler izin matrisi v2 için genişletilebilir mimaride bırakılır).
- Sistemdeki kritik değişikliklerin (randevu durum değişikliği, kullanıcı rol değişikliği, silme işlemleri, site ayarları güncellemesi, blog/portfolyo yayınlama) kim tarafından, ne zaman, hangi eski/yeni değerle yapıldığının kaydı.
- Filtrelenebilir (kullanıcı, işlem türü, tarih aralığı) salt okunur log tablosu.
- KVKK ve olası anlaşmazlık durumlarında hesap verebilirlik için kritik; bu tablo hiçbir kullanıcı arayüzünden düzenlenemez/silinemez (yalnızca ekleme, veritabanı seviyesinde de mümkünse yalnızca append mantığıyla korunur).
Stüdyo bağlamında CRM, karmaşık bir satış hunisi yönetimi değil, müşteri ilişkisinin bütünsel hafızasını tutan hafif ama etkili bir sistemdir. Amaç: Her müşteriyle ilgili "bu kişi kim, daha önce ne yaptırdı, ne kadar güvenilir, tercihleri neler" sorularının tek ekranda cevaplanabilmesidir.
Kullanıcının talebinde belirtilen etiketler CRM/Randevu durumlarıyla şöyle eşleşir:
| Kullanıcı Talebindeki Etiket | Sistem Durum Kodu | Açıklama |
|---|---|---|
| Yeni Talep | YENI_TALEP |
Form yeni gönderildi |
| İnceleniyor | INCELENIYOR |
Admin/sanatçı talebi değerlendiriyor |
| Onay Bekliyor | ONAY_BEKLIYOR |
Sanatçı teyidi bekleniyor (ara adım) |
| Onaylandı | ONAYLANDI |
Randevu kesinleşti |
| Tamamlandı | TAMAMLANDI |
İşlem yapıldı |
| İptal | IPTAL |
Randevu iptal edildi |
| Gelmedi | GELMEDI |
No-show |
| Durum | Renk Tonu |
|---|---|
| Yeni Talep | Nötr gri (#8B8680) — henüz aksiyon alınmamış |
| İnceleniyor | Açık bakır (#C77B3E, düşük opaklık) |
| Onay Bekliyor | Bakır (#C77B3E, tam opaklık) |
| Onaylandı | Zeytin yeşili (#5B6B4E) |
| Tamamlandı | Koyu zeytin/İkincil yeşil (#3F4A37) — "arşivlenmiş başarı" hissi |
| İptal | Toprak kırmızısı (#9C3D3D, düşük opaklık) |
| Gelmedi | Toprak kırmızısı (#9C3D3D, tam opaklık, ayrıca küçük bir uyarı ikonu) |
Kullanıcı talebinde belirtilen ek CRM etiketleri sistematik olarak şöyle tanımlanır:
- VIP: Admin tarafından manuel olarak atanan bir bayrak (flag). Kriter önerisi (admin'e rehber olarak sunulur, otomatik zorunlu değildir): 3+ tamamlanmış randevu VEYA toplam iş hacmi/önem admin takdirinde yüksek olan müşteriler. VIP müşteriler admin panelinde özel bir rozetle öne çıkar, randevu taleplerinde önceliklendirme için görsel olarak vurgulanır.
- Tekrar Gelen Müşteri (Returning): Sistem tarafından otomatik hesaplanır — bir müşterinin
TAMAMLANDIdurumunda 2 veya daha fazla randevusu varsa bu etiket otomatik uygulanır. - Riskli / No-show Geçmişi Var: Sistem tarafından otomatik hesaplanır — 1 veya daha fazla
GELMEDIkaydı olan müşteriler için otomatik uyarı rozeti (admin yeni randevu onaylarken bu bilgiyi görür). - Yeni Müşteri: Hiç tamamlanmış randevusu olmayan, ilk kez talep oluşturan kullanıcılar.
- Her müşteri kaydına ve her randevu kaydına serbest metin iç notlar eklenebilir.
- Notlar zaman damgalı ve not ekleyen kullanıcı bilgisiyle (hangi admin/staff) kayıt altına alınır, düzenlenemez yalnızca yeni not eklenebilir (denetlenebilirlik için — mevcut not silinemez, gerekirse "arşivlendi" işaretlenebilir).
- Notlar asla müşteri tarafına (public/müşteri paneli) gösterilmez — tamamen dahili.
- Liste Görünümü: Tüm müşteriler, filtrelenebilir (VIP, tekrar gelen, riskli, yeni), aranabilir.
- Zaman Çizelgesi Görünümü (Müşteri Detayında): Bir müşterinin tüm geçmişi (randevular, iletişim formu mesajları, notlar, yorumlar) kronolojik tek bir akışta gösterilir — bu, "bu müşteriyle aramızda ne oldu" sorusuna saniyeler içinde cevap verir.
CRM durum değişiklikleri doğrudan Bölüm 9.8'deki bildirim tetikleyicilerini besler; yani CRM aslında ayrı bir modül değil, randevu durum makinesinin üzerine kurulu bir görünürlük ve segmentasyon katmanıdır.
Türkiye pazarında dövme hizmeti aramaları büyük ölçüde yerel niyet (local intent) taşır (ör. "Kadıköy dövme stüdyosu", "İstanbul fine line dövme"). Bu nedenle strateji üç ana sütun üzerine kurulur: (1) Teknik SEO temeli, (2) Yerel SEO, (3) İçerik/otorite SEO'su (blog).
- Her sayfa için benzersiz, dinamik olarak üretilen
<title>vemeta description(Next.jsgenerateMetadataAPI'si kullanılarak sayfa bazlı üretim; blog/sanatçı/stil gibi dinamik sayfalarda veritabanındaki içerikten otomatik türetilir, admin panelinden override edilebilir — bkz. 11.14). - Kanonik URL (
<link rel="canonical">) her sayfada tanımlı olmalı, filtre query parametreli sayfalarda (ör./portfolyo?stil=...) kanonik ana sayfaya işaret etmeli (duplicate content önleme). sitemap.xmlotomatik üretimi: Tüm statik sayfalar + dinamik sayfalar (sanatçılar, blog yazıları, stil sayfaları, portfolyo detay — varsa) dahil,lastmodbilgisiyle.robots.txt: Admin paneli, müşteri paneli, API rotaları, randevu takip sayfası (kişisel veri içerdiği için)disallowedilir; genel içerik sayfalarıallow.- Sayfa hızının SEO'ya doğrudan etkisi nedeniyle Core Web Vitals hedefleri (bkz. Bölüm 18) zorunlu kabul edilir.
- Mobil uyumluluk (mobile-first indexing) — tüm sayfalar mobilde eksiksiz render edilir.
- HTTPS zorunlu (Vercel varsayılan olarak sağlar).
- Türkçe karakterler URL'lerde ASCII karşılıklarına dönüştürülür (ör. "ı" → "i", "ğ" → "g") slug üretiminde.
- Google Business Profile Optimizasyonu: İşletme adı, kategori ("Dövme Stüdyosu"), adres, telefon, çalışma saatleri, fotoğraflar (portfolyodan seçilmiş en güçlü görseller), hizmet listesi eksiksiz doldurulur; site üzerindeki NAP (Name, Address, Phone) bilgisiyle birebir tutarlı olmalıdır (tutarsızlık yerel SEO'yu zayıflatır).
- Site footer'ında ve İletişim sayfasında NAP bilgisi düz metin olarak (görsel içine gömülü değil, taranabilir metin) yer almalı.
- Google Haritalar embed/link entegrasyonu İletişim sayfasında.
LocalBusiness/TattooParlor(mevcut değilse en yakın uygun tipLocalBusiness+additionalType) yapısal verisi ana sayfada ve iletişim sayfasında uygulanır (bkz. 13.4).- Yerel dizinlere kayıt önerisi (işletme dışı operasyonel aksiyon olarak dokümante edilir): Google Business, Yandex Business, Foursquare, sektörel dövme dizinleri.
- Şehir/semt bazlı içerik üretimi: Blog stratejisinde "İstanbul'da Dövme Stüdyosu Seçerken Dikkat Edilmesi Gerekenler" gibi şehir bağlamlı içerikler.
Aşağıdaki yapısal veri türleri ilgili sayfalara uygulanır (JSON-LD formatında, sayfa <head> içine render edilir):
| Sayfa | Schema Türü | Amaç |
|---|---|---|
| Ana Sayfa / İletişim | LocalBusiness |
Google'da işletme bilgisi zenginleştirme (adres, telefon, çalışma saati, puan) |
| Sanatçı Detayı | Person (iç içe worksFor: LocalBusiness) |
Sanatçı zengin sonucu |
| Blog Yazısı | Article / BlogPosting |
Yazar, tarih, kapak görseli ile zengin sonuç |
| SSS Sayfası | FAQPage |
Google'da açılır SSS zengin sonucu |
| Portfolyo/Galeri (opsiyonel) | ImageObject |
Görsel arama sonuçlarında zenginleştirme |
| Yorumlar (ana sayfa/sanatçı) | AggregateRating + Review (iç içe LocalBusiness/Person altında) |
Yıldız puanı zengin sonucu |
| Ana Sayfa | Organization |
Marka logosu, sosyal medya linkleri (sameAs) |
| Tüm Sayfalar | BreadcrumbList |
Google arama sonucunda breadcrumb gösterimi |
- Her sayfa için
og:title,og:description,og:image(sayfaya özel, minimum 1200x630px, marka kimliğine uygun tasarlanmış — blog yazılarında otomatik kapak görseli, sanatçı sayfalarında sanatçı portresi, genel sayfalarda marka görseli). og:type: Ana sayfawebsite, blog yazılarıarticle.- Twitter Card (
summary_large_image) meta etiketleri. - WhatsApp/Instagram link paylaşımlarında görsel önizlemenin doğru göründüğünün test edilmesi (özellikle Instagram bio linki trafiği düşünülürse kritik).
"dövme stüdyosu", "tattoo stüdyosu İstanbul", "dövme yaptırma", "profesyonel dövme salonu", "randevulu dövme stüdyosu".
"Kadıköy dövme stüdyosu", "Beşiktaş tattoo stüdyosu", "Şişli dövme salonu", "İstanbul Anadolu yakası dövme", "Ankara dövme randevusu" (stüdyonun gerçek konumuna göre bu liste netleştirilecektir — plan aşamasında şablon olarak bırakılmıştır).
"fine line dövme", "blackwork dövme nedir", "realism dövme İstanbul", "minimalist dövme fikirleri", "japon stili dövme (irezumi)", "dövme kapatma (cover-up) İstanbul", "geometrik dövme tasarımları", "botanik dövme".
"ilk dövme yaptırmadan önce bilinmesi gerekenler", "dövme acıtır mı", "dövme fiyatları nasıl belirlenir", "dövme bakımı nasıl yapılır", "dövme iyileşme süreci".
"Blendz Ink", "Blendz Ink randevu", "Blendz Ink [sanatçı ismi]".
- Her blog yazısı, ilgili dövme stiline, ilgili sanatçıya veya bakım rehberine en az 2-3 bağlamsal iç link içerir.
- Sanatçı detay sayfaları, ilgili stil sayfalarına ve portfolyo filtrelerine link verir.
- Stil sayfaları, o stilde çalışan sanatçılara ve ilgili blog içeriklerine link verir.
- Ana sayfa, en güçlü/güncel blog yazılarına ve öne çıkan sanatçılara link vererek "link equity" dağıtımını yönetir.
- Footer'daki site haritası mantığı (tüm ana kategorilere linkler) crawl edilebilirliği artırır.
- Google Search Console entegrasyonu (doğrulama meta etiketi veya DNS ile), sorgu/tıklama/gösterim verisi takibi.
- Hedef: İlk 6 ayda yerel "[şehir] dövme stüdyosu" aramalarında ilk sayfa, ilk 3 ayda marka isim aramasında (Blendz Ink) 1. sıra.
- Blog trafiğinin organik oturum içindeki payının aylık takibi.
Blog, hem SEO otoritesi kurmak hem de potansiyel müşterinin randevu öncesi tüm objeksiyonlarını (acı, hijyen, fiyat belirsizliği, bakım kaygısı) gidermek için tasarlanmış bir içerik pazarlaması aracıdır. Blog, "içerik çöplüğü" değil, editoryal bir dergi bölümü hissi vermelidir (bkz. Bölüm 7.4 — Blog Listesi kompozisyonu).
- Bakım ve Sağlık — İyileşme süreci, ürün önerileri, hijyen.
- Stil Rehberleri — Her dövme stilinin derinlemesine anlatımı.
- İlk Kez Yaptıracaklar İçin — Karar aşamasındaki kullanıcıya yönelik rehberler.
- Sanatçı Röportajları — Stüdyo sanatçılarının hikayeleri, ilham kaynakları.
- Trendler ve İlham — Güncel dövme trendleri, tasarım ilhamı.
- Stüdyo Hayatından — Kültür, hijyen standartları, stüdyo içi süreçler (güven inşası).
- Şehir Rehberleri (Yerel SEO) — Şehir/semt bazlı içerikler.
Bakım ve Sağlık
- Yeni Dövme Bakımı: İlk 48 Saatte Yapılması ve Yapılmaması Gerekenler
- Dövme İyileşme Sürecinin Aşamaları: Gün Gün Ne Beklenmeli?
- Dövme Üzerinde Kabuklanma Normal mi? Ne Zaman Endişelenmeli?
- Dövme Bakımında Kullanılabilecek En İyi Nemlendirici Türleri
- Güneşte Dövme Koruması: Solmayı Önlemenin Yolları
- Dövme Sonrası Spor Yapmak: Ne Zaman Güvenli?
- Dövme Enfeksiyonu Belirtileri ve Ne Yapılmalı?
- Denizde/Havuzda Yeni Dövmeyle Yüzülür mü?
- Dövme Kaşınması Neden Olur, Nasıl Rahatlatılır?
- Kronik Cilt Durumu Olanlar İçin Dövme Öncesi Bilinmesi Gerekenler
İlk Kez Yaptıracaklar İçin 11. İlk Dövmenizi Yaptırmadan Önce Bilmeniz Gereken 10 Şey 12. Dövme Acıtır mı? Bölgeye Göre Ağrı Haritası 13. İlk Randevunuzda Neler Olur? Adım Adım Süreç 14. Dövme İçin Doğru Sanatçıyı Nasıl Seçersiniz? 15. Dövme Fiyatları Nasıl Belirlenir? Bilinmesi Gerekenler 16. Dövme Yaptırmadan Önce Alkol ve Kafeinden Uzak Durmalı mısınız? 17. Küçük mü Büyük mü? İlk Dövme İçin Boyut Seçimi Rehberi 18. Dövme Randevusuna Nasıl Hazırlanılır? Öneriler Listesi 19. Vücudunuzda Dövme İçin En Az Acıyan Bölgeler 20. Dövme Yaptırmadan Önce Sormanız Gereken 7 Soru
Stil Rehberleri 21. Fine Line Dövme Nedir? İnce Çizgi Sanatının Detayları 22. Blackwork Dövme: Kalın Siyah Çizgilerin Gücü 23. Realism (Gerçekçi) Dövme: Fotoğraf Gibi Detaylar Nasıl Yapılır? 24. Old School Dövme Stilinin Tarihi ve Karakteristik Özellikleri 25. Japon Stili (Irezumi) Dövmelerin Anlamı ve Sembolleri 26. Minimalist Dövme Trendi: Az ile Çok Şey Anlatmak 27. Geometrik Dövmeler: Matematik ile Sanatın Buluşması 28. Botanik Dövme: Çiçek ve Bitki Motiflerinin Anlamları 29. Dotwork Tekniği: Nokta Nokta Bir Sanat Formu 30. Lettering ve Kaligrafi Dövmeleri: Doğru Fontu Seçmek 31. New School Dövme Stili Nedir, Old School'dan Farkı Ne? 32. Renkli Dövme mi Siyah-Beyaz mı? Hangi Stil Size Uygun?
Kapatma / Revizyon 33. Eski Dövmenizi Kapatmak (Cover-up) İçin Bilmeniz Gerekenler 34. Cover-up Dövme İçin Doğru Tasarım Nasıl Seçilir? 35. Lazerle Dövme Sildirme ile Cover-up Arasındaki Fark 36. Başarısız Bir Dövmeyi Nasıl Kurtarırsınız?
Sanatçı Röportajları / Stüdyo Kültürü 37. Sanatçımızla Röportaj: [Sanatçı Adı] Dövme Sanatına Nasıl Başladı? 38. Bir Dövme Sanatçısının Günlük Rutini Nasıl Görünür? 39. Stüdyomuzda Hijyen Standartları: Güvenliğiniz İçin Neler Yapıyoruz? 40. Sanatçılarımız Nasıl İlham Alıyor? Yaratım Sürecine Bakış 41. Steril Ekipman ve Tek Kullanımlık Malzemeler Neden Önemli?
Trend ve İlham 42. 2025'in En Çok Talep Edilen Dövme Trendleri 43. Küçük Dövme Fikirleri: Zarif ve Anlamlı Tasarımlar 44. Çift/Arkadaş Dövmeleri: Eşleşen Tasarım Fikirleri 45. Aile Bağını Simgeleyen Dövme Tasarım Fikirleri 46. Anlamlı Dövme Tasarımları: Sembollerin Gizli Anlamları 47. Erkekler İçin Popüler Dövme Bölgeleri ve Tasarımlar 48. Kadınlar İçin Zarif ve Feminen Dövme Fikirleri
Şehir/Yerel SEO Odaklı 49. İstanbul'da Dövme Stüdyosu Seçerken Dikkat Edilmesi Gereken 8 Nokta 50. Kadıköy'de Dövme Yaptırmak İçin En İyi Zamanlama ve İpuçları 51. İstanbul'da Randevulu Dövme Deneyimi Neden Tercih Edilmeli?
Genel Bilgilendirme / SSS Destekli 52. Dövme Yaptırmak İçin Yaş Sınırı ve Yasal Bilgiler 53. Hamilelik Döneminde Dövme Yaptırılır mı? 54. Dövme Yaptırdıktan Sonra Kan Bağışı Yapılabilir mi? 55. Dövme ile MR Çektirmek Arasında Bir İlişki Var mı? 56. Dövme Yaptırmadan Önce Cilt Testi Neden Önemlidir?
Toplamda 56 içerik fikri sunulmuştur (istenen minimum 50 adedin üzerinde), bu liste editoryal takvim planlamasında haftada 1-2 yazı yayınlama hedefiyle ilk 6-12 ay için yeterli içerik rezervi sağlar.
- Yayın sıklığı: Haftada minimum 1 yazı (ilk 3 ay), sonrasında haftada 2 yazıya çıkarılması önerilir.
- Her yazı minimum 800-1200 kelime, SEO odaklı başlık yapısı (H1-H2-H3 hiyerarşisi net), en az 1 özgün görsel (stüdyo çekimi tercih edilir, stok görsellerden kaçınılır).
- Her yazının sonunda net bir CTA (Randevu Oluştur veya ilgili sanatçı/stil sayfasına yönlendirme).
- Tıbbi/sağlık iddiaları (enfeksiyon, iyileşme vb.) abartısız, "tavsiye" tonunda, gerektiğinde "bir sağlık uzmanına danışın" notuyla dengelenir (yasal risk azaltımı).
- Marka sesi tutarlılığı: Bkz. Bölüm 4.8.
- Her yazı yayınlanmadan önce admin onayından geçer (bkz. 11.9).
Veritabanı PostgreSQL üzerinde, Drizzle ORM ile tanımlanır. Tüm tablolarda ortak alanlar: id (UUID, primary key), created_at (timestamp, default now), updated_at (timestamp, otomatik güncellenir). Soft-delete gereken tablolarda (users, artists, appointments, reviews) deleted_at (nullable timestamp) alanı kullanılır; gerçek DELETE yerine mantıksal silme tercih edilir (denetlenebilirlik ve KVKK süreçleri için).
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| role | enum(super_admin, staff, artist, customer) |
Rol bazlı yetkilendirme |
| full_name | varchar(120) | Ad soyad |
| varchar(160), unique, nullable | Müşteri misafir randevusunda e-posta zorunlu ama hesap olmayabilir — bu tabloya yalnızca hesaplı kullanıcılar düşer | |
| phone | varchar(20), unique | E.164 formatında |
| password_hash | varchar(255), nullable | Misafir kullanıcılarda null (yalnızca giriş yapabilen roller için dolu) |
| instagram_handle | varchar(60), nullable | |
| avatar_url | text, nullable | |
| email_verified_at | timestamp, nullable | |
| phone_verified_at | timestamp, nullable | |
| marketing_opt_in | boolean, default false | Pazarlama e-postası izni |
| is_active | boolean, default true | |
| last_login_at | timestamp, nullable | |
| created_at / updated_at / deleted_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| user_id | uuid (FK → users.id), unique | Yalnızca role=artist kullanıcılarına bağlanır |
| display_name | varchar(120) | Sanatçı görünen ismi (mahlas olabilir) |
| slug | varchar(160), unique | URL için |
| short_bio | varchar(200) | Liste görünümü kısa tanıtım |
| long_bio | text | Detay sayfası biyografisi (zengin metin/markdown) |
| specialties | text[] veya jsonb | Uzmanlık etiketleri dizisi |
| cover_image_url | text | |
| profile_image_url | text | |
| min_project_duration_minutes | integer, nullable | Randevu kuralı |
| min_size_category | enum(kucuk,orta,buyuk,cok_buyuk), nullable |
|
| booking_notes | text, nullable | Sanatçıya özel randevu notu (kullanıcıya gösterilir) |
| status | enum(aktif,pasif,misafir) |
|
| guest_start_date / guest_end_date | date, nullable | Misafir sanatçı tarih aralığı |
| sort_order | integer | Manuel sıralama |
| instagram_handle | varchar(60), nullable | |
| created_at / updated_at / deleted_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| artist_id | uuid (FK → artist_profiles.id) | |
| weekday | integer (0-6) | 0=Pazartesi ... 6=Pazar |
| is_open | boolean | |
| open_time | time, nullable | |
| close_time | time, nullable |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| artist_id | uuid (FK) | |
| start_date | date | |
| end_date | date | |
| reason | varchar(200), nullable | İç not |
| is_recurring_weekday | integer, nullable | Tekrarlayan kapalı gün tanımı (ör. her Pazartesi) |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| name | varchar(100) | Yeni Dövme, Kapatma, Piercing vb. |
| slug | varchar(120), unique | |
| description | text, nullable | |
| icon_key | varchar(60), nullable | İkon/illüstrasyon referansı |
| is_active | boolean, default true | |
| sort_order | integer |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| name | varchar(100) | Fine Line, Blackwork vb. |
| slug | varchar(120), unique | |
| short_description | varchar(300) | |
| long_description | text | SEO içerikli detay metni |
| cover_image_url | text | |
| seo_title | varchar(160), nullable | |
| seo_description | varchar(320), nullable | |
| is_active | boolean | |
| sort_order | integer |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| booking_code | varchar(20), unique | Örn. BLZ-24X7K9 |
| customer_user_id | uuid (FK → users.id), nullable | Hesaplı müşterilerde dolu |
| guest_full_name | varchar(120) | Misafir/anlık bilgi (hesaplı olsa da bu anki bilgi kopyalanır — geçmiş kayıt tutarlılığı için) |
| guest_phone | varchar(20) | |
| guest_email | varchar(160) | |
| guest_instagram_handle | varchar(60), nullable | |
| service_id | uuid (FK → services.id) | |
| artist_id | uuid (FK → artist_profiles.id), nullable | Null ise "atanmamış/fark etmez" |
| size_category | enum(kucuk,orta,buyuk,cok_buyuk) |
|
| body_areas | text[] / jsonb | Çoklu vücut bölgesi seçimi |
| description | text | Dövme fikri açıklaması |
| context_tags | text[], nullable | "İlk dövmem", "Kapatma" gibi hızlı etiketler |
| preferred_date | date | Talep edilen tarih |
| preferred_time_slot | time, nullable | Talep edilen saat (null olabilir — esnek talep) |
| confirmed_date | date, nullable | Admin onayı sonrası kesinleşen tarih |
| confirmed_start_time | time, nullable | |
| confirmed_end_time | time, nullable | |
| status | enum(YENI_TALEP,INCELENIYOR,ONAY_BEKLIYOR,ONAYLANDI,REDDEDILDI,TAMAMLANDI,IPTAL,GELMEDI) |
|
| rejection_reason | text, nullable | |
| cancellation_reason | text, nullable | |
| cancelled_by | enum(musteri,admin), nullable |
|
| customer_notes | text, nullable | Müşterinin serbest notu |
| internal_notes_count | integer, default 0 | Hızlı gösterim için (asıl notlar ayrı tabloda) |
| source | enum(web_form,manuel_admin,telefon,instagram_yönlendirme), default web_form |
Talebin nereden geldiği |
| reminder_48h_sent_at | timestamp, nullable | |
| reminder_3h_sent_at | timestamp, nullable | |
| review_request_sent_at | timestamp, nullable | |
| created_at / updated_at / deleted_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| appointment_id | uuid (FK) | |
| image_url | text | Cloudinary/CDN URL |
| original_filename | varchar(255), nullable | |
| sort_order | integer |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| appointment_id | uuid (FK) | |
| from_status | varchar(30), nullable | |
| to_status | varchar(30) | |
| changed_by_user_id | uuid (FK → users.id), nullable | |
| note | text, nullable | |
| created_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| appointment_id | uuid (FK), nullable | Randevuya bağlı not |
| customer_user_id | uuid (FK), nullable | Müşteri geneline bağlı not (randevu bağımsız) |
| author_user_id | uuid (FK → users.id) | Notu yazan admin/staff |
| note | text | |
| created_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| customer_user_id | uuid (FK → users.id) | |
| tag | enum(vip,tekrar_gelen,riskli_no_show,yeni_musteri) |
|
| assigned_by | uuid (FK → users.id), nullable | Otomatik etiketlerde null |
| assigned_at | timestamp | |
| is_manual | boolean | VIP gibi manuel atananlar true |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| artist_id | uuid (FK → artist_profiles.id) | |
| title | varchar(150), nullable | |
| description | text, nullable | |
| image_urls | text[] / jsonb | Çoklu görsel (öncesi/sonrası dahil) |
| style_ids | uuid[] / jsonb (FK ilişkisi ayrıca portfolio_item_styles tablosunda normalize edilebilir) |
|
| body_area | varchar(60), nullable | |
| is_featured | boolean, default false | |
| status | enum(taslak,yayinda,arsiv) |
|
| sort_order | integer | |
| created_at / updated_at | timestamp |
| Alan | Tip |
|---|---|
| portfolio_item_id | uuid (FK) |
| style_id | uuid (FK) |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| url | text | |
| type | enum(image,video) |
|
| alt_text | varchar(255), nullable | SEO/erişilebilirlik |
| tags | text[], nullable | |
| uploaded_by | uuid (FK → users.id) | |
| created_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| appointment_id | uuid (FK), unique nullable | Bir randevu başına tek yorum |
| customer_user_id | uuid (FK), nullable | |
| artist_id | uuid (FK), nullable | |
| rating | integer (1-5) | |
| comment | text | |
| result_image_url | text, nullable | |
| status | enum(beklemede,onaylandi,reddedildi) |
|
| is_featured | boolean, default false | |
| review_token | varchar(64), unique | Kimlik doğrulamasız erişim için tekil token |
| created_at / updated_at / deleted_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| title | varchar(200) | |
| slug | varchar(220), unique | |
| excerpt | varchar(300), nullable | |
| content | text | Zengin metin/markdown |
| cover_image_url | text | |
| category | enum(bakim,stil_rehberi,ilk_kez,sanatci_roportaj,trend,studio_kultur,sehir_rehberi) |
|
| tags | text[], nullable | |
| seo_title | varchar(160), nullable | |
| seo_description | varchar(320), nullable | |
| status | enum(taslak,yayinda,zamanlanmis) |
|
| scheduled_at | timestamp, nullable | |
| author_user_id | uuid (FK → users.id) | |
| published_at | timestamp, nullable | |
| view_count | integer, default 0 | |
| created_at / updated_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| full_name | varchar(120) | |
| varchar(160) | ||
| phone | varchar(20), nullable | |
| subject | enum(genel_soru,is_birligi,sanatci_basvurusu,diger) |
|
| message | text | |
| status | enum(yeni,okundu,yanitlandi,kapatildi) |
|
| created_at / updated_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| appointment_id | uuid (FK), nullable | |
| recipient_user_id | uuid (FK), nullable | |
| recipient_contact | varchar(160) | E-posta veya telefon numarası (o an kullanılan) |
| channel | enum(email,sms) |
|
| notification_type | enum(talep_alindi,onaylandi,reddedildi,hatirlatma_48s,hatirlatma_3s,iptal,yorum_daveti,hosgeldin,sifre_sifirlama,yeni_talep_admin,yeni_iletisim_admin) |
|
| status | enum(gonderildi,basarisiz,beklemede) |
|
| provider_response | jsonb, nullable | Sağlayıcıdan dönen ham yanıt (hata ayıklama için) |
| created_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| notification_type | varchar(60), unique | 15.19'daki tiplerle eşleşir |
| channel | enum(email,sms) |
|
| subject_template | varchar(200), nullable | Yalnızca e-posta için |
| body_template | text | Placeholder değişkenler içerir |
| is_active | boolean, default true | |
| updated_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| key | varchar(100) (PK) | ör. studio_address, studio_phone, min_advance_booking_days, max_advance_booking_days, reminder_48h_enabled |
| value | jsonb | Esnek değer tipi |
| updated_by | uuid (FK), nullable | |
| updated_at | timestamp |
| Alan | Tip |
|---|---|
| id | uuid (PK) |
| customer_user_id | uuid (FK) |
| artist_id | uuid (FK) |
| created_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| customer_user_id | uuid (FK) | |
| image_url | text | |
| source_appointment_id | uuid (FK), nullable | Hangi randevu üzerinden yüklendiği |
| created_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| user_id | uuid (FK) | |
| refresh_token_hash | varchar(255) | Ham token asla saklanmaz |
| user_agent | varchar(255), nullable | |
| ip_address | varchar(64), nullable | |
| expires_at | timestamp | |
| revoked_at | timestamp, nullable | |
| created_at | timestamp |
| Alan | Tip |
|---|---|
| id | uuid (PK) |
| user_id | uuid (FK) |
| token_hash | varchar(255) |
| expires_at | timestamp |
| used_at | timestamp, nullable |
| created_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| actor_user_id | uuid (FK), nullable | |
| action | varchar(100) | ör. appointment.status_changed, artist.updated, user.role_changed |
| entity_type | varchar(60) | |
| entity_id | uuid, nullable | |
| before_data | jsonb, nullable | |
| after_data | jsonb, nullable | |
| ip_address | varchar(64), nullable | |
| created_at | timestamp |
| Alan | Tip | Açıklama |
|---|---|---|
| id | uuid (PK) | |
| role | varchar(30) | |
| module_key | varchar(60) | ör. appointments, blog, seo |
| can_view / can_edit / can_delete | boolean |
users(1) → (0..1)artist_profilesartist_profiles(1) → (n)artist_working_hours,artist_time_off,portfolio_itemsusers(1, customer) → (n)appointments,favorite_artists,customer_reference_library,customer_tagsappointments(1) → (n)appointment_reference_images,appointment_status_history,appointment_internal_notesappointments(1) → (0..1)reviewsblog_posts(n) → (1)users(author)portfolio_items(n) ↔ (n)tattoo_stylesüzerindenportfolio_item_styles
appointments:status,artist_id,preferred_date,confirmed_date,booking_code(unique index) üzerinde indeks.users:email,phoneüzerinde unique index;roleüzerinde standart index.blog_posts:slug(unique),status+published_atbileşik index.portfolio_items:artist_id,status,is_featuredüzerinde index.notification_logs:appointment_id,created_atüzerinde index (log sorgulama performansı için).audit_logs:entity_type+entity_id,created_atüzerinde index.
- Tüm uç noktalar Next.js Route Handler yapısında (
app/api/**/route.ts) REST konvansiyonuna uygun tasarlanır. - Yanıt formatı standardize edilir: Başarılı yanıtlarda
{ success: true, data: ... }, hatalı yanıtlarda{ success: false, error: { code, message } }. - Tüm liste uç noktaları
page,pageSize,sort,filterquery parametrelerini destekler (cursor veya offset bazlı sayfalama — orta ölçekli veri hacmi için offset bazlı yeterlidir). - Kimlik doğrulama gerektiren uç noktalar
Authorizationheader (Bearer JWT) veyahttpOnlycookie tabanlı oturum ile korunur. - Her yazma işlemi (POST/PUT/PATCH/DELETE) sunucu tarafında
zodşeması ile doğrulanır. - Hassas admin uç noktaları ayrıca rol kontrolü (middleware) ile korunur.
| Metod | Yol | Açıklama |
|---|---|---|
| POST | /api/auth/register |
Müşteri kaydı (ad, e-posta, telefon, şifre) |
| POST | /api/auth/login |
E-posta/telefon + şifre ile giriş, JWT + refresh token döner |
| POST | /api/auth/logout |
Oturumu sonlandırır, refresh token'ı iptal eder |
| POST | /api/auth/refresh |
Refresh token ile yeni access token üretir |
| POST | /api/auth/forgot-password |
Şifre sıfırlama e-postası tetikler |
| POST | /api/auth/reset-password |
Token ile yeni şifre belirler |
| GET | /api/auth/me |
Giriş yapmış kullanıcının profil bilgisini döner |
| POST | /api/auth/admin/login |
Admin/staff/sanatçı giriş uç noktası (ayrı rate-limit ve güvenlik kuralları ile) |
| Metod | Yol | Erişim | Açıklama |
|---|---|---|---|
| POST | /api/appointments |
Public (bot koruması ile) | Yeni randevu talebi oluşturur, booking_code üretir, bildirim tetikler |
| GET | /api/appointments/track/:bookingCode |
Public (kod + telefon/e-posta doğrulama ile) | Randevu durum takibi |
| POST | /api/appointments/:id/cancel-request |
Müşteri (kendi randevusu) | İptal talebi oluşturur (48 saat kuralına tabi) |
| GET | /api/appointments |
Admin/Staff/Artist (kısıtlı) | Filtrelenebilir randevu listesi |
| GET | /api/appointments/:id |
Admin/Staff/Artist (yalnızca kendi) | Randevu detayı |
| PATCH | /api/appointments/:id/status |
Admin/Staff | Durum değiştirme (onay/red/tamamlandı/iptal/gelmedi), rejection_reason zorunlu alanla |
| PATCH | /api/appointments/:id |
Admin/Staff | Tarih/saat/sanatçı gibi alanları güncelleme |
| POST | /api/appointments/:id/notes |
Admin/Staff | İç not ekleme |
| POST | /api/appointments/manual |
Admin/Staff | Telefon/DM üzerinden gelen talebi manuel oluşturma |
| GET | /api/appointments/availability |
Public | Seçilen sanatçı+tarih için uygun saat aralıklarını döner (wizard adım 8 için) |
| GET | /api/customers/:id/appointments |
Müşteri (kendi) / Admin | Müşteriye ait randevu geçmişi |
| Metod | Yol | Erişim | Açıklama |
|---|---|---|---|
| GET | /api/artists |
Public | Aktif sanatçı listesi (filtre: uzmanlık) |
| GET | /api/artists/:slug |
Public | Sanatçı detayı + portfolyo + yorumlar |
| GET | /api/artists/:id/working-hours |
Public | Çalışma saatleri |
| POST | /api/artists |
Admin | Yeni sanatçı oluşturma |
| PATCH | /api/artists/:id |
Admin / Artist (yalnızca kendi profili, kısıtlı alanlar) | Profil güncelleme |
| DELETE | /api/artists/:id |
Admin | Soft delete |
| PUT | /api/artists/:id/working-hours |
Admin / Artist (kendi) | Çalışma saatleri güncelleme |
| POST | /api/artists/:id/time-off |
Admin / Artist (kendi) | İzin/kapalı gün ekleme |
| PUT | /api/artists/reorder |
Admin | Sıralama güncelleme |
| Metod | Yol | Erişim | Açıklama |
|---|---|---|---|
| GET | /api/portfolio |
Public | Filtrelenebilir (stil, sanatçı, bölge) galeri listesi |
| GET | /api/portfolio/:id |
Public | Tekil öğe detayı |
| POST | /api/portfolio |
Admin / Artist (kendi) | Yeni portfolyo öğesi |
| PATCH | /api/portfolio/:id |
Admin / Artist (kendi) | Güncelleme |
| DELETE | /api/portfolio/:id |
Admin | Silme |
| PUT | /api/portfolio/reorder |
Admin | Sıralama |
| Metod | Yol | Erişim | Açıklama |
|---|---|---|---|
| GET | /api/styles |
Public | Aktif stil listesi |
| GET | /api/styles/:slug |
Public | Stil detayı + ilişkili sanatçı/portfolyo |
| POST | /api/styles |
Admin | Yeni stil |
| PATCH | /api/styles/:id |
Admin | Güncelleme |
| Metod | Yol | Erişim | Açıklama |
|---|---|---|---|
| GET | /api/reviews |
Public | Onaylanmış yorumlar (filtre: sanatçı, öne çıkan) |
| GET | /api/reviews/token/:token |
Public | Değerlendirme formunu görüntüleme (token doğrulama) |
| POST | /api/reviews/token/:token |
Public | Yorum gönderme |
| GET | /api/admin/reviews |
Admin | Bekleyen/tüm yorumlar |
| PATCH | /api/admin/reviews/:id/status |
Admin | Onay/red |
| Metod | Yol | Erişim | Açıklama |
|---|---|---|---|
| GET | /api/blog |
Public | Yayınlanmış yazı listesi (filtre: kategori, etiket) |
| GET | /api/blog/:slug |
Public | Yazı detayı, view_count artırımı |
| GET | /api/admin/blog |
Admin | Taslak dahil tüm yazılar |
| POST | /api/admin/blog |
Admin | Yeni yazı |
| PATCH | /api/admin/blog/:id |
Admin | Güncelleme/yayınlama |
| DELETE | /api/admin/blog/:id |
Admin | Silme |
| Metod | Yol | Erişim | Açıklama |
|---|---|---|---|
| POST | /api/contact |
Public (bot koruması) | Genel iletişim formu |
| GET | /api/admin/contact-messages |
Admin/Staff | Liste |
| PATCH | /api/admin/contact-messages/:id |
Admin/Staff | Durum güncelleme |
| Metod | Yol | Erişim | Açıklama |
|---|---|---|---|
| GET | /api/customer/profile |
Müşteri | Profil bilgisi |
| PATCH | /api/customer/profile |
Müşteri | Profil güncelleme |
| GET | /api/customer/favorites |
Müşteri | Favori sanatçılar |
| POST | /api/customer/favorites/:artistId |
Müşteri | Favoriye ekleme |
| DELETE | /api/customer/favorites/:artistId |
Müşteri | Favoriden çıkarma |
| GET | /api/customer/reference-library |
Müşteri | Kişisel referans görselleri |
| POST | /api/customer/account/delete-request |
Müşteri | KVKK hesap silme talebi |
| Metod | Yol | Erişim | Açıklama |
|---|---|---|---|
| GET | /api/admin/dashboard/summary |
Admin/Staff | Dashboard özet verileri |
| GET | /api/admin/customers |
Admin/Staff | CRM müşteri listesi |
| GET | /api/admin/customers/:id |
Admin/Staff | Müşteri detay + geçmiş |
| POST | /api/admin/customers/:id/tags |
Admin/Staff | Etiket atama (VIP vb.) |
| POST | /api/admin/customers/:id/notes |
Admin/Staff | İç not ekleme |
| GET | /api/admin/notifications/logs |
Admin | Bildirim gönderim logu |
| GET | /api/admin/notifications/templates |
Admin (super) | Şablon listesi |
| PATCH | /api/admin/notifications/templates/:id |
Admin (super) | Şablon güncelleme |
| POST | /api/admin/notifications/:logId/retry |
Admin | Başarısız bildirimi yeniden gönderme |
| GET | /api/admin/settings |
Admin (super) | Site ayarları |
| PATCH | /api/admin/settings |
Admin (super) | Ayar güncelleme |
| GET | /api/admin/users |
Admin (super) | Tüm iç kullanıcılar (staff/artist/admin) |
| POST | /api/admin/users |
Admin (super) | Yeni staff/artist hesabı oluşturma |
| PATCH | /api/admin/users/:id/role |
Admin (super) | Rol değiştirme |
| PATCH | /api/admin/users/:id/status |
Admin (super) | Aktif/pasif etme |
| GET | /api/admin/audit-logs |
Admin (super) | Audit log listesi (filtre: kullanıcı, işlem, tarih) |
| GET | /api/admin/media |
Admin/Staff | Medya kütüphanesi listesi |
| POST | /api/admin/media/upload |
Admin/Staff | Görsel yükleme (Cloudinary imzalı yükleme akışı) |
| Metod | Yol | Açıklama |
|---|---|---|
| GET | /api/health |
Sağlık kontrolü (uptime/monitoring) |
| GET | /api/sitemap.xml |
Dinamik sitemap üretimi |
| GET | /api/robots.txt |
Dinamik robots dosyası |
| POST | /api/cron/reminders |
Zamanlanmış görev — hatırlatma bildirimleri tetikleyici (gizli bir CRON_SECRET header ile korunur) |
| POST | /api/cron/review-requests |
Zamanlanmış görev — tamamlanan randevular için yorum daveti tetikleyici |
- JWT tabanlı kimlik doğrulama: Kısa ömürlü access token (15-30 dakika) + uzun ömürlü refresh token (7-30 gün), refresh token
httpOnly,secure,sameSite=strictcookie olarak saklanır (XSS ile çalınma riskini azaltmak için access token da mümkünsehttpOnlycookie'de tutulur, client-side JS erişimi minimize edilir). - Şifreler
bcryptveyaargon2ile salt'lanarak hash'lenir, ham şifre asla loglanmaz veya saklanmaz. - Yetkilendirme (Authorization): Her API route, middleware katmanında kullanıcının rolünü ve ilgili kaynağa erişim hakkını doğrular (ör. bir sanatçı yalnızca
artist_id = kendi_idolan randevulara erişebilir — nesne seviyesinde yetkilendirme/"object-level authorization" zorunludur, yalnızca rol kontrolü yeterli değildir). - Admin paneli girişinde ek güvenlik: Şüpheli/çok sayıda başarısız giriş denemesinde geçici hesap kilitleme (ör. 5 başarısız denemede 15 dakika kilit).
- (v2 önerisi) Admin ve staff hesapları için iki faktörlü kimlik doğrulama (2FA/TOTP) desteği mimaride öngörülür.
- Randevu formu ve iletişim formu uç noktalarında IP bazlı oran sınırlama (ör. 10 dakikada maksimum 3 istek).
- Giriş (
login) uç noktasında hem IP hem hesap bazlı oran sınırlama (brute-force koruması). - Genel API için makul bir global rate limit (ör. dakikada 60 istek/IP) uygulanır; admin API'leri için daha yüksek limit tanımlanabilir (yetkili kullanıcı trafiği).
- Rate limiting, uygulama seviyesinde (ör. bir Redis tabanlı sayaç veya edge middleware) uygulanır; sunucu tarafı bellek bazlı basit çözümler tek instance senaryosunda yeterli, çok instance'lı ölçeklenmede paylaşımlı bir depoya (Redis) taşınması önerilir.
- Randevu formu ve iletişim formunda Cloudflare Turnstile / reCAPTCHA v3 doğrulaması.
- Honeypot input alanı (görsel olarak gizli, botların doldurduğu tuzak alan).
- Zaman bazlı doğrulama: Form, açıldıktan itibaren çok kısa sürede (ör. 2 saniyeden az) gönderilirse bot şüphesiyle reddedilir.
- Tek kullanımlık/geçici e-posta alan adlarının (disposable email) engellenmesi.
- Cookie tabanlı oturumlarda
sameSite=strict/laxayarı + her state-changing (POST/PATCH/DELETE) istekte CSRF token doğrulaması (double-submit cookie deseni veya framework'ün yerleşik CSRF korumasının aktif edilmesi). - API uç noktaları yalnızca izinli origin'lerden (
CORSpolitikası ile) kabul edilir; bilinmeyen origin'lerden gelen cross-site istekler reddedilir.
- Kullanıcıdan alınan tüm serbest metin alanları (açıklama, yorum, notlar, blog içeriği) render edilmeden önce sanitize edilir (özellikle blog zengin metin editörü çıktısı — izinli HTML etiketleri whitelist ile sınırlandırılır,
<script>ve olay handler'ları (onclickvb.) tamamen temizlenir). - React'in varsayılan otomatik escape davranışına güvenilir;
dangerouslySetInnerHTMLyalnızca sanitize edilmiş içerik için, o da minimum ve kontrollü şekilde (blog içeriği gibi) kullanılır. - Content Security Policy (CSP) header'ı tanımlanır (yalnızca güvenilir script/style kaynaklarına izin veren bir politika).
- Tüm veritabanı erişimi Drizzle ORM üzerinden, parametreli sorgularla yapılır; hiçbir yerde ham string birleştirmesiyle SQL sorgusu oluşturulmaz.
- Kullanıcı girdisi doğrudan sorgu içine enjekte edilmez, her zaman ORM'in parametre bağlama mekanizması kullanılır.
- Yüklenen dosyalar MIME tipi + dosya imzası (magic bytes) kontrolünden geçirilir.
- Dosya boyutu sınırlandırılır (randevu referans görseli max 10MB/dosya, admin portfolyo yüklemesinde daha yüksek limit olabilir ama yine sınırlı).
- Yüklenen dosyalar doğrudan sunucu dosya sisteminde değil, harici bir CDN/depolama servisinde (Cloudinary) saklanır; bu, sunucu üzerinde kod çalıştırma (RCE) riskini ortadan kaldırır.
- Dosya adları sunucu tarafında yeniden üretilir (kullanıcının orijinal dosya adı doğrudan path olarak kullanılmaz — path traversal önlemi).
- Açık Rıza: Randevu formunda KVKK aydınlatma metnine link veren ve onay kutusu ile açık rıza alan bir akış zorunludur; pazarlama e-postası izni ayrı ve bağımsız bir onay kutusu ile alınır (birleştirilmiş/varsayılan işaretli onay kutuları KULLANILMAZ).
- Aydınlatma Metni: Hangi verilerin (ad, telefon, e-posta, Instagram, referans görsel, sağlık/vücut bilgisi niteliğinde olabilecek bölge/notlar) hangi amaçla (randevu yönetimi, iletişim, yasal yükümlülük) işlendiği, ne kadar süre saklandığı (ör. tamamlanan randevu verisi 2 yıl, iptal edilen talep verisi 6 ay gibi somut bir politika — nihai süre stüdyo/hukuk danışmanı onayına tabidir, plan varsayılan öneri sunar) açıkça belirtilir.
- Veri Sahibi Hakları: Müşteri panelinden "hesabımı ve verilerimi sil" talebi oluşturma imkânı (bkz. 16.10), bu talep admin panelinde bir kuyruğa düşer ve yasal süre içinde (30 gün) işleme alınır (otomatik anlık silme yerine, randevu/finansal kayıt zorunlulukları nedeniyle önce inceleme adımı önerilir).
- Veri Minimizasyonu: Sistem yalnızca gerçekten gerekli olan alanları toplar (kullanıcının talebinde belirtilen liste ile birebir sınırlıdır — ödeme/kimlik numarası gibi hassas veri toplanmaz).
- Referans Görsellerin Hassasiyeti: Vücut bölgesi bilgisi (özellikle mahrem bölgeler) potansiyel olarak hassas kategori verisi sayılabileceğinden, bu veriler yalnızca yetkili personel (admin/staff/ilgili sanatçı) tarafından görüntülenebilir, üçüncü taraflarla paylaşılmaz, pazarlama amacıyla kullanılmaz.
- Çerez Politikası: Zorunlu olmayan çerezler (analitik, pazarlama pikselleri) için açık çerez onayı (cookie consent banner) — kullanıcı onay vermeden GA4/Meta Pixel gibi izleyiciler yüklenmez (bkz. Bölüm 19).
- Veri İşleyen Sözleşmeleri: Üçüncü taraf servis sağlayıcılarla (Cloudinary, Resend, Netgsm) veri işleme sözleşmelerinin (DPA) varlığının operasyonel olarak teyit edilmesi gerektiği not edilir (hukuki süreç, geliştirme kapsamı dışı ama dokümante edilmesi gereken bir gereklilik).
- Bölüm 11.17 ve 15.26'da tanımlanan
audit_logstablosu, kritik tüm işlemleri değiştirilemez şekilde kaydeder. - Audit log kayıtları herhangi bir kullanıcı arayüzünden düzenlenemez veya silinemez; yalnızca ekleme (append-only) mantığıyla çalışır.
- Tüm ortam değişkenleri (
DATABASE_URL, API anahtarları, JWT secret) yalnızca sunucu tarafında (.env, platform secret yönetimi) saklanır, hiçbir zaman client bundle'ına dahil edilmez. - HTTPS zorunlu, HSTS header aktif.
- Güvenlik header'ları:
X-Content-Type-Options: nosniff,X-Frame-Options: DENY(clickjacking koruması),Referrer-Policy: strict-origin-when-cross-origin.
| Metrik | Hedef | Açıklama |
|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5 saniye | Hero görseli/başlığın hızlı yüklenmesi |
| INP (Interaction to Next Paint) | < 200ms | Form etkileşimlerinin akıcılığı |
| CLS (Cumulative Layout Shift) | < 0.1 | Görsellerin sabit boyut rezervasyonu ile yüklenmesi (layout kayması önleme) |
| TTFB (Time to First Byte) | < 600ms | Sunucu render/CDN performansı |
- Tüm görseller
next/imagebileşeni ile responsivesrcset, otomatik WebP/AVIF dönüşümü ve lazy loading ile sunulur (yalnızca hero/above-the-fold görselleripriorityolarak eager yüklenir). - Cloudinary üzerinden otomatik format/kalite optimizasyonu (
f_auto, q_auto) ve cihaz bazlı responsive boyutlandırma. - Blur placeholder (LQIP — Low Quality Image Placeholder) tüm büyük görsellerde kullanılır, ani içerik sıçramasını (CLS) önler.
- Video kullanılan hero bölümlerinde (varsa) otomatik oynatma sessiz,
preload=metadata, mobilde daha küçük/hafif bir video varyantı veya statik görsele düşme (fallback) stratejisi uygulanır.
- Görseller ve galeri bileşenleri viewport'a yaklaşırken (
Intersection Observertabanlı) yüklenir. - Sayfa altındaki ikincil bölümler (Instagram akışı, SSS, footer)
dynamic importile client bundle'dan ayrıştırılır, gerektiğinde yüklenir. - Admin panelindeki ağır bileşenler (zengin metin editörü, takvim kütüphanesi) yalnızca ilgili sayfa ziyaret edildiğinde yüklenir (code-splitting).
- Statik/az değişen sayfalar (Ana Sayfa, Hakkımızda, Stil sayfaları) Next.js'in Incremental Static Regeneration (ISR) yaklaşımıyla önbelleklenir, belirli aralıklarla (ör. 60 dakika) veya içerik güncellendiğinde (on-demand revalidation) yeniden üretilir.
- Sanatçı/portfolyo/blog listesi gibi veri kaynaklı sayfalar ISR + admin panelinden içerik güncellendiğinde tetiklenen
revalidatePath/revalidateTagmekanizmasıyla anında güncellenir. - API yanıtlarında uygun
Cache-Controlheader'ları (herkese açık, sık değişmeyen veri içins-maxage+stale-while-revalidate) tanımlanır. - Randevu/CRM gibi kişisel/dinamik veri içeren uç noktalar kesinlikle önbelleklenmez (
no-store).
- Vercel Edge Network üzerinden statik varlıkların (JS, CSS, font, statik görseller) global CDN dağıtımı.
- Cloudinary'nin kendi CDN katmanı üzerinden görsellerin coğrafi olarak en yakın sunucudan sunulması.
- Fontlar
next/fontile self-host edilir (üçüncü taraf font sağlayıcısına ağ isteği yapılmaz),font-display: swapile metin görünürlüğü garanti edilir (FOIT önleme). - Yalnızca gerçekten kullanılan font ağırlıkları (ör. 400, 500, 600) dahil edilir, gereksiz ağırlıklar yüklenmez.
- Route bazlı otomatik code-splitting (Next.js varsayılan davranışı).
- Framer Motion gibi animasyon kütüphaneleri yalnızca ihtiyaç duyulan bileşenlerde, mümkünse
LazyMotiongibi hafif yükleme stratejileriyle kullanılır. - Üçüncü taraf script'ler (analitik, pixel)
next/scriptilestrategy="afterInteractive"veyalazyOnloadşeklinde, ana thread'i bloklamayacak şekilde yüklenir.
- Sık sorgulanan alanlarda indeksleme (bkz. 15.29).
- Randevu çakışma kontrolü gibi kritik sorgular, tarih+sanatçı bileşik indeksi ile optimize edilir.
- Sayfalama (pagination) tüm liste uç noktalarında zorunlu, sınırsız veri çekimi engellenir.
| Araç | Amaç |
|---|---|
| Google Analytics 4 (GA4) | Genel trafik, davranış akışı, dönüşüm hunisi ölçümü |
| Microsoft Clarity | Isı haritası (heatmap) ve oturum kaydı (session recording) ile UX içgörüsü |
| Meta Pixel | Instagram/Facebook reklam kampanyalarının dönüşüm takibi (stüdyo ileride reklam yayınlarsa) |
Tüm izleyiciler yalnızca kullanıcı çerez onayı (cookie consent) verdikten sonra yüklenir (KVKK/çerez politikası uyumu — bkz. 17.8).
| Olay Adı | Tetiklenme Koşulu | Amaç |
|---|---|---|
page_view |
Her sayfa görüntülemesi | Temel trafik |
booking_start |
Randevu wizard'ı başlatıldığında (Adım 0 → Adım 1 geçişi) | Huni başlangıcı |
booking_step_completed |
Her adım tamamlandığında (step_number parametresiyle) |
Adım bazlı bırakma oranı analizi |
booking_service_selected |
Hizmet seçildiğinde (service_name parametresi) |
Hizmet talebi dağılımı |
booking_artist_selected |
Sanatçı seçildiğinde (artist_name parametresi) |
Sanatçı talebi dağılımı |
booking_reference_uploaded |
Referans görsel yüklendiğinde | Etkileşim derinliği |
booking_submitted |
Form başarıyla gönderildiğinde | Ana dönüşüm olayı |
booking_abandoned |
Wizard açıldı ama belirli süre (ör. 5 dakika) işlem yapılmadan sayfadan ayrılındığında | Terk oranı analizi |
artist_profile_view |
Sanatçı detay sayfası görüntülendiğinde | İlgi analizi |
portfolio_item_view |
Portfolyo öğesi lightbox'ta açıldığında | İçerik ilgi analizi |
contact_form_submitted |
İletişim formu gönderildiğinde | İkincil dönüşüm |
blog_post_view |
Blog yazısı görüntülendiğinde | İçerik performansı |
review_submitted |
Müşteri değerlendirme formunu gönderdiğinde | Sadakat/geri bildirim ölçümü |
instagram_link_click |
Instagram linkine tıklandığında | Sosyal medya yönlendirme takibi |
whatsapp_click |
WhatsApp/telefon linkine tıklandığında | Alternatif iletişim kanalı kullanımı |
Randevu Hunisi:
- Site Ziyareti (
page_view) - Randevu Sayfası Görüntüleme (
page_view—/randevu) - Wizard Başlatma (
booking_start) - Hizmet/Sanatçı/Boyut/Bölge Seçimi Tamamlama (
booking_step_completed, adım 1-4) - Referans/Açıklama Tamamlama (adım 5-6)
- Tarih/Saat Seçimi (adım 7-8)
- Kişisel Bilgi Girişi (adım 9)
- Form Gönderimi (
booking_submitted) - Admin Onayı (sistem içi — CRM verisi, GA4 dışı ama iç raporlamada birleştirilir)
- Randevu Tamamlanma (sistem içi)
Bu huni, GA4 "Explore" raporlarında adım bazlı özelleştirilmiş bir huni olarak kurulur; hangi adımda en çok terk (drop-off) yaşandığı tespit edilerek UX iyileştirmeleri önceliklendirilir.
- Randevu wizard'ının her adımında kullanıcıların nerede tereddüt ettiği, hangi alanlarda geri döndüğü ısı haritası ile izlenir.
- Mobil dokunma davranışları (rage click — sinirli/tekrarlı tıklama tespiti) form hatalarını veya kafa karıştırıcı bileşenleri ortaya çıkarmak için izlenir.
Admin panelindeki dashboard (bkz. 11.3), GA4'ün ötesinde işletmeye özel iç metrikleri (randevu dönüşüm oranı, sanatçı bazlı talep dağılımı, no-show oranı) doğrudan veritabanı sorgularından üretir — bu, GA4'e bağımlı olmadan operasyonel karar almayı sağlar.
- Proje iskeletinin oluşturulması (Next.js 15, TypeScript, TailwindCSS, shadcn/ui, Drizzle ORM kurulumu).
- Design System token'larının (renk, tipografi, spacing, radius) Tailwind konfigürasyonuna işlenmesi.
- Veritabanı şemasının tüm tablolarla (Bölüm 15) oluşturulması ve migrasyon/push işlemi.
- Kimlik doğrulama altyapısının (JWT, roller) kurulması.
- Temel layout bileşenlerinin (header, footer, navigasyon, buton/form sistemleri — Design System'e göre) inşası.
- Ana Sayfa (tüm bölümleriyle — hero, öne çıkan işler, sanatçılar, istatistikler, stiller, yorumlar, Instagram akışı, SSS, footer).
- Hakkımızda, SSS, Bakım Rehberi, İletişim, Dövme Stilleri sayfaları.
- Sanatçılar listesi ve Sanatçı Detayı sayfaları (statik/örnek veriyle, admin panel entegrasyonu Faz 3'te).
- Portfolyo/Galeri sayfası (filtreleme dahil).
- Blog listesi ve detay sayfası altyapısı (içerik girişi Faz 3'te admin panel ile).
- Yasal sayfalar (KVKK, Çerez Politikası, Gizlilik Politikası) — hukuki metinlerin ilk taslaklarının hazırlanması.
- 404/500 hata sayfaları.
- 9 adımlı randevu wizard'ının uçtan uca inşası (Bölüm 6.3 ve 10. Bölüm'e göre).
- Randevu durum takip sayfası (
/randevu/onay/[kod]). - Sunucu tarafı doğrulama, bot koruması, oran sınırlama entegrasyonu.
- Randevu API uç noktalarının (Bölüm 16.3) tamamlanması.
- E-posta (Resend) ve SMS (Netgsm) bildirim entegrasyonlarının kurulması, temel bildirim şablonlarının (talep alındı, onaylandı, reddedildi) devreye alınması.
- Admin kimlik doğrulama ve rol bazlı erişim (Bölüm 11.2).
- Dashboard, Randevular, Takvim modülleri.
- Sanatçılar, Portfolyo, Blog, Galeri yönetim modülleri (içerik artık admin panelinden yönetilebilir hâle gelir, Faz 1'deki statik veri buraya taşınır).
- Müşteriler (CRM) modülü, etiketleme (VIP, tekrar gelen, riskli) sistemi.
- İletişim Formları, Bildirimler, Yorumlar modülleri.
- Audit Log altyapısı.
- Zamanlanmış görevler (cron): 48/3 saat hatırlatma, yorum daveti otomasyonu.
- Kayıt/giriş akışı (opsiyonel hesap oluşturma).
- Yaklaşan/Geçmiş randevular, Favori sanatçılar, Referans görsel kütüphanesi, Profil ayarları, Bildirim tercihleri sayfaları.
- Randevu wizard'ının giriş yapmış kullanıcı için otomatik bilgi doldurma entegrasyonu.
- Yapısal veri (Schema.org) implementasyonu tüm ilgili sayfalarda.
- Sitemap/robots dinamik üretimi, Google Search Console doğrulama.
- GA4, Clarity, Meta Pixel entegrasyonu + çerez onay mekanizması.
- Performans optimizasyon turu (Core Web Vitals ölçüm ve iyileştirme).
- Erişilebilirlik denetimi (WCAG AA) ve düzeltmeler.
- İçerik girişi: İlk 8-10 blog yazısının admin panel üzerinden yayınlanması.
- Uçtan uca fonksiyonel test (randevu akışı, admin onay akışı, bildirim tetiklemeleri).
- Güvenlik taraması (rate limiting, XSS/CSRF/SQL injection senaryolarının doğrulanması).
- Mobil cihaz testleri (gerçek cihazlarda, farklı ekran boyutlarında).
- Yük testi (eş zamanlı randevu talebi senaryoları, çakışma kontrolü doğrulaması).
- Production ortamına geçiş, DNS/SSL yapılandırması, izleme (monitoring) kurulumu.
| Öncelik | Kapsam |
|---|---|
| Must Have (Zorunlu, v1) | Ana sayfa, Sanatçılar, Portfolyo, Randevu Wizard'ı (9 adım), Admin Randevu Yönetimi, Temel Bildirimler (talep/onay/red), KVKK/Gizlilik sayfaları, Temel SEO |
| Should Have (v1 içinde olması güçlü tercih) | Blog sistemi, Yorum/Değerlendirme sistemi, Müşteri Paneli, CRM etiketleme, Hatırlatma otomasyonları |
| Could Have (v1.1 - kısa vadede) | Kanban randevu görünümü, Sanatçı kendi paneli, Gelişmiş SEO modülü (admin override) |
| Won't Have (v1'de kesinlikle yok) | Online ödeme/kapora, Native mobil uygulama, Çoklu şube, Canlı chat |
Aşağıdaki özellikler mimari olarak öngörülmüş ancak ilk sürüm kapsamına dahil edilmemiştir. Veritabanı ve API tasarımı, bu özelliklerin ileride minimum yeniden yapılandırmayla eklenebilmesine izin verecek şekilde (ör. site_settings esnek yapı, rol tabanlı genişletilebilir yetki sistemi, çoklu şube için location_id alanının ileride tablolara eklenebilir olması) planlanmıştır.
Tamamlanan randevu sayısına dayalı bir puan/rozet sistemi (ör. "3. dövmende %X indirim sözlü olarak sunulur" gibi operasyonel bir teşvik, sistemsel ödeme indirimi değil çünkü ödeme entegre değildir). Müşteri panelinde "sadakat yolculuğu" görselleştirmesi.
Ödeme entegrasyonu olmadığı için bu özellik, stüdyoda yüz yüze satılan bir hediye kartının dijital kodunun sitede doğrulanabilmesi şeklinde kurgulanacaktır (kart bedelinin site üzerinden tahsilatı değil, yalnızca kod üretimi/doğrulama ve randevu formunda "hediye kodum var" alanı ile ilişkilendirme).
iOS/Android için, mevcut API katmanını (Bölüm 16) tüketen bir React Native veya native uygulama; push bildirim ile randevu hatırlatmalarının SMS/e-postaya ek kanal olarak sunulması.
locations tablosu eklenerek (id, name, address, phone, working_hours) sanatçıların ve randevuların bir şubeye bağlanması; randevu wizard'ına "Şube Seç" adımının eklenmesi (Hizmet seçiminden önce).
Randevu öncesi ücretsiz bir "ön görüşme" (video/metin bazlı danışmanlık) talebi oluşturma özelliği — dövme fikrinin netleştirilmesi için sanatçı ile randevu öncesi kısa bir dijital görüşme planlanması.
Kullanıcının verdiği anahtar kelimeler/ilham görselleri baz alınarak görsel öneri/moodboard oluşturan bir araç (üretken görsel yapay zeka entegrasyonu ile) — randevu formundaki "açıklama" adımına opsiyonel bir "ilham al" aracı olarak entegre edilebilir.
Geçmiş tamamlanmış randevu verileri (boyut, bölge, stil, sanatçı) üzerinden istatistiksel bir "yaklaşık fiyat aralığı tahmini" sunan bir araç — kesin fiyat vermez (ödeme sistemi olmadığı ve fiyatın sanatçı görüşmesiyle netleştiği ilkesiyle çelişmemesi için "tahmini aralık, kesin fiyat stüdyoda belirlenir" notuyla sunulur), kullanıcı beklentisini yönetmeye yardımcı olur.
- Randevu sonrası 3-6 ay içinde "yeni bir fikrin var mı?" retention e-posta otomasyonu.
- Doğum günü/yıldönümü (ilk dövme yıldönümü) özel mesaj otomasyonu.
- Segment bazlı toplu e-posta/SMS kampanya yönetimi (admin panelinden).
Turist müşteri segmentine yönelik tam İngilizce site versiyonu (next-intl veya benzeri bir i18n altyapısı ile), İngilizce randevu formu ve bildirim şablonları.
Bölüm 15.27'de temeli atılan role_permissions tablosunun tam işlevsel bir arayüze kavuşturulması; her modül için granüler (görüntüle/düzenle/sil/onayla) yetki tanımlama imkânı süper admin tarafından kullanıcı arayüzünden yönetilebilir hâle getirilir.
Bu doküman, Blendz Ink dijital platformunun ürün, tasarım, veri ve mühendislik boyutlarını uçtan uca, üretime hazır bir ayrıntı seviyesinde tanımlamaktadır. Geliştirme ekibi (AI Coding Agent dahil), bu planı doğrudan referans alarak; önce Design System ve veritabanı şemasını, ardından vitrin sayfalarını, ardından randevu sistemini, en son admin paneli ve CRM'i inşa edecek şekilde ilerlemelidir (bkz. Bölüm 20 — Yol Haritası). Marka analizi bölümünde belirtildiği gibi, gerçek Instagram görsel varlıkları (logo, gerçek dövme fotoğrafları, gerçek sanatçı bilgileri) proje başlangıcında stüdyo ile birlikte netleştirilip, bu dokümandaki renk/tipografi/kompozisyon prensiplerine entegre edilmelidir. Tüm tasarım ve ürün kararları, dokümanın başından sonuna kadar tekrarlanan tek bir teste tabi tutulmalıdır: "Bu, sıradan bir dövme sitesi gibi mi hissettiriyor, yoksa üst segment bir sanat stüdyosu gibi mi?"
Doküman Sonu.