Οδηγός για τη διάταξη του περιεχομένου

Όταν θέλουμε να τοποθετήσουμε ένα περιεχόμενο στο διαδίκτυο, ένα από τα μεγάλα προβλήματα που διαπιστώνουμε είναι ότι οι προτάσεις που λαμβάνω δεν είναι ποτέ πολύ καλά μελετημένες ώστε να ενσωματωθούν ικανοποιητικά στον ιστό. Γενικά το πρόβλημα είναι ότι χωρίς επαρκή δομή το σχέδιο και η διάταξη δεν φαίνονται συνήθως πολύ καλά, δίνοντας ένα μη ικανοποιητικό αποτέλεσμα.

Αυτός είναι ο λόγος που θα δώσω κάποιες πολύ βασικές εξηγήσεις για το πώς μια διάταξη των περιεχομένων θα πρέπει να εξεταστεί υπό συνθήκες που θα επιτρέψουν την απλούστευση της εργασίας στο μέγιστο και ότι το αποτέλεσμα είναι βέλτιστο.

Ο στόχος αυτού του οδηγού είναι ότι οποιοσδήποτε δεν έχει γνώση του προγραμματισμού ή της ανάπτυξης ιστού μπορεί να μου δώσει μια ποιοτική διάταξη και ότι δεν χρειάζεται να ξοδεύω πολύ χρόνο προσπαθώντας να αποσπάσω την ιδέα μέσω πολλαπλών συνομιλιών μέχρι να καταλήξω σε ένα συμπέρασμα.

Βήμα 1: Το πρότυπο

Για να έχουμε ένα πρότυπο όπου μπορούμε να «ζωγραφίσουμε» την πρότασή μας, αυτό που θα κάνουμε είναι να πάρουμε ένα φύλλο χαρτιού Α4 και θα το διπλώσουμε κατά ΕΝΑ ΤΡΙΤΟ κατά μήκος.

Βήμα 2: Τα μπλοκ περιεχομένου

Ας φανταστούμε ότι έχουμε διάφορους τύπους περιεχομένου: βίντεο, εικόνας, κειμένου. Κάθε περιεχόμενο είναι ορθογώνιο ή τετράγωνο. Πρέπει να τοποθετήσουμε τα μπλοκ από την κορυφή προς τα κάτω του προτύπου κατά την επιλογή μας. Θα παρουσιάσουμε τρεις τύπους περιεχομένου.

Βίντεο μπλοκ

Υποθέτουμε ότι το βίντεο θα είναι γενικά ένα βίντεο στο YouTube, το αντιπροσωπεύουμε στο πρότυπο ως εξής:

Μπλοκ εικόνας

Εξαρτάται από το αν η εικόνα είναι τοπίο ή πορτραίτο, όπως θα συμφωνήσουμε.

Κλείσιμο κειμένου

Το ίδιο με το μπλοκ εικόνας, ανάλογα με το πώς θέλουμε το κείμενο να βάλουμε ένα μπλοκ ή άλλο. Την εκπροσωπούμε με παράλληλες γραμμές.

Τα μπλοκ κειμένων μπορούν να είναι μπλοκ κειμένου με παρεκκλίσεις και ακόμη και λίστες με στοιχεία κειμένου

Θα δώσω δύο παραδείγματα: ένα μπλοκ κειμένου δίπλα σε μια εικόνα τοπίου και ένα άλλο δίπλα σε μια εικόνα πορτρέτου:

Τίτλος μπλοκ

Οι τίτλοι πηγαίνουν σε ξεχωριστά μπλοκ είναι επιμήκεις μπλοκ που καταλαμβάνουν γενικά ολόκληρη τη γραμμή.

Πλήκτρο κουμπιού

Αν θέλουμε να βάλουμε ένα κουμπί για τους ανθρώπους να κάνουν κλικ και να τους μεταφέρουν σε ένα άλλο μέρος του ιστού ή εμφανίζεται μόνο ένα παράθυρο με κάποιες πληροφορίες (ή μια φόρμα)

Άλλα μπλοκ

Η ιδέα είναι παρόμοια. Αν καταλάβουμε πώς λειτουργούν τα μπλοκ, νομίζω ότι θα μπορούσαμε να βάλουμε με σαφήνεια έναν άλλο τύπο μπλοκ που, όπως και τα προηγούμενα, ταιριάζει τετράγωνο ή ορθογώνιο. Για παράδειγμα, αν θέλαμε να βάλουμε ένα έντυπο ενσωματωμένο στο περιεχόμενο. Αν και αυτό είναι συνήθως το λιγότερο κοινό, είναι καλύτερο να ρωτήσετε πριν χρησιμοποιήσετε νέα μπλοκ που δεν ανήκουν στους τύπους που αναφέρονται παραπάνω. Θα προσπαθήσω να ενημερώσω αυτήν τη λίστα, καθώς προκύπτουν νέες ιδέες μπλοκ που μπορεί να ενδιαφέρουν όλους.

Τέλος, εδώ είναι ένα παράδειγμα ενός προτύπου με όλους τους τύπους μπλοκ που αναφέρονται παραπάνω:

Επέκταση των μπλοκ

Αν χρειαζόμαστε περισσότερο χώρο, απλά πρέπει να προσθέσουμε περισσότερες σελίδες στο σχέδιο μπλοκ στο κάτω μέρος. Δεν είναι απαραίτητο να γεμίζετε τα πάντα κάτω, αλλά είναι σημαντικό να μην αφήσετε κενά κενά από πάνω προς τα κάτω μεταξύ του μέσου κάθε μπλοκ. Με αυτόν τον τρόπο μπορούμε να επεκτείνουμε τη σελίδα:

Βήμα 3: Δημιουργία του περιεχομένου

Τώρα που έχουμε τη διάταξη του περιεχομένου ανά μπλοκ και τύπους μπλοκ είναι απαραίτητο να δημιουργήσουμε το περιεχόμενο που θα πάει σε αυτά τα μπλοκ. Το βήμα 3 είναι εναλλάξιμο με το βήμα 2. Με άλλα λόγια, μπορούμε να δημιουργήσουμε το περιεχόμενο πριν, και στη συνέχεια το layout γνωρίζοντας το ποσό του περιεχομένου που θέλουμε να ενσωματώσουμε. Είναι αδιαμφισβήτητο να το κάνουμε με τον ένα ή τον άλλο τρόπο, αλλά πρέπει να γνωρίζουμε ότι το περιεχόμενο πρέπει να ταιριάζει με τη διάθεσή μας με ακρίβεια

Θα ακολουθήσουμε το προηγούμενο παράδειγμα. Στην εικόνα 4 βλέπουμε τα παρακάτω μπλοκ:

• 2 Blocks τίτλου
• Κλειδιά κειμένου 4
• 1 Video Block
• 2 Image Blocks
• Πλήκτρο κουμπιού 1
• Σύνολο: Blok 10

Επομένως, θα πρέπει να προσαρμόσουμε το περιεχόμενό μας έτσι ώστε να ταιριάζει τέλεια σε αυτά τα μπλοκ χωρίς να φεύγει και ότι το μέγεθος της γραμματοσειράς είναι ακριβώς το ίδιο σε όλα αυτά. Γι 'αυτό δυνατός αξίζει τον κόπο να δημιουργήσετε πρώτα το περιεχόμενο και στη συνέχεια να το αποκλείσετε. Εξαρτάται ήδη ήδη πολύ από το άτομο.

Βήμα 4: Τοποθέτηση του περιεχομένου με τα μπλοκ

Ας υποθέσουμε ότι έχουμε ήδη σχεδιάσει πάνω στο χαρτί και όλα τα μπλοκ περιεχομένου που δημιουργήθηκαν. Τώρα το τελευταίο βήμα είναι να το συνδυάσουμε. Γι 'αυτό θα χρησιμοποιήσουμε διάφορα εργαλεία για να συνδυάσουμε τα πάντα και να το στείλετε στον σχεδιαστή ιστού.

Βίντεο μπλοκ

Τα βίντεο μπορούν να περάσουν με δύο τρόπους:

1. Σε μορφή βίντεο MP4 μέσω ενός εργαλείου όπως WeTransfer.
2. ΠΡΟΤΙΜΩΜΕΝΗ ΠΡΟΤΑΣΗ: Μεταφορτώστε τις στο κανάλι Μαρτίου του YouTube και μεταβείτε στο σύνδεσμο YouTube στο βίντεο.

Σε περίπτωση που υπάρχει μόνο ένα βίντεο στη διάταξη, δεν θα υπάρχει πρόβλημα. Αλλά αν υπάρχουν πολλά βίντεο, θα πρέπει να τα συσχετίσουμε κάπως με τη διάταξη που έχουμε κάνει στο χαρτί.

Για παράδειγμα. Φανταστείτε ότι υπάρχουν τρία βίντεο. Στη διάταξη θα σχεδιάσουμε έναν αριθμό 1 στο πρώτο βίντεο, έναν αριθμό 2 στο δεύτερο βίντεο και έναν αριθμό 3 στο τρίτο βίντεο. Και τότε, όταν στέλνουμε όλη την τεκμηρίωση, θα βάλουμε κάτι σαν αυτό:

• Βίντεο 1: Βίντεο που ασχολείται με τις φράσεις της μη βίας με τίτλο: "Οι πιο σημαντικές φράσεις της μη βίας"
• Βίντεο 2: Βίντεο που πραγματεύεται τα χρώματα της σημαίας με τίτλο: «Η σημαία της μη βίας»
• Βίντεο 3: Βίντεο που ασχολείται με την ομάδα που πρόκειται να κάνει πορεία στην Αργεντινή με τίτλο: “The base team of Argentina”

Με αυτόν τον τρόπο θα είναι εύκολο να γνωρίζετε ποιο βίντεο αντιστοιχεί σε κάθε ενότητα.

Εικόνα μπλοκ

Σε αυτή την περίπτωση, όλες οι εικόνες πρέπει να μεταφορτωθούν στην πλατφόρμα IMGUR: https://imgur.com/upload

Και μετά περάστε τους συνδέσμους σε αυτές τις εικόνες. Το ιδανικό είναι να βάζετε τις εικόνες ίδιες με τα βίντεο, σημειωμένες με 1, 2, 3 και ούτω καθεξής. Για παράδειγμα, ας φανταστούμε ότι έχουμε 4 εικόνες εν κινήσει στη Νότια Αφρική. Και τα τέσσερα έχουν το ίδιο όνομα: “sudafrica.jpg”. Λοιπόν, βάζουμε διαδοχικά ονόματα στο σημείο που θα βρίσκονται στη διάταξη και ζωγραφίζουμε τον αριθμό στο χαρτί στο οποίο αντιστοιχούν. Παράδειγμα:

• Νότια Αφρική-1.jpg
• Νότια Αφρική-2.jpg
• Νότια Αφρική-3.jpg
• Νότια Αφρική-4.jpg

Κουμπί, μπλοκ τίτλου και κειμένου

Τέλος, αυτά τα μπλοκ θα πρέπει να είναι γραμμένα σε ένα έγγραφο του Word ή σε ένα Έγγραφο Google κατά προτίμηση.

Η μορφή είναι πολύ απλή: Στο έγγραφο του Word βάζουμε τον τύπο του μπλοκ (τίτλο, κουμπιά ή κείμενο) που ακολουθείται από τον αριθμό στον οποίο θα αντιστοιχεί στη διάταξη.

Παραδείγματα:

• Τίτλος 1: ....
• Τίτλος 2: ...
• Κείμενο 1: ...
• Κείμενο 2: ...
• Κουμπί 1: ...
• Κουμπί 2: ...

Στη συνέχεια, έβαλα ένα παραδειγματικό έγγραφο με εντελώς τυχαία κείμενα, έτσι ώστε να μπορεί να δει πώς θα δομηθεί αυτό, ακολουθώντας το παράδειγμα της εικόνας 4:

Έτσι πρέπει να φαίνεται η διάταξη, αφού βάλουμε τους αριθμούς που αντιστοιχούν σε κάθε ενότητα:

4 βήμα: Αποστολή όλων

Αφού κάνουμε τα πάντα, απλά θα πρέπει να τα στείλετε στο άτομο που θα είναι υπεύθυνο για τη διάταξη

Απλώς θα πάρει

1. Σκίτσα σε χαρτί με τη διάταξη
2. Τα περιεχόμενα
   • Σύνδεσμοι βίντεο σε YouTube ή WeTransfer
   • IMGUR συνδέσεις των εικόνων
   • Ο σύνδεσμος στο έγγραφο στα Έγγραφα Google ή στο αρχείο του Word

Συμβολαιογράφος Σημαντικό τελικό

Το ιδανικό θα ήταν τελικά να συμπεριλάβει μια εξαιρετική εικόνα που θα συνοδεύει την κεφαλίδα του τίτλου 1 της σελίδας. Αυτός είναι ο λόγος για τον οποίο ο Τίτλος 1 πρέπει να εμφανίζεται πάντα στην αρχή.

Η εικόνα κεφαλίδας πρέπει να έχει μέγεθος 960 x 540 εικονοστοιχεία. Αυτή η εικόνα μπορεί να αποσταλεί όπως και οι υπόλοιπες εικόνες, από το IMGUR

Τελικό αποτέλεσμα

Και τελικά με όλες αυτές τις πληροφορίες, θα δημιουργηθεί η σελίδα. Ακολουθώντας και τελειώνοντας με αυτό το παράδειγμα, η σελίδα με το τελικό αποτέλεσμα ακολουθώντας όλες τις παραμέτρους που έχουμε θέσει στο παρελθόν θα ήταν η εξής:

Τελική σελίδα