أمثلة تصميم المجلات الالكترونية والمواقع الاخبارية

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

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

نادي AV

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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