Bir hazır temayı ilk açtığınızda her şey yerli yerindedir. Başlıklar ideal uzunluktadır, görseller aynı renk dünyasına sahiptir, kartların yükseklikleri eşittir ve sayfada rahatsız eden tek bir boşluk bile yoktur.

Sonra gerçek içerikleri eklemeye başlarsınız.

Üç kelimelik İngilizce başlığın yerine daha uzun bir Türkçe başlık gelir. Aynı ölçülerde hazırlanmış örnek görsellerin yerini farklı oranlarda müşteri fotoğrafları alır. İki satır için tasarlanmış açıklama beş satıra çıkar. Menüye birkaç yeni bağlantı eklenir. Site ikinci ve üçüncü dile açılır.

Bir süre sonra satın aldığınız temayla ortaya çıkan site arasında ciddi bir görüntü farkı oluşur.

İlk tepki genellikle temanın bozulduğu yönündedir. Aslında tema bozulmamıştır. Tema yalnızca gerçek içerikle sınanmaya başlamıştır.

Demo Sayfası Kontrollü Bir Ortamdır

Hazır temaların tanıtım sayfaları rastgele içeriklerle hazırlanmaz. Tasarımın güçlü görünmesi için başlıklar, metinler ve görseller özel olarak seçilir.

Hero alanında kullanılan başlık genellikle kısa ve vurucudur. Açıklama, ayrılan alanı aşmayacak uzunluktadır. Buton metni bir veya iki kelimeden oluşur. Arka plan görselinin odak noktası, metnin bulunduğu alanı kapatmayacak biçimde konumlandırılmıştır.

Kartlarda da benzer bir kontrol vardır. Bütün görseller aynı oranda hazırlanır. Başlıklar birbirine yakın uzunluktadır. Açıklamalar aynı satır sayısında biter. Bir kartın diğerinden daha uzun görünmesine neden olacak hiçbir içerik kullanılmaz.

Bu bir hata veya kandırmaca değildir. Temayı hazırlayan tasarımcı doğal olarak çalışmasını en iyi hâliyle göstermek ister. Bir mobilyanın katalog çekiminde nasıl ışık, açı ve çevresindeki objeler dikkatle seçiliyorsa tema tanıtımlarında da içerik aynı amaçla kullanılır.

Problem, demo sayfasındaki görünümün her içerikle kendiliğinden korunacağının düşünülmesiyle başlar.

Tema satın alındığında yalnızca tasarım gelmez. O tasarımı iyi gösteren içerik düzeni de birlikte gelir. Fakat kendi içeriklerimizi eklediğimiz anda bu düzeni değiştirmeye başlarız.

Gerçek İçerik Tasarımın Bir Parçasıdır

İçerik genellikle tasarım bittikten sonra doldurulacak bir alan gibi görülüyor. Önce sayfa hazırlanıyor, kartlar yerleştiriliyor, görseller seçiliyor ve en son metinler ekleniyor.

Ben bu yaklaşımın doğru olduğunu düşünmüyorum.

Metin, tasarımın içine sonradan eklenen yabancı bir parça değildir. Tasarımın doğrudan kendisidir. Başlığın uzunluğu, açıklamanın kaç satır olduğu, butonda kullanılan ifade ve görselin konusu bütün düzeni etkiler.

Örneğin üç karttan oluşan bir hizmet alanı düşünelim. Demo içeriklerinde başlıklar şöyledir:

  • Web Design

  • Development

  • SEO

Bu başlıkların tamamı tek satırda kalır. Kartlar düzenli ve dengeli görünür.

Aynı alanı Türkçeleştirdiğimizde başlıklar şu hâle gelebilir:

  • Kurumsal Web Tasarım Hizmetleri

  • Özel Yazılım Geliştirme Çözümleri

  • Arama Motoru Optimizasyonu

Artık bir başlık iki, diğeri üç satıra çıkabilir. Başlıkların altında aynı uzunlukta açıklamalar kullanılmadığında butonlar farklı konumlara iner. Kartlar teknik olarak aynı yüksekliğe sahip olsa bile içerikler birbirinden kopuk görünür.

Burada sorun Türkçe metinlerin uzun olması değildir. Sorun, tasarımın yalnızca kısa örnek içeriklere göre düşünülmüş olmasıdır.

Başlığı küçülterek veya metni anlamsız biçimde kısaltarak geçici bir çözüm üretilebilir. Ancak asıl yapılması gereken, kart yapısını gerçek içeriğe göre yeniden düzenlemektir. Başlık alanına yeterli yükseklik verilebilir, açıklamalar belirli bir uzunlukta tutulabilir veya butonlar kartın altına sabitlenebilir.

Tasarım içeriği taşımalıdır. İçerik sürekli tasarıma uymaya zorlanıyorsa yapı doğru kurulmamış demektir.

Türkçe Metinler ve Çok Dilli Siteler Dengeyi Değiştirir

Hazır tema seçiminde en sık gözden kaçan konulardan biri kullanılacak dildir.

İngilizce, çoğu arayüzde kısa ifadelerle ilerlemeye elverişlidir. “Learn More”, “Get Started”, “Our Services” veya “View Details” gibi ifadeler küçük alanlara kolayca sığar.

Türkçede aynı anlamı vermek için daha uzun ifadelere ihtiyaç duyabiliriz:

  • Daha Fazla Bilgi Edinin

  • Hemen Başlayın

  • Hizmetlerimizi İnceleyin

  • Ayrıntıları Görüntüleyin

Bu fark yalnızca buton genişliğini etkilemez. Menü yapısını, kart başlıklarını, filtre alanlarını, form etiketlerini ve mobil görünümü de değiştirir.

Masaüstünde sorunsuz görünen bir menü, Türkçe bağlantılar eklendiğinde iki satıra düşebilir. Menü elemanları logoya yaklaşabilir veya sağ taraftaki dil seçiciyle çakışabilir. Aynı menü Almancaya çevrildiğinde daha da genişleyebilir.

Çok dilli bir projede yalnızca varsayılan dili kontrol etmek yeterli değildir. En uzun başlık, en uzun menü bağlantısı ve en uzun buton metni hangi dildeyse tasarım o içerikle de denenmelidir.

Arapça gibi sağdan sola yazılan dillerde konu yalnızca metin uzunluğu da değildir. Hizalama, ikonların yönü, boşluklar ve içerik sırası yeniden değerlendirilmelidir. Rusça metinlerde kelimelerin uzunluğu kart düzenini etkileyebilir. Almanca, kısa bir İngilizce ifadenin oldukça uzun bir karşılığını üretebilir.

Bu yüzden çok dilli bir sitenin tasarımını tek bir dilde tamamlayıp diğer dilleri sonradan eklemek çoğu zaman yeni düzenlemeler gerektirir. En başta bütün dillerin gerçek içerikleri hazır olmayabilir. Yine de tasarımın farklı uzunluklara dayanabilecek esneklikte kurulması gerekir.

Görseller Değiştiğinde Tasarımın Karakteri de Değişir

Hazır temanın iyi görünmesinde görsellerin payı tahmin edilenden daha büyüktür.

Tema tanıtımında kullanılan fotoğraflar genellikle aynı fotoğrafçıdan, aynı koleksiyondan veya benzer renk düzenine sahip kaynaklardan seçilir. Işık yönleri, kontrast seviyeleri ve renk sıcaklıkları birbirine yakındır.

Bütün görseller aynı tasarım dilinin parçası gibi görünür.

Gerçek projede ise içerikler farklı kaynaklardan gelir. Bir fotoğraf profesyonel çekimdir, diğeri telefonla çekilmiştir. Bazı görseller yatay, bazıları dikeydir. Birinin arka planı koyu, diğerinin açık renklidir. Çözünürlükler ve odak noktaları birbirini tutmaz.

Görseller teknik olarak doğru alanlara yerleşir ama site artık demo sayfasındaki bütünlüğe sahip değildir.

object-fit: cover kullanmak görselleri aynı ölçüye getirebilir. Fakat bu özellik her görselin iyi kırpılacağını garanti etmez. Bir insanın yüzü, aracın önemli bir bölümü veya ürünün tamamlanması gereken kenarı kırpma alanının dışında kalabilir.

Görsel oranları baştan belirlenmeli ve içerikler mümkün olduğunca bu oranlara göre hazırlanmalıdır. Sadece “yüksek çözünürlüklü görsel yükleyin” demek yeterli değildir. Hangi ölçünün, hangi oranın ve hangi kadrajın gerekli olduğu açık olmalıdır.

İçerik yönetim panelinde de bu konuda önlem alınabilir. Yüklenen görseller belirlenen oranlarda yeniden boyutlandırılabilir, WebP formatına dönüştürülebilir ve farklı ekranlar için ayrı sürümler üretilebilir.

Ancak otomatik kırpma her zaman doğru kadrajı seçemez. Bu nedenle önemli projelerde kapak görseli ile galeri görselini ayırmak veya kullanıcının odak noktasını belirleyebileceği bir yapı kurmak daha sağlıklı olabilir.

Görsel, kartın içini dolduran dekoratif bir alan değildir. Çoğu tasarımda kartın karakterini belirleyen ana unsurdur.

Kartlar Neden Bir Süre Sonra Dağınık Görünmeye Başlar?

Hazır temalarda kartların tamamı örnek içeriklerle kusursuz biçimde hizalanır. Gerçek veriler geldikçe bu düzen bozulabilir.

Bir blog kartında kategori, başlık, kısa açıklama, tarih, yazar ve okuma süresi bulunabilir. Başlık uzunluğu değiştiğinde alttaki bütün bilgiler aşağı doğru hareket eder. Üç kart yan yana geldiğinde butonların veya tarih alanlarının farklı yüksekliklerde görünmesi mümkündür.

Bu sorunu çözmek için her karta gelişigüzel sabit yükseklik vermek doğru olmayabilir. Metin uzadığında taşma yaşanabilir, mobil görünümde gereksiz boşluk oluşabilir.

Kartın iç yapısını doğru kurmak gerekir.

Başlıklar belirli satır sayısıyla sınırlandırılabilir. Açıklamalar kart tasarımının taşıyabileceği uzunlukta hazırlanabilir. Alt bilgi alanı margin-top: auto kullanılarak kartın altına hizalanabilir. Kartların bulunduğu grid yapısı eşit yüksekliği destekleyecek biçimde düzenlenebilir.

Fakat burada önemli bir ayrım var: Teknik yöntemlerle her şeyi eşitlemek, içeriğin iyi görüneceği anlamına gelmez.

Beş satırlık bir başlığı CSS ile iki satırda kesmek kartı düzenleyebilir ama kullanıcı başlığın önemli bölümünü göremez. Her kartı aynı yüksekliğe zorlamak görsel düzeni koruyabilir ama kısa içeriklerin altında anlamsız boşluklar bırakabilir.

Bu nedenle çözüm yalnızca CSS tarafında aranmaz. İçerik kuralları da belirlenmelidir.

Yönetim panelinde başlık ve açıklama alanları için önerilen karakter uzunlukları gösterilebilir. Kullanıcı, kartta kullanılacak kısa açıklamayla sayfa içeriğinin giriş paragrafını ayrı ayrı yazabilir. Böylece sistem içeriği zorla kesmek yerine kart için hazırlanmış doğru metni kullanır.

İyi bir tasarım ile iyi bir içerik yönetimi birbirinden ayrı değildir.

Müşteri İçerik Girmeye Başladığında Asıl Test Başlar

Bir projeyi teslim etmeden önce bütün alanları bizim doldurmamız kolaydır. Hangi başlığın ne kadar uzun olacağını, hangi görselin daha iyi duracağını ve açıklamanın nerede bitmesi gerektiğini biliriz.

Site yönetim paneli üzerinden kullanılmaya başladığında kontrol artık tamamen bizde değildir.

Kullanıcı kısa açıklama alanına uzun bir makale girebilir. Yatay görsel istenen yere dikey bir fotoğraf yükleyebilir. Başlığın tamamını büyük harfle yazabilir. Buton metnine uzun bir cümle ekleyebilir veya üç kart için farklı uzunluklarda içerik oluşturabilir.

Bunları yalnızca kullanıcı hatası olarak görmek kolay olurdu. Fakat sistem yanlış içeriğe karşı hiçbir yönlendirme yapmıyorsa sorumluluğun bir bölümü de tasarıma ve yönetim paneline aittir.

İçerik giriş ekranında şu tür yönlendirmeler faydalı olur:

  • Görsel için önerilen ölçü ve oran açıkça gösterilmelidir.

  • Kart açıklaması ile ayrıntılı içerik birbirinden ayrılmalıdır.

  • Gerekli alanlara makul karakter sınırları eklenmelidir.

  • Başlık alanında önerilen uzunluk belirtilmelidir.

  • Yüklenen görselin ön izlemesi gösterilmelidir.

  • İçeriğin farklı dillerde eksik olup olmadığı anlaşılmalıdır.

  • Hangi alanın sitenin neresinde kullanıldığı açıklanmalıdır.

Bu liste kullanıcıyı kısıtlamak için değil, tasarımı korumak için gereklidir.

Yönetim panelindeki alanın adı yalnızca “Açıklama” olduğunda kullanıcı bunun kartta mı, sayfa içinde mi yoksa meta description olarak mı kullanılacağını bilemez. Sonra aynı metin üç farklı yerde gösterilir ve her yerde ayrı bir sorun çıkarır.

İyi hazırlanmış bir yönetim paneli yalnızca veri kaydetmez. Kullanıcıya doğru içeriği girmesi için rehberlik eder.

Hazır Tema Kullanmak Yanlış Değil

Hazır temalara karşı değilim. Doğru seçildiğinde ciddi zaman kazandırabilir ve projenin görsel yönünü belirlemek için iyi bir başlangıç oluşturabilir.

Sorun, hazır temanın bitmiş bir web sitesi olarak görülmesidir.

Tema bir başlangıç noktasıdır. Gerçek marka renklerine, içerik yapısına, kullanılacak dillere, görsel kaynaklarına ve projenin teknik ihtiyaçlarına göre düzenlenmesi gerekir.

Bir temayı seçerken yalnızca ana sayfanın ne kadar etkileyici göründüğüne bakmamak gerekir. İç sayfalar, blog kartları, form alanları, mobil menü, arama sonuçları, boş durumlar ve uzun içeriklerin nasıl davrandığı da incelenmelidir.

Benzer şekilde projede ihtiyaç duyulmayan bütün bileşenleri kullanmak zorunda değiliz. Tema içinde bulunduğu için her animasyonu, sayacı, slider’ı veya dekoratif alanı siteye eklemek tasarımı güçlendirmez.

Aksine, hazır temayı projeye uyarlamanın önemli bir kısmı kullanılmayacak alanları çıkarmaktır.

Markanın gerçek ihtiyacı üç güçlü bölümse sırf demo sayfasında sekiz bölüm var diye hepsini kullanmak gerekmez. Daha fazla bölüm her zaman daha dolu veya daha profesyonel bir site anlamına gelmez. Bazen sadece ana mesajın kaybolmasına neden olur.

Tema Bozulmadı, Gerçek İçerik Ortaya Çıktı

Hazır temanın demo sayfasıyla gerçek proje arasında fark oluşması normaldir. Çünkü demo, tasarımın en kontrollü hâlidir. Gerçek proje ise değişken başlıklarla, farklı görsellerle, birden fazla dille ve yönetim panelinden girilen içeriklerle yaşamak zorundadır.

Bir tasarımın gerçek kalitesi de tam olarak burada anlaşılır.

Kısa örnek metinlerle düzgün görünen bir kart hazırlamak zor değildir. Asıl mesele, başlık uzadığında, görsel değiştiğinde veya yeni bir dil eklendiğinde yapının hâlâ düzenli kalabilmesidir.

Bu nedenle tema seçimi yapıldıktan sonra asıl çalışma bitmiş olmaz. Gerçek içerikler eklenmeli, farklı senaryolar denenmeli ve tasarım projeye göre yeniden ele alınmalıdır.

Bazen birkaç CSS düzenlemesi yeterlidir. Bazen kart yapısının yeniden kurulması gerekir. Bazı durumlarda ise demo sayfasında güzel görünen bir bölümün projeye hiç uygun olmadığı kabul edilmelidir.

Hazır tema bize bir yön verir. Sonucun gerçekten iyi görünmesini sağlayan şey ise temanın kendi içeriğimize, kullanıcılarımıza ve projenin gerçek koşullarına ne kadar doğru uyarlandığıdır.