ayrisdev/scenerji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
scenerji/docs/TEMPLATE_BRIEF.md
T

15 KiB
Raw Permalink Blame History

Şablon Tasarım Rehberi

Ayris Tech — Premium Demo Sistemi

Görevin

Potansiyel müşterilere gönderilecek demo siteleri için sektöre özel Next.js şablonları yazıyorsun.

Öncelik sırası: 1. Tasarım ve his → 2. Animasyon → 3. İçerik → 4. Teknik detaylar

Müşteri linke tıkladığında ilk 3 saniyede "bu benim için yapılmış, bu çok pahalı görünüyor" hissini yaşamalı. Kod çalışıyor mu çalışmıyor mu ikinci plandır — önce göz kamaştır.

Tasarım Felsefesi

"Oha" Anı Zorunludur

Her şablonun sayfaya girince insanı duraksatan bir imza momenti olmalı. Bu an tasarlanmış, hesaplanmış, sektöre özgün olmalı. Genel bir animasyon değil — o sektörün ruhunu yansıtan bir hareket.

Referans seviye: Awwwards Site of the Day. Hedef his: "Bu siteyi kim yaptı, nasıl yaptı?"

Tasarım Kararlarında Öncelik Sırası

1. Boşluk ve nefes   — section'lar arası ritim, padding cömertliği
2. Tipografi gücü    — başlıklar cesur ve büyük, hiyerarşi net
3. Fotoğraf kalitesi — her fotoğraf kompozisyon düşünülerek seçilmeli
4. Renk disiplini    — max 2-3 renk, geri kalanı siyah/beyaz/gri
5. Hareket kalitesi  — az animasyon ama her biri mükemmel
6. Detay titizliği   — hover state'ler, geçişler, micro-interaction'lar

Nasıl Düşünmeli

Görseller verildiğinde şunu sor: "Bu tasarımı 10.000 USD'ye satan ajans ne hissettirdi?"

  • Boşlukla mı ezdi? (luxury whitespace)
  • Tipografiyle mi şok etti? (devasa başlık, küçük body)
  • Fotoğrafla mı sardı? (fullscreen, parallax, overlay)
  • Hareketle mi büyüledi? (curtain, reveal, magnetic)
  • Detayla mı ikna etti? (custom cursor, subtle grain, line animation)

Cevap hangisi ise — oradan başla, diğerlerini o etrafına kur.

İmza Moment Kütüphanesi

Her şablona aşağıdakilerden en az bir tane koy. Birden fazla koyacaksan aralarına yeterli "sessizlik" bırak.

Sayfa Açılışı

  • Curtain reveal — siyah ekran ortadan ikiye ayrılır, fotoğraf ortaya çıkar
  • Preloader çizgi — ince bir çizgi soldan sağa ilerler, logo belirir, sahne açılır
  • Staggered text entrance — başlık kelime kelime veya karakter karakter düşer
  • Scale-up reveal — küçük merkezi bir görsel tam ekrana açılır

Scroll Animasyonları

  • Parallax hero — scroll ettikçe fotoğraf daha yavaş iner, metin daha hızlı çıkar
  • Sticky + akan metin — fotoğraf sabit kalır, metin onun üzerinden akar
  • Horizontal scroll bölüm — kartlar/menü yatay ilerler, mouse/touch ile sürüklenir
  • Pinned section — section scroll boyunca sabit kalır, içeriği değişir (tablar gibi)
  • Text scale on scroll — başlık küçükten büyüğe veya büyükten küçüğe dönüşür

Hover & Mikro

  • Magnetic buton — mouse yaklaştıkça buton sana doğru çekilir
  • Custom cursor — varsayılan cursor kaybolur, markaya özgü daire/metin gelir
  • Image tilt — kart hover'ında 3D perspektif eğimi (rotateX/Y)
  • Clip-path reveal — fotoğraf hover'da yukarıdan aşağı açılır
  • Underline draw — link hover'ında çizgi soldan sağa çizilir

Atmosfer

  • Scrolling marquee — sonsuz döngü metin bandı (iki yönde farklı hızda olursa daha iyi)
  • Grain texture overlay — tüm sayfa üstünde ince film grain (opacity 0.03-0.06)
  • Ambient glow — arka planda renk blobları yavaşça hareket eder
  • Video loop — hero'da sessiz, döngü video (restoran, otel için)

Tipografi Kuralları

Pahalı hissinin %40'ı tipografiden gelir.

Başlık boyutu:   clamp(48px, 8vw, 120px) — küçük ekranda küçülür, büyük ekranda büyür
Body boyutu:     16px minimum, 18px ideal
Satır yüksekliği: başlıklarda 0.9-1.0, body'de 1.6-1.8
Harf aralığı:    büyük harf başlıklarda tracking-widest, serif başlıklarda -0.02em

Font kombinasyonları (sektöre göre):

  • Otel/Butik/Restoran → Playfair Display (serif) + Inter (sans) — klasik lüks
  • Mimari/Kurumsal → Inter Black + Inter Regular — modern güç
  • Bar/Gastro → Cormorant Garamond + Space Grotesk — sofistike
  • Klinik/SaaS → DM Sans veya Sora + monospace detay — temiz güven

Başlık tek satırda yoksa satır kırılmalarını elle kontrol et — otomatik kırılma çirkin görünür.

Renk ve Atmosfer Kuralları

Koyu Tema (restoran, bar, otel, gastro)

  • Arka plan: #080810 veya #0a0a0a — tam siyah değil, hafif tonlu
  • Metin: #ffffff + rgba(255,255,255,0.5) ikincil
  • Aksant: firmanın ana rengi — sadece CTA, badge, vurgu için
  • Fotoğraflar üstünde: rgba(0,0,0,0.3-0.5) overlay — direkt koymadan

Açık Tema (klinik, mimari, kurumsal, butik)

  • Arka plan: #ffffff veya #f8f7f4 (hafif warm) veya #f5f0e8 (krem)
  • Metin: #0a0a0a veya #1a1a1a
  • Aksant: firmanın ana rengi
  • İkincil yüzeyler: #f0f0f0 veya rgba(0,0,0,0.04)

Renk Disiplini

  • Ana renk: butonlar, başlık vurgusu, badge, aktif state
  • İkincil renk: hover state, border, gradient ikinci noktası
  • Nötr: arka planlar, kartlar, ayırıcılar
  • Başka renk yok. Emoji veya ikonlar nötr tutulur.

Fotoğraf Kullanımı

Fotoğraflar kod kadar önemli. Kötü fotoğraf iyi tasarımı mahveder.

Unsplash koleksiyonları (sektöre göre):

  • Otel/Resort: https://source.unsplash.com/1920x1080/?luxury,hotel,resort
  • Restoran: https://source.unsplash.com/1920x1080/?restaurant,food,gastronomy
  • Bar: https://source.unsplash.com/1920x1080/?cocktail,bar,dark
  • Mimari: https://source.unsplash.com/1920x1080/?architecture,interior,modern
  • Klinik: https://source.unsplash.com/1920x1080/?clinic,medical,clean

Kurallar:

  • Hero fotoğrafı her zaman object-cover + object-position: center
  • Dikey fotoğraflar (portrait) kart içinde daha dramatik görünür — kullan
  • Birden fazla fotoğraf varsa renk tonu tutarlı olsun (hepsi sıcak veya hepsi soğuk)
  • picsum.photos sadece hızlı test için — final görünümde Unsplash parametreli URL kullan

Animasyon Kalitesi

Easing Değerleri

// Smooth deceleration — genel kullanım
ease: [0.25, 0.46, 0.45, 0.94] as [number,number,number,number]

// Dramatic entrance — hero başlıklar
ease: [0.16, 1, 0.3, 1] as [number,number,number,number]

// Snappy — buton, badge, küçük elementler
ease: [0.34, 1.56, 0.64, 1] as [number,number,number,number]

// Linear — marquee, döngüler
ease: "linear"

Süre Kuralları

Micro (hover, badge):     0.15-0.25s
Element entrance:         0.6-0.8s
Section transition:       0.8-1.0s
Page reveal / curtain:    1.0-1.4s
Marquee döngü:            20-40s (içerik uzunluğuna göre)

Stagger Ritmi

// Çocuk sayısına göre stagger ayarla
3-4 element:   staggerChildren: 0.15
5-8 element:   staggerChildren: 0.08
9+ element:    staggerChildren: 0.05

Animasyon Monotonluğu Kırma

Her section aynı fadeUp ile başlarsa sayfa uyutur. Karıştır:

  • Hero: curtain veya scale reveal
  • Stats: sayaç animasyonu (AnimatedCounter)
  • Kartlar: stagger + hafif x offset (soldan veya sağdan)
  • Galeri: clip-path veya opacity-only (y hareketi olmadan)
  • CTA section: parallax arka plan + metin fade

Lenis Smooth Scroll Kurulumu

Her şablona ekle:

"use client";
import { useEffect } from "react";

// Component içinde:
useEffect(() => {
  let lenis: any;
  import("@studio-freight/lenis").then(({ default: Lenis }) => {
    lenis = new Lenis({ duration: 1.2, easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) });
    function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
    requestAnimationFrame(raf);
  });
  return () => lenis?.destroy();
}, []);

Section Tasarım Standartları

Hero

  • Her zaman viewport yüksekliği: min-h-screen
  • Fotoğraf varsa: position: absolute, inset: 0, object-fit: cover + koyu overlay
  • Başlık: clamp ile responsive, viewport'un %60-70'ini kaplamalı
  • CTA buton: tek, net, aksant renkli — ikinci buton varsa ghost/outline

Marquee Bandı (opsiyonel ama etkili)

Hero ile sonraki section arasına koy. İki yönde farklı iki satır daha güçlü görünür.

İki Kolonlu (Split) Section

Sol: metin + CTA         Sağ: tall fotoğraf (aspect-ratio: 3/4)
Metin sola hizalı        Fotoğraf slight overlap (negatif margin)

Kart Grid'leri

  • 3'lü grid: her kart eşit, hover'da y: -8 ve border glow
  • Masonry: sadece galeri için — CSS columns veya css-grid ile
  • Horizontal scroll: overflow-x: auto, scrollbar-width: none, touch-action: pan-x

CTA Section (Son Bölüm)

En az bir kez tam genişlikte, fotoğraf arka planlı olsun. Başlık büyük, CTA tek.

Tech Stack

{
  "zorunlu": [
    "Next.js 14 App Router",
    "Framer Motion v11",
    "Tailwind CSS v3",
    "TypeScript strict",
    "@studio-freight/lenis"
  ],
  "gerektiğinde": [
    "Three.js / @react-three/fiber  (sadece ambient bg için, performans dikkat)",
    "react-lottie-player            (loading, boş state ikonları için)",
    "usehooks-ts                    (useWindowSize, useIntersectionObserver)"
  ],
  "yasak": [
    "jQuery",
    "Bootstrap",
    "CSS @keyframes animasyonları (Framer Motion kullan)",
    "inline style ile animasyon (transform, opacity — Framer Motion kullan)"
  ]
}

Framer Motion zorunlu kurallar:

  • ease array'leri her zaman type assertion: as [number,number,number,number]
  • Scroll animasyonları: useScroll + useTransform
  • Section girişleri: whileInView + viewport={{ once: true }}
  • Layout animasyonları: layout prop — yükseklik değişimlerinde kullan

Kalite Kontrol Listesi

Kodu teslim etmeden önce şunları kontrol et:

Tasarım:

  • Sayfaya girince ilk 3 saniyede "oha" dedirten bir şey var mı?
  • Boşluklar cömert mi — hiçbir element birbirine yapışık değil mi?
  • Başlıklar yeterince büyük mü — yarım metre uzaktan okunabilir mi?
  • Renk disiplini korunuyor mu — max 3 renk var mı?
  • Fotoğraflar kompozisyon olarak uygun mu?

Animasyon:

  • Her section farklı animasyon mu kullanıyor (monotonluk yok)?
  • Easing değerleri sert mi yoksa yumuşak mı? (Sert olmamalı)
  • Lenis smooth scroll çalışıyor mu?
  • Hover state'lerin hepsi var mı?

Detay:

  • Demo banner sabit mi: "Bu site demo amaçlıdır — demo.ayristech.com"
  • Mobile'da layout bozulmuyor mu?
  • TypeScript hataları var mı (any yok)?

Proje Yapısı

demo-ayristech/
├── app/
│   ├── page.tsx              # Showcase index
│   └── [slug]/page.tsx       # Dynamic routing
├── components/
│   └── templates/
│       └── [SektörTemplate]/
│           └── index.tsx     # Her şablon kendi klasöründe
├── data/
│   └── demos.ts              # Tüm demo verisi
└── components/ui/
    └── AnimatedCounter.tsx   # Scroll-triggered sayaç

Yeni şablon eklerken:

  1. components/templates/YeniTemplate/index.tsx oluştur
  2. data/demos.ts interface'ine yeni sektör tipini ve alanları ekle
  3. app/[slug]/page.tsx routing'e if (data.template === "yeni") return <YeniTemplate data={data} />;
  4. app/page.tsx templateLabels'a yeni badge ekle

Müşteri Sitesi SS Analizi

Sana müşterinin mevcut sitesinin ekran görüntüleri verildiğinde şu sırayla ilerle:

1. İçerik Çıkarımı

Her SS'den şunları çıkar:

Alan Nereden Bulunur
Firma adı Header, logo yanı, title
Slogan Hero başlığı veya alt metin
Şehir / Adres Footer, iletişim sayfası
Telefon Header, footer, iletişim
E-posta Footer, iletişim sayfası
Çalışma saatleri Footer veya iletişim
Hizmetler Hizmetler/servisler/poliklinikler sayfası
Ekip / Doktorlar Kadro/hakkımızda sayfası
Yorumlar / Referanslar Varsa ana sayfa veya ayrı sayfa
Sosyal medya Footer veya header ikonları

2. Mevcut Tasarımı Değerlendir

SS'lere bakarak kısaca not al:

  • Renk paleti: Mevcut ana renk nedir?
  • Genel his: Profesyonel mi, eski mi, amatör mü?
  • Eksikler: Animasyon yok, mobile bozuk, fotoğraf kalitesi kötü vb.
  • Güçlü yanlar: Korunabilecek bir şey var mı?

Bu değerlendirmeyi şablona yansıt — mevcut siteyi taklit etme, dönüştür.

3. demos.ts Formatında Çıkar

Analiz sonucunu aşağıdaki formatta hazırla, eksik alanları makul şekilde doldur:

{
  slug: "firma-adi",          // firma adından türet, küçük harf, tire ile
  template: "klinik",         // sektöre göre seç
  firma: {
    adi: "Firma Adı",
    slogan: "SS'den alınan slogan veya uygun bir slogan üret",
    sehir: "Şehir",
    adres: "Tam adres",
    telefon: "+90 ...",
    email: "info@...",
    logoEmoji: "🏥",          // sektöre uygun emoji
    renkAna: "#______",       // mevcut sitenin ana rengi
    renkKoyu: "#______",      // daha koyu tonu
    renkAcik: "#______",      // çok açık tonu (bg için)
  },
  istatistikler: [
    { deger: "15+", etiket: "Yıllık Deneyim" },
    // SS'de rakam varsa al, yoksa sektöre uygun üret
  ],
  hizmetler: [
    { ikon: "🔬", baslik: "Hizmet Adı", aciklama: "Kısa açıklama" },
    // SS'deki hizmetler sayfasından çek
  ],
  yorumlar: [
    { yazar: "Ad Soyad", yorum: "...", puan: 5, tarih: "2024", emoji: "👤" },
    // SS'de yoksa 3 adet gerçekçi yorum üret
  ],
  // Sektöre özel alanlar — SS'den çek, yoksa üret
}

4. Şablon Seçimi

Sektöre göre hangi şablonun kullanılacağına karar ver:

Sektör Şablon
Klinik, hastane, sağlık merkezi klinik
Diş kliniği, estetik dental
Restoran, kafe, bistro restoran veya restoran2
Bar, meyhane, gece kulübü bar veya bar2
Otel, resort, apart hotel1, hotel2 veya hotel3
Taksi, transfer, ulaşım taxi veya taxi2
Yazılım, SaaS, chatbot chatbot
İnşaat, mimarlık, kurumsal kurumsal

Mevcut şablonlardan hiçbiri uygun değilse: yeni şablon yaz — TEMPLATE_BRIEF'teki tasarım kurallarına uyarak.

5. Antigravity'e Ver

Analiz tamamlandığında şunu söyle:

"Bu demos.ts verisini kullan. TEMPLATE_BRIEF.md'deki kurallara göre [ŞabonAdı] şablonunu yaz. Mevcut sitenin renk paletini koru ama tasarımı tamamen modernize et. İmza moment olarak [seçilen imza moment] kullan."

Son Not

Amaç: müşteriye link atıp "bak, senin için yaptım" diyebilmek.

Standart değil, özel. Güzel değil, etkileyici. Çalışıyor değil, hissettiriyor.

Eğer şablona baktığında "bu idare eder" diyorsan — yeniden başla.

Reference in New Issue View Git Blame Copy Permalink