| بداية الرحلة | ايش يعني UI و UX? (اذا تعرف الفرق يمديك تسحب عليه وتروح للي بعده) | https://youtu.be/Hs4iJoPcFWw?si=R9D_o-SMA43DRiLM | | | --- | --- | --- | --- | | أول خطوة لفهم المستخدم -UX | هنا رح تتعلم كيف نفهم المستخدم وتفهم مشاكله و التحديات اللي يواجهها | https://youtu.be/w0x9nUB67hI?si=8YeHi5w7Pz33Uesd

سوي سكيب لين الدقيقة 3:08 | | | كيفيه عمل مقابلات واستبيانات وتحليل المنافسين | لابد تعرف منافسينك بفكرتك وتبدا تجمع استبيانات من الاشخاص وتسوي مقابلات مع الناس عشان تعرف مشاكلهم وافكارهم | https://youtu.be/H66HsOfioJU?si=ZRc1MkAUPFCm9DzX سوي سكيب لين الدقيقة 3:13 | | | بناء شخصية المستخدم(Persona) | عشان نعرف نصمم، لازم نتخيل شخصية حقيقية تمثل مستخدمنا. إيش يحب؟ إيش يحتاج؟ إيش مشاكله؟ هنا تبدأ الحكاية مع "Persona” | https://youtu.be/0gJR-Jb99U4?si=WKUCbcSMHxUc9Oz7

سوي سكيب لين الدقيقة 0:32 | https://padlet.com/reewaa9001/card-breakout-room/ZxRwAKkwQQ86A9GY-page:8ejcZpHyvRf6FlpJzmK_r

كن اول شخص يشاركنا تطبيقه بالبيرسونا | | رحلة المستخدم (User Journey) | كل مستخدم يعيش رحلة، من لحظة فتح التطبيق إلى تنفيذ المهمة. لو الرحلة معقدة، المستخدم يهرب عشان كذا نتعلم كيف نرسم الرحلة ونبسطها | https://youtu.be/tlOClosfiPc?si=FbqGPrOcp4yxDl6U سوي سكيب لين الدقيقة 0:16 | https://padlet.com/reewaa9001/card-breakout-room/ZxRwAKkwQQ86A9GY-page:7x_dkMfw5xJ4WLItLS83o

شاركنا بصوره لتخطيط لرحلة المستخدم حقك | | طريقه العصف الذهني لانتاج الافكار | بعد ما فهمنا مشاكل المستخدم ورسمنا رحلته، نبدأ نحاول نطلع فكره تحل مشكلته | https://youtu.be/9mOIgNml-eg?si=jGSpDsu-eB4lhrXm

للترجمه العربيه اضغط -الترجمه والشرح- | | | تقنيه الثمانية المجنونه لتوليد الافكار | هذي الطريقة بكل بساطه تساعدك تطلع افكار ب8 ثوان | https://youtu.be/_LwvsWljr9g?si=TLh75qjsFawZh6__ للترجمه العربيه اضغط -الترجمه والشرح- | | | انشاء الاطار السلكي للتصميم الاولي | هنا تبدا تحاول ترسم اول فكره مبدئيه لتصميم الواجهات تطبيقك | https://youtu.be/qpH7-KFWZRI?si=dwhH-xGLPU8csY4q للترجمه العربيه اضغط -الترجمه والشرح- | https://padlet.com/reewaa9001/card-breakout-room/ZxRwAKkwQQ86A9GY-page:W4XbKuVk6DCkTz9eR_GhI

شاركنا اول سكتش ل تطبيقك | | بدأ بتعلم UI وتحميل Figma | نجي للجزء المحبب للجميع وهو التصميم عبر فيقما والتعرف على الواجهه | https://youtu.be/4_DiwKFFBLk?si=_UdnB4CjhtFb6nWX | | | تصميم واجهة المستخدم (UI) | نتعرف اكثر عن فيقما | https://youtu.be/62qluEMY7C4?si=y-elhbGysNV6bdkd سوي سكيب لين الدقيقة 2:36 | | | قاعدة الالأوان 60-30-10 | لابد نتعلم كيف نتعامل مع الالوان بطريقه مناسبة عشان لانصرع عيون المستخدم وتتعب نفسيته | https://youtu.be/xaqo_-8C5v0?si=R6qJdDR4UAJMHJlb سوي سكيب لين الدقيقة 1:22 | | | التباين والوضوح والتناسق | لابد نتعلم كيف نضع القياسات الصحيح للتصميم الخاص فينا قبل مانبدا التصميم | https://youtu.be/d1E2M32UY5A?si=xB5sYY6hBzimtEZO سوي سكيب لين الدقيقة 0:10 | | | اضافه ايقونات او صور او فيديو | هنا رح نتعرف على البلقنز لاضافه ايقونات او اي صور خارجيه او حتى صور من جهازك | https://youtu.be/esD1Pk-iA44?si=VxmWKciRv50gj6VC سوي سكيب لين الدقيقة0:30 | | | طريقة تصدير التصميم كصور او pdf | طريقة حفظ التصاميم كصور او تصديرها بصيغ مختلفه | https://youtu.be/sXD_mpFELAc?si=r_qR6CEjW3xxliak | | | التعرف على الالوان | تبي تضيف اكثر من لون بالمربع حقك؟تبي تسوي بلور او تغبيش بس بالالوان؟هنا شرح لك كيف | https://youtu.be/7Cx8qlZ660w?si=SvPjV-gkCSqNyzUq | https://padlet.com/reewaa9001/card-breakout-room/ZxRwAKkwQQ86A9GY-page:ycR4OoTDDOGtK6uCS5Nlt

ورينا اول شي سويته بفيقما | | تصميم شاشة البداية | يلا يامصممين نبدا نسوي اول واجهه لكم بالتطبيق وهي واجهه الشعار | https://youtu.be/i6W6W562raw?si=1pB9QD8-aM5ISuER | https://padlet.com/reewaa9001/card-breakout-room/ZxRwAKkwQQ86A9GY-page:zA3qkgo6CW19GSQbXjM_w

شاركنا ابداعك بالتصميم | | التعرف على AutoLayout | تبي تسهل على نفسك جمع العناصر بشكل متناسق وبدون رفعه ضغط؟ | https://youtu.be/gFtOFEQSm5E?si=8xT67m7gd9VbrXew | | | الفرق Frame Or Groub | كلهم يجمعون لك العناصر بعنصر واحد ولكن في فرق بينهم | https://youtu.be/D-WiAnHqBdM?si=Dv6iZHQ6xR_-SNjX | | | تصميم واجهه التسجيل وتسجيل الدخول | هنا مهم نتعلم كيف نصمم واجهات التسجيل ونطبق مفهوم التناسق الي تعلمناه فوق | https://youtu.be/Dsb064d577s?si=0AGEDiaunY3sNPQq | | | طريقه تحريك الواجهه الساكنه | هنا رح نتعرف على كيفيه تحريك العناصر لليمين ويسار او فوق وتحت بشكل سهل | https://youtu.be/ZVoZp9eNVdI?si=Sy5karyBuPyNnFg0 | | | النماذج التفاعلية (Prototyping) | الجزء الممتع وهو اننا نربط الواجهات معبعض بحيث لو ضغطت زر ينقلني لصفحة ثانيه | https://youtu.be/Qjw4fREOl9M?si=3Chhx_zFjnEDrWNI | | | التعرف على الكومبوننت وخصائصها | بعلمك سر صغير يختصرلك الربط (صمم عنصر مره وحده واستخدمه اكثر من مره) | https://youtu.be/dB5ijGv2Rv8?si=mAvE0QZw69kCrVxC التعرف على Variants https://youtu.be/GG8DyR0KLpg?si=wZpw4nXkDEKWamDC | | | عمل نص متحرك -Animation text | تعلم كيف تحرك النص حقك بطرق سهله | https://youtu.be/TFWoG0062jU?si=573vp_XKnZry2rPy | | | التصميم المتجاوب | لابد انك تتعلم كيف تحول تصميم من حجم جوال لحجم لابتوب او ايباد وصدقني المبرمج رح يشكرك عليها | https://youtu.be/VeurGt6giso?si=dN2g_1MoUXYnnUOP | | | اول تطبيق عملي | يلا نبدا نطبق كل الي تعملناه اولا لازم تسوي حد اقصى 3 واجهات وتربطهم سوا وتشاركنا اول تطبيق لك | شرح مساعد لك https://youtu.be/MnmHwZGXbgo?si=CQLiOr1doJQYFcmI | https://padlet.com/reewaa9001/card-breakout-room/ZxRwAKkwQQ86A9GY-page:wZk6_aM7ATPwOYolNQgLu

واخيراا لابد تشاركنا ابداعك النهائي | | كيف تحول تصميمك لاكواد؟ | شرح يعجب كل مبرمج وهو كيفيه نحول تصميمنا للاكواد بسهوله | https://youtube.com/shorts/Qi9rBq_QgpA?si=5IUIsrHYCWyy1L67

https://youtu.be/EQuefrMLmIU?si=IorHM_Tz5Rv28IVT | | | مبروك انتهت الرحلة بنجاح | انت بديت بأول خطوه لك في عالم Ui-UX
واستمر لعمل مشاريع اكثر وطور ملف اعمالك ومبروك عليك الوظيفة | ————————————————————————————————————————————————————————————————-مافي شروحات خلاص———————————————————-ايش تنتظر؟———————————————————————————————————————————————————————————— | https://padlet.com/reewaa9001/card-breakout-room/ZxRwAKkwQQ86A9GY-page:xLX29-mLh34zyxrhepa-T

شاركنا تجربتك للتحدي هنا |