Guía para la maquetación de contenidos

Cuando queremos montar un contenido en la web uno de los grandes problemas que encontramos es que la propuestas que recibo nunca están muy bien pensadas para ser incorporadas de manera satisfactoria en la web. Generalmente el problema es que sin una estructura adecuada el diseño y la maquetación no suelen quedar demasiado bien, dando un resultado poco satisfactorio.

Por eso voy a dar unas explicaciones muy básicas de como se debe plantear una maquetación de contenidos en condiciones para simplificarme el trabajo al maximo y que el resultado sea óptimo.

El objetivo de esta guía es que cualquiera sin conocimientos de programación o de desarrollo web pueda darme una maquetación de calidad y que yo no tenga que invertir demasiado tiempo en intentar extraer la idea por medio de multiples conversaciones hasta llegar a una conclusión.

Paso 1: La plantilla

Para poder tener una plantilla donde “dibujar” nuestra propuesta, lo que vamos a hacer es coger un folio en A4 y lo vamos a doblar por UN TERCIO longitudinalmente.

Paso 2: Los bloques de contenido

Vamos a imaginar que tenemos varios tipos de contenidos: vídeo, imágen, texto. Cada contenido es un bloque rectangular o cuadrado. Tenemos que encajar los bloques de arriba a abajo de la plantilla a nuestra elección. Vamos a ilustrar tres tipos de contenidos.

Bloque de video

Vamos a presuponer que generalmente el video va a ser un video de YouTube, lo representamos en la plantilla así:

Bloque de Imagen

Depende de si la imagen es apaisada o retrato, pues la pondremos acorde.

Bloque de Texto

Lo mismo que el bloque de imagen, dependiendo de como queramos el texto pues pondremos un bloque u otro. Lo representamos con unas líneas paralelas.

Los bloques de texto pueden ser bloques de texto con párrafos incluidos e incluso listas de elementos textuales

Voy a poner dos ejemplos: un bloque de texto junto a una imagen apaisada, y otro junto a una imagen retrato:

Bloque de título

Los títulos van en bloques separados son bloques alargados que generalmente ocupan la línea entera.

Bloque de botón

Si queremos poner un botón para que la gente pulse y le lleve a otra parte de la web o simplemente aparezca una ventana con algo de información (o un formulario)

Otros bloques

La idea es semejante. Si hemos entendido como funcionan los bloques creo que claramente podríamos poner otro tipo de bloque que de forma semejante a los anteriores, encaje con forma cuadrada o rectangular. Por ejemplo, si quisiéramos poner un formulario incorporado dentro del contenido. Aunque esto suele ser lo menos común, es mejor preguntar antes de usar nuevos bloques que no sean de los tipos anteriormente mencionados. Intentaré actualizar esta lista conforme salgan nuevas ideas de bloques que puedan resultar de interés de todos.

Finalmente aquí un ejemplo de plantilla con todos los tipos de bloques anteriomente mencionados:

Expandiendo los bloques

Si necesitamos más espacio, simplemente tenemos que ir agregando más páginas al diseño de bloques en la parte inferior. No es necesario rellenarlo todo hasta abajo, pero si es importante no dejar huecos vacíos de arriba a abajo entre medias de cada bloque. De está forma podemos expandir la página:

Paso 3: Creando el contenido

Ahora que ya hemos maquetado el contenido por bloques y tipos de bloques es necesario crear el contenido que va a ir en esos bloques. El paso 3 es intercambiable con el paso 2. Es decir que podemos crear el contenido antes, y luego maquetarlo sabiendo la cantidad de contenido que queremos incorporar. Es indistinto hacerlo de una forma u otra, pero hay que ser conscientes que el contenido tiene que cuadrar dentro de nuestra maquetación con precisión

Vamos a seguir el ejemplo anterior. En la imagen 4 podemos ver los siguientes bloques:

• 2 Bloques de Título
• 4 Bloques de Texto
• 1 Bloque de Video
• 2 Bloques de Imagen
• 1 Bloque de Botón
• Total: 10 Bloques

Por tanto tendremos que ajustar nuestro contenido para que encaje perfectamente en estos bloques sin salirse y que el tamaño de letra sea exactamente el mismo en todos ellos. Por eso es posible que merezca la pena crear primero el contenido y luego encajarlo por bloques. Ya depende mucho de la persona.

Paso 4: Encajando el contenido con los bloques

Vamos a suponer que ya tenemos el diseño dibujado en el papel y todos los bloques de contenidos creados. Ahora el último paso consiste en combinarlo. Para ello vamos a utilizar varias herramientas para combinar todo y mandarlo al encargado de maquetación web.

Bloques de Video

Los videos pueden pasarse de dos formas:

1. En formato video MP4 a través de una herramienta como WeTransfer.
2. OPCIÓN PREFERIDA: Subiéndolos al canal de la Marcha de Youtube y pasando en enlace de Youtube al video.

En caso que haya un solo video en la maquetación no habrá problema. Pero si hay varios videos tendremos que asociarlos de alguna manera con la maquetación que hemos hecho en el papel.

Por ejemplo. Imaginemos que hay tres videos. En la maquetación dibujaremos un número 1 en el primer vídeo, un número 2 en el segundo video y un número 3 en el tercer video. Y luego al mandar toda la documentación pondremos algo así:

• Video 1: Video que trata sobre las frases de la no violencia con titulo: “Las frases mas importantes de la noviolencia”
• Video 2: Video que trata sobre los colores de la bandera con título: “La bandera de la noviolencia”
• Video 3: Video que trata sobre el grupo que va a marchar en Argentina con título: “El equipo base de Argentina”

Así será fácil saber qué vídeo corresponde a cada apartado.

Bloques de Imagen

En este caso, todas las imágenes deben subirse a la plataforma IMGUR: https://imgur.com/upload

Y luego pasar los enlaces a esas imágenes. Lo ideal es poner las imágenes igual que los vídeos, marcados con un 1, un 2, un 3 y así sucesivamente. Por ejemplo, imaginemos que tenemos 4 imágenes sobre la marcha en Sudáfrica. Las cuatro se llaman igual: “sudafrica.jpg”. Pues les ponemos nombres sucesivos al punto donde estarán en la maquetación y pintamos el número en el papel al que corresponden. Ejemplo:

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

Bloques de Botón, Título y Texto

Finalmente estos bloques, deben escribirse en un Documento Word, o en un Google Docs preferentemente.

El formato es muy sencillo: En el documento Word ponemos el tipo de Bloque (Título, Botón, o Texto) seguido del número al que corresponderá en la maquetación.

Ejemplos:

• Título 1: ….
• Título 2: …
• Texto 1: …
• Texto 2: …
• Botón 1: …
• Botón 2: …

A continuación pongo un documento de ejemplo con textos totalmente aleatorios para que pueda verse como quedaría estructurado esto, siguiendo el ejemplo de la imagen 4:

Así es como debería quedar la maquetación una vez hayamos puesto los números que corresponden a cada apartado:

Paso 4: Enviar todo

Una vez ya tengamos todo hecho simplemente tendréis que hacerlo llegar a la persona que se va a encargar de la maquetación

Simplemente haría falta

1. Los bocetos en papel con la maquetación
2. Los contenidos
   • Los enlaces de los videos a Youtube o a WeTransfer
   • Los enlaces de IMGUR de las imagenes
   • El enlace al documento en Google Docs o el fichero Word

Notal Importante Final

Lo ideal finalmente sería incluir una imagen destacada que es la que acompañará al Título 1 cabecera de la página. Por eso el Título 1 siempre debería aparecer al principio.

La imagen cabecera debe tener un tamaño de 960 x 540 pixeles. Esta imagen se puede mandar como el resto de las imagenes, por IMGUR

Resultado final

Y finalmente con toda esta información, se pasaría a maquetar la página. Siguiendo y para finalizar con este ejemplo, la página con el resultado final siguiendo todos los parámetros que hemos planteado anteriormente sería esta:

Página final