Guide för innehållslayout

När vi vill montera ett innehåll på webben är ett av de stora problemen vi finner att förslagen jag får aldrig är väldigt genomtänkta för att vara tillfredsställande integrerade i webben. I allmänhet är problemet att utan adekvat struktur ser design och layout vanligtvis inte för bra ut, vilket ger ett otillfredsställande resultat.

Det är därför jag kommer att ge några väldigt grundläggande förklaringar om hur en innehållslayout ska beaktas under förutsättningar för att förenkla arbetet maximalt och att resultatet blir optimalt.

Syftet med denna guide är att vem som helst utan kunskap om programmering eller webbutveckling kan ge mig en kvalitetslayout och att jag inte behöver spendera för mycket tid på att försöka extrahera idén genom flera konversationer tills jag når en slutsats.

Steg 1: Mallen

För att ha en mall där vi kan "rita" vårt förslag, vad vi ska göra är att ta ett A4-papper och vi ska vika det EN TREDJEDEL på längden.

Steg 2: Innehållet blockeras

Låt oss föreställa oss att vi har flera typer av innehåll: video, bild, text. Varje innehåll är ett rektangulärt eller fyrkantigt block. Vi måste anpassa blocken från topp till botten av mallen efter val. Vi kommer att illustrera tre typer av innehåll.

Videoblock

Vi antar att videon i allmänhet kommer att vara en YouTube-video, vi representerar den i mallen enligt följande:

Bildblock

Det beror på om bilden är liggande eller porträtt, som vi kommer överens om.

Textblock

Samma som bildblocket, beroende på hur vi vill ha texten lägger vi ett eller annat block. Vi representerar det med parallella linjer.

Textblock kan vara textblock med medföljande stycken och till och med listor över textelement

Jag kommer att lägga två exempel: ett textblock bredvid en liggande bild och ett annat bredvid en porträttbild:

Titelblock

Titlar går i separata block är långsträckta block som vanligtvis upptar hela linjen.

Knappblock

Om vi ​​vill sätta en knapp för att folk ska klicka och ta dem till en annan del av webben eller bara ett fönster med lite information (eller ett formulär) visas

Andra block

Idén är liknande. Om vi ​​har förstått hur blocken fungerar, tror jag att vi tydligt skulle kunna sätta en annan typ av block som, liknande de tidigare, passar fyrkantigt eller rektangulärt. Till exempel, om vi ville lägga en form inkorporerad i innehållet. Även om detta vanligtvis är det minst vanliga är det bättre att fråga innan du använder nya block som inte är av ovan nämnda typer. Jag kommer att försöka uppdatera denna lista när det kommer ut nya blockidéer som kan vara intressanta för alla.

Slutligen är här ett exempel på en mall med alla typer av block som nämns ovan:

Utöka blocken

Om vi ​​behöver mer utrymme måste vi helt enkelt lägga till fler sidor i blockdesignen längst ner. Det är inte nödvändigt att fylla allt, men det är viktigt att inte lämna tomma luckor från topp till botten mellan mitten av varje block. På detta sätt kan vi utöka sidan:

Steg 3: Skapa innehållet

Nu när vi har utformat innehållet efter block och typer av block är det nödvändigt att skapa innehållet som kommer att gå i dessa block. 3-steget är utbytbart med 2-steget. Med andra ord kan vi skapa innehållet innan och sedan lägga upp hur mycket innehållet vi vill ha. Det är otydligt att göra det på ett eller annat sätt, men vi måste vara medvetna om att innehållet måste passa in i vår layout med precision

Vi följer det föregående exemplet. I 4-bilden kan vi se följande block:

• 2 Titelblock
• 4 textblock
• 1 videoblock
• 2 bildblock
• 1-knappblock
• Totalt: 10-block

Därför måste vi justera vårt innehåll så att det passar perfekt i dessa block utan att lämna och att teckensnittsstorleken är exakt densamma i alla. För det är möjligt värt det skapa innehållet först och blockera det sedan. Det beror redan mycket på personen.

Steg 4: Montering av innehållet med blocken

Låt oss anta att vi redan har designen ritade på papperet och alla innehållsblock skapade. Nu är det sista steget att kombinera det. För detta kommer vi att använda flera verktyg för att kombinera allt och skicka det till webbdesignern.

Videoklipp

Videor kan skickas på två sätt:

1. I MP4 videoformat genom ett verktyg som WeTransfer.
2. FÖREDRAGEN VAL: Ladda upp dem till YouTube-kanal i mars och vidarebefordra YouTube-länk till videon.

Om det bara finns en video i layouten kommer det inte att vara några problem. Men om det finns flera videoklipp måste vi associera dem på något sätt med den layout vi har gjort på papper.

Till exempel. Föreställ dig att det finns tre videor. I layouten ritar vi ett 1-nummer i den första videon, ett 2-nummer i den andra videon och ett 3-nummer i den tredje videon. Och när vi skickar all dokumentation kommer vi att sätta något liknande:

• Video 1: Video som handlar om fraserna om ickevåld med titeln: "The most important phrases of nonviolence"
• Video 2: Video som handlar om flaggans färger med titeln: «Ickevåldsflaggan»
• Video 3: Video som handlar om gruppen som ska marschera i Argentina med titeln: "Argentinas baslag"

Detta gör det enkelt att veta vilken video som motsvarar varje avsnitt.

Bildblock

I detta fall måste alla bilder laddas upp till IMGUR-plattformen: https://imgur.com/upload

Och skicka sedan länkarna till dessa bilder. Idealet är att sätta bilderna på samma sätt som videorna, markerade med en 1, en 2, en 3 och så vidare. Låt oss till exempel föreställa oss att vi har fyra bilder i farten i Sydafrika. Alla fyra har samma namn: "sudafrica.jpg". Tja, vi sätter på varandra följande namn till den punkt där de kommer att finnas i layouten och vi målar numret på papperet som de motsvarar. Exempel:

• Sudáfrica-1.jpg
• Sudáfrica-2.jpg
• Sudáfrica-3.jpg
• Sudáfrica-4.jpg

Knapp, titel och textblock

Slutligen bör dessa block skrivas i ett Word-dokument, eller helst i ett Google Docs.

Formatet är mycket enkelt: I Word-dokumentet sätter vi typen av block (titel, knapp eller text) följt av numret till vilket det kommer att motsvara layouten.

Exempel:

• Avdelning 1:….
• Avdelning 2: ...
• Text 1: ...
• Text 2: ...
• Knapp 1: ...
• Knapp 2: ...

Sedan lägger jag ett exempel på dokument med helt slumpmässiga texter så att det kan ses hur detta skulle struktureras, efter exemplet med 4-bilden:

Således bör layouten se ut när vi har lagt in siffrorna som motsvarar varje avsnitt:

4-steg: Skicka alla

När vi har gjort allt måste du helt enkelt skicka det till personen som ansvarar för layouten

Det skulle helt enkelt ta

1. Skisser på papper med layouten
2. Innehållet
   • Videolänkar till YouTube eller WeTransfer
   • IMGUR-länkar till bilderna
   • Länken till dokumentet i Google Dokument eller Word-filen

Notarius viktiga finalen

Idealet skulle äntligen vara att inkludera en enastående bild som är den som kommer att följa med titeln 1-sidhuvudet. Det är därför titel 1 alltid ska visas i början.

Huvudbilden måste ha en storlek på 960 x 540 pixlar. Denna bild kan skickas som resten av bilderna av IMGUR

Slutresultat

Och slutligen med all denna information skulle sidan skapas. Följande och slutför med detta exempel, sidan med det slutliga resultatet som följer alla parametrar som vi har tagit upp tidigare skulle vara detta:

Sista sidan