رؤوس المدونات: 20 أمثلة رائعة وأفضل الممارسات
من المرجح أن يكون العنوان هو أول شيء يراه زائر جديد على مدونة ، لذا فهو الانطباع الأول - ولكن لماذا يعتبر رأس المدونة أكثر أهمية ، أو مختلفًا على الأقل ، من رأس موقع الويب الأساسي؟
تحتاج رؤوس المدونات إلى المزيد من الوظائف. قد تختلف تصميمات الويب الأخرى من حيث استخدامها ، وبالتالي ، فإن ما تم تضمينه في عنوان موقع الويب وطريقة تقديمه قد يختلف اختلافًا كبيرًا.
ومع وجود مدونة على وجه التحديد ، هناك أفضل الممارسات التي يمكن أن تساعد القارئ في التنقل عبر المدونة والتفاعل بشكل أفضل.
هذا بالضبط ما سوف تفعله هذه المقالة. سنساعدك في تحديد ما يجب أن يكون جزءًا من عنوان مدونة وكيفية تنفيذه في النهاية ، ثم سننظر في 20 نموذجًا رائعًا يفعل ذلك.
لتحديد كيفية تصميم رأس مدونة وما يجب وضعه فيه ، نحتاج إلى طرح بعض الأسئلة حول المدونة:
- ما هو المزاج الذي يجب تعيينه لجذب الجمهور المستهدف الصحيح؟
- كيف يمكن للإنطباع الأول عبر الرأس أن يشرح ما هي المدونة؟
- كيف يمكن أن يعطي عنوان المدونة الانطباع الأول: "أنا مختلف عن الآخرين".
- ما هي أجزاء المحتوى التي يجب أن تكون ملحوظة على الفور لإنشاء عمل أفضل؟ (بالضغط على الروابط ، والاشتراك ، وما إلى ذلك)
دعونا حفر أعمق قليلا ...
ما هو المزاج الذي يجب تعيينه لجذب الجمهور المستهدف الصحيح؟
عندما يأتي الزائر أولاً إلى أي نوع من مواقع الويب ، فإن أول شيء يحدده هو "شخصية" المدونة - وما إذا كان ذلك مناسبًا لهم أم لا.
هذا ضروري لتصميم المدونة ، لأن المدونات تتطلب أن يكون الجمهور المستهدف الصحيح ناجحًا .
على سبيل المثال: مع المحتوى في المجال الإبداعي ، يجب أن يكون لتصميم المدونة رأس إبداعي لإثارة إعجاب القادمين الجدد وإلهامهم. ستحتاج مدونة أكثر تقنياً أو عمل تجاري إلى رأسية متتالية ، عالية الجودة وجذابة من الناحية الجمالية ، ولكنها غير دقيقة إلى حد ما.
كيف يمكن للإنطباع الأول عبر الرأس أن يشرح ما هي المدونة؟
لدينا جزء من هذا يشمل تطوير المزاج العام الذي يجب أن يخلقه العنوان ، ولكن يمكن للرأس القيام بأكثر من ذلك لتوضيح للقارئ الجديد ما تدور حوله هذه المدونة.
الانطباع الأول يكتشف شخصية المدونة ، ولكن ما الذي يدور حوله بالضبط؟ يمكن للمرء أن يشتمل على سطر شعار يحمل شعارًا ، أو يتضمن فقرة صغيرة / عبارة تخبر القارئ ما هي هذه المدونة ومن هو المستخدم.
كيف يمكن أن يعطي عنوان المدونة الانطباع الأول ، "أنا مختلف عن الآخرين"؟
هناك طريقة أخرى لوضع هذا ، "كيف سيتم تذكر هذه المدونة؟ "
إذا كان سيتم مزجها في كل مدونة أخرى على الإنترنت ، فهذا ليس موضوع مدونة جيد على الإطلاق. هذا هو السبب في أن رأس الصفحة هو المكان الرئيسي للشعار ، و tagline ، وأي علامة تجارية أخرى.
النظرة العامة والمحتوى المقدم لأول وهلة هو ما سوف يتمسك به ، إذا تم تقديمه بشكل جيد بما فيه الكفاية.
ما هي أجزاء المحتوى التي يجب أن تكون ملحوظة على الفور لإنشاء عمل أفضل؟ (بالضغط على الروابط ، والاشتراك ، وما إلى ذلك)
يجب أن يكون العنوان بسيطًا بشكل عام من حيث المحتوى ، ولكن يمكن أن توجد بعض أشكال المحتوى للمساعدة في المساعدة على عبارات الدعوة إلى العمل. بعد أن يحكم قارئ جديد على الانطباع الأولي للمدونة ويقرر البقاء ، سيبدأ في البحث عن أجزاء من المحتوى ومكان التنقل.
عندما تكون الفئات موجودة على الفور ، سينظر إليها المشاهد ويجد المناطق التي تهمهم. عند وجود حقل بحث أو موجز RSS ، قد لا يقوموا بالاشتراك أو إجراء بحث على الفور ، ولكنهم قاموا بعمل ملاحظة لاشعورية لوضعها ومكان العثور عليها في المستقبل.
تختلف الخيارات إلى ما هو أبعد من ذلك ، ولكن أي محتوى موضوع في الرأس هو في الأساس الانطباع الأول عن المحتوى ، لذا يجب أن يكون هو البئر الأكثر أهمية وتصميمًا.
لنلقِ الآن نظرة على بعض رؤوس المدونات الرائعة ، ثم نناقش فوائدها.
1. البرنامج التعليمي 9
يتميز البرنامج التعليمي 9 بكل الفوائد التي تمت مناقشتها أعلاه. يعرض الشعار والشعار على الفور ما يتعلق بالمدونة وكيف يمكن أن يساعد القارئ.
توجد قطع التنقل الرئيسية في علامات تبويب ضخمة وملحوظة مع تضمين الرموز للرسم في العين. هذا يؤدي على الفور للمستخدم للمحتوى ويروج لهم لحفر أعمق في بلوق.
تصميم الخلفية مبدع ، بل إنه يحتوي أيضًا على موضوع الإبداع الفني - تمامًا ما تهدف إليه البرامج التعليمية. علاوة على ذلك ، هناك محتوى أساسي إلى اليمين بما في ذلك موجز RSS ، ونموذج البحث ، وصفحات المدونة ، والمزيد.
2. الصفحة الرئيسية تصميم البحث
يستخدم هذا الرأس استخدامًا هائلاً للتسلسل الهرمي المرئي للحصول على هذه النقطة. إن عنوان المدونة يكاد يكون كافياً لإخبار القارئ بما يدور حوله ، ويعزز البقاء ويرى بمزيد من التفصيل ما يدور حوله.
ثم تقود العين إلى المجموعة الأولى من الملاحة ، حيث يتم الإشارة إلى الصفحة بشكل واضح ، بالإضافة إلى صفحة الاتصال. الصور على اليمين ثم ضبط المزاج وتوفير الإلهام للمهتمين بموضوع هذا بلوق.
وأخيرًا ، تقود الصور إلى اليمين العين إلى عبارة أكثر وضوحًا للمدونة.
3. مدونة تصميم مدونة
تتمثل أبرز ميزات هذا العنوان في الشعار والشعار. الجمهور المستهدف لهذه المدونة يجعلها أكثر تفردًا ، وبذكر ما تدور حوله المدونة لأول وهلة ، يرى قارئ جديد ذلك ويقتنع بأنه مختلف عن الآخرين.
لأسفل قليلاً ، وفي النص الأصغر ، هو عدد القراء والرابطين إلى موجز RSS ، بالإضافة إلى التنقل الأساسي لمزيد من الخوض في ما يتعلق بالمدونة ، أو في المحتوى نفسه.
4. كيفن جون جوميز
ويجعل النداء المرسوم يدويًا والصورة موضوع المدونة هذا أمرًا شخصيًا ، ويتطابقان مع اسم الموقع - مشرف الموقع نفسه. هذه مدونة شخصية لشخص مبدع ، ويتصل الرأس بذلك تمامًا.
ميزة التنقل الكاملة في رأس الصفحة ، نظرًا لأنها محدودة في التنقل وقادرة على التركيز بشكل أكبر عليها.
5. نالدز جرافيكس
يوفر هذا الرأس شعارًا رائعًا والاستخدام الفعال للمحتوى في العنوان. الجزء الأكبر من العنوان هو الشعار أو اسم المدونة ، مما يجعل من السهل تذكره.
ثم تقود العين إلى الملاحة ، حيث يمكن للقارئ أن يتعمق في المدونة في ذلك الحين وهناك ، أو على الأقل الحصول على فكرة عما تدور حوله المدونة. تعد التنقلات والفئات طريقة رائعة لإعلام القراء الجدد بما يدور حوله المدون ، إذا كان معرفًا جيدًا.
يساعد الرسم على اليمين في تعيين الحالة المزاجية للمدونة ، كما يقود العين إلى عدد المشتركين ورابط RSS. من خلال مدونة تحتوي على عدد موجز يتراوح من المعتدلة إلى العالية ، من الأفضل إظهار هذا العدد في رأس الصفحة ، لأنه ، بطريقة ما ، يثبت محتوى المدونة ويعطيه مصداقية.
هناك أيضًا محتوى إضافي في الأعلى ، في مكان تقليدي لهذا النوع من المحتوى حتى يمكن العثور عليه بسهولة.
6. برو تصميم المدونة
يقوم العنصران الأخضران المتباينان في هذا العنوان بعمل أكثر مما يعتقده المرء. معظمهم يرون الشعار باللون الأخضر الفاتح اللون الأول ، حيث يقرأون عنوان المدونة والعنوان. هذا عنوان رئيسي آخر يخبر القراء الجدد كيف يمكن لهذه المدونة أن تساعدهم.
ثم ، يتم وضع علامات تبويب كبيرة الحجم كبيرة الحجم مع 1) حجمها الواضح و 2) أن البوب الآخرين من اللون الأخضر. تخبر علامة التبويب الخضراء الأخرى القارئ بأن هذه ليست مجرد مدونة يمكن أن تساعد في منحك تصميمًا أفضل للمدونة ، ولكن لديها خدمات تصميم مدونة لتقديمها. فوق ذلك ، أيقونات وسائل الإعلام الاجتماعية التي يمكن للقارئ أن يحيط علما لاتخاذ إجراءات في وقت لاحق.
7. Octwelve
يؤدي هذا العنوان الإبداعي المصور إلى ضبط الحالة المزاجية للمدونة بسرعة. التوضيح من المسؤول عن الموقع ، ويعطي المدونة نهجا شخصيا. نبدأ في تكوين فكرة عن محتوى المدونة ، حتى قبل تقديمها.
يضع هذا التصميم جملة تمهيدية صغيرة في رأس الصفحة مباشرةً ، ويحدد بالضبط هذه المدونة. والملاحة الرئيسية أسفل الشعار مباشرة ، لذلك يلاحظ على الفور تقريبا. هناك أيضًا تفاصيل أخرى داخل الرأس ممتعة ، وتؤدي إلى مشاهدة المشاهد للرأس لفترة أطول.
8. مارك فوريستر
تمنحك هذه اللعبة الممتعة والمليئة بالإبداع والمزاج طابعًا فريدًا من نوعه ، مما يجعلها فريدة من نوعها بما يكفي لجذب انتباهك.
يقوم المشاهد للوهلة الأولى بفحص العنوان وتفاصيله الدقيقة ، والقصة التي يعرضها. في ذلك ، يأتي الشعار والشعار ، حيث يكتشف العرض ما تدور حوله المدونة.
عند الانتهاء من الاستمتاع بالرأس ، يمكنهم مشاهدة التنقل أعلى وأهم الإشارات المرجعية الاجتماعية إلى اليمين. يؤدي الرأس أيضًا بشكل جيد إلى المحتوى ، مما يؤدي بالزائر إلى التمرير لأسفل والتحقق من المزيد.
9. Cult-Foo
هذه مجرد عنوان جميل يجذب انتباه العديد من القراء يوميًا. يتم تعيين المزاج كموضوع إبداعي وملهم ، ويجذب فقط الجمهور المناسب. الشعار الموجود في هذا العنوان هو "مصدر" باقي العنوان - مربع يؤدي إلى بقية التصميم.
يقع شريط البحث أسفل ذلك مباشرة لسهولة الوصول ، ويتم تحديد منطقتي المحتوى على اليمين.
التنقل هو ما هو رائع حقا حول هذا الرأس ، رغم ذلك. لديها أكثر من شعور سحابة علامة ، مع الفئات الأكبر هي النص الأكبر. وبهذه الطريقة ، عندما يرى القارئ الجديد سحابة العلامات ، فإنهم يرون العناصر الأكبر أولاً.
في المقابل ، يقومون بإجراء اتصال مع هذه الكلمات ومحتوى المدونات. الآن ، يحتوي المحتوى المعروض على المدونة على أقصى ما يمكن تذكره الآن حول محتواه. تأكد من التحقق من النسخة المباشرة من هذا الموقع: حيث تم نقل منطقة سحابة علامة الرأس بالفعل باستخدام التمرير الخاص بالمستخدم ، مع حدود مزخرفة وغير مزعجة.
10. Vectips
هذا العنوان هو بالأحرى أضيق الحدود ، مما يضع مزيدًا من التركيز على أجزاء المحتوى التي يمتلكها. الشعار مزخرف ومميز بلون مختلف ، مما يجعله لا يُنسى.
ويتبعه سطر العلامة الذي يتشارك في المدونة ، ومن ثم التنقل البسيط الذي يحدد ذلك أيضًا. يعتبر التنقل أمرًا رائعًا نظرًا لأنه يحتوي على رموز فردية لجلب الانتباه إلى كل منها نظرًا لأن القارئ يلتقطها.
يعمل الرسم الممتع على اليمين على ضبط الحالة المزاجية ويقود العين إلى الأعلى في التنقل.
11. جزء بدوام بعد
على النقيض من Vectips ، فإن هذا العنوان به الكثير. يتضمن الشعار في أعلى اليمين شعارًا ، ثم يقود العين إلى التنقل. قبل النقر على التنقل ، يستمر العنوان في كيفية مساعدة الموقع لزواره الجدد ، ثم أسفل هذه الميزات ، يمكنك التنقل أكثر. من خلال هذا التسلسل الهرمي ، حصل القارئ على نظرة عامة رائعة حول كيفية التنقل عبر الموقع.
يؤدي الرسم التوضيحي الموجود على اليمين إلى توجيه المشاهد إلى ملاحظة موجز ويب RSS ، ومن ثم تؤدي العين إلى اليمين لمزيد من الترويج لصفحة المعجبين على Facebook.
12. توتكاندي
الميزة الأكبر لرأسية TutCandy هي صوره الإبداعية والملونة والتفصيلية. مع ذلك ، فإنه يحدد المزاج ويخلق مصداقية لمدونة مثل هذا. يتشابك الاسم داخل التوضيح الملون ، ويمكن اعتباره الشعار.
إلى اليمين يوجد سطر توضيحي يشرح ما هي المدونة ، وكيف تختلف: "فقط دروس التصميم اللذيذ". على الرغم من كونه في الأساس لعبًا بسيطًا وممتعًا للكلمات ، فهناك بعض الكلمات الرئيسية التي تضرب القارئ تسبب حكم إيجابي. "فقط" - إنها فريدة ، أصلية ، فريدة من نوعها.
يجيب على "كيف يختلف هذا بلوق من الآخرين؟" السؤال. "ألذ" - الشعار يمكن أن يكون "دروس التصميم اللذيذ". ليس هذا الصوت غريباً بعض الشيء ، ولكنه لا ينطوي على أي أسبقية على برامج التصميم الأخرى ، أو مدونات تعليمية أخرى.
أعلاه ، هناك أيضًا التنقلات المتعلقة بالمدونة وشريط البحث على اليمين. مباشرة أدناه ، يتم تعريف المحتوى وتنظيمه ، مما يؤدي بالقارئ إلى التعمق أكثر في المدونة.
13. يوست
توفر هذه المدونة محتوى رائعًا في العنوان. يسمح الإطار السلكي الفريد للرأس أن يحتوي على رسومات ومحتوى كافٍ لإجراء اتصال بقارئ جديد. تُعد الشخصية والتوضيح وراءه من أول الأشياء التي سيلاحظها الزائر الجديد ، ويقومون بإجراء مكالمة جيدة من خلال وضع نقطة الحرف على محتوى العنوان على اليسار.
بعد أن تؤدي العين إلى محتوى العنوان ، يرون الشعار وطرق الاشتراك أو التواصل مع المدونة. بعد ذلك ، تقرأ تمامًا كمحتوى عادي من محتوى "حول الصفحة" ، باستثناء حقها المميز في الصفحة الأولى ، وهذا يعني أن القراء الذين يهتمون بالقدر الكافي للانتقال إلى الصفحة عن طريق الإنترنت يجعلون ذلك الاتصال الشخصي - بدلاً من ذلك ، كل القراء الجدد يفعلون ذلك. يشرح المحتوى ماهية المدونة ، ثم يعرض بعض المحتويات الشهيرة والمميزة.
أسفل الرسم التوضيحي إلى اليمين ، يتم عرض موجز RSS مرة أخرى ، ولكن هذه المرة مع رسم أكثر تميزًا. لاحظ كيف يظهر عرض الخلاصة الثاني على اليمين ، بعد أن يكمل القارئ قراءة بعض عناوين المحتوى وقليلاً من المعلومات حوله ، وبعد أن يكون قد أجرى اتصالًا مع المدونة.
14. أن إيندي دود
توفر الأحرف في هذا العنوان ، مثل جميع الرؤوس الأخرى التي تحتوي على أحرف ، لمسة شخصية وتعمل كمقدمة رائعة للمدونة. إنه أول شيء سيلاحظه القارئ الجديد ، وجودة عالية ، بالإضافة إلى ميزات التصميم المحيطة به ، يدلي ببيان حول أسلوب هذا المصمم وما الذي يتوقعه منه.
إلى اليسار يوجد الشعار ، والذي يؤدي أيضًا إلى توجيه الشعار إلى شرح المحتوى المعروض على المدونة. تقود العين مرة أخرى إلى جزء من المحتوى يتقاسم شخصية المدونة.
15. أوزون 3
إن موضوع هذا العنوان فريد من نوعه ، وبهذا المعنى ، فإنه يخلق تصميم ويب لا ينسى - وهو انطباع أول رائع حقًا. بعد تقدير الرسم التوضيحي ، تقود العين إلى شعار حفظ العلامة التجارية ، ثم تقود مباشرة إلى الملاحة الرئيسية ، ثم إلى المحتوى.
يستطيع المشاهدون للمرة الأولى أن يروا أن هذه المدونة مركزة حول محفظة تصميم مواقع ويب ، ويكتشفونها بعد مشاهدة عمل المصمم على رأس الصفحة.
على الرغم من بساطته ، فإن هذا العنوان فعال للغاية من حيث التسلسل الهرمي المرئي ويضع بيانًا ضخمًا للمشاهدين.
16. nDesign Studio
هذا الرأس الملون هو عامل الجذب الرئيسي لتصميم الويب هذا ، ويحدد الشعار للزائر أنه استوديو تصميم.
العنوان المدهش يثبت مهارات المصمم وعلامته التجارية. يتشابك كل من التنقل ، والخلاصات ، وشريط البحث مع رأس الصفحة أيضًا ، مما يجعلها واحدة من أول العناصر الملحوظة.
يعد التنقل الرئيسي في شكل علامات تبويب ، ويتم التعرف عليه أولاً باعتباره جزءًا من الرأس. نظرًا لأنه في شكل علامات تبويب ، يبدو أنه مرتبط بالمحتوى أيضًا ، مما يرفع نظر الزائر إلى المحتوى المهم للمدونة.
17. مصمم الويب الجدار
هذه مدونة رائعة أخرى من تصميم Nick La من nDesign Studio ، ونرى أسلوبًا مشابهًا: خلفية / رأس مدهش كبير ، تحقق من مواهب وخبرات المصمم. يكون الشعار هنا أكبر ، مما يوفر شعارًا يربط اسم المدونة بهدفه.
ما تبقى من المحتوى في الرأس هو التنقل الأولي ، و contact / RSS ، وشريط البحث. كلها مزينة بطريقة مشابهة للرأس ، وربطها.
تشتمل هذه العناصر أيضًا على ميزات مشابهة للمحتوى (على سبيل المثال ، خلفية أكثر سطحية وملمسًا شبيهًا بالورق) حتى يشعروا أيضًا بأنهم جزء من المحتوى أيضًا. يربط هذا القسم من الرأس الرأس التمهيدي بمنطقة المحتوى.
18. Ma.tt
يبدو أن هناك قاعدة تصميم في نهاية المطاف لا تجعل الرؤوس أكثر من 200-250 بكسل. هذه قاعدة رائعة يجب اتباعها لأسباب عديدة مختلفة ، لكن هذا العنوان يُظهر كيفية كسر هذه القاعدة بفعالية.
من خلال عدم عرض أي محتوى في البداية ، يستخدم Matt تصميمه لإضفاء أكبر انطباع على العارض لأول مرة. تفاصيلها الأنيقة وطرقها الإبداعية تخلق انطباعًا أوليًا لا ينسى.
الشعار كبير ، وبما أن موقع الويب هو اسم ، فإنه يفترض موضع المدونة الشخصية. كما يوجد موجز RSS في أعلى اليمين ، حيث يخبر المشاهد أنه بالفعل مدوّنة من البداية. وأخيرًا ، فإن التنقل هو ما يُرى في الماضي ، وهذا يثير الزائر للاستمرار من خلال المدونة.
19. منتجع بكسل
نمط الرسم التوضيحي المفصل لهذا الرأس يجعله ممتعًا ، ولكنه نظيف ومهني. بل هو متحرك كما يمر المشهد خلال النهار والليل ، مذكرا الزائر لمواصلة البحث في الرأس ، والذي يتميز بالشعار (العلامة التجارية) والملاحة. يمكن لهذه الطريقة بسهولة تعزيز المزيد من النشاط في المدونة.
أسفل التنقل الذي يتم وضعه في المقدمة ، يوجد تنقل فرعي مع سهم "يربط" به إلى بقية الرأس. إنه يساعد على تحديد الفئات بشكل أكبر ، ويساعد القارئ في العثور على المحتوى الذي يهمهم بشكل أفضل.
20. مستودع Webdesigner
آه ، نعم - المدونة التي تشاهدها حاليًا. سواء كنت زائرًا للمرة الأولى ، أو كنت تقرأ Webdesigner Depot لفترة طويلة ، فإن رأس الطباعة سيحظى باهتمامك بالتأكيد.
ما هو رائع في هذا العنوان هو أنه ليس مجرد عنوان ذو نداء إبداعي فقط ، ولكن العناصر الموجودة فيه تشير إلى أنها رأسية مع نداء إبداعي يركز على أجهزة الكمبيوتر أو الويب. الرسوم التوضيحية للكمبيوتر المحمول ، "www." ، وغيرها من التقنيات ، كلها تجذب الجمهور المستهدف بشكل أكثر تحديدًا.
لا يحتوي العنوان الرئيسي كثيرًا على محتوى يقدمه ، باستثناء رابط التمرير إلى الصفحة الرئيسية. ومع ذلك ، ولأنه معقد للغاية ، فإن أي ميزات إضافية قد تطغى على التصميم وتجعله مزدحماً للغاية.
هذا الرأس مثالي على الرغم من: تعيين الحالة المزاجية ، وإلهام المشاهد ، وهو قصير بما يكفي ليقود المشاهد إلى بقية المحتوى.
تغليف
نأمل أن يساعد النظر إلى هذه الأمثلة العشرين في تحديد العديد من الأسئلة المطروحة بشكل أفضل في بداية هذه المقالة ، ومساعدة كل مصمم مواقع ويب على إيلاء اهتمام أفضل لرؤوس المدونات.
يمكن أن يختلف المحتوى الذي يتم تضمينه في العنوان بشكل كبير من مدونة إلى مدونة ومن المهم مراعاة أهداف المدونة والموضوع وما سيبحث عنه زائر للمرة الأولى عند زيارة المدونة.
مكتوبة حصرا ل WDD من قبل كايلا نايت .
لا تتردد في مشاركة النصائح الخاصة بك لتصميم الرأس ، وكذلك أي أمثلة إضافية.