Yüksek Dönüşüm Sağlayan Açılış Sayfaları İçin Renk Psikolojisi

Renk, bir ziyaretçinin bir kelimeyi okumadan önce işlediği ilk şeydir. Sektörü, güvenilirliği ve tonu milisaniyeler içinde iletir. Ayrıca metnin okunabilirliğini doğrudan etkiler, bu da insanların sayfada kalmasını etkiler.

Bu yazı, PAGEnza'nın palet sisteminin nasıl çalıştığını ve renk seçimine getirdiğimiz kısıtlamaların neden yapay zekaya sınırsız özgürlük vermekten daha iyi sonuçlar ürettiğini açıklıyor.

Bir yapay zekadan "güzel renkler seçmesini" istemenin sorunu

Yapay zekadan bir web sitesi için renk seçmesini isterseniz, hex kodları alırsınız. Bazen birlikte iyi görünürler. Bazen de görünmezler. Model, renklerin gerçekten işe yarayıp yaramadığını — metnin okunabilir olup olmadığını, paletin sektöre uygun olup olmadığını, kombinasyonun rastgele uyumlu olmak yerine görsel olarak tutarlı olup olmadığını — değerlendirmek için güvenilir bir yola sahip değildir.

Bu sorunu erken testlerde açıkça gördük. Sınırsız renk üretimi, mükemmelden tamamen kullanılamaz duruma kadar değişen paletler üretti. Tutarlılık yoktu.

Çözüm, renk seçimini tamamen yapay zekanın elinden almak ve belirli özellikleri garanti eden algoritmik bir sistem oluşturmaktı.

4 renkli sistem

Her PAGEnza sitesi tam olarak dört adlandırılmış renk kullanır:

ink — birincil metin rengi. Her zaman koyu (arka planlara karşı yüksek parlaklık kontrastı). Başlıklar, gövde metni ve okunması gereken kullanıcı arayüzü öğeleri için kullanılır.

bg1 — birincil arka plan. Genellikle paletin en açık rengi. Ana sayfa arka planı ve açık bölümler için kullanılır.

bg2 — ikincil arka plan. Bölümler arasında görsel çeşitlilik yaratır. bg1'den farklı bir renk sıcaklığına sahip olmalıdır — eğer bg1 sıcak bir krem ise, bg2 serin bir gri veya mavi tonlu beyazdır.

accent — marka rengi. Düğmeler, bağlantılar, vurgular ve dekoratif öğeler için kullanılır. Genellikle paletin en doygun rengidir.

Keyfi hex kodları değil, dört adlandırılmış rol — bu kısıtlama, palet sistemini çalıştıran şeydir. Yapay zeka asla hangi rengin nereye gideceğine karar vermez; yalnızca önceden denetlenmiş bir kümeden hangi paleti kullanacağını seçer.

Paletler nasıl düzenlenir

Her biri bir arketip etrafında inşa edilmiş 20'den fazla palet grubu saklıyoruz:

• Bold: yüksek kontrastlı, doygun vurgular — teknoloji, SaaS, fintech
• Soft: soluk, doygunluğu azaltılmış — sağlıklı yaşam, koçluk, yaratıcı hizmetler
• Luxury: metalik veya mücevher vurgularla neredeyse siyah arka planlar — premium hizmetler, üst düzey perakende
• Earthy: toprak veya adaçayı vurgularla sıcak nötrler — gıda, sürdürülebilirlik, el sanatları
• Dark: koyu mod öncelikli paletler — geliştiriciler, ajanslar, oyun
• Neutral: güvenli, profesyonel — hukuk, finans, sağlık

Her grubun içinde, farklı renk sıcaklıkları, doygunluk seviyeleri ve vurgu tonlarına sahip birden fazla palet bulunur. Sistem, sektöre ve arketipine göre bir grup seçer, ardından grup içinden belirli bir palet seçer.

WCAG kontrastı: tasarımı iyileştiren kısıtlama

WCAG AA, normal metnin arka planına karşı en az 4,5:1 kontrast oranına sahip olmasını gerektirir. Büyük metin 3:1'e ihtiyaç duyar. Etkileşimli öğeler bitişik renklere karşı 3:1'e ihtiyaç duyar.

Sistemimizdeki her palet, dahil edilmeden önce bu oranlara karşı doğrulanır. Özellikle:

• ink, bg1, bg2 ve metin görünen herhangi bir yüzey rengine karşı ≥4,5:1 kontrast sağlamalıdır
• accent, bg1 ve bg2'ye karşı ≥3,0:1 kontrast sağlamalıdır (düğme arka planları olarak kullanım için)
• Doğrulama, yaklaşımlar yerine gerçek parlaklık matematiği — L = 0.2126R + 0.7152G + 0.0722B (gamma düzeltmesinden sonra) kullanır

Sonuç, oluşturulan her sitenin varsayılan olarak okunabilir olmasıdır. Ancak ikincil bir faydası vardır: yüksek kontrastlı tasarımlar daha iyi dönüşüm sağlar. Açıkça görünen bir düğme, arka plana karışan bir düğmeden daha fazla tıklama alır. Erişilebilirlik gereksinimi, dönüşüm gereksinimi haline gelir.

Bölümler arasında renk sıcaklığı kontrastı

Kolayca gözden kaçan bir detay: bg1 ve bg2'nin zıt renk sıcaklıklarına sahip olması gerekir. Her iki arka plan da sıcaksa, dönüşümlü bölümler monoton hissettirir — sayfa, ayrı içerik alanları yerine tek bir sürekli yığın gibi görünür.

Sistemimizdeki kural: eğer bg1 sıcak bir tona (turuncu/sarı yönü veya krem gibi sıcak bir nötr) sahipse, bg2 serin (mavi/gri yönü) olmalıdır. Eğer bg1 serin bir beyaz ise, bg2 sıcak bir kırık beyaz olabilir.

Bu, bölücüler veya gölgeler olmadan bile bölümlerimizin belirgin hissetmesinin nedenidir — sadece arka plan sıcaklığı kayması net bir görsel ayrım yaratır.

Sektöre özel renk mantığı

Bazı renk seçimleri güçlü bir şekilde sektöre kodlanmıştır. Ziyaretçilerin belirli bir kategorideki web sitelerine yıllarca maruz kalmaktan kaynaklanan beklentileri vardır.

Sağlık ve zindelik: maviler ve yeşiller güven ve sakinlik sinyali verir. Bu bağlamda doygun kırmızı ve turuncular endişe verici okunur.

Hukuk ve finans: koyu lacivertler, antrasit, muhafazakar griler. Parlak vurgular kabul edilebilir ancak sınırlı olmalıdır. Eğlenceli paletler güvenilirliği zedeler.

Gıda ve konaklama: sıcak tonlar — toprak rengi, kehribar, krem — iştah çağrışımlarını harekete geçirir. Serin klinik paletler yanlış hissettirir.

Teknoloji ve SaaS: maviler baskın kalır, ancak daha fazla çeşitlilik vardır. Elektrik mavileri, lacivertler ve hatta mor, teknoloji odaklı okunur. Saf siyah arka planlar geliştirici araçları için uygundur.

Lüks ve premium: anahtar kısıtlamadır. Sınırlı renk aralığı, birincil renkler olarak neredeyse siyah veya koyu lacivert, altın veya platin vurgular. Yüksek kontrast, asla doygun değil.

Design Mandate'deki arketip seçimi, sektörü + işletme türünü uygun palet grubuna eşler, böylece bir sağlık koçu, her ikisi de "profesyonel" olarak tanımlansa bile bir hukuk firmasıyla aynı paleti almaz.

Müşterilerin değiştirebilecekleri

Oluşturulduktan sonra, müşteriler sitelerini Gutenberg'de düzenleyebilirler. Editördeki renk seçici yalnızca dört marka rengini gösterir — başka hiçbir şey değil. Bu şu anlama gelir:

• Bölüm arka planlarını bg1, bg2 ve yüzeyler arasında değiştirebilirler
• Düğme ve bağlantı renklerini accent ve ink arasında değiştirebilirler
• Paleti bozan rastgele beşinci bir renk ekleyemezler

Kısıtlama kasıtlıdır. Müşterilerin profesyonelce tasarlanmış bir siteyi bozmasının en yaygın yolu, tam spektrum renk çemberinden renkler seçmektir. Paleti dört adlandırılmış renkle sınırlamak, koda girmeden bunu imkansız hale getirir.