مجتمع فيجماويةمساحة تجمعنا، وأفكار تلهمناfigmawya.com

هل تعلم

Slsabil ZabadySenior UI UX Designer
هل تعلم

💡هل تعلم (03)

هل تعلم إن المستخدم مش بيشوف كل عناصر التصميم بنفس الأهمية؟

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

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

🎬 مثال: Netflix
في صفحة الفيلم، اسم العمل بيظهر بشكل بارز، بعده الوصف، ثم زر التشغيل.
الترتيب ده بيساعد المستخدم يفهم المحتوى ويوصل لإجراء المشاهدة بسهولة.

✨ كمصمم UX/UI، افتكر دايمًا:
💜استخدم اختلاف الأحجام لإظهار الأهمية.
💜ميّز الإجراءات الأساسية بصريًا.
💜خلي لكل شاشة نقطة تركيز واضحة.

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

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

https://lnkd.in/p/dduQABZR

3
Slsabil ZabadySenior UI UX Designer
هل تعلم

💡هل تعلم (02)

هل تعلم إن المستخدم ممكن يحس إن تطبيقك صعب، لمجرد إنك غيّرت حاجة هو متعود عليها؟

تخيل تدخل موقع تسوق جديد، وتفضل تدور على عربة التسوق لأن الأيقونة اتغيرت أو مكانها مش متوقع!
رغم إن الفكرة ممكن تكون مبتكرة، لكنها زوّدت المجهود اللي محتاجه علشان تنفذ مهمة بسيطة.
وده اللي بيوضحه قانون جاكوب (Jakob’s Law).

المستخدم بيكوّن توقعاته من التطبيقات والمواقع اللي اتعامل معاها قبل كده، وبيستخدم الخبرة دي علشان يفهم أي واجهة جديدة.

🛒 خُد Amazon كمثال:
أيقونة عربة التسوق مألوفة لمعظم المستخدمين، وده بيساعدهم يتعرفوا على وظيفتها من غير شرح.

✨ كمصمم UX/UI، افتكر دايمًا:
💜حافظ على الأنماط المألوفة في الوظائف الأساسية.
💜متغيّرش طريقة التفاعل لمجرد إنك عايز تعمل حاجة مختلفة.
💜ابتكر لما يكون التغيير بيحل مشكلة حقيقية للمستخدم.

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

💬 شاركونا في التعليقات من وجهة نظرك، إمتى كسر الأنماط المألوفة بيكون ابتكار، وإمتى بيكون تعقيد غير ضروري؟

https://lnkd.in/p/dyNMMi5X

3
Slsabil ZabadySenior UI UX Designer
هل تعلم

💡هل تعلم (01)

هل تعلم إن مجرد تغيير محاذاة العناصر ممكن يخلي التصميم أسهل في الفهم؟

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

حتى لو كل العناصر موجودة، هتحس إن الواجهة مش منظمة.

وده اللي بيوضحه مبدأ المحاذاة (Alignment) 📐

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

🔍 خد Google Search كمثال:

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

✨ كمصمم UX/UI، افتكر دايمًا:

* استخدم خطوط محاذاة واضحة للعناصر المرتبطة.
* حافظ على اتساق محاذاة العناوين والحقول والأزرار.
* استخدم Grid System لتنظيم الواجهة.

🧠ومتنساش المحاذاة الصح بتخلي التصميم يبان مرتب وسهل في القراءة.

💬 شاركونا في التعليقات .. هل بتلاحظ المحاذاة أول ما تشوف تصميم، ولا بتركز على الألوان والخطوط؟

https://lnkd.in/p/d–cYnU4

3
حسن جادمؤسس مجتمع فيجماويه
هل تعلم

معلومة بخصوص العمل التطوعي

من الصفات المهمة جداً فيمن يتطوع للعمل بدون مقابل أن يعمل بنفس الجهد والانتاجية في العمل الحقيقي

المفترض أن لا ينقص من مجهوده أو يتهاون فيه بل يكون حريص كل الحرص على أن يؤديه بنفس الجودة أو أعلى ..

⚠️نصيحة : إن كان جهدك لنفسك أعلى من جهدك في العمل التطوعي فعليك أن تراجع نفسك وتجدد نيتك ⚠️

في حالة التطوع يكن أجرك على الله .. هل تدرك أنك تعامل الله في هذه الحالة ؟ وإنه لشيء عظيم

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

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

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

وأقل مكسب من العمل التطوعي هو ” قتل وقت الفراغ ” ، فلن تضيع وقتك وشبابك في متابعة اخبار منصات التواصل الاجتماعي وغيرها .. بل تكون في عمل وتعلم مستمرين ✅

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

بالتوفيق دايماً يا شباب

3
حسن جادمؤسس مجتمع فيجماويه
هل تعلم

سعمت عن مصطلح Embedding في الذكاء الاصطناعي ؟

البوست ده هيخليك تفهم اكتر عن كيفية عمل نماذج الذكاء الاصطناعي بشكل مبسط وبأسلوب ممتع

نتمني لكم الفائدة يا أبطال 😇🌷

https://lnkd.in/p/dhT3nada

3
احمد محمود
مميزهل تعلم

السلام عليكم ورحمة الله وبركاته، كنت حابب اتكلم عن كام نقطة من باب المشاركة والمنفعة من تجاربنا وبفكر نبدأ سلسة بعنوان (تجربتك هتفيدني) بعد اذن مهندس حسن اكيد
—————————————–
تجربتك هتفيدني
(تجربة ١ – احمد محمود)
من فترة بسيطة بفضل الله حاولت انفذ بعض التصاميم انها تطلع كود تفاعلي موقع متاح للجميع كنت شغال على مشروع ك معرض اعمال portfolio اشتغلت ب antigravity ب موديل Gemini 3.6 كنت بحاول مثلا اوصفله التصميم اللى محتاجه عن طريق prompt باستخدام key words واللى معرفتش أوضحه كنت بعمل التصميم على فيجما وبرسل الصورة عشان تتنفذ، اكيد فى طرق كتير تاني فعالة نوضح بيها ل ai محتاجين نعمل ايه بس وقتها عملت كده يعني، استخدمت في المشروع إطار عمل react وعملت المشروع واشتغل الحمدلله، جيت بعدها ب فترة قولت طيب ليه منعملش موقع شامل يكون system بيقدم حاجة مفيدة ومن هنا بدأت بالفعل اجرب اعمله بدأت اجمع المتطلبات ومسكت كل جزء من كل صفحة واشتغل عليه وبالفعل الحمدلله كذلك اشتغل لكن اللى لاحظته اني مقررتش قبل ما اشتغل ايه نوع التقنية اللى هستخدمها (technology stack : angular, react, node js أو تقنية اخرى) طيب برضو مقررتش هل فى design pattern اقدر استخدمه عشان يوفر علينا وقت الانشاء، كل ده طبعا كان حسب طبيعة الموقع بس قررت أن هشتغل على تحويل التصميم ل كود مباشرةً ولكن حصل ايه؟ الموقع لقيته مستهلك مساحة كبيرة من ذاكرة الرام ف حين أن هو بسيط من حيث هيكل معمارى، الموقع كان بيحمل شويه أثناء اى interaction، بالإضافة إلى أن كنت محتاج تأمين قاعدة البيانات لأن أخطاء ال ai موجودة كذلك ف ذلك الامر من الممكن أن اى حقن ف inputs يحصل على البيانات الموجودة لديك
ف كنت عاوز اقول ان احنا حاليا محتاجين نعرف قبل ما نحول التصميم ل كود محتاجين نعرف حجم الموقع قد ايه من حيث المميزات، بناءا عليه هحدد نستخدم أنهى technology stack، هستخدم أنهى model عشان تخطيط وانهي عشان انفذ، لازم اعرف design pattern من خلالها اتواصل مع ai يطبقها عندي عشان تزود ال performance وفى حاجات تانيه كتير لازم اكون عامل حسابي عليها، جائز لما بنحاول نبني نظام بسيط مش بنجد اعطال أو أخطاء، لكن كل ما بنكبر بالنظام scale و لو مش حاطين قواعد تطوير هنمشي عليها هنلاقي ان الامر كان محتاج تنظيم قبل ما تبدأ، اسف على الإطالة كنت حابب اتكلم عن تجربة ليا

9
حسن جادمؤسس مجتمع فيجماويه
هل تعلم

لو خدت كورسات وحضرت دورات تفاعلية وعندك بيهانس ولحد دلوقتي لسه مش لاقي وظيفية فلازم تاخد بالك من النقاط الهامة دي :

1- بلاش تعمل مشاريع طويلة على بيهانس ، المطلوب منك المشكلة وإزاي حليت المشكلة .. حتى لو كان صفحة واحدة

2- إهتم يكون ليك مشاريع باللغة العربية على بيهانس لإن اللغة العربية تنسيقها أصعب من الإنجليزي ، كمان الإنجليزي ممكن يترك انطباع ان التصميم ده قوالب جاهزة

3- لو انت مبتديء فصعب جداً يكون تصميمك مساوي للتصاميم الاحترافية ، اللي بيراجع أعمالك بيكون عاوز يشوف أعمال مناسبة لمستوى خبرة وللفرصة الوظيفية المتاحة في الشركة

4- لازم يكون ليك مشاريع فردية على بيهانس ، مش كله يكون multi owner ، اللي بيراجع شغلك عاوز يعرف اسلوبك انت ، لكن الاعمال المشتركة مش بتعكس خبرتك انت .. بتعكس ان شاطر في العمل مع فريق .. وده مطلوب ايو .. لكن اهتم بمشاريعك الفردية كمان

5- لازم يكون ليك كورس فردي اخذته اونلاين ، ده بيعكس درجة انضباطك الذاتي اكتر من الكورسات الجماعية .. ده مهم وده كمان مهم

دي بعض الملاحظات اللي لو خدت بالك منها ممكن تزود فرصك الوظيفية إن شاء الله

6
فريق فيجماويةمن الخبراء للشباب، ومن الشباب للخبراء
هل تعلم

قد تجعل المعلومة المهمة أكبر وأكثر لفتا للنظر… فيتجاهلها المستخدم تماماً 😳

تعرف هذه الظاهرة باسم عمى اللافتات Banner Blindness

وهي ميل المستخدم إلى تجاهل العناصر التي تبدو بصريا مثل الإعلانات أو اللافتات الترويجية حتى عندما تحتوي على معلومات يحتاجها فعلا

المثير هنا أن زيادة حجم العنصر أو استخدام لون قوي لا تضمن جذب الانتباه

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

وهذا يعني أن المظهر البصري للعنصر نفسه يوفر للمستخدم إشارة عن نوع المحتوى المتوقع منه

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

✍️ مثال :

تخيل لوحة تحكم لخدمة استضافة خوادم

يوجد أعلى الصفحة مستطيل كبير أصفر يخبر المستخدم:

“مساحة التخزين لديك أوشكت على النفاد”

وقد يعتقد المصمم أن الحجم واللون الأصفر سيجعلان الرسالة مستحيلة التجاهل

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

الأفضل أن تظهر المعلومات الحرجة ضمن السياق الذي يعمل فيه المستخدم

✅ مثلا بجوار مؤشر مساحة التخزين نفسها مع حالة واضحة وإجراء مناسب

⚠️ المبدأ هنا ليس أن اللافتات سيئة دائما

💡بل أن المعلومات الوظيفية المهمة يجب ألا تعتمد فقط على تصميم صاخب لجذب الانتباه أو توضع داخل نمط تعلم المستخدم تجاهله

وتشير إرشادات Nielsen Norman Group أيضا إلى أن المستخدمين طوروا ميلاً قوياً لتجاهل العناصر التي تبدو كإعلانات حتى إن كان العنصر يقود إلى وظيفة مفيدة داخل الموقع

👈 الخلاصة :

❌ لا تسأل فقط: هل العنصر بارز بما يكفي؟

✅ اسأل أيضا: ماذا سيعتقد المستخدم أن هذا العنصر يمثل بمجرد رؤيته؟

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

6
فريق فيجماويةمن الخبراء للشباب، ومن الشباب للخبراء
هل تعلم

تبسيط الواجهة لا يعني بالضرورة حذف الخيارات… أحيانا يكفي أن تعرضها في الوقت المناسب

تعرف هذه التقنية باسم الكشف التدريجي Progressive Disclosure

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

7