Ana sayfadan önce ön sayfa vardı. Gutenberg İlkesinden ızgara sistemlerine ve üst kısımlara kadar, gazeteler bize web tasarımının temelleri hakkında çok şey öğretir.
Haber tasarımının temel ilkelerini araştırdığınızda, web ile örtüşmeler sık görülür ve çoğu zaman ayırt edilemez. Web tasarımıyla ilgili en iyi uygulamaların çoğu, doğrudan haber tasarımına kadar izlenebilir. Söz konusu olduğunda, web siteleri kullanıcıların etkileşim kurması ve geri dönmesi için yapılır. Gazeteler bu oyunu yüzyıllardır oynuyorlar ve kazanıyorlar.
Web tasarımına geçici bir ilgi duyan herkes, haber tasarımının nasıl çalıştığını ve neden işe yaradığını bilmekten faydalanacaktır. Bu makale, gazete tasarımının birkaç ilkesini inceleyecek ve bunların çevrimiçi en iyi uygulamalarla bağlantısını gösterecektir. Bu bağlantının özünde, basitliği açısından çocuksu bir ilke yatıyor, hem bir gazete hem de web tasarımcıları hatırlamakta fayda var.
Ana Sayfayı Tut
Gazeteler 17. yüzyıldan beri ortalıkta. Kuralları için çok çalıştılar ve içerikleri her gün değiştiği için kuralların soyut olması gerekiyor. Herhangi bir gazetede gördüklerimizin yüzde doksan beşi ertesi gün orada olmayacak. Gazetelerin içeriğini şekle sokmak için esas olan, görmeyen şeydir.
Bu çerçeve de bakacağımız şey; gazeteleri bir arada tutan bazı görünmez kurallar. Esas olarak biçimle ve okuyucuların bilgiyi nasıl işlediğiyle ilgilenirler. Web tasarımıyla olan paralellikler ve umarım dersler de yakında netleşecek. Bariz bir tane ile başlayalım - ekranın üst kısmı.
EKRANIN ÜST KISMI
Web üzerinde çalıştıysanız, muhtemelen bir web sayfasına girdiğinizde karşılaştığınız içerik anlamına gelen 'ekranın üst kısmı' ifadesini duymuşsunuzdur. Bir gazete terimidir ve yüzyıllar öncesine dayanır. Gazeteler boyutları nedeniyle genellikle ikiye katlanırlar, bu nedenle katlamanın üst kısmı, kelimenin tam anlamıyla ikiye katlandıkları yerde görünen içerik anlamına gelir. Potansiyel okuyucuların gördüğü ilk şey budur. Genellikle bir ve, bir gösterim yapmak onlar sırf insanların bir kopyasını satın almak için tek şanstır. Gazete ön sayfası için almaya değmiyorsa, toplamaya değeceğini düşünmek için ne sebep var?
Ekranın üst kısmındaki boşluk, makalenin tamamındaki en önemli bilgi olan ana hikayenin alanıdır. Okuyucuyu bağlamalı. Bu genellikle büyük başlıklar, önemli bilgiler ve çarpıcı görüntüler anlamına gelir. Bununla birlikte, katı bir format yok. Gerçeği çarpıtmadan insanların dikkatini çeken şey bir kazanan üzerindedir.
Sayfanın yukarısında bir gazetenin 'pub testi' için ilk ve en önemli cevabı var - eğer birisine içkideki hikayenin temelini anlatıyor olsaydınız ne yapardınız. Dün arkadaşlarınıza erkeklerin ayda yürüdüğünü söyleme şansınız olsaydı, muhtemelen dahil olan ayakkabı markasıyla açmazdınız. Hızla koşarsınız ve "Erkekler ayda yürüdü!" Diye bağırırdınız. Bu ekranın üst kısmı. Gazetelerin günün en önemli hikayesini (veya hikayelerini) kilit noktalara yoğunlaştırdığı yerdir.
Aynısı web siteleri için de geçerlidir. Web tasarımında 'ekranın üst kısmı' ( kaydırmadan önce çevrimiçi olarak gördüğünüz ilk şey anlamına gelir) web sitesinin pub testine verdiği yanıttır. İnsanların bilmesi gereken en önemli şey, bu özellikle ana sayfalarla ilgili olsa da, her yerde geçerlidir.
Apple'ın şu anda bilmenizi istediği üç şey.
Geçen yıl 25 milyon tarayıcı üzerinde yapılan bir araştırmaya göre , 'ekranın üst kısmı' rahatlıkla bir web sayfasının en çok görüntülenen kısmı ve katılımın hemen altında zirve yaptığı bölüm. Haberden e-ticarete ve sosyal medyaya kadar aynı ilke geçerlidir.
GUTENBERG İLKESİ
Demek birinin dikkatini çektiniz. Tebrikler. Gutenberg İlkesi veya Z-pattern hakkında bilgi sahibi olmanız gerekecek. 'Gazete tasarımının babası' tarafından öne çıkan Edmund C. Arnold (daha sonra onun hakkında daha fazla bilgi edineceksiniz), Gutenberg İlkesi, insanların ister kağıt ister piksel olsun, bir içerik sayfasıyla nasıl etkileşime girdiklerini düşünürken izlenecek iyi bir kuraldır.
Gutenberg İlkesi, homojen içerikle karşılaştığımızda, sol üst köşeden başlayıp sağ alt köşede bitirdiğimizi, ilerledikçe sağdan sola kaydırarak bitirdiğimizi belirtir. Bu, yerçekimi okumak denen bir fikirden kaynaklanıyor. Batı dünyasında biz hayatımızı soldan sağa okuyarak, bir sonraki satırın başına geçmek için aşağı ve sola kaydırarak geçiriyoruz. Gazete tasarımı bu akışı engelleme eğilimindedir.
 |
| Gutenberg şeması, tufanbayram.com tarafında hazırlanılmıştır. |
Aynı akış web tasarımı için de geçerlidir. Janie Kliever'nin Next Level Design'in kompozisyon akışı ve ritmi hakkındaki makalesi bu prensibi çevrimiçi bir bağlamda araştırıyor ve kesinlikle okunması gerek bir makale, ancak bunun basılı uygulamasına bakmanın çok büyük bir değeri olduğunu da eklemek isterim. Sonuçta bu, dünya çapında ağ ortaya çıkmadan önce onlarca yıldır uygulanan bir ilkedir.
Şimdi açık olmak gerekirse, yerçekimini okumak, diyelim ki yerçekimi kadar bağlayıcı değildir. Aranızdaki kartal, bunun çoğunlukla 'homojen' içerik için geçerli olduğu niteleyiciyi fark etmiş olabilir. Dahası, insan doğasında doğuştan gelen bir şeye dayanmıyor - dil tarafından yönlendiriliyor. Sağdan sola okunan dillerde (örneğin Arapça) aynı ilke geçerlidir, ancak ters çevrilmiştir.
Bu baskı gününde daha az önemliydi. Bildiriler genellikle bir coğrafi bölgeyle sınırlıydı ve o bölgenin hedef kitlesinin birincil dilini yansıtabilirdi. Çevrimiçi dünyada herkes, herhangi bir yerden web sitenizi ziyaret edebilir, bu nedenle yalnızca Gutenberg İlkesini anlamak değil, okundukları dile bağlı olarak şekil değiştiren web siteleri tasarlamak da önemlidir.
TÜRKÇE - ARAPÇA
Gutenberg İlkesi, insanların içerikle etkileşim kurmasının tek yolu değildir. Göz izleme çalışmaları, F-şekilli kalıpların çevrimiçi ortamda da yaygın olduğunu göstermiştir; örneğin, sayfa okuyucuları aşağıya indikçe daha fazla yazıyı "atlama" ihitmali yüksektir tıpkı bu makalede olduğu gibi.
Bu kalıpların hepsi bilmek faydalıdır. Onlar kural değil, sadece trendler. Güçlü haber tasarımı, ne olursa olsun Z-pattern körü körüne bağlı kalmaz; onu bir temel olarak kullanır. Aynısı web tasarımı için de geçerlidir. Şüpheniz varsa, hatırlayın ama ona tapmayın. İnsan gözünün derinlemesine bir okuma yerçekimi vardır, ancak büyük tasarım takip etmekten çok yol açar.
Web'in uyarlanabilirliği, içerik sunumu için şaşırtıcı yeni olanaklar sağlar. Gutenberg İlkesinin dersleri, oynanabilecek ve oynanması gereken başlangıç noktalarıdır. En iyi kural çiğneyenler genellikle kuralların ne olduğunu tam olarak bilirler.
Gutenberg İlkesi hakkında daha fazla bilgi için (Gutenberg İlkesi hakkında Türkçe bir makale ve bilgi bulunmamaktadır. 22.09.2020) aşağıdaki bağlantıları izleyin:
İSİM PLAKALARI
Her gazetenin bir isim levhası vardır. Baskıdan sürüme değişmeyeceğini garanti edebileceğiniz neredeyse tek şey bu. Ön sayfanın üst kısmındaki (veya çok nadiren yan taraftaki) yayının adı ve logosundan oluşur.
Bunların çoğu kendi başlarına ikoniktir. The Washington Post ve The Sun gibi yayınların isim plakaları halkın bilincine işleniyor. İsim levhaları, 'Biz o diğer gazete değiliz. Biz bu gazeteyiz. ' Kim olduğunuzu ve neyle ilgili olduğunuzu iletir.
Aynı zamanda bir tür dizin görevi görür. Gazetelerin isim plakalarında genellikle teaser'lar bulunur ve okuyucuları ön sayfada bir yeri tam olarak garanti etmeyen, ancak yine de bilmeye değer hikayelere yönlendirir. Kat üstü oyununun kilit oyuncularından biridir. Etrafta dolanmak. Okumaya devam et. Burada sizin için bir şey var. Gutenberg İlkesini akılda tutarak, isim levhası muhtemelen okuyucuların göreceği ilk şeydir.
Neredeyse her web sitesinde bir isim levhası vardır, sadece web sitelerinde buna başlık dediğimiz. Tufan Bayram'dan bir tane, Amazon'da bir tane, Facebook'ta bir tane var. Bir web sitesinin olmaması ve her sayfada görünmemesi tuhaftır . Web'de her sayfada bununla ilgili bir ön sayfa olmalıdır. Pek çok kullanıcı bir siteye kök etki alanı aracılığıyla ulaşır, ancak çoğu bunu yapmaz.
Bu, çevrimiçi isim plakalarının basılı büyüklerinden daha yoğun olma eğiliminde olmasının bir nedenidir. Daha fazlasını yapabiliyorlar ki, onlardan daha fazlası isteniyor. Ancak haberlerde ve web tasarımında isim plakasının temel amacı aynıdır: markayı öne ve merkeze alın ve kullanıcıları ilgilendirecekleri bir şeye yönlendirin.
IZGARA SİSTEMLERİ VE İÇERİK BLOKLARI
Gazeteler saf içeriktir. Baştan sona, iyi organize edilmesi ve iyi sunulması gereken bilgi ve bilgilerle doludurlar. Izgara sistemi, gazete tasarımının temelidir. Su kendini bir kaseye dönüştürürken, haber içeriği de kendisini ızgara sistemlerine göre şekillendirir.
Sütunlar bunun en önemli unsurudur. Bir gazetenin formatına bağlı olarak (tabloid, geniş sayfa vb.), Dört ila on dört sütunu olabilir. Gazete içeriklerinin bir şekilde bu sütunlara şekil vermemesi nadirdir. Metin bir sütunda aşağı doğru akar ve ardından bir sonrakine devam eder. Görüntüler, özellikle dikkat çekiciyse birden çok sütuna yayılabilir.
Gazeteler, yukarıdaki gibi daha önceki çabalarda bulacağınız garip bir şekilde katı bilinç akışının ötesine geçmiştir. Artık genel olarak gazete içeriğinin her bir hikaye kendi kutusunu oluşturacak şekilde bloklar halinde düzenlenmesi gerektiği kabul edilmektedir. Buna modüler düzen denir ve standart olmasının birkaç nedeni vardır.
Birincisi, organize etmek daha kolaydır. Her hikaye temiz, düzenli bir alana sığarsa, göreceli kolaylıkla yeniden düzenlenebilir. Düzinelerce (veya yüzlerce) hikayeyi, sınırlı bir alana sığdırmaya çalışırken, bu bir nimettir.
İkincisi, daha net. İyi bilgi, ancak kötü bir şekilde sunulduğunda hızlı geçmesine sebep olur. Bloklar, her bir bilgi parçasının ayrı ve takip edilmesi kolay olan sayfalar içinde sayfalar oluşturur.
Bu standartlar web tasarımında her zaman bir rol oynamıştır, ancak artık elimizde CSS Izgaramız olduğunu anlamak özellikle yararlıdır . Gazete ızgara sistemleri, içeriği düzgün ve net bir şekilde düzenlemek için rehberlik etmekle kalmaz, aynı zamanda içerik bloklarının birbirleriyle ve reklamlarla nasıl etkileşime girdiğini gösterir. Yanlış hizalama gerçekten çok saçma görünebilir, doğru düzenleme ise okumak ve sitede kalmak için bir zevktir.
Her zamanki gibi farklılıklar var. Örneğin, internette nadiren sıçramalar olur (bir sütunun altına ulaştığınızda ve bir sonrakinin en üstünde okumaya devam ettiğinizde) çünkü web sayfaları sonsuza kadar aşağı inebilir. Bu tür bir düzen genellikle çevrimiçi olarak daha az mantıklıdır çünkü okuyucuların tek bir içerik parçasından geçmek için yukarı ve aşağı kaydırmalarına yol açar ki bu oldukça mantıksızdır. MDN katılımcılarının gösterdiği gibi , atlamalar, listeler ve az miktarda içerik için tam anlamıyla bir şey olabilir, ancak uygulama genellikle baskının fiziksel sınırlamalarının bir ürünüdür. Web tasarımında sıçramaların ana değeri, kopyayı düzenlemek yerine içerik bloklarını yığmak olabilir.
Dahası, hem basılı hem de çevrimiçi ortamda grid sistemini terk etmek kendi başına çarpıcı olabilir. Dada sanatının 20. yüzyılın başlarındaki estetik normlardan geri çekilmesi gibi, acımasız web siteleri de daha fazla.
Hollandalı sanatçı Theo van Doesburg'un Dada baskısı.
Daha önce de belirtildiği gibi, kuralları çiğnemek için önce onları bilmeniz gerekir. Bu ve diğer her şey için, Tim Harrower'ın The Newspaper Designer's Handbook adlı kitabı , başlamak için mükemmel bir yerdir. Daha kapsamlı bir giriş için Carrie Cousins' Baskı Tasarım Izgaralarını Yararlanma de üzerinde Tasarım Shack mükemmel.
Ve web'e geçtiğinizde bunların hepsi ne kadar önemli? Giderek daha fazlası. Izgara, Şekiller, ve flexbox'a gibi CSS özelliklerini daha kolay zamankinden hem takip etmek daha yapar ve ızgara sisteminin kurallarını kırmak. Gazetelerin rutin olarak tel çerçevelerinin görünmez çizgilerinin dışına çıkması gibi, web siteleri de kendi ortamlarının sınırlarını zorlayabilir.
Andy Clarke , Web için Art Direction adlı kitabında , CSS'deki ilerlemelerin grid sistemine nasıl tamamen yeni boyutlar ekleyebileceğini gösteren yazılı medya (ve diğerleri) derslerine dalmaktadır. Clarke'ın da belirttiği gibi :
Yıllardır birbirimize web'in basılmadığını söyledik. Diğer tasarım medyalarında hayranlık duyduğumuz şeyleri çevrimiçi olarak kullanılamayacağını ve bazen de kullanılmaması gerektiğini kendimize söyledik. Artık öyle düşünmemize gerek yok.
Duyun, duyun.
Daha fazla ilham almak için, Jen Simmons'ın 2019 Smashing Conference'ta CSS Grid'de bir baskı düzeni kodlamasını canlı izleyin . Güzel. Ve ızgara sisteminin ve kullanımının daha derinlemesine bir tarihi için, Khoi Vinh ve Mark Boulton'un bu ‘Grids Are Good’ sunumuna göz atın .
CSS Grid, web üzerinde mizanpajları oluşturma şeklimizde devrim yaratıyor. Mavi Butona basarak izleyebilirsiniz.
İleriye Bakın… Ama Önce Geriye Bakın
Yukarıdaki sözleşmeler onlarca yıl - bazı durumlarda yüzyıllar - deneyimle şekillendirildi ve geldikleri yerde çok daha fazlası var. Temelde özetledikleri şey, içeriği ve insanların bu içerikle nasıl etkileşimde bulunabileceklerini anlamaktır.
Gazeteler en iyi haliyle karikatür gibi basit bir ilkeyi takip eder: Bilgiyi olabildiğince açık, çekici ve mümkün olduğunca erişilebilir şekillerde sunun. Bu, herhangi bir web sitesi için değerli bir hedeftir. Ve bunun için benim sözüme güvenmeyin. Bu fikirler, yukarıda bahsedilen modern gazete tasarımının babası Edmund C. Arnold tarafından desteklendi. ' Arnold, kariyeri boyunca The Chicago Tribune, The Boston Globe, The National Observer ve Newsday gibi yüzlerce gazete tasarladı veya yeniden tasarladı .
