شاهد

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ازيك يا صديقي 👋

خليني أشاركك آخر المستجدات في مشروع الـ Case Study اللي شغال عليه الفترة دي
بعد ما خلصت مراحل البحث وتحديد المشكلة والـ Persona والـ User Flows، بدأت أجهز الأساس اللي هبني عليه تجربة المنتج وده كان عن طريق Design System متكامل بمساعدة Figma Make والصراحه تحفه

انا ظبطت ونظمت فيه الألوان والخطوط والمسافات والـ Corner Radius وكمان حالات الـ Light Mode والـ Dark Mode بحيث يبقى عندي أساس واضح أقدر أبني عليه كل شاشات المنتج
وبناء على الـ Design System ده، بدأت أشتغل على الهوية البصرية للمشروع، واخترت له اسم نَسَق | NASAQ 🤍

طب إيه هو نَسَق أصلا؟
نسق هو فكرة SaaS بتستهدف أصحاب البيزنيس الصغيرة اللي بيبيعوا من خلال إنستجرام وواتساب وغيره من منصات التواصل الاجتماعي وبتساعدهم يحولوا المحادثات المتفرقة لأوردرات منظمة يقدروا يتابعوها من أول تأكيد الطلب لحد التسليم

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

طب ليه اخترت شكل اللوجو ده؟ 🤔
الفكرة كانت إني أدمج بين عنصرين بيعبروا عن طبيعة نَسَق:
— فقاعة الشات: لأنها نقطة البداية، فأغلب الأوردرات بتبدأ برسالة من العميل على واتساب أو إنستجرام
— شكل الطرد أو الصندوق: لأنه بيمثل المرحلة اللي بتتحول فيها الرسالة لطلب حقيقي بيتجهز وبيتشحن للعميل
أما الـ 3 نقط اللي جوه فقاعة الشات فبتربط الرمز بفكرة المحادثات نفسها
الهدف كان إني أعمل رمز بسيط يجمع بين المحادثة والأوردر في شكل واحد ويعبرعن رحلة المنتج: من رسالة متفرقة لأوردر منظم وقابل للمتابعة
وبالنسبة للألوان، اخترت الأزرق كلون أساسي عشان يدعم إحساس الثقة والوضوح مع التركواز كلون مساعد يدي الهوية توازن وحيوية
في النهاية، كنت عايز اللوجو يكون بسيط وسهل التمييز وفي نفس الوقت مرتبط مباشرة بالمشكلة اللي نَسَق بيحاول يحلها

طب أنا وصلت لفين دلوقتي؟
حاليا بدأت مرحلة الـ Inspiration وبجمع References من المنافسين والأدوات المشابهة عشان أفهم إزاي المنتجات دي بتنظم المعلومات وبتحل مشاكل المستخدمين من خلال التصميم

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

استنوا مني عظمة جاية مع نَسَق | NASAQ 🔥
#UIUX #ProductDesign #DesignSystem #FigmaMake #UXResearch
#NASAQ

ازيك يا صديقي 👀
عايز اقلك انه مش كل حاجة الـ AI بيخليها سهلة… ودي تجربة فشلت فيها معاه

النهارده كنت شغال علي ال Portfolio بتاعي بحاول أضيف فيه لغه العربي
ولو بصيت للموضوع يسطحيه هتقول:
ما تستخدم AI وخلاص
انا حرفيا استخدمته 😃

وقدرت أخليه يعمل جزء كبير من الشغل:
يضيف الـ Arabic، ويغير اتجاه الموقع من اليمين للشمال، ويعدل الـ sections علشان تتناسب مع الـ RTL و لحد هنا الدنيا كانت ماشيةزي السكينه في الحلاوه

بس المشكلة بدأت لما وصلت للـ Typography
الخط العربي كان محتاج تعامل مختلف عن الإنجليزي:
الحجم، الـ line-height، نوع الخط، المسافات، وأبعاد النصوص

وبسبب إن التصميم كان معمول أساسا للإنجليزي، مجرد إني أستخدم نفس الـ typography في العربي ضرب الـ layout كله 😢
النصوص دخلت في بعضها، حاجات بقت صغيرة جدا، حاجات تانية بقت أكبر من اللازم، والـ UI كله بدأ يفقد شكله والتناسق بتاعه

وهنا كانت مشكلتي
أنا كنت لسه بادئ أتعلم Front-End
فكان عندي قدرة محدودة جدا إني أفهم الـ AI بيعمل إيه في الكود، أو أعدل عليه لما يعمل حاجة مش مناسبة
حاولت أشرح له أكتر من مرة الشكل اللي أنا عايزه بس معرفتش اوصل للشكل اللي في دماغي

فا بالملخص كدا يا صديقي
أنا مكنتش عارف أوصل للـ AI اللي في دماغي، لأني أنا نفسي مش فاهم الكود بالقدر الكافي

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

فا الـ AI ممكن يساعدك تعمل حاجات أكبر من مستواك الحالي ودي ميزته
بس اكيد في مرحلة ما ، هتقف مش هتعرف تكمل لانه ال ai بينفذ وانت مش فاهم اللي بتعمله فا مش هتعرف تقله ينفذ اي لما توصل لمرحله متقدمه

فا علشان كدا لازم ولابد تكون فاهم المجال اللي بتستخدمه فيه
لازم تعرف:
إيه اللي حصل؟
ليه حصل؟
إيه الصح؟
وإيه اللي محتاج يتعدل؟
خصوصا لما تجمع بين Design + Code + AI

فلو حد بيحس إن كل الناس حواليه بتعمل كل حاجة بالـ AI بسهولة
تعالى أقولك إنك شايف النتيجة بس، مش المشاكل اللي حصلت وراها
وأنا مكمل في تعلم ال Front-End، مش علشان أبطل أستخدم الـ AI
لكن علشان أبقى قادر أستخدمه بشكل أحسن

وبس كدا يا صديقي اتمني تكون استفدت من اللي حصل معايا 👀 🤍
#AI #ArtificialIntelligence #UXDesign #UIDesign #WebDesign #Frontend #DesignEngineering #AITools #LearningInPublic #BuildInPublic

وبدأ تحدي فيجماوية ( فيديو ) 🤩

شاهد كيف نعمل على تحدي تطبيق Arrw

https://lnkd.in/p/die_w9nM

خلاص طفح الكيل انا هنشر واللي يحصل يحصل بقا 😂

انا في الفتره الاخيره بدات اتجه ناحية ال Design Engineering
فا انا بدات ب HTML & CSS، بهدف إني أوصل لمرحلة أقدر فيها أصمم الواجهة وأفهم الكود اللي بيبنيها، والأهم إني أقدر احول تصميماتي بنفسي لواجهه حقيقيه ياخي متعه 😂🤍

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

لحد دلوقتي اتعلمت وطبقت:
1- HTML Structure
2- Links & Forms
3- Block & Inline Elements
4- div, id & class
5- CSS Box Model
6- margin, padding & border
7- width & height
8- min-width & max-width
9- text-align
10- CSS Flexbox
11- display: flex
12- justify-content
13- align-items
14- Parent & Children

فا انا مش بتعلم الكود علشان أبقى Front-End Developer، لا انا ببني جسر قوي بين Design و Development، وأوصل لمرحلة أقدر فيها آخد تصميم من Figma وأبدأ أطبقه بنفسي بالكود

لسه في بداية الطريق، ولسه قدامي كتير أتعلمه، لكن دي أول خطوة في رحلة Design Engineering
التجربة دي مجرد بداية، وكل تجربة جديدة هتخليني أفهم أكتر إزاي التصميم بيتحول إلى كود
hashtag#DesignEngineering hashtag#DesignEngineer hashtag#UIDesign hashtag#UXDesign hashtag#HTML hashtag#CSS hashtag#Frontend hashtag#LearningInPublic

مهندسة ندى النادي أعلنت عن فيديو النهاردة الساعة ٩ م بخصوص الجزء الأول من كتاب UX for AI على قناتهم على يوتيوب

متحمس أعرف هما عاملين إيه 🤩

لينك قناة تجرِبة :

@Tajrba-UXWriting" target="_blank" rel="noopener noreferrer">https://m.youtube.com/@Tajrba-UXWriting

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

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

الحلقة من بودكاست ” غلاف ” قناة ” مختلف “، ومن تقديم ” محمد المرشدي ”

مشاهدة ممتعة 😊

https://youtu.be/xkUtZQZKork?si=zO65u6xGil_ecEoD