عناوين تقديم المحتوى.

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

لكن في بعض الأحيان ، تعمل التقنيات الأكثر وضوحًا ، مثل تعديل الوزن المرئي والتخطيط ، بشكل أفضل.

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

تابع القراءة لمعرفة كيفية إنشاء عناوين لا تنسى مع تداخل في النص.

مثال للحصى من الخطوط غير المحاذاة

ما علاقة الأشكال الغريبة أعلاه بالأسماء "WDD" و " {$lang_domain} "؟ إنها تحف مؤسفة من وضع نص واحد على الآخر دون اعتبار للموضع أو التفاصيل. ها هي الصورة المسيئة:

مثال النص مع محاذاة سيئة

في لمحة ، الرسم أعلاه هو عرض مباشر لاسم المدونة واختصارها. المحرف هو الخط الرسمي المستخدم من قبل المدونة. البرتقالي اللامع يأتي مباشرة من موضوع الموقع وتركز كل من خطوط النص بشكل مثالي تقريبا.

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


مثال النص مع محاذاة سيئة

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

بطبيعة الحال ، لا يعد التداخل دائمًا أفضل طريقة لترتيب عنوان قصير وعنوان فرعي طويل.

توضح الأمثلة أدناه بعض العلاجات الممكنة عندما يستدعي التصميم شيئًا أكثر إبداعًا من المعتاد h1 و h2 عناصر.

ثلاثة أمثلة من الطرق الأخرى لمطابقة العناوين الكبيرة والصغيرة

يحتوي النص المتداخل على أناقة لا يمكن تكرارها بسهولة باستخدام HTML (حتى الآن). غالبًا ما يكون سطرين من النص معًا أكثر من مجموع كل منهما على حدة.

أساسيات النص المتداخل

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

أمثلة على وضع ، الوزن النسبي ، الصوت والتفاعل

تقنيات مختلفة تغيير تأثير تداخل النص.

فيما يلي العوامل الرئيسية الأربعة التي تؤثر على النص المتداخل:

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

موضع يؤثر على كيفية قراءة خطوط ككل

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

نص صغير محاذاة إلى اليسار العلوي

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

نص صغير الانحياز إلى أسفل اليمين

الإصدار أعلاه أقل غموضا. يؤدي تحريك النص الصغير إلى اليمين السفلي إلى إعطاء أولوية واضحة للنص الكبير. الآن يقرأ على النحو التالي: "كليشيهات: تجنب" المثل الطاعون ".

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

نص صغير الانحياز إلى أسفل اليمين

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

نص صغير محاذاة إلى اليسار العلوي

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

نص صغير الانحياز إلى أسفل اليمين

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

نص صغير الانحياز إلى أسفل اليمين

حتى إذا اضطررنا إلى تقليص النص الكبير ليتناسب مع استخدام كلمتين (عبارة كاملة) للنص الكبير ، فإن كلا الخطين يقرأان بشكل أفضل.

باستخدام النص المتداخل ، فإن الحصول على الصياغة الصحيحة من خلال التخطيط لا يقل أهمية عن اختيار الألوان والخيارات.

الهيمنة الرصيد من خلال العمل مع ، وليس ضد ، الخلفية

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

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

نص كبير يطغى على النص الصغير

"WWW" يقفز أولاً. يشرح مفهوم "مرحبًا بك في العصر الرقمي" الفكرة التي تدعم الثغرات الثلاثة. ولكن ماذا لو كان من المفترض أن يحمل النص الصغير الرسالة الرئيسية؟

تلاشى النص الكبير لتوازن الوزن بنص صغير

أعلاه ، النص الرئيسي هو "مرحبًا بكم في العصر الرقمي". وماذا يعني ذلك؟ تلاشي ، "WWW" يقدم تلميحًا.

أمثلة على كيفية تلاشي النص الكبير

فكلما زاد اندماج النص الكبير في الخلفية ، كلما قلت أهميته. عندما يصبح النص الكبير مرئيًا بالكاد ، يصبح النص الصغير العنصر الرئيسي.

التفاعل في التفاصيل

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

النص مع المشاكل

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

للحصول على الحد الأقصى من الوضوح ، يتعين علينا الحفاظ على أحرف النص الصغير.

النص مع الحلول

كما هو موضح أعلاه ، فإن التعديلات الطفيفة قد أوصلت التداخل:

  • لقد أصبحت كلمة "النص" الآن أكثر وضوحًا بين المطابقين الشبيهين بمشبك القضبان "C" الكبير.
  • لاحظ كيف أن السيقان الرأسية لـ "r" و "n" في "توضيحي" تلبي حواف "C." الكبيرة
  • الآن تحتوي العدادات الموجودة في "p" و "o" في "supportive" على الأسود فقط.
  • لقد قطعنا الحرف الكبير "A" لجعل الأحرف الصغيرة "s" في صيغة "داعمة" أكثر وضوحًا.

الهدف هو الحفاظ على أشكال الحروف الصغيرة ، حتى لو لم يلاحظها القراء.

حرف يجعل فرقا

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

أمثلة على كيفية تسبب الخطوط غير الملائمة في حدوث مشكلات

فشل تركيبات الخطوط الأربعة أعلاه لأسباب مختلفة:

  1. تم تصميم محرف البرنامج النصي هذا لمحاكاة الكتابة اليدوية. تحتوي حوافها الممزقة على المئات من نقاط المتجهات ، والتي يتم فقدان معظمها بحجم صغير.
  2. ولكن اجعل النص كبيرًا جدًا وتبدو الأحرف أقل مثل الكتابة اليدوية وأكثر مثل مسارات Illustrator الصدفي.
  3. حُلي زابفينو الخطية أفضل من تكساس هيروز ، لكن الصاعد الهائل على "ب" يرمي التكوين من التوازن.
  4. تعتبر Lucida Blackletter معقدة للغاية بحيث لا تكون عملية كخلفية ، على الأقل بدون ترتيب دقيق للغاية للنص الصغير. أيضا ، يختفي طابعها الفريد في حجم صغير. هل تلك المغامرات و الرقيق ، أم أنها مجرد ضبابية؟

بالنسبة للنصوص الكبيرة ، تكون سميكة جدًا أو ضعيفة جدًا على ما يرام

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

لتجنب المشاكل ، انتقل الدهون أو رقيقة. تعمل الأشكال الإضافية السميكة والإضافية بشكل أفضل من الوزن العادي لنفس الوجه. كلاهما يتدخلان أقل لأن النص الصغير له فرصة أقل في ضرب الحافة.

أمثلة على كيفية عمل النص الكبير السميك والشكل الأفضل

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

أمثلة عملية

كيف يمكن أن يعمل هذا مع نص محتمل أكثر؟ إليك بعض الأمثلة للنص المتداخل.

عنوان بلوق عام مجموعة في الأخضر النعناع غير ضارة

سبب عمله: تلاشي في الخلفية ، يعطي النص الكبير أولوية واضحة للنص الصغير. الأشكال الهندسية في Museo لديها القليل من الانحرافات.

المشاكل المحتملة: لن يعمل هذا التداخل تمامًا إذا كان النص الصغير أقصر. لنقل الرسالة ، يجب أن يتداخل النص الصغير مع جميع الأحرف الستة للنص الكبير.


tetsuo / kaneda ، حوار من النصف الأخير من فيلم Akira

سبب عمله: يتقاطع النص الصغير مع ثلاثة ألوان سميكة وسنتين فقط. الكثير من التباين ، حتى بالنسبة للوحة الألوان الدافئة.

المشاكل المحتملة: يبدو أن الحواف النشطة للنصوص الكبيرة تعمل ضد الخطوط الأنيقة للنص الصغير.


steampunk ، عالية الطاقة البخارية الفيكتوري

سبب عمله: يحتوي كلا النصين على أشكال هندسية حادة ويتم ضبطهما بدقة.

المشاكل المحتملة: هل يبدو النص الصغير مفقودًا قليلاً؟ هل تعكس الخطوط حقا روح " steampunk ؟ "


تراجان جميل ومفرط في ملصقات الأفلام الدرامية

لماذا تعمل: إن التتبع السخي في الأحرف الكبيرة والخطوط النظيفة في كلا النصين يجعل كل شخصية واضحة.

المشاكل المحتملة: هل يجعل نسيج الخلفية النوع صعب القراءة؟


العينة 5

لماذا تعمل: النص الكبير السميك مقروء من تلقاء نفسه ، بينما يدعو النص الصغير الحميم للقراءة. تحافظ العديد من التعبئات الإضافية على عمق ألوان الحروف "S".

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

لكن هل يساعد؟

دعونا نطبق هذه الدروس على تركيبتنا الأصلية.

مثال النص مع محاذاة سيئة
عينة 6

لماذا تعمل:

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


مكتوبة حصريًا لموقع Webdesigner Depot by Ben Gremillion . بن هو مصمم ويب يحل مشاكل الاتصال مع تصميم أفضل.

ما هي بعض المشاكل المحتملة في المثال الأخير؟ يرجى مشاركة أفكارك في التعليقات أدناه.