المحتوى أولا النماذج الأولية

نشرت: 2022-03-10
ملخص سريع المحتوى هو السلعة الأساسية للاقتصاد الرقمي. إنه الذهب الذي نصممه في تجربة فاخرة ، الماس الذي نغطيه في برامج الولاء والمبيعات. ومع ذلك ، بصفتنا مصممين ، فإننا غالبًا ما نقوم بتوصيله بعد الحقيقة. نحن نضع نموذجًا أوليًا لتفاعلنا وتصميمنا المرئي على شكل استنفاد ، لكننا نقبل أنه يمكن إسقاط "الكلمات الحقيقية" في وقت لاحق. هناك طريقة افضل. تعمل السلع الرقمية التي نبتكرها أكثر فأكثر ضمن نظام ديناميكي من المحتوى والوظائف والرمز والهدف. تنجرف منتجاتنا وخدماتنا وتنتشر في مواقع الويب الشريكة وموجزات الوسائط الاجتماعية وعدد لا يحصى من المجمعات الإلكترونية ، وكلها تسعى إلى تشكيل سلوك الزائر وفهمه. الأنظمة مبنية على أنظمة ، وفي وقت قصير ، قمنا بتجميع مجموعة ضخمة من شأنها أن تثير الذهول.

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

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

مزيد من القراءة على SmashingMag:

  • تحسين التصميم الخاص بك لاختبار النموذج الأولي السريع
  • اختيار أداة النمذجة الصحيحة
  • نماذج المحتوى في تصميم الويب سريع الاستجابة
  • إحياء النماذج الأولية لواجهة المستخدم

على الرغم من أننا كنا جيدًا في اكتشاف الأنظمة البسيطة في الماضي (فكر في مواقع الويب الثابتة والشبكات الداخلية) ، فقد تبين أن الأنظمة الديناميكية الكبيرة أكثر تعقيدًا إلى حد ما - وأقل قابلية للتنبؤ بها. مع نمو الأنظمة ، تصبح أكثر تعقيدًا بشكل كبير ، ومع زيادة تعقيدها ، يصبح سلوكها غير خطي بشكل متزايد ويصعب علينا ، نحن القردة الفقيرة ، توقعه. في الأنظمة الكبيرة ، يمكن لأخطاء التقريب عند العلامة العشرية الألف أن تغير النتائج جذريًا (ميتشل 33). مع اقتراب الإنترنت من تريليون عقدة ، هذا هو العالم الذي نصمم من أجله جميعًا الآن.

المزيد بعد القفز! أكمل القراءة أدناه ↓

ومع ذلك ، يمكن لتلك الأنظمة البسيطة التي اعتدنا عليها أن توفر مفتاحًا للتصميم لمساحات أكثر تعقيدًا. كما قال مُنظِّر الأنظمة جون غال ، "إن النظام المعقد الذي يعمل دائمًا ما يكون قد تطور من نظام بسيط يعمل". في مجال التصميم الرقمي ، إذا تأكدنا من أن أبسط أنظمتنا الديناميكية للمحتوى والبنية وصنع المعنى تعمل على النحو المنشود على المستوى التأسيسي ، فيمكننا حينئذٍ إرساء الأساس لأنظمة أكبر وأكثر تعقيدًا تعمل أيضًا على النحو المنشود.

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

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

نموذج الصندوق الأبيض للمحتوى

يُطلق على إحدى الأدوات التي يستخدمها باحثو الأنظمة لفهم سلوك الأنظمة الديناميكية نموذج "الصندوق الأبيض". كتب عالم النظم جيرالد واينبرغ أنه في حين أن سلوك نموذج الصندوق الأسود "مخفي تمامًا" ، فإن سلوك نموذج الصندوق الأبيض "مكشوف تمامًا". بالنسبة للأنظمة المعقدة ، هذه الشفافية مهمة: يلاحظ Weinberg أيضًا أنه "حتى أبسط الأنظمة تحتوي أحيانًا على مفاجآت لمنشئوها" (172).

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

من أجل إنشاء مربع أبيض للمحتوى الرقمي ، نحتاج إلى حساب ثلاثة أشياء:

  • المحتوى نفسه ، المكون من حزم محتوى بمستويات مختلفة من الدقة ، اعتمادًا على نوع المحتوى والغرض منه ؛
  • الهيكل ، سواء على مستوى الصفحة أو الشاشة المحلية وعلى مستوى موقع الويب أو التطبيق العالمي ؛
  • مشاركة المستخدم في السياق والموقف (سطح المكتب أو الجهاز اللوحي أو الهاتف) حيث سيتم في النهاية استهلاك المحتوى الخاص بنا.

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

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

إطار عمل النماذج الأولية للمحتوى

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

بالنسبة لهذا الإطار ، قمت بتجميع Excel و Jekyll و ZURB Foundation و Browsersync وربطتها جميعًا مع برنامج Gulp النصي. لقد اخترت هذه التطبيقات والأطر الخاصة لأنها متاحة على نطاق واسع ، ومفتوحة المصدر (في الغالب) ، ولديها مجتمعات دعم نشطة ولديها وثائق ممتازة.

إطار عمل النماذج الأولية للمحتوى
إطار عمل النماذج الأولية للمحتوى (عرض النسخة الكبيرة)

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

اكسل

يتم استخدام برنامج Excel - أو أي برنامج جداول بيانات يتم حفظه بتنسيق XLSX - لإنشاء محتوى منظم وأنظمة التصنيف وتحريرها. في كل مرة تحفظ فيها المستند ، يتم تصدير كل حزمة في مجموعة المحتوى (ممثلة بصف في جدول البيانات) كصفحة Jekyll ومستند JSON. يتيح لك ذلك تنفيذ كل من الصفحة والعمليات الشاملة على المحتوى الخاص بك ونشر التغييرات في المحتوى على موقع الويب بأكمله باستخدام أمر "حفظ" واحد.

جيكل

Jekyll هو منشئ مواقع ويب ثابت مفتوح المصدر ويستخدم لتوضيح الهيكل الديناميكي بين حزم المحتوى والصفحات والفئات. يمثل Jekyll المحتوى الذي تحفظه في جدول البيانات كمتغيرات ويسمح لك بإجراء عمليات على تلك المتغيرات لإنشاء هيكل. يوفر Jekyll أيضًا علامات "if / then" لتطبيق المنطق الشرطي وحلقات for للتنقل عبر مجموعات المحتوى وتصفيتها.

المؤسسة

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

Browsersync

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

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

إذا كنت تشعر بالذعر لأن هذا يتضمن رمز ...

لا داعي للذعر. هذه الأدوات صديقة للمصممين ولديها مجتمعات دعم ممتازة. لست بحاجة إلى أن تكون مطورًا للواجهة الأمامية لتجعل أفكارك تنبض بالحياة. أنت بحاجة إلى معرفة أساسيات HTML و CSS. هذه اللغات ليست صعبة - ولن يؤدي تعلمها إلى تدمير قدرتك على القيام بأعمال التصميم الجيدة. على حد تعبير أسطورة تصميم النوع إريك سبيكرمان ، "عليك أن تتعلم إن لم تكن تكوّن على الأقل لتقدير الكود ، لفهم الكود. لأن الكود هو ما كانت عليه الصواميل والمسامير قبل مائة عام ". أفضل طريقة للبدء هي الغوص فيها.

مثال على النموذج الأولي للمحتوى: مركز مجتمع جرين ليك

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

هذا هو السيناريو. يقدم مركز Green Lake Community Center دروسًا وبرامج وفعاليات لأفراد المجتمع في حي Green Lake. لسوء الحظ ، تتوفر جميع معلومات الفصل والبرنامج والأحداث الحالية عبر الإنترنت فقط عبر ملف PDF ، والذي لا يتوفر بدوره إلا من موقع الويب المحسن لسطح المكتب ذي العرض الثابت للمركز. ها:

قوائم دورات مركز جرين ليك المجتمعي
قوائم الدورات التدريبية في Green Lake Community Center (عرض النسخة الكبيرة)

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

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

استكشافات كراسة الرسم
استكشافات كراسة الرسم (عرض النسخة الكبيرة)

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

التقاط المحتوى

في هذا المثال ، يمكنك أن ترى كيف تتم كتابة المحتوى المهيكل الذي ألتقطه في جدول بيانات إطار عمل النماذج الأولية للمحتوى تلقائيًا إلى قالب صفحة في كل مرة أحفظ فيها ملف _data . لقد استخدمت هنا صحيفة "الكتالوج" لهيكلة المحتوى. تم تضمين متغيرات "العنوان" و "الوصف" و "الفئة" و "العلامات" بالفعل في قالب الصفحة ، لذلك يتم تحديث هذه القيم على الفور. يمكنك إضافة العديد من الأعمدة الأخرى إلى صف المحتوى كما تريد - فقط تأكد من تضمين المتغير المقابل في القالب (المزيد حول هذا أدناه).

يتم أيضًا تضمين صحائف "الدليل" و "الخلاصة" في مجموعة أدوات البدء وتتضمن فئات (أعمدة) مختلفة لأنواع المحتوى الخاصة بها. تصدر كل ورقة المحتوى إلى مجلدها الخاص (في هذه الحالات ، "الكتالوج" و "الدليل" و "الخلاصة") وإلى ملف JSON الخاص بها. يمكنك إضافة العديد من الأوراق الأخرى حسب حاجتك - فقط تأكد من تحديث ملف تكوين Jekyll الخاص بك حتى يعرف كيفية سحبها (راجع وثائق البرنامج المساعد "Jekyll Data Pages Generator" للحصول على التفاصيل الكاملة).

أضف المزيد من حزم المحتوى

عندما أقوم بإضافة حزم محتوى (صفوف في جدول البيانات) ، تتم إضافة صفحات جديدة تلقائيًا إلى النموذج الأولي. يمثل كل صف صفحة واحدة ، ويمثل كل عمود في هذا الصف متغيرًا يملأه Jekyll في القالب أثناء قيامه ببناء صفحة. في هذا المثال ، يكون المحتوى من كتالوج "Community Center" موحدًا إلى حد ما ، ولكن إذا اختلفت أوصاف العنصر بشكل كبير في الطول ، فيمكنك بسهولة رؤية (وتجربة) كيف سيؤثر هذا التباين على تخطيط الصفحة. ربما قد تقرر بعد ذلك تقسيم المحتوى بشكل مختلف أو إضافة عناصر جديدة ، مثل الملخصات أو الأجزاء الثابتة.

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

أضف البنية والتسلسل الهرمي باستخدام HTML

بمجرد أن أكون سعيدًا بالمحتوى المطبق ، سأبدأ في تغليف هذا المحتوى بالترميز بحيث يكون هيكله منطقيًا للمستخدمين. تعامل مع المتغيرات هنا مثل النص ، وقم بترميزها كما تفعل مع ترميز النص في ملف HTML "ثابت". يجب أن تبدو النتائج هنا متوقعة جدًا (هذا شيء جيد).

سيأخذ نظام قوالب Jekyll قوالب الصفحة التي قمت بإنشائها ويلتفها بقالب عالمي يحتوي على العنوان وأيقونة التنقل. هذا ما تعنيه كلمة "layout: default": نحن نطلق على القالب "الافتراضي" غلاف هذا القالب. يمكنك إجراء تداخل للقوالب بالعمق الذي تريده ، على الرغم من أن أكثر من مستوى أو مستويين من القوالب عادةً ما تكون غير ضرورية. لاستيعاب العناصر المتكررة ، مثل قوائم الصفحات والروابط العامة ، يمكنك أيضًا استخدام "يشتمل" ، والتي تُدخل جزءًا معينًا من التعليمات البرمجية في النموذج عند عرض موقع الويب. تحقق من وثائق Jekyll الرسمية لمزيد من المعلومات حول القوالب وتضمينها.

أضف المنطق مع علامات توصيف Jekyll

يتيح لك Jekyll إضافة منطق أساسي عن طريق تضمين العلامات الأساسية الخاصة بنظام القوالب الخاص به. هنا ، أستخدم علامة for للتنقل عبر قائمة فئات Green Lake Community Center (التي تم إنشاؤها عندما أضفت حزم المحتوى المتعددة أعلاه) ، وأعرض كل فئة مركز مجتمعي في القائمة كرابط:

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

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

أضف أسلوبًا وسلوكًا مستجيبًا باستخدام CSS الخاص بالمؤسسة

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

تسهّل المؤسسة أيضًا تضمين السلوك المستجيب للجوّال أولاً واستخدام العشرات من التخطيطات مسبقة الصنع والحاوية ومكونات الوسائط. نظرًا لأن كل شيء في CSS ، يمكنك تعديل كل شيء وضبطه حسب ذوقك الخاص. بالنسبة لهذه الأمثلة ، قمت بتعديل لوحة الألوان الأساسية للمؤسسة إلى نمط "إطار سلكي أحادي اللون" ، ولكن يمكنك تكييف الأساس مع أي نمط تريده. تعرف على المزيد حول استخدام Foundation من خلال تصفح الوثائق أو البرامج التعليمية أو عن طريق أخذ فصل دراسي (الفصول ممتازة بالمناسبة).

احصل على التعليقات مبكرًا وقم بمراجعتها أثناء التنقل

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

إصدارات بديلة للشاشة الرئيسية المتنقلة لـ Green Lake Community Center
إصدارات بديلة من الشاشة الرئيسية للجوال في Green Lake Community Center (عرض النسخة الكبيرة)

لإنهاء الإصدار الأول من النموذج الأولي لمركز Green Lake Community Center ، قمت بإنشاء ثلاثة أشكال مختلفة من الصفحة الرئيسية للجوال. في هذه الحالة ، كل ما كنت بحاجة إلى القيام به هو إعادة ترتيب العناصر في قالب الصفحة الرئيسية وتبديل مصادر البيانات لعنصري التنقل (أي أزرار العرض الكامل ومربعات الصور).

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

تتيح لك هذه المرونة اختبار التسلسلات الهرمية للشاشات المختلفة ومعالجات المحتوى بسهولة مع المستخدمين - وتتيح لك استخدام محتوى حقيقي في تلك الاختبارات ، والمحتوى الذي يمكن لجمهورك تجربته (والتفاعل معه) بشكل مباشر. نظرًا لأن الشكل النهائي للنموذج الأولي هو HTML و CSS وجافا سكريبت ، يمكنك جمع ملاحظات المستخدم مع أي أداة اختبار تناسبك أكثر (أحب UserTesting و Lookback).

يعني تنسيق النموذج الأولي لـ HTML و CSS و JavaScript أيضًا أن عملك سيبلغ بسهولة أكبر الجهود المتوازية واللاحقة. إذا كان منتجك النهائي سيتم بناؤه على نظام أساسي CMS موجود ، على سبيل المثال ، فإن متطلبات المحتوى والهيكل والعرض التي يمكنك توضيحها ستساعدك على تقييم خيارات CMS. وبالمثل ، يمكن أن يعمل النموذج الأولي الخاص بك كوثيقة مواصفات لقرارات التصميم التي تتضمن الشبكة والتسلسل الهرمي والعناوين وسلوك الارتباط والخطوط لمطوري الواجهة الأمامية.

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

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

تفكير الأنظمة خارج الويب

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

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

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

تم الاستشهاد بالأعمال

  • التعقيد ، جولة إرشادية ، ميلاني ميتشل (نيويورك: أكسفورد ، 2009)
  • مقدمة في التفكير المنظومي العام ، جيرالد واينبرغ (نيويورك: دورست هاوس ، 1975)