دليل لتخطيط المحتوى

عندما نرغب في تحميل محتوى على الويب ، فإن إحدى المشكلات الكبيرة التي نجدها هي أن المقترحات التي أتلقاها لا يتم إدراجه جيدًا على الإطلاق على أنها مدمجة بشكل مرض في الويب. المشكلة بشكل عام هي أنه بدون وجود بنية مناسبة ، فإن التصميم والتخطيط لا يبدوان جيدًا عادة ، مما يعطي نتيجة غير مرضية.

هذا هو السبب في أنني سأقدم بعض التفسيرات الأساسية حول كيفية النظر في تصميم المحتويات في ظروف لتبسيط العمل إلى أقصى حد وأن النتيجة هي الأمثل.

الهدف من هذا الدليل هو أن أي شخص ليس لديه معرفة بالبرمجة أو تطوير الويب يمكنه أن يقدم لي تخطيطًا جيدًا وأنني لا أضطر إلى قضاء الكثير من الوقت في محاولة استخراج الفكرة من خلال محادثات متعددة حتى الوصول إلى نتيجة.

الخطوة 1: القالب

من أجل الحصول على نموذج حيث يمكننا "رسم" اقتراحنا ، ما سنفعله هو أخذ ورقة مقاس A4 وسنقوم بطيها بمقدار ثالث واحد بالطول.

الخطوة 2: كتل المحتوى

دعونا نتخيل أن لدينا عدة أنواع من المحتوى: الفيديو ، الصورة ، النص. كل محتوى هو كتلة مستطيلة أو مربعة. يجب أن نلائم القطع من أعلى إلى أسفل القالب حسب اختيارنا. سوف نوضح ثلاثة أنواع من المحتوى.

كتلة الفيديو

سنفترض أن الفيديو سيكون عمومًا مقطع فيديو على YouTube ، فنحن نمثله في القالب مثل هذا:

كتلة الصورة

يعتمد الأمر على ما إذا كانت الصورة عموديًا أم عموديًا ، كما سنوافق.

كتلة النص

مثل كتلة الصورة ، وهذا يتوقف على الطريقة التي نريد النص الذي سنضع كتلة أو آخر. نحن نمثلها بخطوط متوازية.

يمكن أن تكون كتل النص كتل نصية مع فقرات مضمنة وحتى قوائم العناصر النصية

سأضع مثالين: كتلة النص بجانب صورة أفقي والأخرى بجانب صورة عمودي:

كتلة العنوان

الألقاب تذهب في كتل منفصلة هي كتل ممدودة التي تشغل عموما السطر بأكمله.

كتلة زر

إذا كنا نرغب في وضع زر للناس للنقر ونقلهم إلى جزء آخر من الويب أو مجرد نافذة تحتوي على بعض المعلومات (أو نموذج)

كتل أخرى

الفكرة متشابهة. إذا فهمنا كيف تعمل الكتل ، فأعتقد أنه يمكننا بوضوح وضع نوع آخر من القطع ، على غرار تلك السابقة ، يناسب مربع أو مستطيل. على سبيل المثال ، إذا أردنا وضع نموذج مدمج في المحتوى. على الرغم من أن هذا عادة ما يكون الأقل شيوعًا ، فمن الأفضل أن تسأل قبل استخدام كتل جديدة ليست من الأنواع المذكورة أعلاه. سأحاول تحديث هذه القائمة حيث يتم طرح أفكار جديدة قد تهم الجميع.

أخيرًا ، إليك مثال لقالب به جميع أنواع الكتل المذكورة أعلاه:

توسيع الكتل

إذا كنا بحاجة إلى مساحة أكبر ، فعلينا ببساطة إضافة المزيد من الصفحات إلى تصميم الكتلة في الأسفل. ليس من الضروري ملء كل شيء لأسفل ، ولكن من المهم عدم ترك فجوات فارغة من أعلى إلى أسفل بين منتصف كل كتلة. بهذه الطريقة يمكننا توسيع الصفحة:

الخطوة 3: إنشاء المحتوى

والآن بعد أن قمنا بتخطيط المحتوى حسب الكتل وأنواع الكتل ، من الضروري إنشاء المحتوى الذي سيتم تضمينه في هذه الكتل. الخطوة 3 قابلة للتبديل مع الخطوة 2. بمعنى آخر ، يمكننا إنشاء المحتوى من قبل ، ومن ثم تخطيط معرفة مقدار المحتوى الذي نريد تضمينه. من غير الواضح القيام بذلك بطريقة أو بأخرى ، ولكن يجب أن ندرك أن المحتوى يجب أن يتلاءم مع تخطيطنا بدقة

سوف نتبع المثال السابق. في صورة 4 ، يمكننا رؤية الكتل التالية:

• كتل عناوين 2
• كتل النص 4
• 1 Video Block
• كتل صورة 2
• 1 زر كتلة
• الإجمالي: كتل 10

وبالتالي ، سيتعين علينا ضبط المحتوى الخاص بنا بحيث يناسب تمامًا هذه الكتل دون أن يترك وأن حجم الخط هو نفسه تمامًا في كل هذه العناصر. لذلك ممكن يستحق كل هذا العناء قم بإنشاء المحتوى أولاً ثم قم بحظره. ذلك يعتمد بالفعل كثيرا على الشخص.

الخطوة 4: تركيب المحتوى مع الكتل

لنفترض أن لدينا بالفعل تصميم مرسوم على الورق وجميع كتل المحتوى التي تم إنشاؤها. الآن الخطوة الأخيرة هي الجمع بين ذلك. لهذا سوف نستخدم عدة أدوات للجمع بين كل شيء و أرسلها إلى مصمم الويب.

كتل الفيديو

يمكن تمرير الفيديو بطريقتين:

1. في تنسيق الفيديو MP4 من خلال أداة مثل وي ترانسفير.
2. الخيار المفضل: تحميلها على قناة YouTube March ونقل رابط YouTube إلى الفيديو.

في حالة وجود فيديو واحد فقط في التصميم ، لن تكون هناك مشكلة. ولكن إذا كان هناك العديد من مقاطع الفيديو ، فسيتعين علينا ربطها بطريقة أو بأخرى بالتخطيط الذي قمنا به على الورق.

على سبيل المثال تخيل أن هناك ثلاثة مقاطع فيديو. في التصميم ، سنرسم رقم 1 في الفيديو الأول ، ورقم 2 في الفيديو الثاني ورقم 3 في الفيديو الثالث. ثم عند إرسال جميع الوثائق ، سنضع شيئًا مثل هذا:

• فيديو 1: فيديو يتناول عبارات اللاعنف بعنوان: "أهم عبارات اللاعنف"
• فيديو 2: فيديو يتناول ألوان العلم بعنوان: «علم اللاعنف»
• الفيديو 3: فيديو يتعامل مع المجموعة التي ستنطلق في الأرجنتين بعنوان: "فريق الأرجنتين الأساسي".

هذا سيجعل من السهل معرفة الفيديو الذي يتوافق مع كل قسم.

كتل الصورة

في هذه الحالة ، يجب تحميل جميع الصور على منصة IMGUR: https://imgur.com/upload

ثم قم بتمرير الروابط إلى تلك الصور. الوضع المثالي هو وضع الصور مثل مقاطع الفيديو ، مع تمييزها بـ 1 ، و 2 ، و 3 ، وما إلى ذلك. على سبيل المثال ، دعنا نتخيل أن لدينا 4 صور أثناء الطيران في جنوب إفريقيا. الأربعة جميعهم لديهم نفس الاسم: "sudafrica.jpg". حسنًا ، نضع الأسماء المتتالية إلى النقطة التي ستكون فيها في التخطيط ونرسم الرقم على الورقة التي تتوافق معها. مثال:

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

الزر والعنوان وكتل النص

أخيرًا ، يجب كتابة هذه الكتل في مستند Word أو في محرّر مستندات Google بشكل مفضل.

التنسيق بسيط للغاية: في مستند Word ، نضع نوع Block (العنوان أو الزر أو النص) متبوعًا بالرقم الذي سيتوافق معه في التخطيط.

الأمثلة على ذلك:

• العنوان 1: ....
• العنوان 2: ...
• النص 1: ...
• النص 2: ...
• الزر 1: ...
• الزر 2: ...

بعد ذلك ، أضع مثالاً على مستند بنصوص عشوائية تمامًا حتى يمكن رؤية كيفية تنظيم ذلك ، على غرار مثال 4:

هذه هي الطريقة التي يجب أن يظهر بها التخطيط بمجرد وضع الأرقام التي تتوافق مع كل قسم:

خطوة 4: إرسال الكل

بمجرد قيامنا بكل شيء ، سيتعين عليك ببساطة إرساله إلى الشخص المسؤول عن التصميم

سوف يستغرق ببساطة

1. اسكتشات على الورق مع التخطيط
2. المحتويات
   • روابط الفيديو إلى يوتيوب أو WeTransfer
   • روابط IMGUR من الصور
   • الرابط إلى المستند في محرّر مستندات Google أو ملف Word

كاتب العدل المهم النهائي

سيكون المثالية أخيرًا تضمين صورة رائعة هي التي سترافق رأس العنوان 1 للصفحة. هذا هو السبب في أن العنوان 1 يجب أن يظهر دائمًا في البداية.

يجب أن يكون حجم صورة الرأس 960 x 540 بكسل. يمكن إرسال هذه الصورة مثل بقية الصور بواسطة IMGUR

النتيجة النهائية

وأخيرا مع كل هذه المعلومات ، سيتم إعداد الصفحة. بعد الانتهاء من هذا المثال ، ستكون الصفحة ذات النتيجة النهائية التي تتبع جميع المعلمات التي أثارناها سابقًا كما يلي:

الصفحة الأخيرة