تصميم المحتوى نصائح ونماذج تخطيط مكثفة
لإنشاء تخطيطات شاملة للويب ، تتطلب مهارة والكثير من التفاني. يؤدي مصممو الويب وظيفة لا يستطيع معظمهم القيام بها ، وبطريقة متطورة للغاية. نظرًا لتطور صفحات الويب ، فقد رأينا الحاجة إلى ملء مساحة أكبر والاحتفاظ بمحتوى أكثر من أي وقت مضى. إذا كنت قد فهمت بالفعل كيفية تصميم موقع على شبكة الإنترنت ، فهذه مكافأة كبيرة نحو فهم هذه الأساليب بشكل أفضل. الميزات الأساسية في موقع الويب نادراً ما تتغير. ومع ذلك ، مع وجود أكثر من محتوى الصفحة المتوسط ، تدخل العوامل الأخرى في الاعتبار ، بما في ذلك المساحة البيضاء والطباعة وتحديد موضع العناصر وغيرها.
سنقوم بالتفاصيل لتغطية بعض النصائح الرئيسية لبناء تخطيطات المحتوى المكثف. يمكن أن تتراوح هذه بين تطبيقات الشبكات الاجتماعية ، والمواقع التجارية والشركات الكبيرة ، أو أي شيء بينهما. من المهم أن تسأل نفسك "ما أحاول تحقيقه مع هذا التصميم?"عندما تقوم بتصميم صفحات لأنها سوف تساعدك على توقع احتمال أوسع.
صفحات الويب المخصصة
بغض النظر عن مدى خبرتك في تصميم مواقع الويب العملية ، فمن الصحيح أن علينا جميعًا أن نبدأ من مكان ما. يعد تصميم صفحات الويب المخصصة عادةً الخطوة الأولى نحو مهنة في برمجة الويب قبل تطبيق المواصفات التقليدية.
أوصي دائمًا بإنشاء قائمة صغيرة من عناصر الصفحة التي تم تثبيتها في القالب. بمجرد كتابة كل هذه الأمور ، يصبح من الأسهل التخلص من الأفكار السيئة أو التقاط الأحجار الكريمة المفقودة أو المنسية. هذا يمهد أيضًا الطريق للتخطيط السهل لتخفيف الضغط على الطريق.
تخطيط Wireframe
بالنسبة لموقع الويب العام المكون من 5 صفحات ، فغالبًا ما ترى نفس العناصر متكررة. يمكن تقسيم شعار الركن العلوي وروابط التنقل الرئيسية ومنطقة المحتوى الرئيسية بشريط جانبي ووظائف أخرى (تسجيل الدخول ومربع البحث وما إلى ذلك).
النظر في نقطة انطلاق جيدة للبناء في تخطيطات صفحة مفصلة. يجد العديد من المصممين أنه من المفيد رسم تصميمات هيكلية سلكية ممكنة لاستبعاد العيوب غير الواضحة. هذا لا يتطلب أي ورقة نزوة ، ويمكن القيام به حتى في دفتر يحكم فيه. الغرض من الإطار السلكي هو إعطاء فكرة تقريبية عن المكان الذي يجب أن يتجه فيه تخطيط الموقع مع مساحة لملء التفاصيل لاحقًا.
مع وجود تصميمات ثقيلة للمحتوى ، يجب أن يؤخذ في الاعتبار مقدار ما ستحتوي عليه المنصة. بناء تخطيط 2-3 أعمدة لاستضافة 100+ صفحة من المحتوى الطويل المعقد لن يترك مجالًا كبيرًا لالتقاط الأنفاس. من خلال التخطيط والتخطيط للأمام ، يمكنك التحكم في مساحة الغرفة الفسيحة لمحتوى الصفحة. هذا لا يقتصر فقط على تغليف النص أو حظر المناطق ولكن يتعامل مع الصور ومقاطع الفيديو أيضًا.
مساحة بيضاء رائعة
التباعد الأبيض هو ربما العامل الأكثر أهمية أن تؤخذ في الاعتبار في تصميم المحتوى المكثف التصميم. يحكم محتوى موقع الويب هذا الأمر ، أكثر من أي موقع ويب عادي. إذا كان القراء غير قادرين على فهم المحتوى لأنه لا يوجد مجال لهضم كلماتك ، فستكون حركة المرور متقطعة ومزعجة.
تعد الفقرات ورؤوس الصفحات مكانًا رائعًا للبدء بالتخصيصات. باستخدام خصائص CSS ، يجب أن تكون قادرًا على معالجة الهوامش الخارجية وإزالة كل عنصر من عناصر نص سطر الكتل. وتشمل هذه جميع العناوين 1-6 ، والفقرات ، والكتلة ، والقوائم ، والنص المنسق مسبقًا ، وعدد قليل من العناصر الأقل.
إذا كنت ترغب في جذب انتباه القارئ ، فمن المهم تطبيق التباعد أسفل عناصر النص الرئيسية. تعمل الفقرات والعناوين الأصغر بشكل أفضل مع وجود هوامش سفلية 15px-25px في مكانها. بالنسبة لعناصر الصفحة الأكبر مثل h1 أو h2 ، خذ بعين الاعتبار 35px + (سيعتمد ذلك على حجم الخط الخاص بك أيضًا). تعد المسافات بين العناصر الرأسية مهمة للتمرير والمسح الضوئي "نظرة سريعة". ومع ذلك ارتفاع خط هي خاصية CSS مهمة أخرى تؤثر على التباعد بين الأسطر في عنصر النص. يجب أن يكون للفقرات قيمة أكبر لخط الطول مقارنةً بحجم الخط بحيث يكون هناك الكثير من الحشو الزائد بين السطور.
النظر في الأساليب الديناميكية
بصرف النظر عن التباعد, الطباعة الرقمية يجب التلاعب بها بطرق لجعلها تقفز من الصفحة. بوجود مئات الملايين من مواقع الويب في العالم اليوم ، من الشائع رؤية نفس نوع (أنواع) الخطوط في كل مكان.
إذا كنت تقوم بتصميم تخطيط لموقع ويب غني بالمحتوى ، فستبدو النتيجة كقالب لطيف آخر بحلول النهاية. هناك الكثير من الخصائص التي يمكنك استخدامها مع أنماط الطباعة المتقدمة. الظلال النصية ، تباعد حروف أقل / أكثر ، منصات خلفية ، أيقونات ... القائمة لا تنتهي.
حقا أنت المصمم وكلمتك الأخيرة هي القانون. تصميم تخطيط لا يمكن مقارنته بطريق سريع واحد بدون أي تحول. أثناء العملية ، يمكنك العودة وتغيير الأنماط ، أو التعامل مع عناصر جديدة أو التخلص من مفهوم بالكامل. النظر في بعض النصائح المفيدة الأخرى المغلق واللعب في جميع أنحاء لمعرفة ما يناسب!
استخدام القوائم المنسدلة
مع وجود الكثير من المحتوى ، من غير المحتمل أن يتم احتواء جميع الروابط في صفحة واحدة. هناك العديد من الخيارات حول كيفية التعامل مع التحميل الزائد للصفحات. وضع روابط إضافية في كتل الشريط الجانبي أو مخيط في أعمدة في تذييل الموقع هما خياران هادفا.
الخيار الأكثر ملاءمة ومفيدًا هو إنشاء مخطط تنقل منسدل به فئات رئيسية وفئات فرعية. هناك أيضًا العديد من البرامج النصية مفتوحة المصدر التي تقدم فئات فرعية إذا كان لديك مواضيع مفصلة بشكل مكثف.
من المحتمل أن تكون الإستراتيجية الأسرع والأقل إحباطًا هي البدء بإطار JavaScript. بعض من الأكثر شعبية تشمل jQuery ، MooTools ، أو ربما النموذج الأولي. تقدم جميع هذه المكتبات وثائق والعديد منها متاح به نصوص قائمة منسدلة مجانية.
خطة عرض المحتوى
في الممارسة العملية ، من الأصعب بكثير إنشاء منطقة تبسيط للجسم تضم كل المحتوى الذي يحتوي عليه موقع الويب الخاص بك. مع تغيير معايير المتصفح ودعم الأجهزة المحمولة غير المطابقة للمواصفات ، فلا عجب أن نرى هذه المواقع التي تستهلك المحتوى بكثافة. كن حساسًا لكل نمط من صفحات الويب المعروضة. سيحتوي بعضها على صور متعددة ، والبعض الآخر قد يحتوي على رسم أو فيديو أساسي أو لا يحتوي على رسومات على الإطلاق. بعد الانتهاء من تشفير التخطيط النهائي ، قم بإنشاء صفحات HTML متعددة لاستيعاب طرق عرض مختلفة.
ستحتوي جميعها على نفس الترميز الداخلي باستثناء المحتويات داخل منطقة المحتوى الرئيسية. يمكن التعامل مع كل عرض صفحة فردي ويوفر نظرة ثاقبة تجاه المنتج النهائي. قم بتبديل هذا الأمر حتى يحتوي على جميع المشاهدات الرئيسية التي تعتقد أنها ستكون مطلوبة مع كل صفحة. يمكن أن تشمل الأمثلة الأخرى لعناصر الصفحة مربعات التعليقات أو مقاطع الفيديو أو المعارض المضمّنة أو روابط الصفحات المقسمة.
استراتيجيات الخطة بدقة
في الحقيقة ، ليس من الصعب تمامًا إنشاء تخطيط ويب قوي. ينشغل الكثير من المصممين بالتفاصيل الصغيرة مثل كيفية زرع عناصر كتلة أو ارتباطات تشعبية ملونة. هذه التفاصيل مهمة عند إرسالها عبر رسالة العلامات التجارية ، حتى من العناصر الأصغر ، يجب أن تضاف الرسالة مع الصفحة بأكملها. خطط عقلياً لمراحل التصميم الخاص بك لمعرفة الطريقة الأفضل لكل عقبات. إذا كنت تعمل مع عميل ، فسيكون من الجيد مناقشة نوع المحتوى الذي سيملأ الصفحات مسبقًا. يمنحك هذا الفرصة للتخطيط للأمام ووضع استراتيجية لأفضل نهج للتخطيط العام.
موضوع آخر لا سيما يتواجد هو تصميم المحمول. يشهد هذا السوق الجديد توسعا هائلا في ليس فقط الهواتف الذكية ولكن أجهزة الكمبيوتر اللوحية القوية. هذا يعني أن المستخدمين قد يصلون إلى التصميم الخاص بك من شاشة الجوال - تأكد من أن المحتوى لا يفيض وأن يتم تقديمه بدقة.
7 أمثلة للمواقع ذات المحتوى الثقيل
فيما يلي بعض الأمثلة على لقطات الشاشة من مواقع الويب المشهورة بالمحتوى الثقيل. هذه هي في معظمها علامات تجارية معروفة في الأسواق المادية والرقمية. تحقق من بعض الأفكار أدناه للعثور على بعض الإلهام في المشاريع الخاصة بك. لا تتردد أيضًا في مشاركة تخطيطات محتوى ويب ثقيلة أخرى في قسم التعليقات.
مقرقعة
Clicker هو تطبيق جديد للشبكات الاجتماعية لمحبي التلفزيون والأفلام. يمكنك التسجيل للحصول على حساب جديد والعثور على بعض برامجك التلفزيونية الكلاسيكية المفضلة ، والمحفوظة حسب الموسم وقائمة الحلقات. يمكنك مقارنة الموقع بـ IMDB بمعلومات أقل ومحتوى فيديو أكثر!
مستقبل تصميم المواقع
سيتم إطلاق Future Design Web 2011 في لندن في الربيع المقبل. تحقق من الصفحة الرئيسية للحصول على مزيد من المعلومات ومثال رائع لتصميم التخطيط القائم على النص. تتم مشاركة جميع التفاصيل بصدق وتوفر مكبرات صوت وجداول زمنية وورش عمل ورعاة وأكثر من ذلك بكثير.
الرب محتمل
في هذا المخطط الهزلي ، تم "رسم كاريكاتوري" الشخصية الرئيسية لورد ليكلي ومثقب في رسم توضيحي. ينقسم الموقع إلى 3 أعمدة مع كل محتوى رياضي جديد ، إعلانات ، روابط تغذية ، وأرشيف. التصميم في حد ذاته قديم للغاية وذكي يأخذ تصاميم الرسوم التوضيحية.
مايكروسوفت
معظم المتحمسين للتكنولوجيا يعرفون Microsoft. في الواقع ، يمكن لمعظم الأشخاص الذين يفهمون ماهية الكمبيوتر أن يقدموا لك وصفًا موجزًا لمايكروسوفت وبيل جيتس. تضم صفحتهم الرئيسية محتوى لعشرات حزم البرامج والتحديثات الإخبارية والبيانات الصحفية ومعلومات المطورين. يمكنك من خلال أسفل الصفحة تحديد موقع قائمة علامات تبويب عمودية مع تبديل محتوى ديناميكي.
محرك البحث لاند
Search Engine Land هي مجلة ويب شهيرة تركز على محركات البحث والتسويق عبر الإنترنت. يقومون في كثير من الأحيان بتحديث منشورات ذات جودة مذهلة ويدفعون مئات الآلاف من الأشخاص إلى موقعهم كل يوم. تنقسم الصفحة الرئيسية إلى 3 أعمدة تستخدم للاحتفاظ بكل وحدة محتوى وإعلان.
البيت الأبيض
يبدو تصميم البيت الأبيض للولايات المتحدة نظيفًا ومحترفًا للغاية. هناك الكثير من المعلومات حول جدول الرئيس والأحداث السياسية الهامة الأخرى. إحدى الحيل لتخفيف غرفة الصفحة هي إضافة شريط تمرير محتوى صغير نحو عنوان الصفحة. هذا أمر رائع لعرضه 3-4 عناوين الأخبار الكبيرة مباشرة عند هبوط زوار موقعك على الصفحة.
بوابة ياهو
بقدر ما تذهب المواقع ذات المحتوى الكبير Yahoo! يجب أن تتجه نحو الذروة. ياهو! تقدم مئات الخدمات لعملائها بما في ذلك البريد الإلكتروني والأخبار ومقاطع الفيديو وحتى البحث على الويب. تحقق من بعض Y! روابط البوابة من الشريط الجانبي لمعرفة كيفية مقارنة القوالب الخاصة بهم.
استنتاج
هذه ليست سوى بعض النقاط والخطوات الرئيسية لبناء تخطيطات ملموسة تتطلب محتوى. غالبًا ما يُنظر إلى صفحات الويب التي تحتوي على خزانات كبيرة المحتوى على أنها عبء يحمل علف مُحسّنات محرّكات البحث ، وليس له قيمة حقيقية. التصميم هو كل شيء لأنه أول انطباع يحصل عليه المستخدم من كل موقع. مع كميات كبيرة من المحتوى يمكن أن يصبح هذا كارثة مع فوضى وأكثر من التعميمات. لا تتوقف أبدًا عن التمرين ، ومع وجود عدد قليل من المشاريع ، ستتحقق من إتقان تصورات المحتوى المكثف.
