## Talimatlar

### Temel Misyon

**Arka Plan:** Yaratıcılar (fotoğrafçılar, illüstratörler, tasarımcılar, sanatçılar vb.) çalışmalarını sergilemek ve potansiyel müşterileri veya işverenleri çekmek için profesyonel bir çevrimiçi portföye ihtiyaç duyarlar. Geleneksel portföy web siteleri pahalıdır, oluşturulması zaman alıcıdır ve kişisel estetik özelliklerini yansıtacak şekilde özelleştirilmesi zordur. Bu beceri, görsel güzelliği işlevsel bütünlükle birleştiren bir portföy web sitesini hızlı bir şekilde oluşturmayı amaçlamaktadır.

**Belirli Hedefler:**

- Çalışmalarınızı sergileyebileceğiniz, kategori filtrelemesi yapabileceğiniz ve çalışma detaylarınızı gösterebileceğiniz eksiksiz bir portföy web sitesi oluşturun.

- Görsel tarz, yaratıcının estetik duruşu ve çalışma tarzıyla son derece uyumlu.

- Çoklu tarama yöntemlerini (ızgara/taş döşeme/döngü vb.) destekleyen, sorunsuz etkileşimli deneyim.

- Masaüstü ve mobil cihazlara uyarlanmış duyarlı tasarım.

- İsteğe bağlı: Kişisel biyografi, iletişim bilgileri ve diğer yardımcı modülleri ekleyin.

**Temel Kısıtlamalar:**

- Estetik, temel rekabet avantajıdır; kalıplaşmış, vasat tasarımlardan kaçınılmalıdır.

- Çalışma sunum yöntemleri, içeriği gölgede bırakan aşırı tasarımdan kaçınarak, çalışmanın kendisini ön plana çıkarmalıdır.

- Yükleme hızı ve gezinme deneyimi sorunsuz olmalıdır.

**Göreve resmi olarak başlamadan önce, kullanıcının çalışma örneklerini gönderip göndermediğini teyit edin. Malzemelerin mevcut olduğunu teyit ettikten sonra göreve devam edin.**

### Adım 1: Yaratıcının Konumlandırmasını ve Estetik Tercihlerini Anlamak

**Amaç:** Yaratıcının stil konumlandırmasını, hedef kitlesini ve estetik eğilimlerini derinlemesine anlamak ve sonraki tasarım çalışmaları için net bir yön belirlemek.

**Yapılacak İşlemler:**

- Kullanıcı tarafından sağlanan **"{çalışma örnekleri}"** (resim/video bağlantıları veya dosyaları) analiz ederek görsel stil özelliklerini (renk tonu, kompozisyon, ruh hali, konu vb.) belirleyin.

- Kullanıcı tarafından sağlanan **"{estetik tercih açıklaması}"** metnini dikkatlice okuyun ve anahtar kelimeleri çıkarın:

- Genel atmosfer (örneğin, minimalist, vintage, avangard, sıcak, soğuk, sanatsal, ticari vb.)

- Referans stiller (örneğin, Japon tarzı, Avrupa/Amerikan modası, Bauhaus, Fovizm, siberpunk, vb.)

- Renk eğilimleri (örneğin, siyah/beyaz/gri, Morandi renkleri, yüksek doygunluk, gradyanlar vb.)

- Yerleşim tercihleri ​​(örneğin, geniş boşluk, yoğun kolaj, simetrik, düzensiz vb.)

- Kullanıcı **"{referans web sitesi bağlantıları}"** sağlarsa, bu siteleri ziyaret edin ve tasarım dillerini, etkileşim yöntemlerini ve düzen özelliklerini analiz edin.

- Hedef kitle türünü (potansiyel müşteriler, sanat kurumları, genel sanatseverler vb.) kapsamlı bir şekilde değerlendirerek, profesyonellik ve ulaşılabilirlik arasındaki denge noktasını belirleyin.

**Çıktı:** 3-5 temel tasarım anahtar kelimesi ve belirli görsel yönlendirme açıklamaları içeren net bir "estetik profil" oluşturun.

**Çıktı tamamlandıktan sonra, teslim edilen ürünün tatmin edici olup olmadığını kullanıcıyla teyit edin. Memnuniyet sağlanmazsa, kullanıcı memnuniyeti sağlanana kadar kullanıcı geri bildirimlerine göre yeniden ayarlamalar yapın.**

### Adım 2: Portföy Yapısını ve Etkileşim Yöntemlerini Planlayın

**Amaç:** İş miktarına, türüne ve kullanıcı ihtiyaçlarına göre en uygun bilgi mimarisini ve gezinme deneyimini tasarlamak.

**Yapılacak İşlemler:**

- Eserlerin sayısını belirleyin ve **"{eser kategorileri}"**'ne göre sınıflandırma sistemini planlayın (örneğin, portre/manzara/natürmort veya proje/seri/yıl vb.).

- Ana sayfa düzeni yöntemini belirleyin:

- **Izgara Düzeni:** Düzenli ve tertipli bir çalışma ortamı gerektiren, standart boyutlardaki işler için uygundur.

- **Şelale Şeklinde Taş Duvar Düzeni:** Görsel zenginliği vurgulayan, çeşitli iş boyutlarına uygun.

- **Tam Ekranlı Dönen Resim:** Her biri sürükleyici bir görüntüleme gerektiren daha az sayıda eser için uygundur.

- **Hibrit Düzen:** Kahraman görseli + altta ızgara gibi birden fazla yöntemin birleştirilmesi.

- Tasarım kategorisi filtreleme etkileşimi:

- Kategoriler arasında geçiş yapmak için üst/yan menü navigasyonu

- Etiket bulutu tıklama filtreleme

- Açılır menü seçimi

- Plan iş detay sayfası görüntüleme yöntemi:

- **Sayfa navigasyonu olmadan modal pencere** gösterimi

- **Ayrı detay sayfası** (sol/sağ gezinme desteğiyle)

- Şu bilgileri ekleyin: eser başlığı, yaratım açıklaması, teknik parametreler (isteğe bağlı), ilgili çalışma önerileri (isteğe bağlı)

- Yardımcı modülleri belirleyin:

- **Hakkımızda sayfası:** Yaratıcının fotoğrafı, kişisel beyanı, deneyimi

- **İletişim modülü:** E-posta, sosyal medya bağlantıları, iş birliği talep formu (isteğe bağlı)

**Çıktı:** Net bir web sitesi yapısı diyagramı (sayfa/modül listesi dahil) ve etkileşim akışı açıklaması.

### Adım 3: Görsel Sistem Tasarımı (Temel Adım)

**Amaç:** Estetik profile dayanarak, web sitesinin her unsurunun genel estetiğe hizmet etmesini sağlayacak eksiksiz bir görsel dil sistemi tasarlamak.

**Yapılacak İşlemler:**

**Renk Sistemi Tasarımı:**

- Estetik tercihlerinize ve çalışma renk tonlarınıza bağlı olarak ana rengi, vurgu rengini, arka plan rengini ve metin rengini belirleyin.

- Eser renkli ise, eseri ön plana çıkarmak için arka planda nötr renkler (beyaz/gri/siyah) kullanılmalıdır.

- Eğer çalışmanız siyah beyaz veya soğuk tonlu ise, derinlik katmak için sıcak arka plan renkleri veya vurgu renkleri kullanmayı düşünün.

- Belirli renk kodlarını (Hex) ve kullanım senaryosu açıklamalarını sağlayın.

**Tipografi Sistem Tasarımı:**

- Stile uygun yazı tipi kombinasyonları seçin:

- **Başlık Yazı Tipi:** Daha belirgin olabilir ve stil tonunu yansıtabilir (örneğin, serif zarafeti, sans-serif modernliği, el yazısı sıcaklığı gösterir).

- **Yazı Tipi:** Okunabilirliğe öncelik verin, genellikle sade sans-serif yazı tipleri tercih edin.

- Tam yazı tipi adlarını belirtin (örneğin, Playfair Display, Helvetica Neue, Noto Serif SC, vb.)

- Yazı tipi boyutu hiyerarşisini tanımlayın (örneğin, başlıklar 32-48 piksel, alt başlıklar 18-24 piksel, metin 14-16 piksel)

**Yerleşim ve Boşluk Prensipleri:**

- Estetik tercihlere göre boşluk oranını belirleyin:

- **Minimalist tarz:** Bol beyaz alan, ekran başına daha az eser (2-4)

- **Zengin stil:** Kompakt düzenleme, ekranda daha fazla eser (6-12)

- Sayfa kenar boşlukları ve aralıklar için belirli değerler tanımlayın (örneğin, sayfa kenar boşluğu 80 piksel, çalışma aralığı 24 piksel).

- Hizalama yöntemini belirleyin (ortalanmış, sola hizalanmış, düzensiz kaydırma vb.)

**Görsel Detay Tasarımı:**

- Çalışma kartı stili: yuvarlak/keskin köşeler, gölge/gölgesiz, çerçeve/çerçevesiz

- Fareyle üzerine gelindiğinde ortaya çıkan efektler: yakınlaştırma, bindirme, bilgi gösterimi, renk değişimi vb.

- Geçiş animasyonları: solma/açılma, kaydırma, ölçeklendirme hızı ve yumuşatma eğrileri

- Gezinme çubuğu stili: sabit/gizli, şeffaf/dolu, altı çizili/blok vurgulama

**Genel Atmosfer Oluşturma:**

- **Sanatsal bir tarz tercih ediyorsanız:** İnce dokular, düzensiz öğeler ve yaratıcı tipografi ekleyin.

- **Ticari tarzda ise:** Ölçülü davranın, profesyonelliği koruyun, iş kalitesine ve bilgilerin netliğine önem verin.

- **Kişisel tarzınıza uygunsa:** El çizimi öğeler, benzersiz simgeler, ayırt edici etkileşimli sürprizler ekleyin.

**Kalite Standartları:**

- Uyumlu renk eşleşmesi, en fazla 4 ana renk.

- En fazla 2-3 farklı yazı tipi kombinasyonu, net bir hiyerarşi

- Görsel öğeler stil açısından birleştirilmiş, parçalı bir görünümden kaçınılmıştır.

- Genel tasarımda "akılda kalıcı noktalar" olmalı, ancak aşırı derecede dikkat çekmemeli.

**Çıktı:** Renkler, yazı tipleri, düzen ve detaylar için belirli parametreler ve kullanım talimatları içeren ayrıntılı bir "Görsel Tasarım Spesifikasyon Belgesi".

### Adım 4: Çalışma İçeriğini ve Meta Verilerini Düzenleme

**Amaç:** Kullanıcı tarafından sağlanan çalışma örneklerini yapılandırılmış verilere dönüştürerek web sitesi oluşturulması için içerik hazırlamak.

**Yapılacak İşlemler:**

- Her bir çalışma için aşağıdaki bilgileri ayıklayın/düzenleyin:

- **Çalışma dosyası:** Resim URL'si veya video bağlantısı (**"{çalışma örnekleri}"**'nden)

- **Eser başlığı:** Eğer belirtilmişse **"{eser başlığı listesi}"** kullanın, aksi takdirde kısa ve açıklayıcı başlıklar oluşturun.

- **İş kategorisi:** **"{iş kategorileri}"**'ne göre etiketleyin (birden fazla etiketi destekler)

- **İş tanımı (isteğe bağlı):** Eğer belirtilmişse **"{iş tanımı}"** kullanın, aksi takdirde boş bırakın veya kısa bir açıklama oluşturun.

- **Oluşturma zamanı/proje bilgisi (isteğe bağlı):** Kullanıcı sağlarsa ekleyin.

- Eserleri kategoriye veya kronolojik sıraya göre düzenleyin ve görüntüleme önceliğini belirleyin (ana sayfada hangi eserlerin öne çıkarılacağını).

- İş miktarı fazlaysa (>20 parça), yavaş ilk yüklemeyi önlemek için sayfalama veya tembel yükleme önerilir.

- Kişisel biyografi içeriği hazırlayın:

- Yaratıcı adı/sahne adı (**"{kişisel bilgiler}"**'den)

- Kişisel beyan/yaratıcı felsefe (**"{kişisel biyografi}"**'den alınmıştır, sağlanmadıysa kullanıcı tarafından eklenmesi önerilir)

- İletişim bilgileri (e-posta, Instagram, Behance vb., **"{iletişim bilgileri}"** adresinden)

**Çıktı:** Gerekli tüm alanları içeren yapılandırılmış iş verisi listesi (JSON veya tablo formatı).

---

###

### Adım 5: Portföy Web Sitesi Oluşturma

**Hedef:** Görsel tasarımı ve içerik verilerini etkileşimli bir web sitesine dönüştürmek.

**Yapılacak İşlemler:**

- Aşağıdakileri de içerecek şekilde ayrıntılı web sitesi oluşturma talimatları yazın:

- **Genel yapı:** Sayfa düzeni (ana sayfa, Hakkımızda, İletişim vb.) ve gezinme yöntemi

- **Görsel sistem:** 3. adımda tasarlanan renk, yazı tipi, düzen ve detay parametrelerine tam referans.

- **Etkileşim mantığı:**

- Kategori filtreleme özelliği eklendi (etiketlere tıklayarak filtreleme çalışıyor)

- Tıklama sonrasında iş detaylarını görüntüleme yöntemi (modal veya navigasyon)

- Fareyle üzerine gelindiğinde oluşan efektler ve animasyon detayları

- Duyarlı uyarlama kuralları (mobil cihazın düzeni nasıl ayarladığı)

- **İçerik popülasyonu:** 4. Adıma referansla düzenlenmiş iş verileri ve kişisel bilgiler

- **Performans optimizasyonu:** Görüntülerin gecikmeli yüklenmesi, akıcı kaydırma, yükleme animasyonları vb.

- Talimatlarda estetik gereksinimleri açıkça belirtin, örneğin:

- "Genel atmosfer, kalıplaşmış tasarımlardan kaçınarak {estetik anahtar kelimeleri} yansıtmalıdır."

- "Çalışma kartı üzerine gelindiğinde oluşan efektler, abartılı olmaktan ziyade, incelikli ve zarif olmalıdır."

- "Renk geçişleri doğal olmalı, animasyonlar akıcı olmalı (300-500 ms yumuşatma önerilir)."

- generateWebpage aracını şu parametrelerle çağırın:

- **Talimat:** Yukarıda detaylı talimatlar verilmiştir.

- **Referanslar:** Eğer referans üretim/malzeme kimlikleri varsa, bağlam sağlamak için bunları iletin.

**Kalite Standartları:**

- Web sitesi normal şekilde yükleniyor ve etkileşim sağlıyor.

- Görsel sunum tasarım özelliklerine uygundur, belirgin stil hataları yoktur.

- Çalışma ekranı tamamlandı, kategori filtreleme işlevleri normal şekilde çalışıyor.

- Mobil uyarlama iyi

**Çıktı:** Oluşturulan portföy web sitesi (konuşmada otomatik olarak görüntülenir).

---

## Çıkış Özellikleri

**Teslim Edilecekler:**

1. **Kişisel Portföy Web Sitesi (Ana Teslim Edilecek Ürün):**

- Ana sayfada çalışma tanıtımı, kategori filtreleme, çalışma detayları, kişisel biyografi, iletişim bilgileri ve diğer modülleri içerir.

- Görsel stil, kullanıcıların estetik tercihleriyle son derece uyumlu.

- Akıcı etkileşim, duyarlı tasarım

- Doğrudan paylaşılabilir web sayfası bağlantısı

2. **Görsel Tasarım Açıklaması (Yardımcı):**

- Tasarım düşüncesinin kısa açıklaması: Bu renklerin, yazı tiplerinin ve düzenlerin neden seçildiği

- Temel tasarım parametrelerini listeleyin (renk kodları, yazı tipi adları, temel boyutlar)

- Kullanıcıların tasarım mantığını anlamalarına veya gelecekte ayarlamalar yapmalarına yardımcı olur.

**Biçim Gereksinimleri:**

- Web sitesi, konuşma sırasında otomatik olarak görüntülenen etkileşimli bir HTML sayfasıdır.

- Tasarım açıklaması özlü metin formatında sunulmalı, temel parametre listesini içerebilir.

**Kalite Standartları:**

- **Estetik Düzey:** Web sitesi, şablonlu ve sıradan bir görünümden kaçınarak, profesyonel, rafine ve akılda kalıcı görsel efektler sunuyor.

- **İşlevsel bütünlük:** Çalışma görüntüleme, kategori filtreleme, detay görüntüleme gibi temel işlevler normal şekilde çalışır.

- **Kullanıcı deneyimi:** Sorunsuz yükleme, doğal etkileşim, iyi mobil uyumluluk.

- **İçerik doğruluğu:** Tüm eserler ve metin bilgileri eksiksiz ve hatasız bir şekilde doğrudur.

---

## Stil ve Sunum (Temel Bölüm)

### Estetik Felsefesi

Portfolyo web sitesi tasarımında "eser kraldır, tasarım yardımcıdır" ilkesi esas alınmalıdır. Tüm tasarım unsurları (renk, yazı tipi, düzen, animasyon) eserin sunumuna hizmet etmeli, onu gölgede bırakmamalıdır. Aynı zamanda, tasarımın kendisi de yeterli zevk ve detay içermeli, yaratıcının profesyonel standartlarını yansıtmalıdır.

### Görsel Tasarım Noktaları

**Renk Uygulaması:**

- Arka plan renkleri genellikle nötr renkler (beyaz/açık gri/koyu gri/siyah) kullanılarak oluşturulur ve bu da çalışma renklerini ön plana çıkarır.

- Vurgu renkleri (düğmeler, bağlantılar, öne çıkan noktalar) ölçülü kullanılmalı ve çalışma ortamının renk tonlarıyla uyum sağlamalıdır.

- Aşırı parlak veya birbiriyle çelişen renk kombinasyonlarından kaçının.

- Çalışma ortamının ana renklerine göre arayüz renklerini dinamik olarak ayarlayabilir (gelişmiş teknik).

**Yazı Tipi Seçimi:**

- Tasarım açısından anlamlı ancak aşırı gösterişli olmayan yazı tiplerine öncelik verin.

- **İngilizce yazı tipi önerileri:** Playfair Display (zarif), Montserrat (modern), Lora (klasik), Raleway (sade)

- **Çince yazı tipi önerileri:** Source Han Serif (zarif), Source Han Sans (modern), LXGW WenKai (sıcak), Zcool QingKe HuangYou (güçlü)

- Yazı tipi kombinasyonlarında kontrast olmalı (serif + sans-serif veya kalın + ince), ancak en fazla 3 farklı yazı tipi kullanılmalıdır.

**Tasarım Estetiği:**

- **Minimalist tarz:** Bol beyaz alan, ekran başına 2-4 eser, ortalanmış, nefes alma alanını vurgulayan tasarım.

- **Dergi stili:** Izgara düzeni, standart çalışma boyutları, düzenli ve tertipli, profesyonelliği vurgulayan bir tarz.

- **Sanatsal tarz:** Düzensiz yerleşim, çeşitli çalışma boyutları, ızgarayı bozabilir, yaratıcılığı vurgular.

- **Sürükleyici stil:** Tam ekran slayt gösterisi, aynı anda yalnızca bir eseri sergileyerek etkiyi vurgular.

- Tarz ne olursa olsun, görsel dengeyi ve ritmi koruyun.

**Etkileşim Ayrıntıları:**

- **Fareyle üzerine gelindiğinde oluşan efektler incelikli ve zarif olmalıdır:**

- Hafif görüntü yakınlaştırma (ölçek: 1.05) + yarı saydam kaplama + başlığın yavaşça belirmesi

- Veya: doygunluk/parlaklık değişimi + kenar vurgusu

- Aşırı abartılı animasyonlardan (döndürme, çevirme, yanıp sönme) kaçının.

- Geçiş animasyonunun süresi için önerilen süre 300-500 ms'dir, yumuşatma (ease-in-out) efekti kullanılmalıdır.

- Kaydırma deneyimi akıcı olmalı, derinlik için paralaks efektleri eklenebilir.

- Yükleme animasyonları sade ve şık olmalı, gösterişli yükleme simgelerinden kaçınılmalıdır.

**Duyarlı Tasarım:**

- **Masaüstü:** Geniş ekranın avantajlarından, çok sütunlu ızgaradan veya büyük resim görüntüleme özelliğinden tam olarak yararlanın.

- **Tablet:** Görsel dengeyi koruyarak 2-3 sütuna ayarlayın.

- **Mobil:** Tek veya çift sütun, dokunma alanlarını artırma, navigasyonu basitleştirme

- Temel bilgiler (başlık, gezinme, iletişim bilgileri) tüm cihazlarda açıkça görünür olmalıdır.

### Ortak Stil Referansları

- **Minimalizm:** Bol beyaz alan, siyah/beyaz/gri ana renkler, sans-serif yazı tipleri, basit simgeler, tüm süslemelerin kaldırılması.

- **Japon Ferahlığı:** Yumuşak tonlar (krem rengi, açık ahşap, puslu mavi), el yazısı fontlar, sıcak ve zarif detaylar.

- **Moda Editörlüğü:** Yüksek kontrast, kalın yazı tipleri, asimetrik düzen, siyah beyaz fotoğraf stili.

- **Vintage:** Eskitilmiş dokular, sıcak sarı tonlar, serif yazı tipleri, gren, film kalitesi

- **Teknoloji/Fütüristik:** Koyu arka planlar, floresan vurgu renkleri, geometrik şekiller, dinamik efektler, siberpunk unsurlar

- **Sanat Galerisi:** Saf beyaz arka plan, ultra geniş boş alan, ortalanmış eser sergileme, minimal gezinme, fiziksel galeri deneyimini simüle etme.

### Tasarımda Kaçınılması Gereken Tuzaklar

- ❌ Gradyanlar, gölgeler ve efektlerin aşırı kullanımı, ucuz bir görünüm yaratıyor.

- ❌ Çok fazla veya aşırı süslü yazı tipi kullanımı, okunabilirliği etkiliyor.

- ❌ Renk çatışmaları veya aşırı doygunluk, görsel yorgunluk

- ❌ Sıkışık yerleşim, eserler arasında nefes alma alanının olmaması

- ❌ Animasyonlar çok karmaşık veya yavaş, deneyimi olumsuz etkiliyor.

- ❌ Mobil cihazlara uyum zayıf, metin çok küçük veya düğmelere dokunmak zor.

- ❌ Aşırı tasarım, tasarımın işin önüne geçmesine izin vermek