Handleiding voor inhoudlay-out

Wanneer we inhoud op internet willen plaatsen, is een van de grote problemen die we tegenkomen dat de voorstellen die ik ontvang nooit goed doordacht zijn om op een bevredigende manier in het web te worden opgenomen. Over het algemeen is het probleem dat zonder een adequate structuur het ontwerp en de lay-out er meestal niet al te goed uitzien, wat een onbevredigend resultaat oplevert.

Dat is de reden waarom ik een aantal zeer fundamentele uitleg ga geven over hoe een lay-out van de inhoud moet worden overwogen in omstandigheden om het werk maximaal te vereenvoudigen en dat het resultaat optimaal is.

Het doel van deze gids is dat iedereen zonder kennis van programmeren of webontwikkeling me een kwaliteitsindeling kan geven en dat ik niet te veel tijd hoef te besteden aan het proberen het idee via meerdere gesprekken te extraheren totdat ik tot een conclusie kom.

Stap 1: de sjabloon

Om een ​​sjabloon te hebben waar we ons voorstel kunnen 'tekenen', nemen we een A4-blad en vouwen dit in de lengte EEN DERDE.

Stap 2: de inhoudsblokken

Laten we ons voorstellen dat we verschillende soorten inhoud hebben: video, afbeelding, tekst. Elke inhoud is een rechthoekig of vierkant blok. We moeten de blokken van boven naar beneden in de sjabloon naar keuze aanpassen. We zullen drie soorten inhoud illustreren.

Videoblok

We gaan ervan uit dat de video over het algemeen een YouTube-video is, we geven deze als volgt weer in de sjabloon:

Imagen 2

Afbeeldingsblok

Het hangt ervan af of de afbeelding landschap of portret is, zoals we zullen afspreken.

Tekstblok

Hetzelfde als het afbeeldingsblok, afhankelijk van hoe we de tekst willen, plaatsen we een blok of een ander. We vertegenwoordigen het met parallelle lijnen.

Tekstblokken kunnen tekstblokken zijn met opgenomen paragrafen en zelfs lijsten met tekstuele elementen

Ik ga twee voorbeelden plaatsen: een blok tekst naast een landschapsafbeelding en een andere naast een portretafbeelding:

Imagen 3

Titelblok

Titels gaan in afzonderlijke blokken zijn langwerpige blokken die over het algemeen de hele lijn beslaan.

Knoppenblok

Als we een knop willen plaatsen waarop mensen kunnen klikken en ze naar een ander deel van het web kunnen brengen of gewoon een venster met wat informatie (of een formulier)

Andere blokken

Het idee is vergelijkbaar. Als we hebben begrepen hoe de blokken werken, denk ik dat we duidelijk een ander type blok kunnen plaatsen dat, vergelijkbaar met de vorige, vierkant of rechthoekig past. Als we bijvoorbeeld een formulier in de inhoud willen opnemen. Hoewel dit meestal het minst gebruikelijk is, is het beter om te vragen voordat u nieuwe blokken gebruikt die niet van de hierboven genoemde typen zijn. Ik zal proberen deze lijst bij te werken wanneer er nieuwe blokideeën verschijnen die voor iedereen interessant kunnen zijn.

Tot slot is hier een voorbeeld van een sjabloon met alle hierboven genoemde soorten blokken:

Imagen 4

Blokken uitbreiden

Als we meer ruimte nodig hebben, moeten we gewoon meer pagina's toevoegen aan het blokontwerp onderaan. Het is niet nodig om alles in te vullen, maar het is belangrijk om geen lege openingen van boven naar beneden te laten tussen het midden van elk blok. Op deze manier kunnen we de pagina uitbreiden:

Imagen 5

Stap 3: de inhoud maken

Nu we de inhoud op blokken en blokken hebben ingedeeld, is het noodzakelijk om de inhoud te maken die in die blokken past. De stap 3 is uitwisselbaar met de stap 2. Met andere woorden, we kunnen de inhoud eerder maken en vervolgens de lay-out kennen, wetende de hoeveelheid inhoud die we willen opnemen. Het is onduidelijk om het op de een of andere manier te doen, maar we moeten ons ervan bewust zijn dat de inhoud precies in onze lay-out moet passen

We zullen het vorige voorbeeld volgen. In de 4-afbeelding zien we de volgende blokken:

  • 2 titelblokken
  • 4 tekstblokken
  • 1-videoblok
  • 2-beeldblokken
  • 1 knopblok
  • Totaal: 10 blokken

Daarom zullen we onze inhoud moeten aanpassen zodat deze perfect in deze blokken past zonder weg te gaan en dat de lettergrootte in alle blokken exact hetzelfde is. Daarvoor mogelijk de moeite waard maak eerst de inhoud en blokkeer deze vervolgens. Het hangt al veel van de persoon af.

Stap 4: De inhoud aanpassen met de blokken

Laten we aannemen dat het ontwerp al op het papier is getekend en dat alle inhoudsblokken zijn gemaakt. Nu is de laatste stap om het te combineren. Hiervoor zullen we verschillende tools gebruiken om alles te combineren en stuur het naar de webdesigner.

Videoblokken

Video's kunnen op twee manieren worden doorgegeven:

  1. In MP4-videoformaat via een tool als WeTransfer.
  2. VOORKEURSOPTIE: Uploaden naar het YouTube-kanaal van maart en YouTube-link doorgeven aan de video.

Als er slechts één video in de lay-out is, is er geen probleem. Maar als er meerdere video's zijn, moeten we deze op een of andere manier associëren met de lay-out die we op papier hebben gemaakt.

Bijvoorbeeld. Stel je voor dat er drie video's zijn. In de lay-out tekenen we een 1-nummer in de eerste video, een 2-nummer in de tweede video en een 3-nummer in de derde video. En dan zullen we bij het verzenden van alle documentatie zoiets als dit plaatsen:

  • Video 1: Video die zich bezighoudt met de uitdrukkingen van geweldloosheid met de titel: "De belangrijkste uitdrukkingen van geweldloosheid"
  • Video 2: Video over de kleuren van de vlag met de titel: «The flag of nonviolence»
  • Video 3: Video over de groep die gaat marcheren in Argentinië met als titel: “Het basisteam van Argentinië”

Dit maakt het gemakkelijk om te weten welke video overeenkomt met elke sectie.

Afbeeldingsblokken

In dit geval moeten alle afbeeldingen worden geüpload naar het IMGUR-platform: https://imgur.com/upload

En geef dan de links naar die afbeeldingen door. Het ideaal is om de afbeeldingen hetzelfde te plaatsen als de video's, gemarkeerd met een 1, een 2, een 3 enzovoort. Laten we ons bijvoorbeeld voorstellen dat we 4 afbeeldingen hebben in Zuid-Afrika. Alle vier hebben ze dezelfde naam: “sudafrica.jpg”. Welnu, we plaatsen opeenvolgende namen op het punt waar ze in de lay-out zullen zijn en we schilderen het nummer op het papier waarmee ze overeenkomen. Voorbeeld:

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

Knop-, titel- en tekstblokken

Ten slotte moeten deze blokken worden geschreven in een Word-document, of bij voorkeur in een Google-document.

De indeling is heel eenvoudig: in het Word-document plaatsen we het type blok (titel, knop of tekst) gevolgd door het nummer waarmee het in de lay-out zal overeenkomen.

Voorbeelden:

  • Titel 1:….
  • Titel 2:…
  • Tekst 1:…
  • Tekst 2:…
  • Knop 1:…
  • Knop 2:…

Vervolgens plaatste ik een voorbeelddocument met volledig willekeurige teksten, zodat kan worden gezien hoe dit zou worden gestructureerd, volgens het voorbeeld van de 4-afbeelding:

Dit is hoe de lay-out eruit moet zien als we de nummers hebben gezet die overeenkomen met elke sectie:

Imagen 6

4 stap: Alles verzenden

Zodra we alles hebben gedaan, moet u het gewoon verzenden naar de persoon die de lay-out zal leiden

Het zou gewoon duren

  1. Schetsen op papier met de lay-out
  2. De inhoud
    • Videolinks naar YouTube of WeTransfer
    • IMGUR links van de afbeeldingen
    • De link naar het document in Google Documenten of het Word-bestand

Notaris Belangrijke finale

Het ideaal zou uiteindelijk zijn om een ​​uitstekende afbeelding op te nemen die de titel 1-koptekst van de pagina vergezelt. Daarom moet Titel 1 altijd aan het begin verschijnen.

De koptekstafbeelding moet 960 x 540 pixels hebben. Deze afbeelding kan net als de rest van de afbeeldingen door IMGUR worden verzonden

Resultado-finale

En ten slotte zou met al deze informatie de pagina worden opgezet. In navolging van en om met dit voorbeeld te eindigen, zou de pagina met het uiteindelijke resultaat volgens alle parameters die we eerder hebben opgeworpen de volgende zijn:

Laatste pagina
Deze website gebruikt eigen cookies en cookies van derden voor een correcte werking en voor analytische doeleinden. Het bevat links naar websites van derden met een privacybeleid van derden die u wel of niet kunt accepteren wanneer u deze bezoekt. Door op de knop Accepteren te klikken, gaat u akkoord met het gebruik van deze technologieën en de verwerking van uw gegevens voor deze doeleinden.   
Privacy