أساسيات التصميم الجرافيكي

01 · Methodology

المنهجية

الفصل أ

لماذا نُصمِّـــم؟

Why We Design?

بنعمل ديزاين عشان نحوّل فكرة معقدة لحاجة حد يقدر يفهمها من أول نظرة — أو يشتري منها، أو يحس إنه يثق فيها.

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

التعريف · DEFINITION

التصميم هو الترتيب المتعمَّد للعناصر البصرية بهدف إيصال رسالة محددة لجمهور محدد.

البيئات الثلاثة للتصميم

المطبوعات

كل حاجة اتطبعت فعلاً — ورق، تغليف، لافتات.

الشاشات

كل حاجة بتتشاف على جهاز — موبايل، ويب، تطبيق.

البيئة المحيطة

التصميم اللي بتعيش جواه — محلات، مطاعم، مواصلات.

وسائل الإعلان في 2026

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

⚡ نصيحة

أي مشروع هتشتغل عليه، أول سؤال اسأله: فين الجمهور ده بيعيش؟ الإجابة هي اللي هتحدد الـ Channel.

عملية التسويق الحديثة

التصميم مش بيشتغل في فراغ — هو جزء من عملية أكبر اسمها التسويق. اللي بيخصك كمصمم إنك تفهم أربع حاجات:

01مين الجمهور؟ — العمر، الاهتمامات، المشكلة اللي بيواجهوها.

02إيه الرسالة؟ — الفكرة الجوهرية اللي التصميم محتاج يوصلها.

03فين الوسيلة؟ — السوشيال، المطبوع، الإعلان المدفوع.

04إيه رد الفعل؟ — بيشتري، بيشترك، بيشارك، أو مش بيتفاعل خالص.

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

ملاحظة المصمم

التصميم مش مجرد جمال — هو مسؤولية. لما تعرف إن عندك قوة في التأثير على الناس، لازم تستخدمها صح. اسأل نفسك: هل الرسالة دي صادقة؟ هل التصميم بيخدع؟ هل أنا مرتاح لو اسمي ظهر على المشروع ده؟

الخلاصة · KEY TAKEAWAYS

✦بنصمم عشان نوصل، مش عشان نزيّن.

✦٣ بيئات: مطبوعات · شاشات · بيئة محيطة.

✦فهم الجمهور يسبق كل قرار تصميمي.

✦التصميم مسؤولية أخلاقية.

الفصل ب جديد

تفكير التصميم والعملية الإبداعية

Design Thinking

التصميم بيبدأ قبل الكمبيوتر.

تعاطف
Empathize

تعريف
Define

أفكار
Ideate

نموذج
Prototype

اختبار
Test

Design Thinking مش خط مستقيم — تقدر ترجع لأي مرحلة في أي وقت. الهدف فهم المشكلة الحقيقية قبل الحل.

أغلب المصممين المبتدئين بيعملوا نفس الخطأ: بيفتحوا الكمبيوتر قبل ما يفهموا المشكلة. النتيجة؟ تصميم جميل بيحل مشكلة غلط. تفكير التصميم هو المنهج اللي بيخليك تفهم المشكلة الحقيقية قبل ما تبدأ تدوّر على حل.

أفقي

Horizontal

رأسي

Vertical

مائل

Diagonal

منحني

Curved

متقطع

Dashed

كل خط بيحكي — الأفقي هدوء، المائل حركة، المنحني ليونة. اختر بتقصد.

المراحل الخمسة لتفكير التصميم

التعاطف

افهم الجمهور — مش بس ديموجرافيكس، مشاكلهم وإحساسهم.

التعريف

عرّف المشكلة بوضوح: «الجمهور محتاج…» مش «العميل عايز…».

الابتكار

فكّر في حلول — مش حل واحد، أكتر من اتجاه إبداعي.

النماذج

جهّز نماذج سريعة — مش مكتملة، كافية للاختبار.

الاختبار

اعرض على ناس حقيقيين، خد الفيدباك، وارجع لو لزم.

كيف تقرأ البريف

البريف هو عقدك مع العميل قبل أي شغل. فيه: الهدف (النتيجة المطلوبة)، الجمهور، التون (رسمي؟ ودّي؟ جريء؟)، القيود (ألوان، خطوط، حجم، ميزانية)، والمخرجات.

⚠ خطأ شائع

بدء الشغل قبل ما البريف يبقى واضح 100%. اسأل عن كل حاجة مش متأكد منها — ده مش ضعف، ده احترافية.

المودبورد

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

CASE STUDY · دراسة حالة

الـ Design Thinking في الواقع — إعادة تصميم تطبيق مطعم

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

THE PROJECT · المشروع

التطبيق

تطبيق «أكلة» لطلب الأكل من المطاعم المحلية

المشكلة الأولية

«العميل قالك إن الـ app بتاعه مش بيتحمّل»

التعاطف

EMPATHIZE · افهم

اللي عملناه

اتكلمنا مع ١٥ مستخدم (٧ بيطلبوا أكل كل أسبوع، ٨ بيطلبوا نادراً)
عملنا ٥ User Interviews وسجّلنا ردود الفعل
رصدنا التطبيق وإحنا بنستخدمه

اللي اكتشفناه

المستخدمين مش بيكملوا الطلب مش لأن التطبيق «بطيء» — لأنهم مش لاقيين الأكل اللي عارفينه
٧٠٪ بيدوروا على اسم المطعم مش على الـ cuisine type
الـ Search بتجيب نتايج من بُعد بيُصعب الأكل يوصل سخن

التعريف

DEFINE · عرّف المشكلة الحقيقية

المشكلة الأولية — اللي قالها العميل

«المستخدمين مش بيكملوا الطلب»

المشكلة الحقيقية — اللي اكتشفناها

«المستخدم مش بيلاقي المطعم اللي يعرفه بسهولة، فبيخرج»

PROBLEM STATEMENT

«المستخدم المصري بيدور على اسم مطعم يعرفه، مش على نوع أكل — والـ app مش بيخليه يعمل ده بسرعة»

الفرق بين المشكلتين = الفرق بين حل خاطئ وحل صح.

التخيّل

IDEATE · ولّد أفكار

Design Sprint — ساعتين

كل واحد كتب ١٠ أفكار في ١٠ دقايق
مجموع الأفكار: ٤٧ فكرة
فلترنا لـ ٥ اتجاهات رئيسية

الـ ٥ اتجاهات

١Search بالاسم الأول (مش الـ category)

٢Quick Access لـ «المطاعم اللي طلبت منها قبل كده»

٣Nearby Filter بناءً على وقت التوصيل مش المسافة

٤Smart Suggestion بناءً على الوقت والطقس

٥«Surprise me» — الـ app يختار مطعم قريب بتقييم عالي

اخترنا نعمل prototype لـ ①، ② و③ الأول.

النموذج الأولي

PROTOTYPE · نفّذ بسرعة

عملنا

Wireframes على Figma في يوم واحد
مش High Fidelity — فقط الـ flow الأساسي
القاعدة: Prototype يكون بسيط بما يكفي إنك تبنيه في يوم وتكسره في ساعة

recent

الشاشة ١

Search bar كبير في أعلى الصفحة + recent restaurants

الشاشة ٢

نتايج البحث + filter بالوقت

اطلب تاني

الشاشة ٣

صفحة المطعم + زر «اطلب تاني»

الاختبار

TEST · اختبر

اختبرنا الـ Prototype مع ٨ مستخدمين

✓٧ من ٨ لقوا مطعمهم المفضل في أقل من ٣٠ ثانية

✓«Recent restaurants» بقى الـ feature الأكتر استخداماً

!مستخدمين اتنين ما فهموش إن الـ filter بالوقت مش بالمسافة — محتاج يتوضح

ITERATION

غيّرنا الـ label من «قريب» لـ «وصول في ١٥ دقيقة» — وحلّت المشكلة.

قبل DESIGN THINKING

العميل قال «بطيء» ← الفريق عمل performance optimization ← المشكلة فضلت.

بعد DESIGN THINKING

الفريق اكتشف المشكلة الحقيقية ← غيّر الـ UX ← معدل إكمال الطلب زاد.

+٤٠٪إكمال الطلب

ملاحظة المصمم

أهم درس من الـ case study: العميل بيعرف الأعراض — إنت الشخص اللي المفروض يعرف المرض.

لو كنا صدّقنا الأعراض وحسّنّا السرعة، كنا نجحنا في حاجة غلط.

KEY TAKEAWAYS · خلاصة الـ Case Study

المشكلة اللي بيقولها العميل ≠ المشكلة الحقيقية دايماً
Define مرحلة بتاخد وقت أكتر من Ideate — وده صح
الـ Prototype لازم يكون بسيط عشان تقدر تكسره بسرعة وتبدأ من أول
نتيجة صغيرة (تغيير label) ممكن تحل مشكلة كبيرة

الفصل ج جديد

أدوات التصميـــم

Design Tools — Figma & Adobe CC

عارف المبادئ — بس علشان إيه؟

التصميم بدون أدوات زي الموسيقى بدون آلات — الإحساس موجود بس مفيش صوت. Figma هي الأداة الأساسية في 2026: Auto-layout، Components، Prototyping، وDev Mode. وبجانبها عائلة Adobe لكل تخصص.

Photoshop

تعديل الصور والكومبوزيتنج وGenerative Fill.

Illustrator

الشعارات والأيقونات والرسوم الفيكتور.

InDesign

الكتب والمجلات والمطبوعات متعددة الصفحات.

After Effects

تحريك العناصر وعمل الموشن أيدنتيتي.

متريكس القرار

المخرَج

الأداة المُفضَّلة

شعار

Illustrator / Figma

واجهة تطبيق أو موقع

Figma

تعديل صورة

Photoshop

بروشور أو مجلة

InDesign

فيديو متحرك

After Effects

نموذج تفاعلي

Figma

Canva مناسبة للمبتدئين والمحتوى السريع — مش بديل لأدوات الاحتراف.

الفصل د

جماليات التصميم

ليه بعض الحاجات حلوة؟ · Aesthetics

الجماليات (Aesthetics) علم فلسفي قائم بذاته، معنيّ بالحكم على العناصر والتنظيمات من حيث جاذبيتها للحواس وقدرتها على إثارة المشاعر. وللتصميم المعلوماتي مبدآن جماليان رئيسيان: النسبة الجمالية والانسجام.

النسبة الذهبية · Golden Ratio

الـ φ (phi) عدد غير منتهٍ ≈ 1.618 — سمّاه Mark Barr سنة 1900 تكريماً للنحّات اليوناني Phidias. ومنذ 2,500 سنة بيُستخدم في الفن والعمارة لخلق نسب منسجمة.

144

مستطيل ذهبي · النسبة 144:89 ≈ φ 1.618

11235813213455

متسلسلة فيبوناتشي: كل رقم = مجموع الاتنين قبله. وكل قسمة بين عددين متتاليين بتقترب أكتر من النسبة الذهبية 1.618.

⚠ الذهبية مش مقدّسة

البحث العلمي (Pettersson, 2003) أثبت إن النسبة الذهبية مش دايماً الأفضل في تصميم الصفحات — والـ x-law مع حجم نص عادي بيبقى أفضل استجابةً، والفارق الكبير جداً في حجم الخطوط مش دايماً مريح. الخلاصة: أداة مش قانون مطلق — استخدمها كنقطة انطلاق مش كنهاية.

نمط F

F-Pattern

نمط Z

Z-Pattern

العين بتمشي في مسارات متوقعة — F Pattern للنصوص الطويلة، Z Pattern للصفحات البصرية الخفيفة.

الانسجام · Harmony

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

توازن مزدوج — الانسجام بيشمل التوازن الرأسي والأفقي في الصفحة معاً.

انسجام لوني — بيحتاج إدراك إزاي الألوان بتتفاعل مع بعض.

الجمال والاستخدام معاً

«التصاميم الجميلة تُدرَك على أنها أسهل في الاستخدام من التصاميم الأقل جمالاً.»
تناسق محوري
Symmetrical
تناسق لاتماثلي
Asymmetrical
تناسق شعاعي
Radial
التوازن مش لازم يبقى متماثل — اللاتماثل بيخلق طاقة وحركة بصرية لما بيتعمل بتقصد.
— Lidwell et al., 2010

التصميم الجميل بيحسّسك إنه أسهل حتى لو مش كده. بس انتبه: الجميل مش بالضرورة فعّال تعليمياً — الاتنين مهمّين، لكن الفعالية أولاً. والمادة بشكل جميل بما يكفي بتوصّل رسالتها أحسن من المادة بدون أي جودة جمالية (Holmes, 1993).

ملاحظة المصمم

في الشغل الحقيقي الجماليات مش رفاهية — هي أول انطباع، وبتشتري ثقة المستخدم في أول 50 جزء من الثانية. بس متخدعش بيها نفسك: خلّي الجمال يخدم الوظيفة، مش العكس. لو اضطريت تختار، اختار اللي بيشتغل — وبعدها جمّله.

الخلاصة · KEY TAKEAWAYS

✓الجماليات علم له مبدآن: النسبة الجمالية والانسجام.

✓φ ≈ 1.618 ومتسلسلة فيبوناتشي أدوات قديمة لنسب منسجمة.

✓النسبة الذهبية أداة مش قانون — البحث أثبت إنها مش دايماً الأفضل.

✓الجميل يُدرَك كأسهل — بس الفعالية أولاً، والجمال يخدمها.

✓شكل جميل بما يكفي بيوصّل الرسالة أحسن من محتوى بلا جودة جمالية.

02 · Craft

الحرفة

الفصل 01

عناصر التصميـــم

Design Elements — الأبجدية البصرية

زي ما اللغة عندها حروف، التصميم عنده عناصر.

كل حاجة بتشوفها في أي ديزاين — من أبسط دوت لحد أعقد صورة — بترجع لكام لبنة بصرية أساسية. اعرف اللبنات دي كويس، وهتقدر «تقرأ» أي تصميم وتفكّكه لعناصره. دي أبجديتك البصرية.

النقطة

Point

الخط

Line

المستوى والشكل

Plane & Shape

الشكل المُجسّم

Form

الملمس

Texture

القيمة

Value

المساحة السلبية

Negative Space

العنصر · 01

النقطة

Point · أبسط عنصر

النقطة هي أبسط عنصر بصري — مجرّد موقع محدد في الفراغ. بصرياً هي دوت، ولبنة بناء كل خط وكل ملمس. بتجذب العين وبتعمل نقطة بؤرة (focal point)، وبتقدر تخترق المعلومة المعقّدة وتوصلك للجوهر.

فاتح · Light

غامق · Dark

القيمة هي درجة الإضاءة والظلمة. بتفصل الكائنات عن بعض وبتعطي العمق في التصميم.

هندسي

Geometric

عضوي

Organic

نقطي

Dotted

الـ texture بيضيف عمقاً بصرياً ويربط عناصر مختلفة في مشروع واحد.

بؤرة · Focal

خط · Line

ملمس · Tone

النقطة هي أبسط عنصر بصري — مجرّد موقع في الفراغ. كرّرها في صف يبقى خط، وكثّفها على سطح يبقى ملمس ودرجة. منها بيتبني كل حاجة تانية.

ملاحظة المصمم

أنا بحب أبدأ أي تكوين بسؤال: «فين النقطة اللي عايز العين تقع عليها الأول؟» لو مفيش نقطة واحدة بتسيطر — يبقى التصميم لسه مش جاهز.

العنصر · 02

الخط

Line · اتجاه ومزاج

الخط تجميع نقاط في اتجاه؛ بيوصل بين نقطتين أو بيتتبّع مسار حركة. ممكن يكون فعلي (مرسوم) أو ضمني (مجموعة عناصر في صف). الخطوط الطويلة المستقيمة نادرة في الطبيعة، وعشان كده بتسيطر بصرياً. ولما تترسم بالإيد بتعكس ملمس الأداة.

أفقي

استقرار، هدوء، سكون

رأسي

قوة، رسمية، صعود

مائل

حركة، طاقة، توتّر

منحني

ليونة، أناقة، حركة طبيعية

متقطّع

ترقّب، عدم يقين

الخط تجميع نقاط في اتجاه. اتجاهه وحده بيغيّر المزاج. وخصائصه — الوزن واللون والملمس — بتغيّر الإحساس جذرياً.

بس الاتجاه مش كل الحكاية — السُّمك بيقول حاجة هو التاني.

رفيع

متوسط

سميك

الوزن (سُمك الخط) بيرفع حضوره البصري — ولو سمن أوي، بيبطّل يكون خط ويتحوّل لمستوى (Plane).

ملاحظة المصمم

الخط أرخص أداة عندك وأقواها في نفس الوقت. قبل ما تزوّد ألوان وعناصر، اسأل: هل خط واحد في الاتجاه الصح ممكن يقول اللي عايزه؟ غالباً آه.

العنصر · 03

المستوى والشكل

Plane & Shape · مساحات بحوافّ

المستوى سطح مسطّح بحوافّ محددة — «الخط لما بيتقفل بيبقى شكل». المستويات بتجمّع العناصر في حقول (fields) وبتفصل بصرياً بين مناطق المعلومة. في البرامج الرقمية كل vector graphic هو شكل بيتعرّف بخطوطه وبيتملا بـ fill.

الخط لما بيتقفل → يبقى شكل (مستوى محدود بحوافّه)

أشكال هندسية

نظام · دقّة · حداثة

أشكال عضوية

طبيعة · دفء · إبداع

المستوى سطح مسطّح بحوافّ محددة، والشكل بيدّي الصورة ثقلاً وقابلية للتعرّف. هندسي يقول «نظام»، وعضوي يقول «حياة».

ملاحظة المصمم

الأشكال الهندسية بتقول للناس «إحنا منظّمين ومحترفين»، والعضوية بتقول «إحنا قريبين ودافئين». اختار النوع حسب الإحساس اللي عايز توصّله — مش حسب اللي بيبان «أحلى».

العنصر · 04

الشكل المُجسّم

Form · الشكل في ثلاثة أبعاد

لما الشكل ياخد بُعد تالت بنسمّيه Form. في التصميم الرقمي الـ form بيكون ضمني، بنوهمه بتلات أدوات: الإضاءة، الظل، والمنظور (perspective). بكده بنحقّق إحساس بالواقعية والحجم على سطح ثنائي الأبعاد.

دائرة → كرة

مسطّح ضد مُجسّم

مربّع → مكعّب

الإضاءة بتدّي عُمق

نفس الشكل بالظبط — بس الإضاءة والظل والمنظور بيحوّلوه من سطح مسطّح لشكل مُجسّم له حجم. كده بنوهم العين بالواقعية على شاشة ثنائية الأبعاد.

ملاحظة المصمم

الفرق بين «فلات» و«مُجسّم» مش قرار صح أو غلط — هو لهجة. عرّف مصدر الضوء واحد وثابت في التصميم كله، وساعتها الظلال هتبان مقنعة بدل ما تبان غلط.

العنصر · 05

الملمس

Texture · جودة السطح

الملمس هو الجودة البصرية واللمسية للسطح، وبيضيف عمق و«ملمسية» للصور المسطّحة. ممكن يكون حقيقي (ملمس الورق والقماش والمعدن — وبيأثّر على اختيارك في الطباعة)، أو ضمني مُقترح بالرسم. وبتعمله من التايبوجرافي، أو من برامج زي فوتوشوب وإليستريتور، أو من الطبيعة نفسها.

ورق

نقطي

تظليل

نسيج

الملمس هو الجودة البصرية واللمسية للسطح. حقيقي (ورق، قماش، معدن) بتحسّه بإيدك، أو ضمني مُقترح بالرسم — والاتنين بيضيفوا عمق وثراء للمسطّح.

ملاحظة المصمم

الملمس سلاح ذو حدّين: حبّة منه بتدّي دفء وثراء وبتربط القطع ببعض، وكتير منه بيعمل ضوضاء بصرية. أنا بستخدمه كـ «توقيع» خفيف للبراند، مش كزينة في كل مكان.

العنصر · 06

القيمة

Value · إضاءة وظلمة

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

قيمة متقاربة → العنصر بيختفي

قيمة متباينة → العنصر بيظهر

القيمة هي درجة الإضاءة والظلمة من الأسود للأبيض. هي اللي بتفصل الكائن عن خلفيته — من غير فرق في القيمة، أوضح شكل بيختفي. وهي حاسمة في الشغل بالأبيض والأسود.

ملاحظة المصمم

اختبار بسيط بعمله دايماً: حوّل التصميم لأبيض وأسود. لو الهرمية لسه واضحة من غير ألوان — يبقى القيمة شغّالة صح. لو بقى كله «رمادي» متشابه، عندك مشكلة قبل ما تفكّر في اللون.

العنصر · 07

المساحة السلبية

Negative Space · الفراغ اللي بيتكلّم

المساحة السلبية (أو White Space) هي المنطقة الهادئة بصرياً المحيطة بالعناصر النشطة. من غيرها مفيش positive space — زي دبّ قطبي في عاصفة تلج. هي مش سلبية خالص: هي اللي بتشكّل الـ figure وبتقدّمه. وليها تلات حالات:

ثابتة

Stable — عنصر واضح

قابلة للعكس

Reversible — شكل/أرضية

غامضة

Ambiguous — توتّر

المساحة السلبية مش فاضية ومش سلبية — هي اللي بتشكّل العنصر الإيجابي وتقدّمه. من غير فراغ مفيش شكل: زي دبّ قطبي في عاصفة تلج.

ملاحظة المصمم

المبتدئ بيخاف من الفراغ فبيملاه. المحترف بيستخدمه عمداً. المساحة السلبية مش «مكان فاضي اتنسي» — هي قرار تصميمي بيدّي العناصر مساحة تتنفّس وتتقري.

الخلاصة · KEY TAKEAWAYS

✓النقطة أبسط عنصر، ومنها بيتبني كل خط وكل ملمس — وهي أداتك لصُنع البؤرة.

✓الخط اتجاهه ووزنه بيحدّدوا المزاج: أفقي=هدوء، رأسي=قوة، مائل=حركة.

✓الشكل والمستوى بيجمّعوا ويفصلوا: هندسي=نظام، عضوي=دفء. والـ Form بيضيف بُعد تالت بالإضاءة والظل.

✓الملمس يضيف عمق وثراء، والقيمة هي اللي بتفصل العنصر عن خلفيته — اختبرها بالأبيض والأسود.

✓المساحة السلبية مش فاضية — هي اللي بتشكّل العنصر الإيجابي وتدّيه مساحة يتنفّس فيها.

ملاحظة المصمم

العناصر دي هي الأبجدية. المبادئ اللي جاية في الفصل الجاي هي القواعد النحوية. لما تعرف الاتنين مع بعض — ساعتها تقدر «تكتب» بصرياً صح.

الفصل 02

إزّاي عينك بتجمّع العناصر؟

قوانين الإدراك البصري + مبادئ التصميم Gestalt

المبادئ مش قواعد حد اخترعها — هي انعكاس لطريقة دماغك في استيعاب الصور. الدماغ ما بيشوفش كل عنصر لوحده؛ بيشوف أنماط وعلاقات. الجملة الأشهر: «الكل أكبر من مجموع أجزائه».

قوانين تجميع العين الستة

التقارب

العناصر القريبة بتتجمّع ذهنياً كمجموعة.

التشابه

المتشابه في الشكل أو اللون بيبان كمجموعة. كل أزرار CTA بنفس اللون.

بدون تشابه

No pattern

مع تشابه

Groups visible

العقل بيجمع العناصر المتشابهة تلقائياً — بدون ما تشرح أي حاجة.

الإغلاق

الدماغ بيكمّل الأشكال الناقصة — سهم FedEx المخفي.

الاستمرارية

العين بتتبع المسارات حتى لو انقطعت — شريط التقدّم.

خطان يكملان

Crossing paths

المسار يستمر

Path implied

العين بتتبع المسار حتى لو خرج من الإطار — القوة في الإيحاء مش في الرسم الكامل.

الشكل والأرضية

الدماغ بيفصل الموضوع عن الخلفية — المساحة السلبية في الشعارات.

المصير المشترك

اللي بيتحرك بنفس الاتجاه بيتجمّع — حالات الـ Hover.

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

مبادئ التصميم السبعة

دي القواعد النحوية اللي بترتّب بيها العناصر.

١ · التوازن

توزيع الثقل البصري. متماثل (ثقة)، غير متماثل (حداثة)، شعاعي (من مركز).

التوازن المتماثل ضد غير المتماثل.

٢ · التباين

الفرق الواضح بين عنصرين. من غير تباين، من غير تصميم.

٣ · التسلسل الهرمي

أنت لا تتحكم فيما يرى المشاهد، بل في الترتيب الذي يراه. أدواته: الحجم، الوزن، اللون، الموضع.

٤ · المحاذاة

محاذاة العناصر على خط غير مرئي. في العربي، اليمين هو المعادل الطبيعي لليسار.

٥ · الوظيفية

كل عنصر لازم يجاوب: «لماذا أنت هنا؟» لو مفيش إجابة — احذفه.

٦ · التكرار

تكرار عنصر بصري بيخلق وحدة ويقوّي الهوية.

٧ · التقارب

العناصر المترابطة وظيفياً لازم تكون قريبة من بعض.

هتقرأ ده أولاً.

وبعدها هتقرأ السطر ده.

وأخيراً هتنزل للنص الصغير ده لو حابب تعرف أكتر — وده بياخد أكبر مجهود.

الصفحة دي نفسها شرح للتسلسل الهرمي — لاحظ إزاي قرأت الأكبر أولاً بدون ما حد يطلب.

التسلسل الهرمي شغّال: العين بتمشي بالترتيب اللي إنت بتحدده.

⚠ الدرس الأهم

عندما يكون كل شيء مهماً، لا شيء مهم.

الخلاصة · أسئلة التقييم الذاتي

✓فيه محور واحد واضح بيسيطر؟

✓كل عنصر عنده سبب لوجوده؟

✓فيه نظام محاذاة ثابت؟ والعناصر المترابطة قريبة؟

الفصل 03

نقطة الارتكاز والتوجيه

Focal Point & Vision

كل تصميم فيه خط خفي بيقود العين — دوّر عليه.

نقطة الارتكاز هي أول حاجة بتقع عليها العين.

هي أقوى وأوضح وأثقل نقطة بصرياً، وبتظهر مرة واحدة فقط. لو حطيت اتنين بنفس الوزن — مش هيبقى أي منهم مهم. نقطة الارتكاز هي القائد، وباقي العناصر جنوده يدعموه مش يتنافسوا معاه.

نقطة الارتكاز: أقوى نقطة بصرية — بتظهر مرة واحدة بس.

ثلاث نظريات — أدوات مش قوانين

النسبة الذهبية · 1 : 1.618

نتائج يرتاح ليها العين. في الشعارات، وفي حجم الخط: Body × 1.618 = Heading. الأداة مش قانون.

النسبة الذهبية: بتتكرر في الطبيعة، وفي شعارات كبرى زي FedEx.

قاعدة الأثلاث

قسّم لتسعة، وزّع العناصر على نقاط التقاطع. العين مش بترتاح للمنتصف بالضبط.

قاعدة الأثلاث: حُط الموضوع على نقطة تقاطع، مش في النص.

خطوط التوجيه

خطوط وهمية توجّه عينك للعنصر الأساسي — السهم نحو الـ CTA، الطريق المؤدي للمبنى.

خطوط التوجيه: بتسحب عينك لعمق الصورة.

أنماط القراءة

للتصاميم البصرية (بوسترات، صفحات هبوط). العين بتتحرك زي حرف Z.

للمحتوى النصي الكثيف. العين بتمسح أفقياً وبعدين تنزل.

المناظير: نفس المشهد، زاوية مختلفة = إحساس مختلف.

ملاحظة المصمم

في بداية تعلّمي مكنتش أعرف حاجة عن الأساسيات، واشتغلت فترة كبيرة وبعدين عرفتها. كنت بعمل تصاميم جميلة، بس الأساسيات هي اللي طوّرت مستواي فعلاً.

الفصل 04

التكويـــن

Composition

«ممكن يكون عندك أفضل عناصر التصميم في العالم، بس لو التكوين مش مظبوط، كل ده هيترمى من الشباك.»

العشر عدسات للتكوين مش خطوات بالترتيب — هي عشر أسئلة تسألها لنفسك في أي تصميم:

نفس العناصر، تكوين مختلف = نتيجة مختلفة.

01 حدّد بؤرتك

02 وجّه العين بخطوط قيادية

03 المقياس والتسلسل

04 عناصر مكمّلة

05 اضبط التباين

06 كرّر بذكاء

07 المساحة البيضاء

08 حاذِ عناصرك

09 قسّم لأثلاث

10 وازن العناصر

العدسات شغّالة: التركيز · المساحة السلبية · التكرار · المحاذاة · التقارب.

المساحة البيضاء — نوعان

نشطة

فراغ متعمّد لتوجيه العين والتأكيد.

سلبية

الهوامش والمسافات الطبيعية بين العناصر.

المساحة السلبية: الفراغ جزء من التصميم، مش مكان فاضي.

التكوين في التصميمات العربية (RTL)

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

بيتعكس: اتجاه القراءة وموضع الارتكاز والسهم. ما بيتعكسش: الأرقام، الخرائط، الساعات، الشعارات الدولية.

الفصل 05

أنظمة الشبكـــة

Grid Systems

الهيكل اللامرئي وراء كل تصميم محترف.

عمود واحد

Single Col

متعدد

Multi Col

مودولار

Modular

محوري

Axial

الـ Grid مش قيد — هو بنية بتحرر تفكيرك وتخليك تركز على المحتوى مش على المحاذاة.

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

نظام شبكة من الكتاب — FIG — الشبكة تحت تصميم حقيقي · من الكتاب الأصلي

تشريح الشبكة

الأعمدة

التقسيمات الرأسية.

الهامش (Gutter)

المساحة بين الأعمدة.

الحاشية

المساحة على أطراف الصفحة.

الوحدة

المستطيل الناتج من التقاطعات.

الأنواع الخمسة

المخطوطة — عمود واحد. للكتب والمقالات.

الأعمدة — 2 إلى 12 عمود. للمجلات والويب.

المعيّرة — أعمدة + صفوف. للجرائد والـ Dashboards.

الهرمية — المحتوى بيحدد الشكل. للمواقع الإبداعية.

خط الأساس — خطوط أفقية تحت النص لضبط الإيقاع.

ملاحظة المصمم

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

⚡ نصيحة

شبكة الـ 12 عمود هي المعيار الصناعي (Bootstrap · Tailwind · CSS Grid). على الموبايل 4 أعمدة، التابلت 6، الديسكتوب 12.

تعمّق · GRID DEEP DIVE

جسر بين الفكرة والتنفيذ

Grid Systems · من الأساس للأنظمة الثمانية

الـ grid شبكة من الخطوط بتنظّم وضع العناصر وبتخلق علاقات بينها، وبتقسّم مساحة التصميم لأقسام رأسية وأفقية. هو الجسر بين المنطق التصميمي والتنفيذ — بيحوّل الفكرة لمساحة منظّمة.

«الـ grid أداة مساعدة مش ضمان. بيتيح عدداً من الاستخدامات، وكل مصمم يقدر يلاقي فيه الحل المناسب لأسلوبه.»
— Josef Müller-Brockmann

شبكة خط الأساس

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

Baseline Grid — الشبكة الأفقية اللي بيقعد عليها كل التايبوجرافي والعناصر.

الأنظمة الثمانية

كل نظام بيرتّب العناصر بمنطق مختلف — اعرفهم عشان تختار بوعي.

العمود الواحد

Single Column

للنصوص الطويلة والكتب — عمود واحد بهوامش واضحة.

الأعمدة المتعددة

Multi-Column

مرن؛ مجلات ومواقع وصحف — مناطق للصور وأخرى للنص.

الوحدات

Modular

وحدات متطابقة بتقسيم أفقي ورأسي متّسق — زي النوتة الموسيقية.

المحور

Axial System

كل العناصر على محور واحد — في المنتصف (تناسق) أو على جانب (طاقة).

التنظيم الوحدوي

Modular Organization

الموديول عنصر ثابت في منظومة أكبر — مثل البكسل في الصورة.

الثنائي المرآتي

Bilateral

تناسق مرآتي كلاسيكي — توقّعيته التامة تحدٍّ للمصمم.

الشعاعي

Radial System

العناصر بتتنظّم حول مركز — حركة ودينامية دائرية.

التمدّدي

Dilatational

الأشكال بتتمدّد أو تتقلّص من نقطة مركزية.

دمج الأنظمة

Axial وحده — تركيز خطّي

Axial + Radial — يلطّف ويضيف بُعد

التباين بين نظامين بيشتغل كويس: Axial + Radial بيلطّف التركيز الخطّي ويضيف حركة؛ وGrid + Dilatational بيدّي بنية ثابتة مع مرونة الأشكال الدائرية.

متى تستخدم إيه؟

كتاب · مقال طويلSingle Column

مجلة · موقع · داشبوردMulti-Column أو Modular

أفيش · هوية بصريةAxial أو Bilateral

بوستر ديناميكي · عمل إبداعيRadial أو Dilatational

الخلاصة · KEY TAKEAWAYS

✓الـ grid أداة مساعدة مش قيد — بيحوّل الفكرة لمساحة منظّمة بعلاقات واضحة.

✓Baseline Grid بيوحّد الإيقاع الرأسي للنص والعناصر.

✓٨ أنظمة: من Single Column للكتب لـ Radial/Dilatational للأعمال الديناميكية.

✓ادمج نظامين للتباين: Axial+Radial، أو Grid+Dilatational.

✓اختار حسب المحتوى — مفيش نظام «أحسن»، فيه نظام «مناسب».

ملاحظة المصمم

أنا بختار الـ grid قبل ما أحط أول عنصر. الشبكة مش بتقيّد إبداعك — بتديك أرضية تتمرّد عليها بوعي. والمصمم المحترف بيعرف امتى يكسر الشبكة، مش بيشتغل من غيرها.

الفصل 06

الألـــوان

Colors — لغة عاطفية

في نظرية بتقول إن الناس بتاخد قناعة تجاه منتج في 90 ثانية أو أقل، وجزء كبير من القرار بيعتمد على الألوان.

(وفقاً لدراسة Satyendra Singh، Management Decision 2006: 62–90% من التقييم الأولي يعتمد على اللون.)

Hue · Saturation · Value

Hue

موقع اللون في العجلة (0°–360°).

Saturation

نقاء اللون — من الزاهي للرمادي.

Value

فتوح اللون — من الأبيض للأسود.

عجلة الألوان: Hue حوالين الدايرة، والتشبع والقيمة بيتحكموا في النقاء والفتوح.

الشاشة ضد الطباعة

RGB

للشاشات. كل الألوان مع بعض = أبيض.

CMYK

للطباعة. كل الألوان مع بعض = أسود.

Pantone

لون معيَّر بكود عالمي للهوية الثابتة.

RGB ضد CMYK — RGB بيجمع الضوء (شاشة) · CMYK بيطرح بالحبر (طباعة).

⚠ الخطأ الأغلى

تسليم ملف RGB لمطبعة. اللون هيظهر باهت ومختلف. دايماً حوّل لـ CMYK قبل التسليم.

إمكانية الوصول · WCAG

حوالي 8% من الرجال عندهم نوع من عمى الألوان — واحد من كل 12. المعيار: AA = 4.5:1 للنص العادي، AAA = 7:1. وقاعدة سريعة: لا تعتمد على اللون وحده لنقل معلومة مهمة.

WCAG تباين — التباين المقبول: 4.5:1 للنص العادي — والرمادي الفاتح بيسقط.

قسم خاص · COLOR CONTRAST

سحر التباين اللوني

Johannes Itten · 7 أنواع تباين

Johannes Itten أستاذ مدرسة Bauhaus درس مفهوم التباين بعمق، وحدّد في نظريته الشهيرة 7 أنواع من التباين اللوني — كل واحد منهم أداة بتديك تحكّم مختلف في الإحساس والانتباه.

تباين الصبغة

Hue

إضاءة وظلمة

Light-Dark

دافئ وبارد

Cold-Warm

تكملة

Complementary

Johannes Itten حدد ٧ أنواع من التباين اللوني — كلها بتخلي الألوان تبدو أكثر حيوية جنب بعض.

تباين الصبغة

Contrast of Hue

خط أبيض — بيضعّف

خط أسود — بيقوّي

بيحصل لما اللون يتفصل بخط أبيض أو أسود. الخط الأبيض بيضعّف قوة اللون والجيران بيبانوا أغمق؛ والأسود بيقوّي ظهوره والجيران بيبانوا أفتح.

الإضاءة والظلمة

Light-Dark Contrast

التباين بين قيم الإضاءة والظلمة. أقوى أشكاله على الإطلاق هو الأسود مع الأبيض — وهو أساس أي تسلسل هرمي ناجح.

البارد والدافئ

Cold-Warm Contrast

دافئ · نار وشمس

بارد · ماء وظل

التباين بين الألوان الدافئة (أحمر، برتقالي، أصفر — ألوان الشمس والنار) والباردة (أزرق، أخضر، بنفسجي — ألوان الماء والظل). أقوى أداة لنقل المزاج.

التكملة

Complementary Contrast

التباين بين ألوان متقابلة مباشرة على دائرة الألوان. بتخلّي كل لون يبان أكثر حيوية وإشراقاً — مثالي للـ CTA واللمسات المهمة.

دائرة الألوان

Color Wheel

Complementary

Analogous

Triadic

دائرة الألوان هي خريطة العلاقات — اللون وما قبله وما بعده وما يقابله يبنوا الجمال.

التباين المتزامن

Simultaneous Contrast

نفس الرمادي — بيبان مختلف حسب جاره

بيحصل لما لون يتحط جنب لون قريب من تكملته، فيخلق وهم بصري: نفس اللون بيبان مختلف حسب جاره. سلاح ذو حدّين — ممكن يربك القراءة.

التشبع

Saturation Contrast

نقي ومكثّف

باهت وخامل

التباين بين ألوان نقية مكثّفة وألوان باهتة. الباهت بيبان أخمل جنب النقي، والنقي بيبان أشد حيوية جنب الباهت — استخدمه عشان توجّه العين للأهم.

المساحة

Extension Contrast

مساحة كبيرة هادئة + لمسة صغيرة صارخة = توازن

التباين بين مساحة لون ومساحة لون آخر. مساحات مختلفة محتاجة عشان يحصل توازن بصري: لون صارخ في مساحة صغيرة بيوازن لون هادئ في مساحة كبيرة.

والتباين مش للّون بس: بيتحقق كمان في النص — عبر ألوان متنوعة، Serif مع Sans-Serif، أساليب خطوط نادرة الاقتران، أو نص بدل صورة. ولمّا التباين بين العناصر يقلّ، بيبدأوا يتشابهوا والاهتمام البصري بينخفض.

ملاحظة المصمم

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

كل حرف فيه بنية محسوبة — فهم الـ Baseline والـ Cap Height يخليك تختار خطوط بتتناسب مع بعض.

الفصل 07

التايبوجرافـــي

Typography

الخط الحر — أحمد مدين — عيّنة من الخط الحر للفنان أحمد مدين — التايبوجرافي العربية في أعلى تجلّياتها (من الكتاب الأصلي، ص 52–53).

التايبوجرافي هو شكل وطريقة ظهور الحروف — منظومة قرارات تأثّر على القراءة والهوية والمزاج.

الخطوط العربية

الأصيلة: الرقعة (يومي)، النسخ (للنصوص الطويلة)، الثلث (راقي للعناوين)، الديواني (للوثائق الرسمية). والحر: خط حديث لا يخضع لقواعد محددة، بل لذوق ورؤية كل خطّاط.

Kerning · Tracking · Leading

Kerning — المسافة بين حرفين محددين. للعناوين الكبيرة (+48px). تركيبات إشكالية: AV, To, LT.

Tracking — المسافة العامة. عناوين: −10 إلى −30. ALL CAPS: +40 إلى +80.

Leading — تباعد الأسطر. الجسم 130–145%، العربي 145–160% (الحروف أعلى بصرياً).

القاعدة الذهبية في التنسيق

اجمع بين Serif و Sans-Serif — شخصيات مختلفة تتكامل. تجنّب: خطين Serif مع بعض، أكتر من 3 خطوط، أو خطين متشابهين جداً.

خطوط عربية للويب

Reem Kufi — عناوين IBM Plex Sans Arabic — جسم Cairo — متعدد Noto Naskh — أوسع دعم

قسم خاص · LEGIBILITY RESEARCH

علم القراءة

Rune Pettersson · التايبوجرافي علم مش ذوق

التايبوجرافي مش مجرد ذوق — هو علم له أبحاث. دراسة Hartley & Burnhill (1977) حدّدت 3 مبادئ: استخدم المساحة التايبوجرافية بتساوق لتوصيل بنية المعلومة، استخدم أحجام ورق قياسية، وخطّط الصفحات بالـ Grids مسبقاً.

طول السطر

Line Length

قصير — بيكسر التدفق

مثالي — 45 إلى 75 حرف

طويل — تتوه وإنت راجع للسطر

قصير جداً بيرهق العين من كتر القطع، وطويل جداً بتتوه وإنت راجع. الأمثل للنصوص الطويلة: 45–75 حرف في السطر.

المسافة بين الأسطر

Leading

القراءة عملية بصرية معقّدة، والعين بتتحرّك في قفزات صغيرة. كل قرار تايبوجرافي بيسهّل القفزات دي أو بيعطّلها. القراءة عملية بصرية معقّدة، والعين بتتحرّك في قفزات صغيرة. كل قرار تايبوجرافي بيسهّل القفزات دي أو بيعطّلها. القراءة عملية بصرية معقّدة، والعين بتتحرّك في قفزات صغيرة. كل قرار تايبوجرافي بيسهّل القفزات دي أو بيعطّلها.

ضيّق — بيتداخل

متوازن

واسع — flow مكسور

ضيّقة بتتداخل، وواسعة بتكسر الـ flow. القاعدة: إنجليزي 130–145% من حجم الخط، وعربي 145–165% — الحروف العربية أعلى بصرياً فبتحتاج تنفّس أكتر.

متساوي أم حر

Justified vs Ragged

Justified — أنهار بيضاء

Ragged — مسافات منتظمة

الـ Justified يبدو رسمي بس بيخلق «أنهار بيضاء» بين الكلمات. الـ Ragged أسهل قراءة بمسافات منتظمة — وللعربي على الشاشات، المحاذاة الطبيعية بتشتغل أحسن.

تسلسل الحجوم

Heading Scale

10 — الجسم

تدرّج مستوحى من Fibonacci: 10 ← 16 ← 26 ← 42. بس التجربة أثبتت إن النسبة الذهبية بتبقى مبالغ فيها أحياناً — الفرق الكبير جداً مش دايماً جميل.

أبرز قواعد الوضوح

✓ما تستخدمش أكتر من خطّين تقيلين (Bold) في نفس الوقت.

✓الـ ALL CAPS بيقلّل سرعة القراءة بحوالي 10–15%.

✓Serif أسهل للقراءة في النصوص الطويلة المطبوعة.

✓Sans-Serif أفضل للشاشات والأحجام الصغيرة.

✓تباين النص مع الخلفية لازم 4.5:1 على الأقل (AA).

ملاحظة المصمم

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

الفصل 08

الصور والملفات

Images & File Formats

Raster

شبكة نقاط ملونة. التكبير = بتشوف النقاط. للصور الفوتوغرافية دايماً.

Vector

معادلات رياضية. قابل للتكبير لأي حجم. للشعارات والأيقونات دايماً.

صيغ الملفات — للويب

WebP — الأهم في 2026. أصغر 30% من JPEG.

SVG — Vector للويب. وضوح لا نهائي للشعارات.

PNG / JPEG — الشفافية / الصور الفوتوغرافية.

شجرة القرار السريعة

ويب؟  → صورة? WebP · شعار? SVG · شفافية? PNG
طباعة؟ → PDF أو TIFF (300 DPI · CMYK)

الفصل 09

الإنتاج الطباعي وتسليم الملفات

Print Production

علامات القص والنزيف — FIG 09 — علامات القص · Bleed · Registration

Bleed

3mm خارج الحد — يمنع الخط الأبيض على الحافة.

Safe Zone

5mm من الداخل — محتوى مهم ما يتجاوزهاش.

Trim Mark

علامات القص في زوايا الملف.

Checklist التسليم

✓CMYK · 300 DPI على كل الصور

✓Bleed 3mm مضاف · Safe Zone 5mm محترم

✓كل الخطوط Embedded أو Outlined

✓PDF/X وليس PDF عادي · Soft Proof قبل الإرسال

03 · Profession

المهنة

الفصل 10

مجالات التصميـــم

Design Fields

التصميم الجرافيكي مش «مجال واحد» — هو شبكة من التخصصات. معرفتها بتساعدك تحدد فين أنت وفين عايز تروح.

10 تخصصات — ودي مجرد البداية.

الهوية البصرية

Logo · Color · Type — وما بعدها استراتيجية البراند.

التسويق والإعلان

بوسترات، سوشيال، إنفوجرافيك، فيديو قصير.

UI و UX

UI = كيف يبدو. UX = كيف يشعر المستخدم. تخصصان مختلفان.

الموشن جرافيك

تصميم الحركة نفسها — Motion Identity, UI Motion.

النشر والتغليف

الكتب والمجلات · وتغليف يزيد فرصة الاختيار.

السوشيال و AI

تخصصات حديثة قائمة بذاتها — المصمم كمدير إبداعي للـ AI.

أمثلة حقيقية من المجالات: الهوية، التسويق، النشر، التغليف، الموشن، التصميم البيئي، والفن.

UI ضد UX — المقارنة اللي هتفضل في دماغك

UI هو الواجهة الزجاجية للساعة. UX هو: هل اشتريتها بسهولة؟ هل تقدر تقرأها في الشمس؟ المنتجات المتميزة عندها الاتنين.

UI ضد UX — الشكل ضد التجربة.

الفصل 11

أساسيات تجربة المستخدم · UX

UX Fundamentals

UX منهجية بتركّز على فهم احتياجات المستخدم وإزالة العوائق في رحلته. المسار: بحث ← هيكلة المعلومات ← Wireframing ← Prototyping ← اختبار.

Lo-fi

مربعات وخطوط — للهيكل.

Mid-fi

أقرب للشكل، بدون ألوان.

Hi-fi

يقترب من النهائي.

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

الفصل 12

أنظمة التصميم

Design Systems

نظام التصميم = Style Guide + مكتبة مكوّنات + قواعد + توثيق. وبنية Atomic Design بتبدأ من الذرات وتكبر:

Atoms← Molecules← Organisms← Templates← Pages

والـ Design Tokens متغيرات مركزية تحمل قيم التصميم — تغيّر Token واحد وبيتغير في كل المشروع. أمثلة: Material (Google) · HIG (Apple) · Carbon (IBM).

الفصل 13

الذكاء الاصطناعي للمصممين

AI for Designers

شبكة أدوات الذكاء الاصطناعي — FIG 13 — شبكة أدوات الـ AI

الـ AI غيّر الدور — ما غيّرش الحاجة للمصمم. المصمم في 2026 هو مدير إبداعي للذكاء الاصطناعي: يكتب الـ Prompts، يوجّه النتائج، يصفّي الأفضل.

صيغة الـ Prompt

[الأسلوب] + [الموضوع] + [التفاصيل التقنية] + [المزاج]

الاستخدام الأخلاقي: أفصِح للعميل لو استخدمت AI، لا تقلّد أسلوب مصمم حيّ محدد، والمراجعة البشرية إلزامية. صور AI بالكامل: لا حق مؤلف تلقائي في أغلب الدول — Firefly الأكثر أماناً.