Guida per il layout del contenuto

Quando vogliamo montare un contenuto sul web, uno dei maggiori problemi che troviamo è che le proposte che ricevo non sono mai ben pensate per essere incorporate con successo nel web. Generalmente il problema è che senza una struttura adeguata il design e il layout di solito non sembrano troppo belli, dando un risultato insoddisfacente.

Questo è il motivo per cui fornirò alcune spiegazioni di base su come un layout di contenuto dovrebbe essere considerato in condizioni per semplificare al massimo il lavoro e che il risultato è ottimale.

L'obiettivo di questa guida è che chiunque non sia a conoscenza della programmazione o dello sviluppo web può darmi un layout di qualità e non devo passare troppo tempo a cercare di estrarre l'idea attraverso più conversazioni fino a giungere a una conclusione.

Passaggio 1: il modello

Per avere un modello dove possiamo “disegnare” la nostra proposta, quello che faremo è prendere un foglio di carta A4 e piegarlo di UN TERZO nel senso della lunghezza.

Passaggio 2: i blocchi di contenuto

Immaginiamo di avere diversi tipi di contenuti: video, immagine, testo. Ogni contenuto è un blocco rettangolare o quadrato. Dobbiamo adattare i blocchi dall'alto verso il basso del modello a nostra scelta. Illustreremo tre tipi di contenuti.

Blocco video

Partiamo dal presupposto che il video sarà generalmente un video di YouTube, lo rappresentiamo nel modello come segue:

Blocco immagine

Dipende dal fatto che l'immagine sia orizzontale o verticale, come concorderemo.

Blocco di testo

Lo stesso del blocco di immagini, a seconda di come vogliamo il testo inseriremo un blocco o un altro. Lo rappresentiamo con linee parallele.

I blocchi di testo possono essere blocchi di testo con paragrafi inclusi e anche elenchi di articoli testuali

Ho intenzione di mettere due esempi: un blocco di testo accanto a un'immagine di paesaggio e un altro accanto a un'immagine di ritratto:

Cartiglio

I titoli vanno in blocchi separati sono blocchi allungati che generalmente occupano l'intera linea.

Pulsante di blocco

Se vogliamo mettere un pulsante per fare clic sulle persone e portarle in un'altra parte del Web o viene visualizzata solo una finestra con alcune informazioni (o un modulo)

Altri blocchi

L'idea è simile. Se abbiamo capito come funzionano i blocchi, penso che potremmo chiaramente mettere un altro tipo di blocco che, simile ai precedenti, si adatta a quadrati o rettangolari. Ad esempio, se volessimo inserire un modulo incorporato nel contenuto. Sebbene questo sia di solito il meno comune, è meglio chiedere prima di usare nuovi blocchi che non sono dei tipi sopra menzionati. Cercherò di aggiornare questo elenco man mano che emergono nuove idee per i blocchi che potrebbero interessare tutti.

Infine, ecco un esempio di modello con tutti i tipi di blocchi sopra menzionati:

Espandere i blocchi

Se abbiamo bisogno di più spazio, dobbiamo semplicemente aggiungere più pagine al design del blocco in basso. Non è necessario riempire tutto in basso, ma è importante non lasciare spazi vuoti dall'alto verso il basso tra il centro di ciascun blocco. In questo modo possiamo espandere la pagina:

Passaggio 3: creazione del contenuto

Ora che abbiamo layout il contenuto per blocchi e tipi di blocchi, è necessario creare il contenuto che andrà in quei blocchi. Il passaggio 3 è intercambiabile con il passaggio 2. In altre parole, possiamo creare prima il contenuto e quindi il layout conoscendo la quantità di contenuto che vogliamo incorporare. È indistinto farlo in un modo o nell'altro, ma dobbiamo essere consapevoli che il contenuto deve adattarsi esattamente al nostro layout

Seguiremo l'esempio precedente. Nell'immagine 4 possiamo vedere i seguenti blocchi:

• 2 cartigli
• 4 Text Blocks
• 1 Video Block
• 2 Image Blocks
• Blocco pulsanti 1
• Totale: Blocchi 10

Pertanto dovremo adattare il nostro contenuto in modo che si adatti perfettamente a questi blocchi senza uscire e che la dimensione del carattere sia esattamente la stessa in tutti. Per quello è possibile ne vale la pena crea prima il contenuto e poi bloccalo. Dipende già molto dalla persona.

Passaggio 4: adattamento del contenuto con i blocchi

Supponiamo di avere già disegnato il disegno sulla carta e tutti i blocchi di contenuto creati. Ora l'ultimo passo è quello di combinarlo. Per questo useremo diversi strumenti per combinare tutto e inviarlo al web designer.

Video Blocks

I video possono essere passati in due modi:

1. In formato video MP4 attraverso uno strumento simile WeTransfer.
2. OPZIONE PREFERITA: caricandoli sul canale YouTube di marzo e passando il link YouTube al video.

Nel caso in cui sia presente un solo video nel layout, non ci saranno problemi. Ma se ci sono diversi video dovremo associarli in qualche modo al layout che abbiamo fatto su carta.

Per esempio Immagina che ci siano tre video. Nel layout disegneremo un numero 1 nel primo video, un numero 2 nel secondo video e un numero 3 nel terzo video. E poi quando inviamo tutta la documentazione metteremo qualcosa del genere:

• Video 1: Video che tratta le frasi della nonviolenza dal titolo: "Le frasi più importanti della nonviolenza"
• Video 2: Video che tratta i colori della bandiera dal titolo: «La bandiera della nonviolenza»
• Video 3: Video che si occupa del gruppo che si accinge a marciare in Argentina dal titolo: “La squadra base dell'Argentina”

Ciò consentirà di sapere facilmente quale video corrisponde a ciascuna sezione.

Blocchi di immagini

In questo caso, tutte le immagini devono essere caricate sulla piattaforma IMGUR: https://imgur.com/upload

E poi passa i link a quelle immagini. L'ideale è mettere le immagini come i video, contrassegnati da 1, 2, 3 e così via. Ad esempio, immaginiamo di avere 4 immagini al volo in Sud Africa. Tutti e quattro hanno lo stesso nome: “sudafrica.jpg”. Bene, mettiamo i nomi successivi al punto in cui saranno nel layout e dipingiamo il numero sulla carta a cui corrispondono. Esempio:

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

Pulsante, titolo e blocchi di testo

Infine, questi blocchi dovrebbero essere scritti in un documento di Word o preferibilmente in un documento di Google.

Il formato è molto semplice: nel documento Word inseriamo il tipo di blocco (titolo, pulsante o testo) seguito dal numero a cui corrisponderà nel layout.

Esempi:

• Titolo 1:…
• Titolo 2: ...
• Testo 1: ...
• Testo 2: ...
• Pulsante 1: ...
• Pulsante 2: ...

Quindi ho messo un documento di esempio con testi totalmente casuali in modo che possa essere visto come sarebbe strutturato, seguendo l'esempio dell'immagine 4:

Ecco come dovrebbe apparire il layout dopo aver inserito i numeri corrispondenti a ciascuna sezione:

Passaggio 4: invia tutto

Una volta fatto tutto, dovrai semplicemente inviarlo alla persona che sarà responsabile del layout

Ci vorrebbe semplicemente

1. Schizzi su carta con il layout
2. Il contenuto
   • Collegamenti video a YouTube o WeTransfer
   • Collegamenti IMGUR delle immagini
   • Il link al documento in Google Documenti o nel file Word

Notaio importante finale

L'ideale sarebbe finalmente includere un'immagine eccezionale che è quella che accompagnerà l'intestazione 1 della pagina. Ecco perché il titolo 1 dovrebbe apparire sempre all'inizio.

L'immagine dell'intestazione deve avere una dimensione di 960 x 540 pixel. Questa immagine può essere inviata come il resto delle immagini, da IMGUR

Risultato finale

E infine con tutte queste informazioni, la pagina verrebbe impostata. Di seguito e per finire con questo esempio, la pagina con il risultato finale che segue tutti i parametri che abbiamo sollevato in precedenza sarebbe questa:

Pagina finale