İçerik düzeni kılavuzu

Bir içeriği web’e eklemek istediğimizde, bulduğumuz en büyük sorunlardan biri, aldığım tekliflerin web’e başarılı bir şekilde dahil edilmesinin hiçbir zaman çok iyi düşünülmediğidir. Genel olarak sorun, yeterli bir yapıya sahip olmadan, tasarım ve yerleşimin genellikle çok iyi görünmemesi, yetersiz bir sonuç vermesidir.

Bu yüzden, çalışmayı maksimuma çıkarmak için şartlarda nasıl bir içerik düzeninin göz önüne alınması gerektiği ve sonucun optimal olduğu konusunda bazı temel açıklamalar yapacağım.

Bu kılavuzun amacı, programlama veya web geliştirme bilgisine sahip olmayan herhangi birinin bana kaliteli bir düzen verebileceği ve bir sonuca ulaşana kadar birden fazla konuşma yoluyla bu fikri ortaya çıkarmak için çok fazla zaman harcamak zorunda kalmamamıdır.

1. Adım: Şablon

Teklifimizi “çizebileceğimiz” bir şablona sahip olmak için yapacağımız şey bir A4 kağıt almak ve onu boyuna ÜÇ BİR oranında katlamak.

2. Adım: İçerik blokları

Birkaç tür içeriğe sahip olduğumuzu düşünelim: video, resim, metin. Her içerik bir dikdörtgen veya kare bloktur. Bizim seçimimizde kalıpları yukarıdan aşağıya doğru yerleştirmeliyiz. Üç tür içerik göstereceğiz.

Video bloğu

Videonun genellikle bir YouTube videosu olacağını varsayarız, aşağıdaki şekilde şablonda temsil ederiz:

Görüntü bloğu

Anlaşacağımız gibi, görüntünün yatay mı yoksa dikey mi olduğuna bağlıdır.

Metin Bloğu

Görüntü bloğu ile aynı, metnin nasıl olmasını istediğimize bağlı olarak bir blok veya başka bir şey koyacağız. Paralel çizgilerle temsil ediyoruz.

Metin blokları, içerdiği paragraflara sahip metin blokları ve hatta metinsel öğe listeleri

İki örnek vereceğim: Bir yatay görüntünün yanına bir metin bloğu ve bir dikey görüntünün yanına bir diğeri:

Başlık bloğu

Başlıklar ayrı bloklar halinde gider ve genel olarak bütün satırı kaplayan uzun bloklardır.

Düğme blok

İnsanların tıklamaları ve webin başka bir bölümüne götürmeleri için bir düğme koymak istiyorsak ya da sadece bazı bilgilerin (ya da formun) bulunduğu bir pencere belirir.

Diğer bloklar

Fikir benzer. Blokların nasıl çalıştığını anlamış olsaydık, öncekilere benzer şekilde kare veya dikdörtgen şeklindeki başka bir blok tipini açıkça koyabileceğimizi düşünüyorum. Örneğin, içeriğe dahil edilmiş bir form koymak istiyorsak. Bu genellikle en az yaygın olmasına rağmen, yukarıda belirtilen tipte olmayan yeni bloklar kullanmadan önce sormanız daha iyi olur. Bu listeyi güncellemeye çalışacağım, herkesin ilgisini çekebilecek yeni blok fikirler ortaya çıktı.

Son olarak, yukarıda belirtilen tüm blok türlerine sahip bir şablon örneği:

Blokları genişletmek

Daha fazla alana ihtiyaç duyarsak, en alttaki blok tasarımına daha fazla sayfa eklemek zorundayız. Her şeyi doldurmak gerekli değildir, ancak her bloğun ortası arasında yukarıdan aşağıya boş boşluk bırakmamak önemlidir. Bu şekilde sayfayı genişletebiliriz:

3. Adım: İçeriğin oluşturulması

Artık içeriği bloklara ve blok tiplerine göre düzenlediğimize göre, bu bloklara girecek içeriği oluşturmak gerekir. 3 adımı, 2 adımı ile değiştirilebilir. Başka bir deyişle, içeriği önceden oluşturabilir ve sonra dahil etmek istediğimiz içeriğin miktarını bilerek düzen oluşturabiliriz. Bir şekilde veya başka bir şekilde yapmak belirsizdir, ancak içeriğin düzenimize tam olarak uyması gerektiğinin farkında olmalıyız.

Önceki örneği takip edeceğiz. 4 görüntüsünde aşağıdaki blokları görebiliriz:

• 2 Başlık Blokları
• 4 Metin Blokları
• 1 Video Bloğu
• 2 Resim Blokları
• 1 Düğme Bloğu
• Toplam: 10 Blokları

Bu nedenle içeriğimizi, bu bloklara ayrılmadan mükemmel şekilde uyması ve yazı tipi boyutunun hepsinde tamamen aynı olması için ayarlamamız gerekir. Bunun için mümkün buna değer önce içeriği oluştur ve sonra engelle. Zaten kişiye çok bağlı.

4 Adımı: İçeriği bloklarla sığdırma

Kağıda çizilen tasarıma ve yaratılan tüm içerik bloklarına zaten sahip olduğumuzu varsayalım. Şimdi son adım birleştirmek. Bunun için her şeyi birleştirmek için birkaç araç kullanacağız ve web tasarımcısına gönder.

Video Blokları

Videolar iki şekilde iletilebilir:

1. MP4 video formatındaki gibi bir araçla WeTransfer.
2. TERCİH EDİLEN SEÇENEK: Onları YouTube Mart kanalına yüklemek ve YouTube bağlantısını videoya aktarmak.

Düzende yalnızca bir video olması durumunda sorun olmayacak. Ancak birkaç video varsa, onları kağıt üzerinde yaptığımız düzen ile bir şekilde ilişkilendirmek zorunda kalacağız.

Örneğin. Üç video olduğunu düşünün. Düzende ilk videoda bir 1 numarası, ikinci videoda bir 2 numarası ve üçüncü videoda bir 3 numarası çizeceğiz. Ve sonra tüm belgeleri gönderirken şöyle bir şey koyacağız:

• Video 1: "Şiddetsizliğin en önemli cümleleri" başlığıyla şiddet içermeyen ifadeleri ele alan video
• Video 2: "Şiddetsizliğin bayrağı" başlığıyla bayrağın renklerini ele alan video
• Video 3: Arjantin'de yürüyüş yapacak olan grubu "Arjantin'in üs takımı" başlığıyla ele alan video

Bu, hangi videonun her bir bölüme karşılık geldiğini bilmeyi kolaylaştıracaktır.

Görüntü Blokları

Bu durumda, tüm resimler IMGUR platformuna yüklenmelidir: https://imgur.com/upload

Ve sonra bağlantıları bu resimlere iletin. İdeal olan, görüntüleri videolarla aynı, 1, 2, 3 vb. ile işaretlenmiş olarak koymaktır. Örneğin, Güney Afrika'da anında 4 görüntümüz olduğunu düşünelim. Dördü de aynı ada sahiptir: “sudafrica.jpg”. Pekala, art arda isimleri mizanpajda olacakları noktaya koyuyoruz ve karşılık gelen sayıyı kağıda boyuyoruz. Misal:

• Sudafrica-1.jpg
• Sudafrica-2.jpg
• Sudafrica-3.jpg
• Sudafrica-4.jpg

Düğme, Başlık ve Metin Blokları

Son olarak, bu bloklar tercihen bir Word Belgesinde veya bir Google Dokümanda yazılmalıdır.

Biçim çok basittir: Word belgesinde Blok türünü (Başlık, Düğme veya Metin) ve ardından mizanpajda karşılık geleceği sayıyı koyarız.

Örnekler:

• Başlık 1:….
• Başlık 2:…
• Metin 1:…
• Metin 2:…
• Düğme 1:…
• Düğme 2:…

Sonra, tamamen rastgele metinler içeren bir örnek belge koydum, böylece 4 görüntüsünün örneğini izleyerek bunun nasıl yapılandırılacağını görülebilir:

Her bölüme karşılık gelen sayıları koyduktan sonra düzenin nasıl görünmesi gerektiği:

4 adımı: Tümünü gönder

Her şeyi yaptıktan sonra, düzenden sorumlu olan kişiye göndermek zorundasınız.

Sadece alacaktı

1. Düzeni ile kağıt üzerine skeçler
2. İçeriği
   • YouTube veya WeTransfer'a video bağlantıları
   • Resimlerin IMGUR bağlantıları
   • Google Dokümanlar’daki veya Word dosyasındaki dokümanın bağlantısı

Noter Önemli Finali

İdeal olarak nihayet, sayfanın Başlık 1 başlığına eşlik edecek olan çarpıcı bir görüntü dahil edilebilir. Bu yüzden, Title 1 her zaman başlangıçta görünmelidir.

Başlık görüntüsünün boyutu 960 x 540 piksel olmalıdır. Bu görüntü IMGUR tarafından görüntülerin geri kalanı gibi gönderilebilir

Nihai sonuç

Ve nihayet tüm bu bilgilerle, sayfa kurulacaktı. Takip ederek ve bu örnekle bitirmek için, daha önce yükselttiğimiz tüm parametreleri takip eden son sonucu gösteren sayfa şudur:

Son sayfa