أفضل الممارسات والنصائح المتعلقة بتصميم الويب سريع الاستجابة

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

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

حدد أسلوبك

إنشاء لوحة ألوان

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

فكر في الجوّال أولاً

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

قم بإنشاء دليل الأسلوب الخاص بك بعد تخطيطاتك الأولية ، وليس قبل ذلك

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

الاتساق لا يعني بالضرورة أنه ممل

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

تتضمن بعض العناصر التي قد ترغب في تصميمها وتوحيدها ما يلي:

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

يكتب

نسخ الكتل

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

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

لا تخف من تفكيكها

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

نعم ، يقوم الأشخاص بالتمرير لأسفل

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

ذات صلة

اتجاهات التصميم الرائدة لعام 2020

تحجيم النوع

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

اكتب اللون

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

اكتب الوزن

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

التنقل

هامبرغر!

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

قم بتضمين زر "الرجوع إلى الأعلى" أسفل صفحة التمرير الطويلة

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

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

مسرد التصميم:

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

نسخ كتلة
فقرة مجمعة أو سلسلة من فقرات النص.

الطيّة (الرقمية)
المستخدمة في تصميم موقع الويب (جنبًا إلى جنب مع " فوق التمرير") للإشارة إلى جزء صفحة الويب المرئي بدون تمرير. نظرًا لاختلاف أحجام الشاشة بشكل كبير ، لا يوجد تعريف محدد لعدد وحدات البكسل التي تحدد الطية .

سيريف
إسقاط طفيف ينتهي بضربة حرف بحروف معينة.

بلا الرقيق
a sans - serif أو sans serif أو gothic أو san serif أو محرف sans ببساطة هو أحد الخطوط التي لا تحتوي على ميزات إسقاط صغيرة تسمى " serifs " في نهاية السكتات الدماغية. يأتي المصطلح من الكلمة الفرنسية sans ، والتي تعني "بدون" و " serif " من الكلمة الهولندية schreef والتي تعني "الخط".

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

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

منفذ العرض
منطقة مؤطرة على شاشة عرض لعرض المعلومات.

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