Guide pour la mise en page du contenu

Lorsque nous voulons monter un contenu sur le Web, l'un des gros problèmes que nous constatons est que les propositions que je reçois ne sont jamais très bien pensées pour être intégrées avec succès au Web. Généralement, le problème est que sans structure adéquate, la conception et la mise en page ne sont généralement pas très belles, ce qui donne un résultat insatisfaisant.

C'est pourquoi je vais donner quelques explications de base sur la manière dont une présentation de contenu doit être considérée dans des conditions permettant de simplifier au maximum le travail et d'obtenir un résultat optimal.

L’objectif de ce guide est que toute personne ne connaissant pas la programmation ou le développement Web puisse me donner une mise en page de qualité et que je n’ai pas à passer trop de temps à essayer d’extraire l’idée par plusieurs conversations jusqu’à sa conclusion.

Étape 1: le modèle

Afin d'avoir un modèle où nous pouvons "dessiner" notre proposition, nous allons prendre une feuille de papier A4 et nous allons la plier par UN TIERS dans le sens de la longueur.

Étape 2: les blocs de contenu

Imaginons que nous ayons plusieurs types de contenu: vidéo, image, texte. Chaque contenu est un bloc rectangulaire ou carré. Nous devons adapter les blocs de haut en bas du modèle à notre choix. Nous illustrerons trois types de contenu.

Bloc vidéo

Nous supposerons que la vidéo sera généralement une vidéo YouTube, nous la représentons dans le modèle de la manière suivante:

Bloc d'image

Cela dépend si l'image est paysage ou portrait, comme nous en conviendrons.

Bloc de texte

La même chose que le bloc d'image, selon la façon dont nous voulons le texte, nous allons mettre un bloc ou un autre. Nous le représentons avec des lignes parallèles.

Les blocs de texte peuvent être des blocs de texte avec des paragraphes inclus et même listes d'éléments textuels

Je vais mettre deux exemples: un bloc de texte à côté d'une image de paysage et un autre à côté d'une image de portrait:

Bloc de titre

Les titres vont dans des blocs séparés sont des blocs allongés qui occupent généralement toute la ligne.

Bloc de bouton

Si nous voulons placer un bouton sur lequel les personnes peuvent cliquer pour accéder à une autre partie du Web ou simplement une fenêtre contenant des informations (ou un formulaire) apparaît.

Autres blocs

L'idée est similaire. Si nous avons compris comment fonctionnent les blocs, je pense que nous pourrions clairement mettre un autre type de bloc qui, semblable aux précédents, s’adapte à la forme carrée ou rectangulaire. Par exemple, si nous voulions mettre un formulaire incorporé dans le contenu. Bien que ce soit généralement le moins fréquent, il est préférable de demander avant d’utiliser de nouveaux blocs qui ne sont pas du type mentionné ci-dessus. J'essaierai de mettre à jour cette liste au fur et à mesure de la sortie de nouvelles idées susceptibles d'intéresser tout le monde.

Enfin, voici un exemple de modèle avec tous les types de blocs mentionnés ci-dessus:

Développer les blocs

Si nous avons besoin de plus d’espace, nous devons simplement ajouter plus de pages à la conception de bloc en bas. Il n'est pas nécessaire de tout remplir, mais il est important de ne pas laisser de trous vides de haut en bas entre le milieu de chaque bloc. De cette façon, nous pouvons agrandir la page:

Étape 3: Création du contenu

Maintenant que nous avons mis en forme le contenu par blocs et types de blocs, il est nécessaire de créer le contenu qui ira dans ces blocs. L'étape 3 est interchangeable avec l'étape 2. En d'autres termes, nous pouvons créer le contenu avant, puis mettre en forme en sachant la quantité de contenu que nous voulons incorporer. Il est indistinct de le faire d'une manière ou d'une autre, mais nous devons être conscients que le contenu doit s'adapter à notre mise en page avec précision

Nous allons suivre l'exemple précédent. Dans l'image 4, nous pouvons voir les blocs suivants:

• Cartouches 2
• Blocs de texte 4
• Bloc vidéo 1
• Blocs d'image 2
• Bloc de boutons 1
• Total: Blocs 10

Par conséquent, nous devrons ajuster notre contenu de manière à ce qu’il s’intègre parfaitement dans ces blocs sans quitter et que la taille de la police soit exactement la même dans chacun d’eux. Pour cela possible ça vaut le coup créez d'abord le contenu puis bloquez-le. Cela dépend déjà beaucoup de la personne.

Étape 4: Ajuster le contenu avec les blocs

Supposons que nous ayons déjà dessiné le motif sur le papier et créé tous les blocs de contenu. Maintenant, la dernière étape consiste à le combiner. Pour cela, nous utiliserons plusieurs outils pour tout combiner et l'envoyer au concepteur web.

Blocs Vidéo

Les vidéos peuvent être passées de deux manières:

1. Au format vidéo MP4 via un outil tel que la plateforme WeTransfer.
2. OPTION PRÉFÉRÉE: téléchargez-les sur la chaîne YouTube March et transmettez le lien YouTube vers la vidéo.

S'il n'y a qu'une seule vidéo dans la mise en page, il n'y aura pas de problème. Mais s'il y a plusieurs vidéos, nous devrons les associer d'une manière ou d'une autre à la mise en page que nous avons réalisée sur papier.

Par exemple. Imaginez qu'il y ait trois vidéos. Dans la mise en page, nous allons tracer un numéro 1 dans la première vidéo, un numéro 2 dans la deuxième vidéo et un numéro 3 dans la troisième vidéo. Et puis, lors de l'envoi de toute la documentation, nous allons mettre quelque chose comme ceci:

• Vidéo 1 : Vidéo qui traite des phrases de non-violence avec le titre : "Les phrases les plus importantes de non-violence"
• Vidéo 2 : Vidéo qui traite des couleurs du drapeau avec pour titre : « Le drapeau de la non-violence »
• Vidéo 3 : Vidéo qui traite du groupe qui va défiler en Argentine avec le titre : « L'équipe de base de l'Argentine »

Cela permettra de savoir facilement quelle vidéo correspond à chaque section.

Blocs d'image

Dans ce cas, toutes les images doivent être téléchargées sur la plateforme IMGUR: https://imgur.com/upload

Et puis passez les liens vers ces images. L'idéal est de mettre les images au même titre que les vidéos, marquées d'un 1, d'un 2, d'un 3 et ainsi de suite. Par exemple, imaginons que nous ayons 4 images à la volée en Afrique du Sud. Tous les quatre portent le même nom : « sudafrica.jpg ». Eh bien, on met les noms successifs à l'endroit où ils seront dans la mise en page et on peint sur le papier le numéro auquel ils correspondent. Exemple:

• Afrique du Sud-1.jpg
• Afrique du Sud-2.jpg
• Afrique du Sud-3.jpg
• Afrique du Sud-4.jpg

Blocs de boutons, de titres et de textes

Enfin, ces blocs doivent être écrits dans un document Word ou de préférence dans Google Docs.

Le format est très simple: dans le document Word, nous mettons le type de bloc (titre, bouton ou texte) suivi du numéro auquel il correspond dans la mise en page.

Exemples:

• Titre 1:….
• Titre 2:…
• Texte 1:…
• Texte 2:…
• Bouton 1:…
• Bouton 2:…

Ensuite, je mets un exemple de document avec des textes totalement aléatoires pour que l'on puisse voir comment cela serait structuré, en suivant l'exemple de l'image 4:

Voici à quoi devrait ressembler la mise en page une fois que nous avons mis les chiffres correspondant à chaque section:

Étape 4: Tout envoyer

Une fois que nous aurons tout fait, vous devrez simplement l'envoyer à la personne qui sera en charge de la mise en page.

Il faudrait simplement

1. Croquis sur papier avec la mise en page
2. Le contenu
   • Liens vidéo vers YouTube ou WeTransfer
   • Liens IMGUR des images
   • Le lien vers le document dans Google Docs ou le fichier Word

Notaire Importante Finale

L'idéal serait finalement d'inclure une image exceptionnelle, celle qui accompagnera l'en-tête Title 1 de la page. C'est pourquoi Titre 1 doit toujours apparaître au début.

L'image d'en-tête doit avoir une taille de 960 x 540 pixels. Cette image peut être envoyée comme le reste des images, par IMGUR

Résultat final

Et finalement avec toutes ces informations, la page serait mise en place. Après et pour finir avec cet exemple, la page avec le résultat final qui suit tous les paramètres que nous avons précédemment évoqués serait la suivante:

Dernière page