مناهج تصميم مواقع الناشر

ما هو "موقع الناشر الرقمي؟" إنه موقع ويب يركز على نشر الكثير من المقالات بشكل يومي. إنه مستوى أعلى من "مدونة". إنه في الأساس موقع إخباري أو منصة نشر فيروسية مثل BuzzFeed.

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

ما الذي يجعل موقع الناشر مختلفًا؟

هناك اختلافان رئيسيان بين موقع ويب للناشر وآخر منتظم.

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

الاختلاف الرئيسي الآخر هو مصدر الدخل. موقع شركة مثل Coca Cola لا يدر دخله من الموقع ، بل يأتي من منتجاته. تخدم معظم مواقع الشركات غرض كونها مجرد وجود رقمي.

بمعرفة ذلك ، من المحتمل أن يكون من الواضح أن دخل موقع الناشر يأتي من الموقع نفسه. كيف؟ إعلانات! وهو إلى حد كبير كيف تدر Google أو Facebook معظم دخلهم.

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

من منظور التصميم ، هذه هي الأولوية الرئيسية لمواقع الناشرين والمجلات.

تصميم مواقع الويب التي تحتوي على الكثير من المحتوى

دعنا نلقي نظرة على بعض كبار الناشرين مثل Variety:

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

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

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

هذا هو نوع التخطيطات التي ستتبعها في الغالب مع كبار الناشرين.

BuzzFeed هو مثال آخر على التخطيط المصمم للعمل مع كميات أكبر من النص. هنا على الرغم من أن التصميم أكثر مرحًا مع الألوان النابضة بالحياة والأشكال التي تجذب الانتباه (مثل الأزرار الثلاثة في الزاوية اليمنى العليا).

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

إليك مثال على النهج الخاطئ حيث يحاول كل شيء أن يكون في القمة:

نحن ندرك جيدًا أن الغرض مختلف تمامًا وأن الموقع أعلاه قد يحقق في الواقع ربحًا جيدًا ، لكنه يوضح جيدًا مبدأ "كل شيء يحاول لفت انتباهك"

الناشرون الرقميون والإعلان

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

ومن الأمثلة على ذلك أحجام الإعلانات. هناك 300 × 250 ، 300 × 600 ، هناك 728 × 90 وكذلك 300 × 50.

• قد يلتصق البعض بجانب واحد من الشاشة حيث يمكنك التمرير عبر نقاط مختلفة
• قد يظل البعض في الزاوية الصغيرة الخاصة بهم والبعض الآخر قد يظل في أعلى الصفحة دائمًا.
• سيظهر الآخرون في أزواج من 300 × 250 أو 720 × 90 بكسل.

كيف تعرف كل هذا وما هي المتطلبات؟

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

بعض الأشياء المهمة التي يجب وضعها في الاعتبار هي:

• قد يتم تحميل الإعلانات ذات الارتفاع. هذا يعني أنه سيتم دفع المحتوى لأسفل وسيفشل التصميم المصمم ليلائم عنصر واجهة مستخدم معين فوق الجزء المرئي من الصفحة.
• قد تحتاج الإعلانات إلى خلفيات ، قد تكون هذه خلفية رمادية فاتحة تحيط بالإعلان ، بحيث تلامس زوايا الشاشة.
• غالبًا ما تحتاج الإعلانات إلى تباعد حولها لتجنب اللمسات العرضية. 20-30 بكسل هي مسافة جيدة بين الإعلانات.
• قد ترغب في إضافة علامة "إعلان" قبل / بعد بهدف جذب المزيد من مزودي الإعلانات.
• لا ينبغي أن يكون هناك الكثير من الإعلانات! المكان المناسب لذلك هو ما سيعمل عليه فريق AdOps على اكتشاف ناشر معين وصفحة معينة وحتى حركة مرور محددة (مثل Facebook و Snapchat وما إلى ذلك)

أداء موقع الناشر

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

مصدر

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

إليك بعض النصائح العامة:

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

مصدر

أولوية التصميم

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

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

ملخص

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

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