✅ الفصل الأول: مقدمة شخصية – ليه هذا المقال مهم إليك وإليّ

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

واحد قال لي: “وين التسجيل؟”
وواحد ثاني قال: “ما فهمت شو هدف الموقع أصلاً.”
هون فهمت… إن التصميم مش فن للعرض، بل فن للفهم!

وهون دخلت عالم UX/UI.

🧱 الفصل الثاني: تعريف التصميم التقليدي – من أين بدأ، وإلى أين وصل؟

1. من HTML إلى CSS إلى Photoshop:

في البدايات، التصميم كان يُفهم على إنه:

ألوان
خطوط
صور
تنسيقات

المواقع تُبنى بناءً على “رؤية بصرية”، بدون دراسة لتجربة المستخدم.
كأنك تبني فندق جميل من برا، بس ممراته متاهة، وغرفه بدون أرقام.

2. المصمم التقليدي:

يحكم على نجاحه بعيون العميل
يهتم بالألوان والترتيب فقط
يستخدم أدوات مثل: Photoshop، Illustrator، HTML، CSS

لكن ما بعرف:

ليش المستخدم ترك الصفحة؟
ليه ما كمل النموذج؟
ليه ضغط على زر الخروج؟

🎯 الفصل الثالث: تعريف UX/UI – المفهوم الحقيقي مش بس Buzzword

UX = User Experience (تجربة المستخدم):

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

UI = User Interface (واجهة المستخدم):

هي شكل المكونات (Buttons, Inputs, Layouts) اللي المستخدم بيتعامل معها.

باختصار:

UX هو الرحلة، UI هو السيارة 🚗

⚔️ الفصل الرابع: مقارنة جوهرية – التصميم التقليدي مقابل UX/UI

المعيار	تصميم تقليدي	UX/UI Design
المنهج	بصري	وظيفي وتجريبي
الهدف	الجمال	الفهم والتفاعل
الفئة المستهدفة	العميل	المستخدم
الأدوات	Photoshop, HTML	Figma, Notion, Wireframes
طريقة التفكير	سطحية بصرية	تحليلية سلوكية
الاختبار	نادرًا	دائمًا (A/B Testing، User Testing)
المقاييس	“حلو ولا لا؟”	Conversion Rate، Retention، Bounce Rate

🧠 الفصل الخامس: كيف يفكر كل نوع من المصممين؟

👨‍🎨 المصمم التقليدي:

“الألوان الفاتحة أريح”
“الخط هذا شكله فخم”
“نخلي الهيدر يتحرك عشان يلفت النظر”

👨‍🔬 مصمم UX/UI:

“وين عين المستخدم بتروح أول ما يفتح؟”
“هل المستخدم فهم شو يعمل؟”
“ليش فيه 40% عم بيطلعوا من صفحة التسجيل؟”

🔄 الفصل السادس: مراحل بناء الموقع في كل طريقة

🧱 التصميم التقليدي:

Sketch على ورقة
تصميم الشكل العام
تقطيع HTML
CSS وResponsive
تسليم

🧠 تصميم UX/UI:

بحث المستخدم (User Research)
بناء شخصيات المستخدم (Personas)
رسم رحلته داخل الموقع (User Journey)
وايرفريم (Wireframe)
تصميم UI
اختبار أولي
تحسين حسب التفاعل
تسليم

👁️‍🗨️ الفصل السابع: علم النفس في التصميم – الواجهات اللي بتحكي معك

كلنا بشر، والمواقع الناجحة بتحترم عقلنا:

قانون هيك: المستخدم بيفضّل البساطة
قانون فيتس: العناصر الأقرب للعين يتم التفاعل معها أسرع
قانون ميلر: الإنسان يقدر يتعامل مع 7±2 عناصر فقط في اللحظة

يعني؟
موقعك لازم:

يكون بسيط
واضح
مريح
فيه قرار واحد بكل خطوة

🧪 الفصل الثامن: الزر مش بس شكله حلو – الزر لازم يكون “ذكي”

مثال عملي:

زر “اشترك الآن”
في التصميم التقليدي؟
لون أحمر كبير. والسلام.

في UX/UI؟

بجانب محتوى مقنع
فيه Microcopy مكتوب: “ابدأ مجانًا – لا حاجة لبطاقة”
ورا الزر فيه تحليل لتفاعلاته
وموقعه استراتيجي بناءً على حركة العين

🛠️ الفصل التاسع: الأدوات والتقنيات – المعركة التقنية بين التقليدي وUX/UI

نوع الأداة	التصميم التقليدي	UX/UI
تصميم بصري	Photoshop, Illustrator	Figma, Sketch
رسم مخططات	لا يُستخدم غالبًا	Wireframe tools
كتابة تجربة	لا يُستخدم	Notion, Whimsical
التحليل	مافيش	Hotjar, Google Analytics
الاختبار	غير موجود	Maze, UsabilityHub

🧪 الفصل العاشر: كيف يؤثر نوع التصميم على المطور؟

واحدة من أكبر الكذبات اللي بنعيشها كمطورين هي إن التصميم “بيجي جاهز”.
لكن الصدمة؟
أغلب التصاميم التقليدية = مصيبة للمبرمج.

🧨 المشاكل يلي تسببها التصاميم التقليدية:

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

🤝 UX/UI يحل كل هذا:

بيعطيك Wireframes واضحة
بيعتمد على نظام شبكي (Grid System)
بيعتمد مكتبات قابلة لإعادة الاستخدام
بيساعدك في توقع سلوك المستخدم، مش بس “شكله”

يعني؟
أنت بتكتب كود نظيف + بتفهم ليش كل عنصر موجود.

🧠 الفصل الحادي عشر: هل الشكل مهم؟ أم UX ينسف الجمال؟

كثير ناس بيفكروا إن UX/UI = تصميم ممل، رمادي، بسيط زيادة عن اللزوم.

لكن الحقيقة؟
UX/UI ما بيهمّل الجمال…
هو بيخلي الجمال وظيفي.

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

UI الجيد + UX رائع = تصميم أسطوري.

📈 الفصل الثاني عشر: تجربتي الشخصية – قبل وبعد UX/UI

🧨 قبل:

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

Bounce Rate = 75%
Session Duration = 10 ثواني
ما في أي مستخدم ضغط على CTA

🛠️ بعد إعادة تصميم UX/UI:

رسمت Journey لكل نوع من الزوار
عملت Wireframes على Figma
وضعت CTA بمكان استراتيجي
قللت عدد العناصر على الصفحة

النتيجة؟

Bounce Rate نزل لـ 38%
Session Duration ارتفع لـ 2.4 دقيقة
بدأت تجيني رسائل استفسار من الزوار

ما غيرت “الهوية البصرية”، لكني غيرت “طريقة التعامل مع الإنسان”.

📊 الفصل الثالث عشر: تأثير UX/UI على أداء المواقع – أرقام وإحصائيات

بعض الإحصائيات بتورجيك الفرق المخيف:

العنصر	بدون UX/UI	مع UX/UI
معدل التحويل	1%	3-5%
وقت البقاء بالموقع	30 ثانية	2+ دقيقة
معدل الارتداد	فوق 70%	أقل من 40%
رضا المستخدم	غامض	قابل للقياس عبر اختبارات

المصادر:

Nielsen Norman Group

UX Planet

Hotjar Case Studies

🚀 الفصل الرابع عشر: مستقبل التصميم – هل سينقرض التصميم التقليدي؟

خليني أحكيها بدون لف:
❌ التصميم التقليدي كما نعرفه… سينقرض.
لأنه ببساطة ما بيفكر بالإنسان.

العالم اليوم ما بدّه موقع “حلو”
العالم بدّه موقع:

بيفهمك
بيخدمك بسرعة
بيرشدك بدون ما تحس

UX/UI هو التصميم الحديث.
هو التطور الطبيعي للحاجة البشرية في التعامل مع البرمجيات.

📘 الفصل الخامس عشر: خطة عملية للانتقال من التصميم التقليدي إلى UX/UI

🧭 الخطوة 1: التعرف على الأساسيات

UX يعني رحلة المستخدم، ومش بس شكل الزر
UI يعني طريقة عرض هاي الرحلة بوضوح

🖊️ الخطوة 2: تعلم الأدوات المناسبة

Figma → للرسم التفاعلي
Notion → لكتابة الرحلة
Hotjar → لمراقبة المستخدم

🧪 الخطوة 3: اعمل مشروع وهمي

اختر موقع مشهور، وأعد تصميمه بشكل UX/UI:

راقب المستخدمين
حدد المشاكل
اقترح حلول
اعمل Wireframes
صمّم Prototype

📣 الخطوة 4: اعرض شغلك

شارك عملك على:

Behance
LinkedIn
Reddit (r/UXDesign)

وخلّي التغذية الراجعة تبنيك مش تهدمك.

📚 الفصل السادس عشر: أفضل مصادر تعليم UX/UI (عربية وأجنبية)

🔤 مواقع أجنبية:

🌐 بالعربي:

قناة: “UX بالعربي” على يوتيوب
مقالات UX على موقع UXBear
دورات UX/UI على رواق
محتوى مدونة أكاديمية حسوب

💡 الفصل السابع عشر: الخلاصة الكبرى – الفارق مش شكلي… بل وجودي

لما تبني موقع تقليدي، أنت “تعرض” نفسك.
لكن لما تبني UX/UI… أنت “تحكي مع الزائر”.

الفرق؟
الأول ممكن يثير إعجاب،
الثاني يخلق ولاء.

تصميم المواقع التقليدي هو بداية الحكاية…
لكن UX/UI هو الطريقة اللي بتخلي الزائر يرجع يكملها.

✉️ الفصل الثامن عشر: رسالة من محمد – مبرمج عاش المرحلتين

“أنا مش مصمم خبير.
بس أنا إنسان قرر يحوّل نظرته من ‘كيف يبدو الموقع؟’
إلى ‘كيف يشعر الزائر؟’

UX/UI خلاني أفكر بالمستخدم، مش بالكود فقط.
خلاني أوازن بين الحرفية التقنية… والرحمة النفسية.

ولهيك، إذا كنت مصمم تقليدي، أو مبرمج مبتدئ، أو حتى صاحب فكرة…
ابدأ اليوم تعلّم UX/UI.

مش بس لأنه اتجاه العصر،
بل لأنه احترام حقيقي للناس اللي بتتفاعل معك.”

مرتبط

اكتشاف المزيد من كود التطور

اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.