CMS Web Design: دليل لتطبيقات المحتوى الديناميكي
نشرت: 2022-03-11تقنيات UI / UX للعالم الديناميكي الذي يحركه المحتوى للوسائط عبر الإنترنت.
الغالبية العظمى من تطبيقات الويب وتطبيقات الأجهزة المحمولة ، خاصة في مساحة الوسائط عبر الإنترنت ، يتم تشغيلها بواسطة أنظمة إدارة المحتوى (CMS) مثل WordPress و Drupal وغيرها. ظهرت هذه الأنظمة لتلبية احتياجات عصر الإنترنت حيث يكون المحتوى ملكًا وديناميكيًا - يتغير باستمرار وبشكل متكرر.
في الماضي ، كانت معظم مواقع الويب ثابتة - لم يتم إنشاؤها للتطور والنمو بسلاسة. الآن تعتبر أنظمة حية ، وهناك طريقة مثالية لتصميمها.
ما يلي هو دليل للمصممين الرقميين الذين يتطلعون إلى توسيع ذخيرتهم إلى ما وراء مواقع الويب الثابتة والصفحات المقصودة ، والبدء في التصميم الفعال للتطبيقات الديناميكية القائمة على المحتوى مثل المواقع الإخبارية أو المدونات أو حتى الشبكات الاجتماعية حيث ينشر المستخدمون المحتوى بانتظام. من أجل إجراء هذا الانتقال ، سيحتاج المصممون إلى فهم كيفية تنظيم هذه الأنواع من التطبيقات بشكل نموذجي بالإضافة إلى تبني عقلية "المحتوى أولاً" في عملية التصميم.
أنماط IA لتصميم الويب CMS في التطبيقات المستندة إلى CMS
يجب أن يكون لدى المصممين نموذج عقلي لأنماط هندسة المعلومات الشائعة في تطبيق يحركه CMS ، خاصةً إذا كان العمل على UX (تجربة المستخدم) وتصميمه من الألف إلى الياء. هناك العديد من أنواع الصفحات الشائعة والمتكاملة لهذه التطبيقات ، وغالبًا ما يتم توصيلها معًا بطريقة يمكن التنبؤ بها حيث يعمل "post" كمكون أساسي. لا يوجد بشكل عام حد نظري لعدد التدوينات التي يمكن أن يحتويها التطبيق.
الصفحة الأمامية
هذه هي نقطة الدخول الرسمية وغالبًا ما تكون مرادفة للصفحة الرئيسية. إنه شائع جدًا ، خاصةً عندما يكون هناك الكثير من المحتوى للوصول إليه لأنه يساعد في إبراز أو إبراز ما هو أكثر أهمية. تعرض هذه الصفحة عادةً نسخًا مختصرة من المنشورات دون الكشف عن الكثير من التفاصيل.
صفحة النشر
إذا كانت "المشاركة" هي الوحدة الأساسية لتطبيق يستند إلى CMS ، فإن صفحة المنشور هي المكان الذي يتم فيه عرض جميع التفاصيل العامة حول المنشور. ربما تكون هي الصفحة الوحيدة المهمة حقًا في التطبيق ، ويمكن أن تكون صفحة مقالة أو صفحة معلومات حول حدث معين ، أو شخص ، أو مجموعة ، أو منتج ، وما إلى ذلك. الصفحات المعينة.
قائمة / فئة الصفحة
هذا النوع من الصفحات مفيد للسماح للمستخدمين بالتنقل عبر جميع المنشورات المتاحة ، وتصفيتها حسب الفئة أو السمات أو المعايير الأخرى. يعد خيار الفرز شائعًا أيضًا عندما يكون حجم المحتوى المطلوب التمرير خلاله كبيرًا.
صفحة البحث
لا تعد الصفحة المخصصة للبحث ضرورية للتطبيقات الأصغر ، ولكنها مفيدة دائمًا. في بعض الأحيان ، يمكن دمجها أو دمجها مع صفحة الفئة / القائمة.
ملف تعريف المستخدم / المؤلف
هذه الصفحة مخصصة لكل مؤلف أو مستخدم يقوم بإنشاء منشور واحد أو أكثر. يتم التغاضي عنها أحيانًا في المواقع الإخبارية الصغيرة والمدونات ذات المؤلف الواحد ، ولكنها ضرورية للمواقع الإخبارية الكبيرة متعددة المؤلفين ، والشبكات الاجتماعية التي تعتمد على المحتوى ، والتطبيقات الأخرى التي ينشئها المستخدمون. من الممارسات الشائعة والمفيدة تضمين قائمة بجميع منشورات المستخدم في هذه الصفحة.
الصفحة الرئيسية للمستخدم أو لوحة المعلومات
تعرض هذه الصفحة المعلومات (بما في ذلك المنشورات) ذات الصلة بالمستخدم الذي قام بتسجيل الدخول ، غالبًا في شكل موجز إخباري شخصي أو محتوى موصى به ، ونشاط حديث ، وحالات. يعد منزل المستخدم ضروريًا للتطبيقات المغلقة وتطبيقات الشبكات الاجتماعية ، ولكنه اختياري أو غير ذي صلة بالآخرين.
تصميم واجهة مستخدم يحركه المحتوى للمحتوى الديناميكي
المحتوى يسبق التصميم. التصميم في غياب المحتوى ليس تصميمًا ، إنه زخرفة. - جيفري زيلدمان
عندما يحين وقت تصميم واجهة المستخدم لتطبيق يعتمد على CMS ، من المهم أن تتذكر أن المحتوى دائمًا ما يقود التصميم ، وليس العكس. تم اعتماد نهج المحتوى أولاً من قبل المزيد والمزيد من الشركات الإعلامية في السنوات الأخيرة مع نتائج مثبتة. مع وضع ذلك في الاعتبار ، إليك قائمة بالتوصيات لمصممي واجهة المستخدم ليأخذوها في الاعتبار عند تبلل أقدامهم في هذه الأنواع من المشاريع.
ضع في اعتبارك المحتوى قبل تحديد النمط
في التطبيق الذي يعتمد على المحتوى ، يجب أن يدعم النمط المرئي المحتوى ككل. على الرغم من أن طبيعة هذه الأنواع من التطبيقات تشير عادةً إلى أن المحتوى سيكون متغيرًا ولا يمكن التنبؤ به تمامًا ، إلا أنه في كثير من الأحيان سيكون مناسبًا لموضوع عام. لذلك عند تطوير المظهر الجمالي للعلامة التجارية ، يمكن أن يكون المحتوى الفعلي مصدر إلهام كبير. في الوقت نفسه ، يمكن أن تكون أيضًا مسؤولية إذا أصبح المصمم مرتبطًا جدًا بقطع معينة من المحتوى وطور أسلوبًا مستهدفًا بشكل مفرط.
تعرف على من سيقوم بإنشاء المحتوى على أساس منتظم.
في تطبيق يحركه نظام إدارة المحتوى ، يتم تحديد المحتوى إلى حد كبير بواسطة منشئي المحتوى وليس المصممين. ومن ثم ، فمن المتوقع عادةً أن يتخلى المصمم عن بعض التحكم في مظهر المنتج للأشخاص الذين ينشرون المحتوى على أساس منتظم - أي المحررين أو المؤلفين أو المسؤولين أو حتى المستخدمين العشوائيين الذين يدخلون المحتوى من خلال النماذج العامة.
اعتمادًا على العملية المتفق عليها ، يمكن للمصمم وضع بعض المعايير والإرشادات لاختيار الصور وإعدادها واقتصاصها وحتى وضع بعض المعلمات على تصميم النص. ومع ذلك ، بشكل عام ، تقع على عاتق المصمم مسؤولية تشكيل الواجهة الأمامية للتطبيق بحيث لا يؤدي العمل الفرعي من جانب منشئ المحتوى ، مثل صورة رديئة أو عنوان طويل جدًا ، إلى تقليل الجودة من التصميم إلى درجة كبيرة.
قم بالتصميم بمحتوى حقيقي حيثما أمكن ذلك.
نظرًا لأن نوع المحتوى يمكن أن يختلف على نطاق واسع في تطبيق يحركه CMS ، فمن المنطقي قضاء بعض الوقت في النظر إلى عينة كبيرة منه. من الناحية المثالية ، في حالة وجود موقع إخباري أو مدونة ، سيتعاون المصمم مع منشئي المحتوى في بداية عملية التصميم ويطلب أمثلة على القصة أو صور المنتج أو مقاطع الفيديو أو أي شيء آخر يمكن أن يساعد في جعل نماذج التصميم تبدو حقيقية بقدر الإمكان.
يُفضل التصميم بمحتوى حقيقي على استخدام الصور المخزنة والنص الوهمي ويمكن حتى أن يتم بالتوازي مع الإطارات السلكية أو النماذج الأولية ، حيث يساعد ذلك على الحد من أي مفاجآت قد تحدث.
ليس من غير المألوف أن يبدو التصميم مذهلاً عندما يملأه المصمم بصور محددة مسبقًا أو معدلة بالفوتوشوب وعناوين رئيسية مصممة بشكل مثالي ، ثم يراها تنحدر إلى حالة ركود بمجرد أن تدخل مرحلة الإنتاج.
لا تكن مفرطًا في التحديد مع الأسلوب.
عند تعيين نمط مرئي ، لا تصطاد المحتوى من خلال عكس مزاج أو نوع أو قصة أو موضوع واحد فقط. بدلاً من ذلك ، اجعله بسيطًا وعالميًا فيما يتعلق بمجموعة كاملة من النغمات التي قد تلعب دورًا في المحتوى.
يكون الشكل والمظهر المحددان مقبولًا في بعض الأحيان لتطبيق يلبي احتياجات جمهور متخصص ، ولكن يمكن أن يظهر في كثير من الأحيان على أنه قديم ويفتقر إلى الجاذبية الجماهيرية في سوق اليوم. علاوة على ذلك ، يمكن أن يحد من احتمالات النمو والتوسع إلى قطاعات جديدة في المستقبل.
للتأكد من أن التصميم يعمل مع نطاق واسع من المحتوى ، فمن الجيد عادةً اختباره عن طريق الاستهزاء بنسخة إضافية أو اثنتين من نفس الصفحة مع موضوع مختلف بشكل ملحوظ لا يزال ضمن النطاق المواضيعي لما هو قابل للنشر.
صمم كل صفحة كنموذج لتنوع المحتوى
فكر في كل نوع من أنواع الصفحات في التطبيق كقالب أو مخطط لعناصر وسائط متنوعة (صور وعناصر واجهة مستخدم ومقاطع فيديو وكتل نصية وما إلى ذلك) لتعبئتها ، ومعرفة العناصر التي ستكون عرضة للتغيير وأي منها يمكن أن يظل ثابتًا .
ضع مجموعة واضحة من القواعد والاتساق.
فقط لأن المحتوى قد يختلف بشكل كبير من صفحة إلى أخرى لا يعني أنه لا ينبغي أن تكون هناك مجموعة متسقة من التنسيقات التي يتم تقديم المحتوى بها.
إن الحفاظ على إمكانية التنبؤ بالعناوين وأحجام الصور ومراقبة التسلسل الهرمي للمعلومات المنطقية من أعلى إلى أسفل داخل الصفحة له العديد من الفوائد ، أحدها أنه يخلق إحساسًا بالتناغم في جميع أنحاء التطبيق ويبقي المستخدم موجهًا بشكل صحيح.
لتحقيق ذلك بسهولة أكبر ، قم بتطوير مجموعة معيارية وقابلة لإعادة الاستخدام من مكونات النمط لأكبر عدد ممكن من أجزاء الواجهة ، بما في ذلك العناوين والفواصل والأزرار وعناصر واجهة المستخدم والعناصر الأخرى داخل برنامج التصميم. استخدم هذه المكونات بشكل متكرر وفي مخطط منطقي ، مع الحفاظ على الاختلافات في الحد الأدنى. يقدم هذا المقال من Toptal Designer Wojciech Dobry دليلًا رائعًا لإنشاء مكتبة واجهة المستخدم في Sketch.
لا تعطي تصميمات فردية للمشاركات.
حاول تجنب إعطاء منشورات داخل نفس القسم من الصفحة الكثير من الاختلافات في الأسلوب والشكل. يتضمن ذلك تغيير أبعاد الصورة ، وإضافة تخطيطات نصية أو خطوط خاصة ، أو تضخيم الصور الفردية بزخارف أو رسومات مخصصة. لا يؤدي هذا إلى قتل التناغم البصري فحسب ، بل إنه يعد إهدارًا للموارد بشكل عام وعرقلة للأداء والصيانة من وجهة نظر مطور أو مدير محتوى.
لا تفترض أن المحتوى سيتناسب دائمًا مع منطقة معينة.
تتمثل إحدى النتائج الحتمية للطبيعة الديناميكية لتطبيق مدفوع بنظام CMS في أن مقدار النص الذي يظهر في منطقة عرض معينة يمكن أن يختلف في الطول. في كثير من الأحيان ، يمكن وضع حدود للأحرف على النص في CMS للحفاظ على الأشياء معقولة ، ولكن لا ينبغي للمصمم أبدًا أن يفترض بشكل أعمى أن كتلة النص ستناسب دائمًا عددًا معينًا من السطور.
لا يختلف عرض الأحرف الفردية فقط ، ولكن ليس من المعتاد أيضًا تقييد إبداع الكتاب بشكل كبير من خلال فرض حد منخفض جدًا للأحرف. هذا هو السبب في أنه من الجيد دائمًا اختبار تصميم بمحتوى حقيقي كما تمت مناقشته أعلاه ، وفحص كل منطقة بنماذج مختلفة من النص.
للتأكد من سيناريو أسوأ الحالات ، أدخل مؤقتًا سلسلة من الأحرف الأبجدية العريضة (مثل "w" إذا كان المحتوى باللغة الإنجليزية) حتى الوصول إلى حد الأحرف المتفق عليه.
السماح للمحتوى بالتميز
في التطبيق الذي يعتمد على المحتوى ، يجب أن يظل المحتوى في المقدمة وفي المنتصف في جميع الأوقات ، ويجب أن تنحسر عناصر العلامة التجارية بشكل عام.
قم بإحاطة المحتوى الديناميكي بألوان خلفية نظيفة وخفيفة ومحايدة.
يفضل عادة الأبيض أو الأبيض المصفر. يسمح هذا للعديد من أنواع الصور المختلفة ، الفاتحة والداكنة ، بالظهور من الصفحة دون أن يطغى عليها.
اجعل الصور كبيرة وقادرة على القيام بذلك.
الصور الكبيرة ، وخاصة الصور ، تجذب انتباه الزائر بشكل أكثر فاعلية من أي شيء آخر.
اجعل العناوين الرئيسية والنصوص كبيرة وسهلة القراءة.
بالنسبة للصفحات التي تحتوي على نصوص كثيفة ، اختر خطوط الويب شديدة الوضوح ، وانشرها بحجم كبير ومريح عبر جميع الأجهزة - سطح المكتب والجوال والجهاز اللوحي.
لا تبالغ في التصميم.
في كثير من الأحيان ، يحب المصممون الرقميون والمطبوعات نشر الزخارف الإبداعية أو منح عناصر العلامة التجارية العنان في تصاميمهم. بشكل عام ، بينما يمكن لبعض التأثيرات المرئية في بعض الأحيان تحسين التصميم الذي يعتمد على المحتوى ، فإنها يمكن أيضًا أن تشتت الانتباه بسهولة عن المحتوى ، وهو ما يثير اهتمام المستخدمين حقًا عند زيارتهم لموقع إخباري أو مدونة.
يمكن لمثل هذه التأثيرات أيضًا أن تجعل مظهر التطبيق أقل قابلية للتنبؤ مع تغير الصور. من أفضل الممارسات عمومًا وضع فحص على الخطوط الزخرفية والأنماط الجريئة والرسوم التوضيحية والصور المتداخلة والصور شبه الشفافة والإطارات الرائعة حول الصور. أخيرًا ، اجعل الشعار صغيرًا نسبيًا مقارنة بالمحتوى المميز.
لا تستخدم الخلفيات الملونة بالقرب من الصور الديناميكية.
الألوان الجريئة والساطعة في الوقت الحالي ، ولكن من الأفضل عادةً تجنب تطبيق كميات كبيرة من الألوان المشبعة ، أو الخلفية الملونة ، حول الصور المعرضة للتغيير حيث يمكن أن يؤدي ذلك إلى نتائج غير متوقعة ، بما في ذلك تضارب الألوان والتحفيز المفرط ، صرف الانتباه عن المحتوى.
لا تستخدم الخلفيات الداكنة لتغطية صفحات كاملة من النص.
تشير الدراسات إلى أن النص الفاتح على خلفية داكنة يكون أكثر إرهاقًا للعين من النص الداكن على خلفية فاتحة في التطبيقات ذات المحتوى الثقيل. قد تعمل الخلفية المظلمة بشكل جيد لقسم خاص من الصفحة أو منطقة عرض الشرائح حيث يوجد قدر محدود من النص ، ولكنها ليست مناسبة تمامًا لتغطية كتل النص الطويلة.
افهم كيف تعمل الصور والوسائط الأخرى على الواجهة الخلفية
يمكن أن تختلف أنظمة إدارة المحتوى في كيفية تعاملها مع الوسائط ، مثل الصور ومقاطع الفيديو وملفات الرسوم المتحركة ، وفي بعض الأحيان يقوم المطور بوضع قيود على الوسائط لأغراض الكفاءة.
على سبيل المثال ، قد تكون هناك قيود على كيفية قياس الصور واقتصاصها وعلى عدد الأحجام والمحاصيل التي يمكن إنشاؤها وعرضها. وبالتالي ، من المهم التشاور مع مطور التطبيق أو مديري المحتوى لتحديد ما هو عملي (وما هم على استعداد لوضع موارد تطوير إضافية فيه) قبل المضي قدمًا في التصميم.
تعرف على تنسيقات الوسائط المدعومة.
على الرغم من أنه من المسلم به عادةً أن يدعم التطبيق الصور ، فمن الجيد التشاور مع مديري المحتوى حول أنواع ملفات الفيديو والصوت وملفات الوسائط المتعددة الأخرى التي يمكن تخزينها وعرضها ودرجة تخصيصها بصريًا.
على سبيل المثال ، من المفيد معرفة ما إذا كان سيتم إنشاء مشغل فيديو مخصص أو إذا كان تضمين فيديو YouTube أو Vimeo على الصفحة هو الخيار الوحيد. في حالة YouTube ، هناك معايير وقيود محددة في كيفية تضمين مقاطع الفيديو وتغيير حجمها وشكلها.
لا تقم بتعيين العديد من المحاصيل والأحجام المختلفة للصور.
في حين أنه غالبًا ما يكون من الممكن تقنيًا إنشاء الكثير من المحاصيل المنفصلة لصورة ما ، فعادة ما يكون هناك تأثير سلبي في القيام بذلك. على سبيل المثال ، بشكل افتراضي ، ينشئ WordPress CMS تلقائيًا عدة أحجام للصورة التي تم تحميلها بنسبة واحدة ، ولكنه يوفر فقط خيارًا لإنشاء صورة مصغرة واحدة تم اقتصاصها بشكل منفصل.
لا يتطلب اقتصاص كل صورة إلى نسب إضافية تثبيت مكون إضافي خاص أو أداة مخصصة ليتم تطويرها مقدمًا فحسب ، بل يتطلب أيضًا مطالب إضافية على المحررين حيث يتطلب منهم القيام بعمل إضافي لكل صورة يتم تحميلها. في بعض الأحيان ، يجعل هذا أيضًا اختيار صورة قابلة للتطبيق أكثر صعوبة ، مما يؤدي إلى زيادة إبطاء سير العمل.
حدد ما إذا كان المحتوى القديم بحاجة إلى الدعم.
عند إعادة تصميم تطبيق قديم ، توجد أحيانًا خيارات أقل متاحة عند بدء تطبيق جديد من البداية. هذا بسبب وجود بالفعل مستودع وسائط موجود ، وترحيل كل ذلك إلى تنسيق جديد يمكن أن يكون غالبًا عملية مكلفة أو غير عملية من وجهة نظر التطوير.
تزويد محرري المحتوى بمجموعة متنوعة من الطرق لتصميم النص
يعد المحتوى النصي عنصرًا أساسيًا في تطبيق يعتمد على نظام إدارة المحتوى ، وفي أي موقع إخباري أو مدونة على وجه الخصوص ، سيجد المرء أن المحررين أو الكتاب ، عند تركهم لأجهزتهم الخاصة ، يبحثون عن طرق لتصميم النص وتنسيقه للتأكيد على نقاط معينة ، قم بتقسيم المحتوى ، إضافة عروض الأسعار ، وإنشاء قوائم ، والارتباط بمحتوى آخر ، وإنجاز عدد من المهام الأخرى.
توفر العديد من منصات CMS الشائعة مثل WordPress خيارات تنسيق النص افتراضيًا ، ولكن إذا فشل المصمم في التخطيط لكيفية تخصيص هذه الأنماط وفقًا لتصميمه ، فستكون النتيجة شيئًا عشوائيًا أو عاديًا أو غير مرغوب فيه.
قم بالتصميم لجميع الطرق الشائعة التي يمكن من خلالها تنسيق النص.
خاصة بالنسبة للمدونات والمواقع الإخبارية ، من المفيد أن تأخذ الوقت الكافي لتزويد المطور بقواعد النمط لجميع الطرق الشائعة التي يمكن من خلالها تنسيق النص بما في ذلك: النص الغامق والمائل والعناوين والعناوين الفرعية والقوائم المرقمة والنقطية والاقتباسات المحظورة والتعليقات التوضيحية ، والارتباطات التشعبية.
لا تمنح منشئي المحتوى قدرًا كبيرًا من التحكم في الأسلوب.
ليس من الجيد عمومًا فتح الكثير من التحكم في التصميم للمحررين. قد يكون السماح لهم بالقيام بأشياء مثل إنشاء التخطيطات الخاصة بهم داخل الصفحات أو النص الملون بأكثر من طريقة أمرًا شاقًا أو يستغرق وقتًا طويلاً بالنسبة لبعض الأشخاص ويؤدي إلى نتائج قبيحة وغير متسقة في أيدي الآخرين.
الأنماط المستقبلية للتصميم الذي يحركه المحتوى
مع ظهور تقنيات جديدة مثل الواقع المعزز (AR) ، بدأت نماذج جديدة للتصميم الذي يحركه المحتوى في الظهور. تستخدم التطبيقات القائمة على CMS في فضاء الواقع المعزز / المختلط ، والتي لا تزال في مهدها حاليًا ، كائنات و / أو مشاهد من العالم الحقيقي كجزء أساسي من المحتوى.
يمكن أن تؤثر بيئة المشاهدة وظروف الإضاءة والقرب المادي لمستخدم جوال معين فيما يتعلق بالنص والكائنات ثلاثية الأبعاد المدرجة على النتيجة النهائية. هذا يغير مفهوم معالجة المحتوى بشكل كبير ويضيف طبقة إضافية من عدم القدرة على التنبؤ والتي يجب أخذها في الاعتبار في عملية التصميم.
تصميم الويب CMS مختلف قليلاً
يعني التصميم للتطبيقات التي تعتمد على نظام إدارة المحتوى وضع المحتوى أولاً ، ثم وضع النمط في المرتبة الثانية. وهذا يعني أيضًا التخطيط واحتضان التباين وعدم القدرة على التنبؤ في المحتوى الذي يصمم المرء حوله. ستصبح القدرة على استيعاب عدد لا يحصى من النتائج المحتملة أكثر أهمية في تصميم الويب CMS حيث تعمل التقنيات الناشئة على تغيير طبيعة المحتوى نفسه.