Renk HTML Şablonları

Net Bir İçerik Sıralaması Üzerine İnşa Edilmiş Renkli HTML Şablonları

Masaüstü demosunda, üç farklı arka plan üzerindeki üç hizmet bloğu oldukça bilinçli görünür. Renkler yan yana durur; kontrast kompozisyonun bir parçasıdır ve tüm satır bir bakışta okunur. Aynı şablonu bir telefonda açtığınızda ise bu bloklar parlak dikdörtgenlerin dikey bir dizilimine dönüşür. İçeriğin ekrana gelme sırası dışında hiçbir şey değişmemiştir ve sayfayı ayakta tutan şey artık tam olarak bu sıralamadır.

Sütunlar Dikey Yığınlara Dönüştüğünde

Yan yana dururken renkli bir arka plan, üç ögenin birbiriyle ilişkili olduğunu sessizce hissettirir. Ancak üst üste yığıldıklarında bu mesaj kaybolur; çünkü okuyucu onları artık aynı anda göremez. Renkli bir HTML şablonu ya bu gruplamayı koruyacak sağlam bir temel yapıya sahiptir ya da tüm yükü renk paleti tek başına üstlenir.

Bir dosyada karar kılmadan önce şu üç kontrolü yapmakta fayda vardır:

1. Arka planların tamamen yok olduğunu hayal edin ve bölümlerin hâlâ birbirinden ayrılıp ayrılmadığına bakın. Yalnızca renkle var oluyorlarsa, aslında hiç var olmamışlar demektir.
2. Telefon görünümünü yukarıdan aşağıya doğru okuyun ve masaüstü kompozisyonunu tamamen unutarak dizilimin anlatmak istediğiniz hikayeyi aktardığından emin olun.
3. Yalnızca renkle ayırt edilen unsurlara dikkat edin: kategoriler, uygunluk durumu veya öne çıkan ögeler. Ziyaretçiler bunları metinlerden de rahatlıkla anlayabilmelidir.

Yeniden Sıralamaya Dayanıklı İşaretleme

Başlıklar, bir düzen değişikliği sırasında gruplamayı korumayı sağlar. Her hizmet veya vaka çalışması kendi başlığıyla açıldığında ve karşılaştırılabilir ögeler aynı yapıyı tekrarladığında gruplama bozulmaz. Düz bir arka planda bile okuyucu bir ögenin nerede bittiğini ve diğerinin nerede başladığını anlar. Nicepage Grid Element; metinleri, görselleri ve düğmeleri daha küçük ekranlarda yeniden düzenlenen hücrelere yerleştirir; Responsive Modes ise telefon görünümünü masaüstünden bağımsız olarak kontrol etmenize olanak tanır.

Bu daha dar görünümde üç noktaya dikkat etmek gerekir:

1. Hero bölümünün çok altında kalanlar da dahil olmak üzere, her renkli blok yine bir başlıkla başlar.
2. Benzer kartlar, birbirinden tamamen farklı üç özel varyanta dönüşmek yerine aynı iç yapıyı korur.
3. Metin, dikey bloklar oluştuktan sonra denk geldiği her vurgu rengi üzerinde rahatça okunabilirliğini sürdürür.

Gri Tonlamalı Bir Düşünce Deneyi

Renkli bir HTML şablonunu değerlendirmenin en hızlı yolu şudur: Sayfadaki her arka planın beyaz, her vurgu renginin de gri olduğunu hayal edin. Hangi bölümlerin var olduğunu, hangi ögelerin birbiriyle bağlantılı olduğunu ve neyin ilk sırada geldiğini hâlâ anlayabiliyor musunuz? Yanıtınız evet ise palet, projenin ihtiyaç duyduğu kadar iddialı olabilir. Sayfa dağılıyorsa, renk aslında kimsenin inşa etmediği bir yapıyı ayakta tutmaya çalışıyor demektir.