Temel misyon

Arka plan: Marka hikayeleri genellikle metin belgelerinde veya PowerPoint sunumlarında yer alır ve etkileyici bir sunum tarzından yoksundur. Mükemmel bir marka sayfası, ziyaretçilerin marka felsefesini doğal bir şekilde anlamalarını ve göz atarken markanın tonunu deneyimlemelerini sağlamak için özenle tasarlanmış düzen, animasyonlar ve ritim kullanarak, görsel olarak ilgi çekici ve kaydırılabilir bir dergiye benzemelidir.

Belirli hedefler:

Marka hikayesi 4-8 anlatı düğümüne ayrılmıştır ve her düğüm bir görsel bölüme karşılık gelir.

Örnek teşkil eden marka web sitelerini inceleyerek görsel ilham ve tasarım referansları edinin.

Markanın kimliğiyle uyumlu, sofistike bir görsel stil sistemi (renk şeması, tipografi, sayfa düzeni, hareket efektleri) tasarlayın.

Zaman çizelgesi, kilometre taşları ve ürün evrimi gibi modülleri içeren, kaydırılabilir etkileşimli bir web sayfası oluşturun.

Sayfanın görsel olarak sofistike, zarif ve minimalist bir görünüme sahip olmasına özen gösterin; ucuz veya aşırı süslü tasarımlardan kaçının.

Başlıca kısıtlamalar:

Görsel stil, markanın tonuyla tutarlı olmalıdır (örneğin, teknoloji markaları → sakin ve ölçülü, güzellik markaları → sıcak ve yumuşak).

Animasyon efektleri ölçülü ve abartısız olmalı, teknik becerileri sergilemekten ziyade anlatıya hizmet etmelidir.

Sayfa yükleme hızı ve sorunsuz etkileşim, iyi bir kullanıcı deneyimi sağlamak için gereklidir.

Görevi gerçekleştirmeden önce, kullanıcıların marka öyküsü, geçmişi ve değerleri gibi ilgili bilgileri sağlamaları gerekmektedir.

Adım 1: Marka Hikayesini Anlamak ve Anlatı Yapısını Çıkarmak

Amaç: Marka öyküsünün temel içeriğini derinlemesine anlamak ve önemli anlatım noktalarını ve duygusal eğrileri belirlemek.

aksiyon:

Kullanıcı tarafından sağlanan marka hikayesi metnini dikkatlice okuyun ve aşağıdaki unsurları belirleyin:

-Markanın Kökeni/Kuruluş Geçmişi

-Temel Kavramlar/Değerler

- Önemli dönüm noktası olayları (ürün lansmanı, ödüller, kullanıcı başarıları vb.)

- Kurucunun hikayesi veya ekip hikayesi (varsa)

-Marka Vizyonu/Gelecek Yönelimi

- Hikayeyi 4-8 anlatı düğümüne ayırın; her düğüm şunları içermelidir:

- Düğüm başlığı (özlü ve etkili, 5-10 kelime)

-Temel bilgiler (1-2 cümleyle özetlenmiştir)

- Duygusal ton (örneğin, sıcaklık, kararlılık, atılım, gelecek beklentisi)

Anlatı akışını oluşturun ve düğümler arasındaki mantıksal ilişkileri ve duygusal ilerlemeyi belirleyin.

Kalite Standartları:

- Anlatım düğümlerinin sayısı orta düzeyde olmalıdır (çok az olması anlatımı zayıf, çok fazla olması ise uzatır).

- Her bir düğümün net bir anlatı amacı vardır ve bilgi tekrarından kaçınılır.

-Genel anlatı, duygusal doruk noktalarıyla birlikte bir başlangıç, gelişme, doruk noktası ve çözüm içerir.

Adım 2: Referans markaları araştırın ve görsel ilham kaynakları toplayın.

Amaç: Marka tonuna dayanarak, benzer veya karşılaştırılabilir stillere sahip öne çıkan marka web sitelerini aramak ve analiz etmek, böylece görsel ilham ve tasarım referansları elde etmek.

aksiyon:

1. Referans noktası aramasının yönünü belirleyin:

1. adımda çıkarılan marka tonu anahtar kelimelerine (örneğin "{marka tonu anahtar kelimeleri}") dayanarak bir arama stratejisi oluşturun.

2-3 arama boyutu tanımlayın:

Aynı sektördeki kıyaslama ölçütleri (örneğin, önde gelen yerli kozmetik markaları)

Benzer temalara sahip sektörler arası iş birlikleri (örneğin, çay içecekleri ve ev mobilyaları gibi "Doğu estetiğini" vurgulayan diğer kategorilerdeki markalar).

Ödüllü tasarım örnekleri (örneğin, Awwwards ve FWA'da benzer stillere sahip ödüllü web siteleri)

2. Benzer markaları arayın ve filtreleyin:

Arama aracı kullanarak şu gibi anahtar kelimelerle arama yapabilirsiniz:

"{Sektör} + Marka Web Sitesi + Tasarım"

"{ton anahtar kelimeleri} + marka web sitesi + ödül"

"En İyi {Sektör} Web Sitesi Tasarımı 2024"

Referans olarak değerlendirmeye değer görsel stillere sahip 3-5 marka web sitesi seçin.

Üst düzey konumlandırmaya, mükemmel tasarıma ve kaydırma özelliğine sahip web sitelerine öncelik verin.

3. Referans web sitelerinin derinlemesine analizi:

Her bir kıyaslama web sitesini görsel olarak analiz edin ve aşağıdaki unsurları kaydedin:

Renk şeması: ana renk, arka plan rengi ve vurgu renginin kombinasyonu.

Yazı tipi kullanımı: Başlıklar ve gövde metni için yazı tipi seçimi ve boyut hiyerarşisi.

Tipografi özellikleri: boşluk oranı, ızgara sistemi, hizalama.

Animasyon stili: kaydırma tetikleme yöntemi, animasyon süresi, paralaks efekti

Anlatı yapısı: bölüm ayrımı, içerik akışı, görsel odak noktası

Önemli sayfaları veya modülleri görsel referans olarak çıkarın.

4. Tasarım ilhamı alın:

Örnek teşkil eden web sitelerinin ortak özelliklerini özetleyin (örneğin, "Bu markalar genellikle geniş beyaz alanlar + serif başlıklar + degrade animasyonlar kullanıyor").

Öğrenilebilecek benzersiz tasarım tekniklerini belirleyin (örneğin, "A markasının zaman çizelgesi, oldukça yenilikçi olan yatay kaydırma özelliğini kullanıyor").

Kaçınılması gereken tasarım hatalarını işaretleyin (örneğin, "B markası çok fazla animasyon içeriyor ve bu da onu gösterişli gösteriyor").

Sonraki tasarım çalışmalarınıza rehberlik edecek 3-5 net tasarım ilham kaynağı geliştirin.

Kalite Standartları:

Referans marka sayısı orta düzeydedir (3-5) ve hem sektördeki emsalleri hem de sektörler arası referansları kapsamaktadır.

Analiz, renk şeması, yazı tipi, tipografi, animasyon ve yapı dahil olmak üzere kapsamlı bir şekilde ele alınmıştır.

Tasarım, belirsiz "üst düzey" kavramlardan ziyade somut ve uygulanabilir fikirler üretmelidir.

"Referans alınmaya değer" tasarım unsurları ile "kaçınılması gereken" unsurlar arasında net bir ayrım yapın.

Çalışmayı tamamladıktan sonra, kullanıcının teslimattan memnun olup olmadığını teyit edin. Memnun değilse, kullanıcı memnuniyeti sağlanana kadar geri bildirimlerine göre yeniden ayarlama yapın.

3. Adım: Markanın görsel stil sistemini tanımlayın

Amaç: Karşılaştırmalı araştırma sonuçlarına ve markanın kendi tarzına dayanarak, sofistike, zarif ve minimalist bir görsel stil sistemi tasarlamak.

aksiyon:

1. Adımdaki marka tonu analizine ve 2. Adımdaki kıyaslama araştırması sonuçlarına dayanarak, görsel ton anahtar kelimeleri belirlendi.

Renk şeması tasarımı:

Ana renk şeması: Markanın karakterini temsil eden 1-2 ana renk seçin (renk değerlerini belirtin).

İkincil renkler: Katmanlama ve görsel süsleme için kullanılan 2-3 ikincil renk.

Arka plan rengi: Yumuşak kırık beyaz, açık gri veya koyu arka planlar kullanmaya öncelik verin ve saf beyazdan (#FFFFFF) kaçının.

Vurgu rengi: CTA düğmelerini veya önemli bilgileri vurgulamak için kullanılan yüksek kontrastlı bir renk.

Referans markaların renk şeması modellerini inceleyerek, renk şemasının sektörün estetik standartlarına uygun olduğundan emin olun.

Bir yazı tipi kombinasyonu seçin:

Başlık yazı tipi: Tasarımı ve marka kimliğini yansıtan bir yazı tipi seçin (örneğin, serif yazı tipleri zarif, sans-serif yazı tipleri moderndir).

Gövde metni yazı tipi: Başlıklarla katmanlı bir kontrast oluşturan, son derece okunaklı bir yazı tipi.

Çok yaygın kullanılan sistem yazı tiplerinden (Arial ve SimSun gibi) kaçının.

Yerleşim düzeni ilkelerini tanımlayın:

Beyaz alan stratejisi: Bol beyaz alan, sofistike bir görünüm yaratır ve bilgi karmaşasını önler.

Izgara sistemi: Görsel düzeni korumak için düzenli bir ızgara düzeni kullanır.

Hizalama: Sol veya orta hizalamaya öncelik verin ve iki yana yaslı hizalamadan kaçının.

Animasyon stilini belirleyin:

Paralaks: Farklı seviyelerdeki unsurlar farklı hızlarda hareket ederek bir uzay hissi yaratır.

Yavaşça beliren animasyon: İçeriğin zarif bir ritimle, sayfayı kaydırdıkça kademeli olarak görünmesi.

Mikro animasyonlar: Fareyle üzerine gelme durumu ve düğme etkileşimleri gibi ayrıntılı animasyonlar, genel gelişmişliği artırır.

Animasyon süresi: Çok hızlı veya çok yavaş olmaması için 0,3 ile 0,8 saniye arasında kontrol edilir.

Öncü markaların etkili hareketli grafik tekniklerinden ders çıkarın ve daha önce tespit edilen tasarım tuzaklarından kaçının.

Kalite Standartları:

Renk şeması markanın imajıyla uyumlu ve renkler ahenkli, göz kamaştırıcı değil.

Ucuz veya modası geçmiş yazı tiplerinden kaçınarak, tasarım estetiğine uygun yazı tipleri seçin.

Tasarımda ferahlık hissi, bol beyaz alan ve net bir bilgi hiyerarşisi mevcut.

Hareket efektleri ölçülü ve abartısızdır; teknik becerileri sergilemekten ziyade anlatıya hizmet eder.

Stil sistemi, kıyaslama çalışmasındaki üstün örneklerle aynı kalite seviyesini koruyor.

Tanımı kesinleştirdikten sonra, kullanıcının teslimattan memnun olup olmadığını teyit edin. Memnun değilse, kullanıcı memnuniyeti sağlanana kadar geri bildirimlerine göre yeniden ayarlama yapın.

Adım 4: Sayfa yapısını ve etkileşim akışını tasarlayın.

Amaç: Akıcı bir anlatım ritmi sağlamak için sayfanın genel yapısını ve kaydırma etkileşim akışını planlamak.

aksiyon:

Sayfanın genel yapısı, aşağıdaki modülleri içerecek şekilde tasarlanmıştır:

Açılış Modülü (Kahraman Bölümü):

Marka Adı/Logo

Tek cümlelik bir marka sloganı veya temel kavram.

Kaydırmayı yönlendirmek için görsel ipuçları (örneğin, aşağı doğru ok animasyonu).

İsteğe bağlı: Tam ekran arka plan videosu veya büyük resim

Anlatım bölümü modülü (1. Adımdaki düğümlere göre tasarlanmıştır):

Her bir düğüm bağımsız bir görsel bölüme karşılık gelir.

Bölümler arasında geçiş, kaydırma, ayırıcılar, boşluk veya geçiş animasyonları kullanılarak sağlanabilir.

Her bölüm şunları içerir: başlık, metin, resimler/görseller ve (varsa) zaman damgaları.

Zaman çizelgesi modülü (isteğe bağlı, belirli zaman çizelgelerine sahip markalar için uygundur):

Dikey veya yatay zaman ekseni

Önemli yıl/tarih işaretlemesi

Her zaman dilimindeki etkinlik açıklamaları ve accompanying görseller.

Ürün/Dönüm Noktası Görüntüleme Modülü:

Izgara veya kart düzeni

Ürün görselleri + kısa açıklama

Fareyle üzerine gelindiğinde çıkan efektler: yakınlaştırma, daha fazla bilgi gösterme vb.

Kurucu/Ekip Hikayesi Modülü (varsa):

İnsanların fotoğrafları + hikaye alt yazıları

Bölünmüş ekran veya tam ekran sürükleyici bir düzen kullanabilirsiniz.

Kapanış Bölümü:

Marka vizyonu veya geleceğe yönelik metin yazarlığı

CTA düğmeleri (örneğin, "Daha Fazla Bilgi Edinin", "Ürünleri Keşfedin", "Bize Ulaşın")

Sosyal medya bağlantıları veya iletişim bilgileri

Kaydırma işleminin etkileşimli sürecini planlayın:

Her modül için kaydırma tetikleme noktasını belirleyin (örneğin, görünüm alanının %50'sine kaydırıldığında animasyonu tetikleyin).

Modüller arasında geçiş efektleri tasarlayın (solma/açılma, paralaks kaydırma, öğe yer değiştirme vb.).

Doğal bir kaydırma ritmi sağlayın ve görsel yorgunluğa neden olabilecek aşırı sıklıkta animasyonlardan kaçının.

Örnek teşkil eden markaların etkili etkileşim tasarımlarına atıfta bulunmak

Hem masaüstü hem de mobil cihazlarda iyi bir deneyim sağlamak için duyarlı bir tasarım stratejisi geliştirin.

Kalite Standartları:

Sayfa yapısı mantıksal olarak açık ve anlatım akışı doğal ve akıcı.

Her modül, bilgi karmaşasını önlemek için net bir görsel odak noktasına sahiptir.

Kaydırma etkileşimi, kullanıcıların kendilerini ani veya yorgun hissetmelerine neden olmayacak şekilde orta bir tempoda gerçekleşir.

Duyarlı tasarım, ödün vermeyen bir mobil deneyim sağlamak için özenle düşünülmüştür.

Adım 5: Web sayfası oluşturma talimatını yazın.

Amaç: Görsel stil sistemini ve sayfa yapısını, generateWebpage aracının uygulayabileceği net ve ayrıntılı web sayfası oluşturma talimatlarına dönüştürmek.

aksiyon:

Aşağıdaki bölümleri içeren yapılandırılmış talimatlar yazın:

1. Genel stil açıklaması:

Görsel stili, doğal dil kullanarak (3. Adım stil sistemine dayanarak) ayrıntılı olarak açıklayın.

Örnek: "Doğu estetiğini anımsatan, ölçülü ve zarif bir tarz benimsenmiştir. Arka plan yumuşak bir kırık beyaz (#F9F7F2) kullanırken, ana renkler sıcak bir çay rengi (#8B7355) ve narin bir pembe (#E8D5C4) olmuştur. Başlıkta serif yazı tipi, gövde metninde ise sans-serif yazı tipi kullanılmış olup, bol beyaz boşluk sofistike bir hava yaratmaktadır. Animasyonlar ağırlıklı olarak yumuşak ve zarif bir ritimle kademeli giriş ve paralaks kaydırmadan oluşmaktadır."

2. Sayfa Yapısı Açıklaması:

Sayfa yapısını modül sırasına göre açıklayın.

Örnek: "Sayfa, markanın ana görsel imajının arka planında marka adını ve sloganını gösteren, aşağı kaydırma uyarısı içeren tam ekran bir Kahraman Bölümü ile başlar. Bunu, her biri başlık, gövde metni ve bir görsel içeren, sol-sağ sütun düzenini dönüşümlü olarak kullanan dört anlatım bölümü takip eder. Ardından, markanın gelişimini gösteren dikey bir zaman çizelgesi modülü gelir. Son olarak, marka vizyonunu ve bir CTA düğmesini içeren bir bitiş modülü bulunur."

3. Etkileşim Ayrıntıları:

Temel etkileşimli efektleri ve animasyonları açıklayın.

Örnek: "Kaydırma yapıldığında, bölüm içeriği kademeli bir animasyonla görüntü alanına girer. Arka plan resimleri daha yavaş kaydırılır ve paralaks efekti oluşturulur. Zaman çizelgesi düğümleri, ilgili konumlarına kaydırıldığında vurgulanır. Ürün kartları, üzerine gelindiğinde hafifçe büyür ve gölge gösterir."

4. İçerik yer tutucu işaretleyiciler:

Kullanıcı tarafından sağlanan materyallerden hangi içeriğin çıkarılması gerektiğini açıkça belirtin.

Örnek: "Marka adı '{Marka Adı}'nı, slogan '{Marka Sloganı}'nı, anlatı içeriği '{Marka Hikayesi Metni}'nden, zaman çizelgesi olayları '{Dönüm Noktası Listesi}'nden ve ürün görselleri '{Ürün Görsel Kaynakları}'ndan alınmıştır."

5. Teknik Uygulama İpuçları (İsteğe bağlı):

Özel teknik gereksinimler varsa, lütfen kısaca açıklayınız.

Örnek: "Kaydırma hareketiyle tetiklenen animasyonları uygulamak için Intersection Observer API'sini kullanın. Duyarlı düzenler uygulamak için CSS Grid'i kullanın."

Kalite Standartları:

Talimatlar açık ve ayrıntılı olduğundan, yapay zeka tasarım amacını doğru bir şekilde anlayabiliyor.

Görsel stil ayrıntılı olarak açıklanmıştır (renklerin renk değerleri, yazı tiplerinin türleri ve animasyonların süreleri vardır).

Net bir şekilde tanımlanmış içerik yer tutucuları sayesinde yapay zeka, verileri nereden alacağını bilir.

Genel eğitim süresi orta düzeydedir (çok kısa olursa yeterli bilgi verilmez, çok uzun olursa yanlış anlamalara yol açabilir).

Etkileşimli bir marka sayfası (HTML web sayfası) oluşturun:

Eksiksiz bir marka hikayesi anlatımı içerir.

Kaydırma etkileşimi ve animasyon efektleri içerir.

Hem masaüstü hem de mobil cihazlara uyarlanabilir, duyarlı tasarım.

Görsel tarz, "üst düzey, zarif ve minimalist" standartlarına uygundur.

İçerik yapısı:

Kahraman Bölümü (Açılış Modülü)

4-8 anlatı bölümü

Zaman çizelgesi/kilometre taşı modülü (varsa)

Ürün teşhir modülü (varsa)

Kurucu/Ekip Hikayesi Modülü (varsa)

Kapanış Bölümü

Kalite Standartları:

Görsel kalite: Uyumlu ve sofistike renk şeması, uygun yazı tipi seçimi, net ve zarif düzen ve bol beyaz alan.

Etkileşimli deneyim: Akıcı kaydırma, doğal ve ölçülü animasyonlar, zamanında yanıt ve iyi bir mobil deneyim.

İçerik bütünlüğü: Marka öyküsü temel bilgileri içerir, net bir anlatım mantığına sahiptir ve metin ile görselleri doğru bir şekilde eşleştirir.

Estetik standartlar: Genel estetik, ucuzluktan veya aşırı süslemelerden kaçınarak, incelik, zarafet ve sadelik duygusunu yansıtmalıdır.

Sektör kıyaslaması: Görsel kalite, referans markalarla aynı seviyeye ulaşıyor.

Stil ve sunum

Temel estetik prensipleri:

Sofistike bir hava: ölçülü renk şemaları, zarif tipografi, bol beyaz alan ve incelikli animasyon efektleriyle yaratılmış.

Zarafet: Akıcı bir ritim, doğal geçişler ve ani veya sert görsel unsurlardan kaçınma.

Sadelik: Gereksiz süslemeleri ortadan kaldırarak, her bir unsurun net bir işlevi ve anlamı vardır.

Görsel referans yönü:

Lüks markaların (Apple, Aesop, Muji gibi) resmi web siteleri

Tasarım dergisi web siteleri (örneğin It's Nice That, Awwwards ödüllü çalışmalar)

Sanat sergisi web siteleri (beyaz alan ve görsel ritme önem veren)

2. adımda incelenen kıyaslama marka web siteleri

Kaçınılması gereken stiller:

Aşırı süslü ve dağınık "Taobao tarzı"

Aşırı gösterişli, yüksek etkili "gösterişli stil"

Göze batan renk şeması ve kaotik düzen, "ucuz" bir estetik yaratıyor.

Aşırı muhafazakar ve ilhamdan yoksun "şablon stili"