Guía para o deseño de contidos

Cando queremos montar un contido na web un dos grandes problemas que atopamos é que as propostas que recibo nunca están moi ben pensadas para incorporarse satisfactoriamente á rede. Xeralmente o problema é que sen unha estrutura adecuada o deseño e maquetación non adoitan estar demasiado bos, dando un resultado insatisfactorio.

É por iso que vou dar algunhas explicacións moi básicas de como se debe considerar un esquema de contidos en condicións para simplificar o traballo ao máximo e que o resultado sexa óptimo.

O obxectivo desta guía é que calquera persoa sen coñecemento de programación ou desenvolvemento web poida darme un esquema de calidade e que non teño que pasar moito tempo intentando extraer a idea a través de múltiples conversas ata chegar a unha conclusión.

Paso 1: o modelo

Para ter unha plantilla onde “debuxar” a nosa proposta, o que imos facer é coller unha folla A4 e imos dobrala UN TERCIO lonxitudinalmente.

Paso 2: os bloques de contido

Imaginemos que temos varios tipos de contido: vídeo, imaxe, texto. Cada contido é un bloque rectangular ou cadrado. Temos que axustar os bloques de arriba a abaixo do modelo á nosa elección. Ilustraremos tres tipos de contido.

Bloque de vídeo

Imos supoñer que o vídeo normalmente será un vídeo de YouTube, representámolo na plantilla do seguinte xeito:

Bloque de imaxes

Depende de se a imaxe é paisaxe ou retrato, como estaremos de acordo.

Bloque de texto

O mesmo que o bloque de imaxes, segundo como queremos o texto poñeremos un bloque ou outro. Representámolo con liñas paralelas.

Os bloques de texto poden ser bloques de texto con parágrafos incluídos e pares listas de elementos textuais

Vou poñer dous exemplos: un bloque de texto xunto a unha imaxe de paisaxe e outro xunto a unha imaxe de retrato:

Bloque de título

Os títulos van en bloques separados son bloques alargados que xeralmente ocupan toda a liña.

Bloqueo de botóns

Se queremos poñer un botón para que a xente faga clic e levalos a outra parte da web ou só apareza unha xanela con algunha información (ou un formulario)

Outros bloques

A idea é similar. Se entendemos como funcionan os bloques, creo que poderiamos poñer claramente outro tipo de bloque que, similar aos anteriores, encaixa cadrados ou rectangulares. Por exemplo, se quixemos poñer un formulario incorporado ao contido. Aínda que normalmente é o menos común, é mellor preguntar antes de usar novos bloques que non sexan dos tipos mencionados anteriormente. Intentarei actualizar esta lista a medida que saian novas ideas de bloque que poidan ser de interese para todos.

Finalmente, aquí ten un exemplo dun modelo con todos os tipos de bloques mencionados anteriormente:

Ampliando os bloques

Se necesitamos máis espazo, simplemente temos que engadir máis páxinas ao deseño de bloques na parte inferior. Non é necesario encher todo, pero é importante non deixar lagoas baleiras de arriba abaixo entre o medio de cada bloque. Deste xeito podemos ampliar a páxina:

Paso 3: creación do contido

Agora que dispuxemos o contido por bloques e tipos de bloques, é necesario crear o contido que irá neses bloques. O paso 3 é intercambiable co paso 2. Noutras palabras, podemos crear o contido antes, e despois esquematizar coñecendo a cantidade de contido que queremos incorporar. É indistinto facelo dun xeito ou doutro, pero debemos ser conscientes de que o contido debe encaixar no noso esquema precisamente

Seguiremos o exemplo anterior. Na imaxe 4 podemos ver os seguintes bloques:

• Bloques de título 2
• Bloques de texto 4
• Bloque de video 1
• Bloques de imaxe 2
• Bloque de botóns 1
• Total: Bloques 10

Polo tanto, teremos que axustar o noso contido para que se adapte perfectamente a estes bloques sen saír e que o tamaño da letra sexa exactamente o mesmo en todos eles. Por iso posible paga a pena primeiro cree o contido para logo bloquealo. Xa depende moito da persoa.

Paso 4: Encaixar o contido cos bloques

Supoñamos que xa temos o deseño debuxado no papel e todos os bloques de contido creados. Agora o último paso é combinalo. Para iso empregaremos varias ferramentas para combinar todo e envialo ao deseñador web.

Bloques de vídeo

Os vídeos pódense transmitir de dúas formas:

1. En formato de vídeo MP4 a través dunha ferramenta como WeTransfer.
2. OPCIÓN PREFERIDA: subilas á canle de marzo de YouTube e pasar a ligazón de YouTube ao vídeo.

No caso de que só haxa un vídeo no esquema non haberá problema. Pero se hai varios vídeos teremos que asocialos dalgún xeito co esquema que fixemos en papel.

Por exemplo. Imaxina que hai tres vídeos. No esquema debuxaremos un número 1 no primeiro vídeo, un número 2 no segundo vídeo e un número 3 no terceiro vídeo. E logo ao enviar toda a documentación imos poñer algo así:

• Vídeo 1: Vídeo que trata as frases da non violencia co título: "As frases máis importantes da non violencia"
• Vídeo 2: Vídeo que trata as cores da bandeira co título: «A bandeira da non violencia»
• Vídeo 3: Vídeo que trata do grupo que vai marchar na Arxentina co título: “O equipo base de Arxentina”

Isto facilitará saber que vídeo corresponde a cada sección.

Bloques de imaxe

Neste caso, todas as imaxes deben subirse á plataforma IMGUR: https://imgur.com/upload

E despois pasa os enlaces a esas imaxes. O ideal é poñer as imaxes igual que os vídeos, marcados cun 1, un 2, un 3 etc. Por exemplo, imaxinemos que temos 4 imaxes sobre a marcha en Sudáfrica. Os catro teñen o mesmo nome: "sudafrica.jpg". Pois poñemos nomes sucesivos ata o punto en que estarán na maquetación e pintamos o número no papel ao que corresponden. Exemplo:

• Sudáfrica-1.jpg
• Sudáfrica-2.jpg
• Sudáfrica-3.jpg
• Sudáfrica-4.jpg

Bloques de botón, título e texto

Finalmente, estes bloques deberían estar escritos nun documento de Word ou nun Google Docs preferentemente.

O formato é moi sinxelo: no documento de Word poñemos o tipo de bloque (título, botón ou texto) seguido do número ao que corresponderá a disposición.

Exemplos:

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

Despois puxen un documento de exemplo con textos totalmente aleatorios para que se vexa como se estruturaría isto, seguindo o exemplo da imaxe 4:

Así debería verse o esquema unha vez que colocamos os números que corresponden a cada sección:

Paso 4: envía todo

Unha vez feito todo, simplemente terás que envialo á persoa que se encargará do deseño

Simplemente levaría

1. Esbozos en papel co esquema
2. Os contidos
   • Ligazóns de vídeo a YouTube ou WeTransfer
   • Ligazóns IMGUR das imaxes
   • A ligazón ao documento en Google Docs ou o ficheiro Word

Notario Final final

Finalmente, o ideal sería incluír unha imaxe destacada que acompañará ao título 1 cabeceira da páxina. É por iso que o título 1 sempre debería aparecer ao principio.

A imaxe de cabeceira debe ter un tamaño de 960 x 540 píxeles. Esta imaxe pode ser enviada como o resto de imaxes, por IMGUR

Resultado final

E finalmente con toda esta información, configuraríase a páxina. Seguindo e para rematar con este exemplo, a páxina co resultado final seguindo todos os parámetros que plantexamos anteriormente sería esta:

Páxina final