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

Slsabil Zabady

Senior UI UX Designer · Figmawya

Turkey

6 منشور · عضو منذ 2025

مصممة تجربة مستخدم بخبرة 10 سنوات في التصميم و5 سنوات في UX/UI، أدمج بين الجماليات والتحليل لفهم سلوك المستخدم وتصميم واجهات عملية وسهلة الاستخدام. أعمل على تطوير منتجات رقمية تلبي احتياجات المستخدم وتحول الأهداف إلى تجارب فعّالة وسلسة.

Slsabil ZabadySenior UI UX Designer
شاهد

السلام عليكم جميعاً 👋 💜

النهاردة جاية أحكيلكم عن مشكلة تانية كانت بتواجهني الفترة اللي فاتت وهي تحديث المحتوى الخاص بموقع Uxera

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

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

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

وقد كان فعلا لقيت طريقة عن طريق إنشاء GPT خاص فقط بإضافة المحتوى داخل لوحة التحكم الخاصة بالموقع وربطه مع Lovable بما أنه التول اللي استخدمتها في إنشاء الموقع .. فدلوقتي عن طريق شات في ChatGPT أقدر أنشئ محتوى بناء على مواصفات ونموذج محدد ماشي عليه واستناد لمصادر زي Material Design, Carbon (IBM),Apple (HIG) وغيرها .. بعدها ببدأ أراجع وأعدل في الصيغة وهكذا وبعد ما أعتمد المعلومات بقول لل GPT يضيف المعلومات للوحة التحكم يعني اللي كان بياخد مني ساعات بقى في دقائق معدودة بيكون جاهز 🤩

ودلوقتي الصفحة الرئيسية للموقع بقى فيه سكشن خاص بآخر التحديثات تقدروا تعرفوا ايه الجديد اللي اتضاف بكل سهولة 😇

رابط الموقع:https://ui-elements-dictionary.uxera.net/#home

2
Slsabil ZabadySenior UI UX Designer
شاهد

السلام عليكم جميعاً 👋🏻💜

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

فبدأت أدور وأجرب كذا طريقة لحد ما قدرت أعمل Voice Over بالذكاء الاصطناعي باستخدام google ai studio ، وبكده الحمد لله حليت أول مشكلة 😁

فضلت بقى المشكلة التانية، إزاي أحوّل المحتوى لفيديو فيه حركة وتكون ماشية مع الكلام؟

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

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

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

ولما شغلت الفيديو وشوفت إن الحركة ماشية مع الكلام والتوقيت مظبوط، اتبسطت جدًا بالنتيجة 😍

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

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

ودي كانت النتيجة اللي وصلت لها، وحبيت أشاركها معاكم 💜

https://youtube.com/shorts/HT8vwHdovDQ?si=O8PYSk3DhVg1rnul

3
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
Slsabil ZabadySenior UI UX Designer
مميز

السلام عليكم ورحمة وبركاته جميعاً 👋🏻

النهاردة حابة أحكي لكم رحلتي مع مشروع أسفار وهو” نظام لإدارة معارض الكتب” بيجمع بين تجربة الزائر والعارض والمنظم

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

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

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

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

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

ومن هنا تقدروا تشوفوا شغل بناتي المميزات اللي بفتخر بيهم وممتنة لوجودهم معايا في المشروع دا

كيس ستدي الزائر :
https://www.behance.net/gallery/254778453/Asfar-Book-Fair-Dashboard

والفريق المسؤول عنها
Aml Elsharawy Marwa Ismail Yasmin Rabea

كيس ستدي المنظم :
https://www.behance.net/gallery/254778453/Asfar-Book-Fair-Dashboard

والفريق المسؤول عنها
Marwa Ashraf Menna Baker Ahlam Elsayed Rehab Mousa Aya Salah Amal Yassin Howida EL Melegiy Rania Mamdouh

كيس ستدي العارض:
https://www.behance.net/gallery/254826855/Asfar-Book-Fair-Management-System-UXUI-Case-Study

والفريق المسؤول عنها
Iman Elhenawy Rahiq Mohamed Dina Khalil esraa nayel Awasir Abdelhadi Rana Wael Menna Refaat
منتظرين دعمكم وآرائكم 😇✨

11