Feb 15, 2026

Dark & Light Experience

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

Feb 15, 2026

Dark & Light Experience

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

  • Blog image

    نبذة عن المشروع


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


    المشكلة


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


    الهدف


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


    فكرة التصميم


    تم اختيار الألوان بحيث يوفر الوضع الفاتح تجربة واضحة في الإضاءة القوية، بينما يوفر الوضع الداكن تجربة مريحة للعين عند الاستخدام في الليل أو الإضاءة المنخفضة.



    نبذة عن المشروع


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


    المشكلة


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


    الهدف


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


    فكرة التصميم


    تم اختيار الألوان بحيث يوفر الوضع الفاتح تجربة واضحة في الإضاءة القوية، بينما يوفر الوضع الداكن تجربة مريحة للعين عند الاستخدام في الليل أو الإضاءة المنخفضة.



    Blog image
    Blog image



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

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

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





    تتحرك العيون بشكل تفاعلي عند مرور مؤشر الماوس فوقها، مما يضيف لمسة مرحة للتصميم ويجعل الواجهة أكثر حيوية وتفاعلاً



    تم استخدام تأثير الزجاج (Glass Effect) في بطاقة المنتج لإضافة عمق بصري ولمسة حديثة على التصميم، مع الحفاظ على وضوح المحتوى وسهولة القراءة




    تفاعل السحب (Swipe Interaction)


    يجمع هذا التفاعل بين جمال التصميم وسهولة الاستخدام من خلال إخفاء الإجراءات الثانوية وإظهارها عند الحاجة. تم تطبيقه في كلٍ من Light Mode و Dark Mode لضمان تجربة متناسقة وواضحة في كلا الوضعين



Footer Bg image

Sheren Salman Al-Magnooni — UX/UI Designer

sheren202100511@gmail.com | 0565886911 | Makkah, Saudi Arabia

Footer Bg image

Sheren Salman Al-Magnooni — UX/UI Designer

sheren202100511@gmail.com | 0565886911 | Makkah, Saudi Arabia

Footer Bg image

Sheren Salman Al-Magnooni — UX/UI Designer

sheren202100511@gmail.com | 0565886911 | Makkah, Saudi Arabia

Create a free website with Framer, the website builder loved by startups, designers and agencies.