Sayed Ayman

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

خليني أشاركك آخر المستجدات في مشروع الـ 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

ازيك يا صديقي 🤍
إنت آخر مرة اتعلمت حاجة عن السيرة النبوية أو قصص الصحابة والأنبياء كانت إمتى؟ 👀

ولو حبيت تتعلم عن قصة معينة دلوقتي، أول حاجة بتعملها إيه؟

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

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

مشاركتك هتفرق جدا معايا
لو عندك 5 دقايق، شاركني تجربتك من هنا

https://forms.gle/LiULH1eEEy6Ty3jf8

ازيك يا صديقي جيتلك تاني اهو 👀

انا خلاص بقا، بعد ما قعدت أبص على البورتفوليو بتاعي كتير(قول قرابه شهر)
قررت أعمل فيه شوية تعديلات

بس الموضوع مكنش مجرد إني عايز أغير شكل أو أضيف Section وخلاص
فا كنت بخش ال portfolio كاني عميل وكان سؤالي هو :
هو العميل لما يدخل البورتفوليو بتاعي، هيفهم أنا بعمل إيه ولمين؟
الاجابه كانت لا او مكنش هيعرف من اول مره وبسرعه

ومن هنا بدأت أغير فيه
أول حاجة غيرت الـHero & Positioning
بدل ما أول حاجة يشوفها الزائر إني UI/UX Designer، خليتها توضح أنا بصمم إيه ولمين:
I design websites for SaaS, startups, and agencies that turn their value into clear digital experiences

وبعدها سألت:
طيب أنا بصمم لمين؟
هنا بقا ضيفت سكشن جديد اسمه:
Who I Work With
وفيها:
1- SaaS & Startups
2- Agencies
3- Businesses
بس محطتهمش اسماء كدا وشكرا لا دا في كل Card وضحت المشكلة أو الاحتياج اللي عند الفئة دي وإزاي أقدر أساعدهم ونوع المواقع اللي بقدر أصممها ليهم

وبعدها غيرت ترتيب الصفحة عشان العميل يفهم بسرعة:
انا مين وبساعد مين وعملت اي واقدر اساعده ازاي

وكمان غيرت الـServices وخليتها أوضح:
• Website Design
• Landing Page Design
• App Design
• UX Audit & Optimization
وخليت التواصل أسهل، بحيث لما حد يختار خدمة معينة، الـContact يكون مناسب للخدمة دي
اللي هو ازاي يعني لو ضغط خدمه ويب هتلاقي صفحه الاتصال كلها بتتكلم عن الويب فا متحسش انك في مكان غريب

وضفت كمان WhatsApp كطريقة تواصل إضافية
وبعد كل ده قلت:
طيب والشهادات؟ 👀
بدل ما تكون مستخبية وسط الـAbout عملت لها صفحة كاملة في البورتفوليو
بقيت أقدر أعرض الشهادات بشكل مرتب واللي عايز يشوف شهادة بالتفصيل يقدر يفتحها ويشوفها كاملة

وكمان خليت الشهادات سهلة في التصفح، من غير ما الصفحة تبقى زحمة

لسه فيه حاجات كتير عايز أطورها 😂 🤍
بس دي كانت آخر Update في البورتفوليو بتاعي

لو عايز تشوف التحديثات الجديده خش هتجيبك👀 :
https://sayed-portfolio-seven.vercel.app/

ولسه في كمان يا صديقي اشوفك المره الجايه باذن الله 👀 🤍
#UIUXDesign #Portfolio #WebDesign #ProductDesign #SaaS #UXDesign

ازيك يا صديقي 👀
عايز اقلك انه مش كل حاجة الـ 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

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

انا في الفتره الاخيره بدات اتجه ناحية ال 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

صندوق الإنجازات | UI/UX Redesign

ازيك يا صديقي عامل اي 👀🤍

انا في الفتره الاخيره اشتغلت على إعادة تصميم تطبيق صندوق الإنجازات، وهو تطبيق يساعد المستخدم على بناء العادات ومتابعتها من خلال نظام الـ XP، العملات والمكافآت

الهدف من الـ Redesign كان تحويل التجربة من واجهة مزدحمة وغير منظمة إلى تجربة أوضح، أبسط، وأسهل في الاستخدام

خلال المشروع اشتغلت على:

• إعادة تصميم الشاشة الرئيسية وتنظيم الـ Habit Cards

• تبسيط وتحسين تجربة إنشاء العادة

• إضافة إمكانية إنشاء العادات الإيجابية والسلبية وربطها بنظام المكافآت والخصم

• إعادة تنظيم المكافآت وتجربة إضافتها وإدارتها

• تصميم الإحصائيات بطريقة أوضح لمتابعة التقدم

• إعادة هيكلة الإعدادات وتقسيمها إلى أقسام منظمة

• إضافة شاشات الأرشيف والسجل لمتابعة العادات والنشاط السابق

• تصميم حالات مختلفة مثل Empty States وSuccess States والتفاعلات الأساسية

ركزت خلال إعادة التصميم على الـ Visual Hierarchy، Information Architecture، Interaction Design مع الحفاظ على فكرة الـ Gamification كجزء أساسي من تجربة التطبيق

Case Study:

https://www.behance.net/gallery/254878385/Sandooq-Al-Enjazat-UIUX-Redesign

لينك ال Portfolio :

https://sayed-portfolio-seven.vercel.app/

حابب أعرف رأيكم في الـ Redesign، وأي جزء في التجربة لفت انتباهكم أكثر؟

وبس كدا يا صديقي اشوفك المره الجايه باذن الله 🤍👀

#UIUX #UIDesign #UXDesign #ProductDesign #MobileApp #AppRedesign #Gamification #HabitTracking #Figma #DesignCaseStudy