Guia per a la maquetació de continguts

Quan volem muntar un contingut al web un dels grans problemes que trobem és que la propostes que rebo mai estan molt ben pensades per ser incorporades de manera satisfactòria a la web. Generalment el problema és que sense una estructura adequada el disseny i la maquetació no solen quedar massa bé, donant un resultat poc satisfactori.

Per això vaig a donar unes explicacions molt bàsiques de com s'ha de plantejar una maquetació de continguts en condicions per simplificarme la feina al màxim i que el resultat sigui òptim.

L'objectiu d'aquesta guia és que qualsevol sense coneixements de programació o de desenvolupament web pugui donar-me una maquetació de qualitat i que jo no hagi d'invertir massa temps en intentar extreure la idea per mitjà de múltiples converses fins arribar a una conclusió.

Pas 1: La plantilla

Per poder tenir una plantilla on «dibuixar» la nostra proposta, el que farem és agafar un foli en A4 i doblegarem per UN TERCI longitudinalment.

Pas 2: Els blocs de contingut

Anem a imaginar que tenim diversos tipus de continguts: vídeo, imatge, text. Cada contingut és un bloc rectangular o quadrat. Hem de encaixar els blocs de dalt a baix de la plantilla a la nostra elecció. Anem a il·lustrar tres tipus de continguts.

Bloc de vídeo

Anem a pressuposar que generalment el vídeo serà un vídeo de YouTube, el representem a la plantilla així:

Bloc d'Imatge

Depèn de si la imatge és apaïsada o retrat, ja que la posarem d'acord.

Bloc de Text

El mateix que el bloc d'imatge, depenent de com vulguem el text doncs posarem un bloc o un altre. El representem amb unes línies paral·leles.

Els blocs de text poden ser blocs de text amb paràgrafs inclosos i fins i tot llistes d'elements textuals

Vaig a posar dos exemples: un bloc de text al costat d'una imatge apaïsada, i un altre al costat d'una imatge retrat:

Bloc de títol

Els títols van en blocs separats són blocs allargats que generalment ocupen la línia sencera.

Bloc de botó

Si volem posar un botó perquè la gent premi i el porti a una altra part de la web o simplement aparegui una finestra amb una mica d'informació (o un formulari)

altres blocs

La idea és semblant. Si hem entès com funcionen els blocs crec que clarament podríem posar un altre tipus de bloc que de forma semblant als anteriors, encaix amb forma quadrada o rectangular. Per exemple, si volguéssim posar un formulari incorporat dins del contingut. Encara que això sol ser el menys comú, és millor preguntar abans d'usar nous blocs que no siguin dels tipus anteriorment esmentats. Intentaré actualitzar aquesta llista acord surtin noves idees de blocs que puguin resultar d'interès de tots.

Finalment aquí un exemple de plantilla amb tots els tipus de blocs anteriorment esmentats:

Expandint els blocs

Si necessitem més espai, simplement hem d'anar afegint més pàgines al disseny de blocs a la part inferior. No cal omplir-ho tot fins a baix, però si és important no deixar buits buits de dalt a baix entre mitjanes de cada bloc. D'està manera podem expandir la pàgina:

Pas 3: Creant el contingut

Ara que ja hem maquetat el contingut per blocs i tipus de blocs és necessari crear el contingut que va a anar a aquests blocs. El pas 3 és intercanviable amb el pas 2. És a dir que podem crear el contingut abans, i després maquetar sabent la quantitat de contingut que volem incorporar. És indistint fer-ho d'una manera o altra, però cal ser conscients que el contingut ha de quadrar dins la nostra maquetació amb precisió

Seguirem l'exemple anterior. A la imatge 4 podem veure els següents blocs:

• 2 Blocs de Títol
• 4 Blocs de Text
• 1 Bloc de Vídeo
• 2 Blocs d'Imatge
• 1 Bloc d'Botó
• Total: 10 Blocs

Per tant haurem d'ajustar el nostre contingut perquè encaixi perfectament en aquests blocs sense sortir-se i que la mida de lletra sigui exactament el mateix en tots ells. per això és possible que valgui la pena crear primer el contingut i després encaixar-per blocs. Ja depèn molt de la persona.

Pas 4: Encaixant el contingut amb els blocs

Anem a suposar que ja tenim el disseny dibuixat en el paper i tots els blocs de continguts creats. Ara l'últim pas consisteix a combinar. Per a això utilitzarem diverses eines per combinar tot i enviar a l'encarregat de maquetació web.

Blocs de Vídeo

Els vídeos poden passar-se de dues formes:

1. En format vídeo MP4 a través d'una eina com WeTransfer.
2. OPCIÓ PREFERIDA: pujant-al canal de la Marxa de Youtube i passant a enllaç de Youtube al vídeo.

En cas que hi hagi un sol vídeo en la maquetació no hi haurà problema. Però si hi ha diversos vídeos haurem de associar-los d'alguna manera amb la maquetació que hem fet en el paper.

Per exemple. Imaginem que hi ha tres vídeos. A la maquetació dibuixarem un nombre 1 en el primer vídeo, un nombre 2 en el segon vídeo i un nombre 3 en el tercer vídeo. I després al enviar tota la documentació posarem alguna cosa així:

• Vídeo 1: Vídeo que tracta sobre les frases de la no-violència amb títol: «Les frases més importants de la noviolència»
• Vídeo 2: Vídeo que tracta sobre els colors de la bandera amb títol: «La bandera de la noviolència»
• Vídeo 3: Vídeo que tracta sobre el grup que marxarà a Argentina amb títol: «L'equip base d'Argentina»

Així serà fàcil saber què vídeo correspon a cada apartat.

Blocs d'Imatge

En aquest cas, totes les imatges han de pujar-se a la plataforma Imgur: https://imgur.com/upload

I després passar els enllaços a aquestes imatges. L'ideal és posar les imatges igual que els vídeos, marcats amb un 1, un 2, un 3 i així successivament. Per exemple, imaginem que tenim 4 imatges sobre la marxa a Sud-àfrica. Totes quatre es diuen igual: «sudafrica.jpg». Doncs els posem noms successius al punt on estaran a la maquetació i pintem el número al paper al qual corresponen. Exemple:

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

Blocs de Botó, Títol i Text

Finalment aquests blocs, s'han d'escriure en un Document Word, o en un Google Docs preferentment.

El format és molt senzill: En el document Word posem el tipus de Bloc (Títol, Botó, o Text) seguit del número al qual correspondrà a la maquetació.

Exemples:

• Títol 1: ....
• Títol 2: ...
• Text 1: ...
• Text 2: ...
• Botó 1: ...
• Botó 2: ...

A continuació poso un document d'exemple amb textos totalment aleatoris perquè pugui veure com quedaria estructurat això, seguint l'exemple de la imatge 4:

Així és com hauria de quedar la maquetació un cop haguem posat els números que corresponen a cada apartat:

Pas 4: Enviar tot

Un cop ja tinguem tot fet simplement haureu de fer-lo arribar a la persona que es va a encarregar de la maquetació

Simplement caldria

1. Els esbossos en paper amb la maquetació
2. els continguts
   • Els enllaços dels vídeos a Youtube o WeTransfer
   • Els enllaços de Imgur de les imatges
   • L'enllaç al document a Google Docs o el fitxer Word

Notal Important Final

L'ideal finalment seria incloure una imatge destacada que és la que acompanyarà el títol 1 capçalera de la pàgina. Per això el títol 1 sempre hauria d'aparèixer al principi.

La imatge capçalera ha de tenir una mida de 960 x 540 píxels. Aquesta imatge es pot enviar com la resta de les imatges, per Imgur

resultat final

I finalment amb tota aquesta informació, es passaria a maquetar la pàgina. Seguint i per finalitzar amb aquest exemple, la pàgina amb el resultat final seguint tots els paràmetres que hem plantejat anteriorment seria aquesta:

pàgina final