Scalenut يصبح G2 Fall Leader 2022 - فئة إنشاء المحتوى

لن تحصل أبدًا على فرصة ثانية لترك الانطباع الأول.

إنه شيء سمعناه من الناس يكررونه ويتقدمون بطلب لكل جانب من جوانب حياتنا تقريبًا. يشمل مواقعنا الإلكترونية أيضًا.

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

يعد التصميم مهمة مكثفة ومرهقة لأنها تشمل مجموعة من الجوانب التي تعمل جنبًا إلى جنب مع بعضها البعض.

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

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

سنناقش اليوم كيفية اختيار الخطوط لمواقع الويب.

أهمية اختيار أفضل الخطوط للموقع

خطك هو سفير علامتك التجارية

لديك 0.5 ثانية فقط للتأكد من أن الزائر لديه رأي إيجابي حول موقع الويب الخاص بك وخيارات الخطوط. الغالبية منها ، 94٪ منها تعتمد على عناصر التصميم.

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

يساعد في زيادة تجربة المستخدم الإجمالية

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

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

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

تصنيف الخطوط لصفحة الويب

‍

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

يمكننا تمييز خطوط موقع الويب في الفئات التالية -

سيريف

أمثلة - Times New Roman ، Garamond ، MS Serif ، Merriweather ، Abril Fatface ، Playfair Display ، جورجيا

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

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

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

بلا الرقيق

أمثلة - Arial و Alegreya و Open Sans و Montserrat و Comic Sans و Verdana و Oswald و Roboto و Lato و Helvetica

محارف Sans-serif هي التكرار الحديث لـ Serif. كما يوحي الاسم ، تأتي هذه بدون الرقيق ، مما يزيد من إحساس الحد الأدنى. في الأيام الأولى ، لم تكن شاشات الكمبيوتر متقدمة بما يكفي لتقديم الرقيق في شكلها الأصلي. لذلك اكتشف المصممون الخطوط الأكثر ملاءمة للقراءة الرقمية.

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

Segoe UI ، الخط الافتراضي لنظام التشغيل Windows ، هو نمط خط Sans-serif. يعد Base 9 & 12 أحد أكثر أنواع خطوط Adobe شيوعًا التي من المحتمل أن تصادفك ، وهو ينتمي إلى فئة Sans-serif. ينتمي SF Pro ، أحد أشهر المحارف على نظام Apple الأساسي ، إلى هذه الفئة أيضًا.

بلاطة سيريف

أمثلة - Sentinel و Clarendon و Adelle و Arvo

نوع من خطوط Serif ، يُعرف أيضًا باسم خط Slab Serif باسم الخط المصريين. هذه أنماط خطوط متكتلة وقوية المظهر مع نسبة تباين أقل من Serif التقليدي.

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

النصي

أمثلة - أريزونيا ، اليوسفي ، المشاعر العظيمة

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

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

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

ديكور

مثال - هيليوس ، كاساندرا ، شيري بومب ، الريف

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

أصبحت هذه شائعة في القرن التاسع عشر ومنذ ذلك الحين أصبحت ثابتة لأغراض تصميم الويب والإعلان.

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

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

الفرق بين محرف وخط

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

على سبيل المثال ، Arial هو محرف ، و 16pt Arial Bold هو خط.

أشياء يجب وضعها في الاعتبار أثناء اختيار الخطوط الافتراضية لموقع الويب

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

فيما يلي الأشياء التي تحتاج إلى مراعاتها عند اختيار أفضل الخطوط لموقع ويب -

احصل على الأساسيات بشكل صحيح

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

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

لن تستخدم علامة تجارية مثل Amazon خط Horror (إلا في مناسبات محددة ، مثل Halloween). يعتمد نوع الخط الذي تستخدمه بشكل أساسي على جمهورك المستهدف والعواطف التي تريد توليدها.

على سبيل المثال - تشير خطوط Sans-serif إلى البساطة والبساطة. كما أنها تجلب لك ميلك نحو القيم التقليدية والمرونة. خطوط Serif لها حد زخرفي يمثل تمثيلًا رسميًا.

تأكد من أن اختيارك متزامن مع غرض التصميم الخاص بك

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

إذن فهذه هي العناصر التي يجب أن تضعها في اعتبارك -

تقنين الأحرف والبدء والتتبع

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

التباين

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

محاذاة

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

عادةً ما يكون النص المحاذي لليسار هو الأكثر قابلية للقراءة. هناك جانب آخر يجب مراعاته وهو المسافة بين جوانب كتلة النص. يمكنك تعيين طول السطر الأمثل عن طريق تعيين متوسط ​​عدد أحرف يصل إلى 80 حرفًا (بما في ذلك المسافات).

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

استخدم المحارف بحكمة

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

الخطوة التالية هي تصميم الخط وفقًا لذلك. تعكس اختيارات التصميم هذه الجمهور الذي تخدمه وتخدم الفهم الأساسي لنهج علامتك التجارية.

لذلك عندما تنتهي من عناصر التصميم ، اسأل نفسك أسئلة مثل -

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

لا تنسى النظر في أوقات التحميل

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

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

اختر الخطوط الآمنة للويب

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

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

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

قبل بضع سنوات ، كان من الصعب العثور على عدد كافٍ من الخطوط الآمنة للويب ، ولكن اليوم هناك عدد كبير من الخطوط المدفوعة والمجانية لتختارها وتشربها.

على سبيل المثال ، تعتبر Times New Roman و Arial خطوطًا آمنة للويب تنتمي إلى فئات Serif و Sans-serif ، على التوالي. إذا كنت تبحث عن شيء تزييني ، فإن Script MT و Luminari هي خطوط قابلة للتكيف تنتمي إلى فئتي Cursive و Fantasy ، على التوالي.

لقد حان الوقت لاستخدام مزيج من الخطوط للحصول على أفضل النتائج

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

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

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

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