كمطوّر Frontend لازم تحرص على تناسب واتساق جميع عناصر الموقع؛ لأنها تؤثر بالنتيجة النهائية للعمل بشكل لا تتصوّره 👌🏻
ومن أهم النقاط اللي لازم تراعيها بهذا الخصوص:
ومن أهم النقاط اللي لازم تراعيها بهذا الخصوص:
✅ الأيقونات
اختار الأيقونات اللي تستخدمها بدقّة، واحرص تكون متسقة، بنفس اللون والحجم والاستايل.
غالبًا لو تستخدم مكتبة أيقونات واحدة بالمشروع بتكون الأيقونات متناسبة، ولو تفضّل استخدام أكثر من مكتبة اختار الأيقونات بإهتمام بحيث تتناسب وتتناسق مع بعض.
اختار الأيقونات اللي تستخدمها بدقّة، واحرص تكون متسقة، بنفس اللون والحجم والاستايل.
غالبًا لو تستخدم مكتبة أيقونات واحدة بالمشروع بتكون الأيقونات متناسبة، ولو تفضّل استخدام أكثر من مكتبة اختار الأيقونات بإهتمام بحيث تتناسب وتتناسق مع بعض.
✅ الصور
احرص تستخدم صور دقتها ممتازة، وكذلك يكون حجمها مناسب.
خطأ جدًا جدًا تستخدم صور جودتها سيئة أو مثلًا صورة مربعة وتشدّها لتصير مستطيل.. راح تظهر بشكل مزعج وسيء جدًا 😵💫
اختار الصور بأبعاد مناسبة أو اعمل لها اقتصاص.. المهم ما تغيٌر أبعادها.
احرص تستخدم صور دقتها ممتازة، وكذلك يكون حجمها مناسب.
خطأ جدًا جدًا تستخدم صور جودتها سيئة أو مثلًا صورة مربعة وتشدّها لتصير مستطيل.. راح تظهر بشكل مزعج وسيء جدًا 😵💫
اختار الصور بأبعاد مناسبة أو اعمل لها اقتصاص.. المهم ما تغيٌر أبعادها.
✅ الخطوط
أحجام الخطوط وأوزانها وأنواعها مهم تكون محدّدة ومتسقة.. وخليها ثابتة بكامل المشروع.
كذلك استخدم نوع أو نوعين فقط من الخطوط، تكون مناسبة لهوية الموقع.
أحجام الخطوط وأوزانها وأنواعها مهم تكون محدّدة ومتسقة.. وخليها ثابتة بكامل المشروع.
كذلك استخدم نوع أو نوعين فقط من الخطوط، تكون مناسبة لهوية الموقع.
✅ الألوان
استخدم لونين إلى ثلاثة ألوان في الموقع وتكون مناسبة لهوية الموقع ومتناسقة معها.
عادي تستخدم ألوان ثانية بشكل بسيط، لكن ما يكون الموقع حفلة ألوان 😅
استخدم لونين إلى ثلاثة ألوان في الموقع وتكون مناسبة لهوية الموقع ومتناسقة معها.
عادي تستخدم ألوان ثانية بشكل بسيط، لكن ما يكون الموقع حفلة ألوان 😅
✅ الحدود
دخلت موقع - حرفيًا - كل عنصر بالصفحة له Border بسُمك لا يقل عن 3 بكسل! أزعجني وصدّعني 😂💔
استخدم الحدود لعناصر معينة، وممكن للأيقونات، المهم ما تستخدمها بمبالغة.
دخلت موقع - حرفيًا - كل عنصر بالصفحة له Border بسُمك لا يقل عن 3 بكسل! أزعجني وصدّعني 😂💔
استخدم الحدود لعناصر معينة، وممكن للأيقونات، المهم ما تستخدمها بمبالغة.
✅ الأنيميشن
الأنيميشن والتأثيرات تضيف للموقع حياة وتخليه متفاعل بشكل جميل لو استخدمتها بشكل معقول.
أضف الحركة والتأثيرات فقط لعناصر محددة بالصفحة تبغى الزائر ينتبه لها.
دخلت موقع ( نفس موقع الحدود السابق ) بدون مبالغة كل العناصر تتحرك.. فوضى وصداع وتشتت 😵💫
الأنيميشن والتأثيرات تضيف للموقع حياة وتخليه متفاعل بشكل جميل لو استخدمتها بشكل معقول.
أضف الحركة والتأثيرات فقط لعناصر محددة بالصفحة تبغى الزائر ينتبه لها.
دخلت موقع ( نفس موقع الحدود السابق ) بدون مبالغة كل العناصر تتحرك.. فوضى وصداع وتشتت 😵💫
✅ الظلال ( Shadow )
مثل جميع التأثيرات.. رائعة وجميلة جدًا، فقط لو استخدمتها بشكل صحيح ومعتدل.
مثل جميع التأثيرات.. رائعة وجميلة جدًا، فقط لو استخدمتها بشكل صحيح ومعتدل.
✅ الهوامش والمحاذاة
اضبط المسافات بين العناصر ووزّع المساحات البيضاء بشكل صحيح ومتسق.
حدّد Padding و Margin افتراضي للعناصر الأساسية بالصفحة حتى تكون معروضة بشكل مرتب ومريح للعين.
وممكن تستخدم Container حتى ينظم الصفحة ويرتبها.
اضبط المسافات بين العناصر ووزّع المساحات البيضاء بشكل صحيح ومتسق.
حدّد Padding و Margin افتراضي للعناصر الأساسية بالصفحة حتى تكون معروضة بشكل مرتب ومريح للعين.
وممكن تستخدم Container حتى ينظم الصفحة ويرتبها.
كذلك النصوص حدد لها ارتفاع أسطر معين ومناسب، بحيث تكون الفقرات واضحة ومقروءة.
وأبعد جدًا جدًا عن العشوائية في الهوامش والمحاذاة.
وأبعد جدًا جدًا عن العشوائية في الهوامش والمحاذاة.
وبخصوص النصوص فيه خطأ شائع ومستفز جدًا، ألاحظه بكثير مواقع.
وهو استخدام قالب جاهز وتعريبه فقط بدون تعديل محاذاة الكتابة، فتكون النصوص عربية بمحاذاة لليسار 😆
وهو استخدام قالب جاهز وتعريبه فقط بدون تعديل محاذاة الكتابة، فتكون النصوص عربية بمحاذاة لليسار 😆
✅ حل مشكلة ال scroll الأفقي
المواقع اللي تتحرك يمين وشمال مع المستخدم غير احترافية ابدًا.
المواقع اللي تتحرك يمين وشمال مع المستخدم غير احترافية ابدًا.
أخيرًا..
لو الواجهات جايتك من مصمم UI Designer بيكون خفّف عليك المهمة بشكل كبير، ولو كنت أنت المسؤول عن هذه الجزئية فركّز جدًا بكل ما سبق.
واحرص تكون الواجهات:
- بسيطة
- مرتبة
- لا تحتوي عناصر كثير ( ما تكون زحمة )
لو الواجهات جايتك من مصمم UI Designer بيكون خفّف عليك المهمة بشكل كبير، ولو كنت أنت المسؤول عن هذه الجزئية فركّز جدًا بكل ما سبق.
واحرص تكون الواجهات:
- بسيطة
- مرتبة
- لا تحتوي عناصر كثير ( ما تكون زحمة )
وتأكد إن هذه التفاصيل تفرق جدًا..
صحيح ما ينتبه لها المستخدم العادي ولا يقدر يحدد مكان الخطأ، ولكن راح يوصلك تعليقه على شكل:
- الموقع مرتب وجذاب ✅
أو
- الموقع فيه شيء خطأ بس ما أعرف فين ❌
صحيح ما ينتبه لها المستخدم العادي ولا يقدر يحدد مكان الخطأ، ولكن راح يوصلك تعليقه على شكل:
- الموقع مرتب وجذاب ✅
أو
- الموقع فيه شيء خطأ بس ما أعرف فين ❌
جاري تحميل الاقتراحات...