Leitfaden für das Inhaltslayout

Wenn wir einen Inhalt ins Web stellen möchten, besteht eines der großen Probleme darin, dass die Vorschläge, die ich erhalte, niemals als zufriedenstellend ins Web integriert angesehen werden. Im Allgemeinen besteht das Problem darin, dass das Design und das Layout ohne eine angemessene Struktur normalerweise nicht gut aussehen, was zu einem unbefriedigenden Ergebnis führt.

Deshalb werde ich einige sehr grundlegende Erklärungen geben, wie ein Layout von Inhalten unter Bedingungen zu betrachten ist, um die Arbeit maximal zu vereinfachen und das Ergebnis zu optimieren.

Das Ziel dieses Leitfadens ist, dass jeder ohne Programmier- oder Webentwicklungskenntnisse ein qualitativ hochwertiges Layout erstellen kann und ich nicht zu viel Zeit aufwenden muss, um die Idee durch mehrere Konversationen zu extrahieren, bis ich zu einem Ergebnis komme.

Schritt 1: Die Vorlage

Um eine Vorlage zu haben, auf der wir unseren Vorschlag „zeichnen“ können, nehmen wir ein A4-Blatt und falten es um EIN DRITTEL der Länge nach.

Schritt 2: Die Inhaltsblöcke

Stellen wir uns vor, wir haben verschiedene Arten von Inhalten: Video, Bild, Text. Jeder Inhalt ist ein rechteckiger oder quadratischer Block. Wir müssen die Blöcke von oben nach unten in die Vorlage einpassen. Wir werden drei Arten von Inhalten veranschaulichen.

Videoblock

Wir gehen davon aus, dass es sich bei dem Video in der Regel um ein YouTube-Video handelt. Wir stellen es in der Vorlage folgendermaßen dar:

Bildblock

Es kommt darauf an, ob das Bild im Quer- oder Hochformat ist, da wir uns einig sind.

Textblock

Dasselbe wie der Bildblock, je nachdem, wie wir den Text wollen, werden wir den einen oder anderen Block setzen. Wir stellen es mit parallelen Linien dar.

Textblöcke können Textblöcke mit eingeschlossenen Absätzen und sogar sein Listen von Textelementen

Ich werde zwei Beispiele anführen: einen Textblock neben einem Landschaftsbild und einen weiteren neben einem Porträtbild:

Schriftfeld

Titel in separaten Blöcken sind längliche Blöcke, die im Allgemeinen die gesamte Zeile einnehmen.

Tastenblock

Wenn wir eine Schaltfläche zum Klicken und Weiterleiten an eine andere Stelle im Web festlegen möchten, wird nur ein Fenster mit einigen Informationen (oder ein Formular) angezeigt

Andere Blöcke

Die Idee ist ähnlich. Wenn wir verstanden haben, wie die Blöcke funktionieren, können wir einen anderen Blocktyp verwenden, der ähnlich wie die vorherigen quadratisch oder rechteckig ist. Zum Beispiel, wenn wir ein Formular in den Inhalt einbinden wollen. Obwohl dies in der Regel am seltensten vorkommt, ist es besser, vor der Verwendung neuer Blöcke, die nicht zu den oben genannten Typen gehören, nachzufragen. Ich werde versuchen, diese Liste zu aktualisieren, sobald neue Blockideen herauskommen, die für jeden von Interesse sein könnten.

Schließlich ist hier ein Beispiel für eine Vorlage mit allen oben genannten Blocktypen:

Die Blöcke erweitern

Wenn wir mehr Platz benötigen, müssen wir dem Blockdesign unten einfach mehr Seiten hinzufügen. Es ist nicht notwendig, alles auszufüllen, aber es ist wichtig, zwischen den einzelnen Blöcken keine Lücken von oben nach unten zu lassen. Auf diese Weise können wir die Seite erweitern:

Schritt 3: Erstellen des Inhalts

Nachdem wir nun den Inhalt nach Blöcken und Blocktypen gegliedert haben, ist es notwendig, den Inhalt zu erstellen, der in diesen Blöcken enthalten sein wird. Der 3-Schritt ist mit dem 2-Schritt austauschbar. Mit anderen Worten, wir können den Inhalt vorher erstellen und dann das Layout so gestalten, dass wir wissen, wie viel Inhalt wir einbeziehen möchten. Es ist undeutlich, dies auf die eine oder andere Weise zu tun, aber wir müssen uns bewusst sein, dass der Inhalt genau in unser Layout passen muss

Wir werden dem vorherigen Beispiel folgen. Im 4-Image sehen wir die folgenden Blöcke:

• 2-Schriftfelder
• 4-Textblöcke
• 1-Videoblock
• 2-Bildblöcke
• 1-Tastenblock
• Gesamt: 10-Blöcke

Deshalb müssen wir unseren Inhalt so anpassen, dass er perfekt in diese Blöcke passt, ohne ihn zu verlassen, und dass die Schriftgröße bei allen exakt gleich ist. Dafür möglich es lohnt sich erst den inhalt erstellen und dann blockieren. Es kommt schon sehr auf die Person an.

Schritt 4: Anpassen des Inhalts mit den Blöcken

Nehmen wir an, wir haben das Design bereits auf dem Papier gezeichnet und alle Inhaltsblöcke erstellt. Jetzt ist der letzte Schritt, es zu kombinieren. Dazu werden wir verschiedene Tools verwenden, um alles und zu kombinieren senden Sie es an den Webdesigner.

Videoblöcke

Videos können auf zwei Arten weitergegeben werden:

1. Im MP4-Videoformat über ein Tool wie WeTransfer-Seite.
2. BEVORZUGTE OPTION: Laden Sie sie auf den YouTube-März-Kanal hoch und leiten Sie den YouTube-Link zum Video weiter.

Falls sich nur ein Video im Layout befindet, gibt es kein Problem. Wenn es jedoch mehrere Videos gibt, müssen wir sie in irgendeiner Weise mit dem Layout in Verbindung bringen, das wir auf Papier erstellt haben.

Zum Beispiel. Stellen Sie sich vor, es gibt drei Videos. Im Layout werden wir im ersten Video eine 1-Nummer, im zweiten Video eine 2-Nummer und im dritten Video eine 3-Nummer zeichnen. Und dann, wenn wir die gesamte Dokumentation senden, werden wir so etwas einfügen:

• Video 1: Video, das sich mit den Sätzen der Gewaltlosigkeit befasst, mit dem Titel: „Die wichtigsten Sätze der Gewaltlosigkeit“
• Video 2: Video, das sich mit den Farben der Flagge befasst, mit dem Titel: «The flag of nonviolence»
• Video 3: Video, das sich mit der Gruppe befasst, die in Argentinien marschieren wird, mit dem Titel: „Das Basisteam von Argentinien“

Auf diese Weise können Sie leicht erkennen, welches Video den einzelnen Abschnitten entspricht.

Bildblöcke

In diesem Fall müssen alle Bilder auf die IMGUR-Plattform hochgeladen werden: https://imgur.com/upload

Und geben Sie dann die Links zu diesen Bildern weiter. Idealerweise platzieren Sie die Bilder genauso wie die Videos, markiert mit einer 1, einer 2, einer 3 und so weiter. Stellen wir uns zum Beispiel vor, wir haben 4 spontane Bilder in Südafrika. Alle vier haben den gleichen Namen: „sudafrica.jpg“. Nun, wir setzen aufeinanderfolgende Namen bis zu dem Punkt, an dem sie im Layout stehen werden, und wir malen die Nummer auf das Papier, der sie entsprechen. Beispiel:

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

Schaltflächen-, Titel- und Textblöcke

Schließlich sollten diese Blöcke vorzugsweise in ein Word-Dokument oder in ein Google Docs geschrieben werden.

Das Format ist sehr einfach: Im Word-Dokument wird der Typ des Blocks (Titel, Schaltfläche oder Text) gefolgt von der Nummer angegeben, der er im Layout entspricht.

Beispiele:

• Titel 1:….
• Titel 2:…
• Text 1:…
• Text 2:…
• Taste 1:…
• Taste 2:…

Dann habe ich ein Beispieldokument mit völlig zufälligen Texten eingefügt, damit ersichtlich wird, wie dies nach dem Beispiel des 4-Bildes strukturiert wäre:

So sollte das Layout aussehen, wenn wir die Nummern eingegeben haben, die den einzelnen Abschnitten entsprechen:

4-Schritt: Alle senden

Sobald wir alles erledigt haben, müssen Sie es einfach an die Person senden, die für das Layout verantwortlich ist

Es würde einfach dauern

1. Skizzen auf Papier mit dem Layout
2. Der Inhalt
   • Videolinks zu YouTube oder WeTransfer
   • IMGUR Links der Bilder
   • Der Link zum Dokument in Google Text & Tabellen oder der Word-Datei

Notar Wichtiges Finale

Das Ideal wäre schließlich, ein herausragendes Bild einzuschließen, das dem Titel-1-Header der Seite beiliegt. Deshalb sollte Titel 1 immer am Anfang stehen.

Das Header-Bild muss eine Größe von 960 x 540 Pixeln haben. Dieses Bild kann wie die übrigen Bilder von IMGUR gesendet werden

Resultado Finale

Und schließlich würde mit all diesen Informationen die Seite eingerichtet. Wenn Sie diesem Beispiel folgen und abschließen, wird die Seite mit dem Endergebnis nach allen Parametern, die wir zuvor angehoben haben, folgendermaßen aussehen:

Letzte Seite