Guide for content layout

When we want to mount a content on the web one of the big problems we find is that the proposals I receive are never very well thought out to be successfully incorporated into the web. Generally the problem is that without an adequate structure the design and layout do not usually look too good, giving an unsatisfactory result.

That is why I am going to give some very basic explanations of how a content layout should be considered in conditions to simplify the work to the maximum and that the result is optimal.

The objective of this guide is that anyone without knowledge of programming or web development can give me a quality layout and that I do not have to spend too much time trying to extract the idea through multiple conversations until reaching a conclusion.

Step 1: The template

In order to have a template where we can “draw” our proposal, what we are going to do is take an A4 sheet of paper and we are going to fold it by ONE THIRD lengthwise.

Step 2: The content blocks

Let's imagine that we have several types of content: video, image, text. Each content is a rectangular or square block. We have to fit the blocks from top to bottom of the template at our choice. We will illustrate three types of content.

Video block

We will assume that the video will generally be a YouTube video, we represent it in the template as follows:

Image block

It depends on whether the image is landscape or portrait, as we will agree.

Text Block

The same as the image block, depending on how we want the text we will put a block or another. We represent it with parallel lines.

Text blocks can be text blocks with included paragraphs and even textual item lists

I am going to put two examples: a block of text next to a landscape image, and another next to a portrait image:

Title block

Titles go in separate blocks are elongated blocks that generally occupy the entire line.

Button block

If we want to put a button for people to click and take them to another part of the web or just a window with some information (or a form) appears

Other blocks

The idea is similar. If we have understood how the blocks work, I think we could clearly put another type of block that, similar to the previous ones, fits square or rectangular. For example, if we wanted to put a form incorporated into the content. Although this is usually the least common, it is better to ask before using new blocks that are not of the types mentioned above. I will try to update this list as new block ideas come out that may be of interest to everyone.

Finally, here is an example of a template with all the types of blocks mentioned above:

Expanding the blocks

If we need more space, we simply have to add more pages to the block design at the bottom. It is not necessary to fill everything down, but it is important not to leave empty gaps from top to bottom between the middle of each block. In this way we can expand the page:

Step 3: Creating the content

Now that we have layout the content by blocks and types of blocks it is necessary to create the content that will go in those blocks. The 3 step is interchangeable with the 2 step. In other words, we can create the content before, and then layout knowing the amount of content we want to incorporate. It is indistinct to do it in one way or another, but we must be aware that the content has to fit within our layout precisely

We will follow the previous example. In the 4 image we can see the following blocks:

• 2 Title Blocks
• 4 Text Blocks
• 1 Video Block
• 2 Image Blocks
• 1 Button Block
• Total: 10 Blocks

Therefore we will have to adjust our content so that it fits perfectly in these blocks without leaving and that the font size is exactly the same in all of them. Therefore is possible worth it create the content first and then block it. It already depends a lot on the person.

Step 4: Fitting the content with the blocks

Let's assume that we already have the design drawn on the paper and all the content blocks created. Now the last step is to combine it. For this we will use several tools to combine everything and send it to the web designer.

Video Blocks

Videos can be passed in two ways:

1. In MP4 video format through a tool like WeTransfer.
2. PREFERRED OPTION: Uploading them to the YouTube March channel and passing on YouTube link to the video.

In case there is only one video in the layout there will be no problem. But if there are several videos we will have to associate them in some way with the layout we have done on paper.

For example. Imagine there are three videos. In the layout we will draw an 1 number in the first video, an 2 number in the second video and an 3 number in the third video. And then when sending all the documentation we will put something like this:

• Video 1: Video that deals with the phrases of nonviolence with the title: "The most important phrases of nonviolence"
• Video 2: Video that deals with the colors of the flag with the title: «The flag of nonviolence»
• Video 3: Video that deals with the group that is going to march in Argentina with the title: “The base team of Argentina”

This will make it easy to know which video corresponds to each section.

Image Blocks

In this case, all images must be uploaded to the IMGUR platform: https://imgur.com/upload

And then pass the links to those images. The ideal is to put the images the same as the videos, marked with a 1, a 2, a 3 and so on. For example, let's imagine we have 4 images on the fly in South Africa. All four have the same name: “sudafrica.jpg”. Well, we put successive names to the point where they will be in the layout and we paint the number on the paper to which they correspond. Example:

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

Button, Title and Text Blocks

Finally, these blocks should be written in a Word Document, or in a Google Docs preferably.

The format is very simple: In the Word document we put the type of Block (Title, Button, or Text) followed by the number to which it will correspond in the layout.

Examples:

• Title 1:….
• Title 2:…
• Text 1:…
• Text 2:…
• Button 1:…
• Button 2:…

Then I put an example document with totally random texts so that it can be seen how this would be structured, following the example of the 4 image:

This is how the layout should look once we have put the numbers that correspond to each section:

4 step: Send all

Once we have done everything, you will simply have to send it to the person who will be in charge of the layout

It would simply take

1. Sketches on paper with the layout
2. The contents
   • Video links to YouTube or WeTransfer
   • IMGUR links of the images
   • The link to the document in Google Docs or the Word file

Notary Important Final

The ideal would finally be to include an outstanding image that is the one that will accompany the Title 1 header of the page. That is why Title 1 should always appear at the beginning.

The header image must have a size of 960 x 540 pixels. This image can be sent like the rest of the images, by IMGUR

Final result

And finally with all this information, the page would be set up. Following and to finish with this example, the page with the final result following all the parameters that we have raised previously would be this:

Final page