كل شيء تحتاج معرفته في التصميم — من أبسط المفاهيم إلى أعمق التفاصيل التقنية، مرتّب ومتسلسل خطوة بخطوة.
التصميم ليس مجرد "تجميل"، بل هو حل مشاكل بصرية. كل قرار في التصميم له سبب — من اختيار اللون إلى حجم الخط.
قبل أي تصميم اسأل: ما المشكلة التي أحلّها؟ من الجمهور؟ ما الرسالة؟
التصميم الجيد يخدم المستخدم أولاً، وليس ذوق المصمّم فقط.
أفضل التصاميم تجمع بين الجمال والوظيفة في آنٍ واحد.
القاعدة الذهبية: إذا كنت بحاجة إلى شرح تصميمك للمستخدم — فهو يحتاج مراجعة. التصميم الجيد واضح بنفسه.
توزيع العناصر بشكل متوازن أو متعمد اللاتوازن.
الفرق البصري بين العناصر لإبراز الأهم.
تناسق العناصر المتكررة يخلق هوية بصرية.
العناصر المترابطة تُجمَع بصرياً.
لا شيء عشوائي — كل عنصر له ارتباط بصري.
يوجّه العين نحو الأهم ثم الأقل أهمية.
اللون له علم وله قواعد. فهم نظرية الألوان يجعل اختياراتك مبنية على أساس، لا على الصدفة.
أحمر، أصفر، أزرق — لا يمكن الحصول عليها بخلط غيرها.
برتقالي (أحمر+أصفر)، أخضر (أصفر+أزرق)، بنفسجي (أحمر+أزرق).
خلط لون أساسي مع ثانوي مجاور له على العجلة اللونية.
| نظام المزج | الألوان المتكاملة | الألوان المتناسبة | المتشابهة |
|---|---|---|---|
| التعريف | ألوان متقابلة على العجلة | 3 ألوان متباعدة بالتساوي | ألوان متجاورة على العجلة |
| مثال | أحمر + أخضر | أحمر + أصفر + أزرق | أزرق + أزرق-أخضر + أخضر |
| الاستخدام | تباين قوي وجذاب | حيوية وتنوع | انسجام وهدوء |
قاعدة 60-30-10: في أي تصميم — اجعل اللون الرئيسي 60%، اللون الثانوي 30%، ولون التمييز 10% فقط. هذه المعادلة تُنتج تصاميم متوازنة دائماً.
طاقة، عاجل، عاطفة، خطر. يُستخدم في: تخفيضات، تنبيهات، طعام وشراب.
حماس، إبداع، دفء. يُستخدم في: تقنية، ترفيه، شباب.
سعادة، تفاؤل، انتباه. استخدامه بحذر — يُتعب العين بكثرة.
طبيعة، صحة، نمو، نجاح مالي. الأكثر ارتياحاً للعين.
ثقة، احترافية، هدوء، تقنية. الأكثر استخداماً في شعارات الشركات.
فخامة، إبداع، غموض، روحانية.
هذا السؤال يربك المبتدئين كثيراً. الإجابة بسيطة: الفرق يعتمد على أين سيُعرض تصميمك — شاشة أم ورق.
الشاشة — الضوء
الطباعة — الحبر
| المقارنة | 🖥️ RGB | 🖨️ CMYK |
|---|---|---|
| الاسم الكامل | Red, Green, Blue | Cyan, Magenta, Yellow, Key (Black) |
| نوع المزج | مضيف (Additive) الألوان تُضاف فوق بعض → تُنتج الأبيض |
طرحي (Subtractive) الألوان تطرح الضوء → تُنتج الأسود |
| كيف يعمل؟ | بكسلات تُشعّ ضوءاً ملوناً | نقاط حبر تمتص الضوء وتعكس اللون |
| النطاق اللوني (Gamut) | أوسع — يمكنه عرض ألوان نيون ومضيئة جداً | أضيق — بعض الألوان "تنكسر" عند الطباعة |
| القيم | 0–255 لكل قناة (R, G, B) | 0–100% لكل قناة (C, M, Y, K) |
| الأبيض | RGB (255, 255, 255) = كل الضوء | CMYK (0, 0, 0, 0) = لا حبر = الورقة البيضاء |
| الأسود | RGB (0, 0, 0) = لا ضوء | K=100 (الكانال الرابع للأسود) |
| استخدام | مواقع، تطبيقات، صور رقمية، شاشات | طباعة: بروشور، كروت، كتب، ملصقات |
| صيغ الملفات الشائعة | .PNG, .JPEG, .GIF, .WebP, .SVG | .PDF, .EPS, .TIFF, .AI |
| برامج التصميم | Figma, Photoshop (للشاشة) | Illustrator, InDesign, Photoshop (للطباعة) |
المشكلة الشائعة: تصمّم بـ RGB على الشاشة ثم تطبعه → الألوان تبدو باهتة ومختلفة. الحل: ابدأ التصميم المطبوع بـ CMYK من البداية، أو حوّله قبل الإرسال للطباعة.
الشاشة = ضوء = RGB | الورق = حبر = CMYK
H Hue (الصبغة 0°-360°) + S Saturation (التشبع) + L/B Lightness/Brightness. الأسهل للبشر فهمه وتعديله.
تشفير ست خانات سداسي عشري للون: #FF6B35 = R:255, G:107, B:53. يُستخدم في الويب والكود.
ألوان معيارية مرقّمة للطباعة. تضمن تطابق اللون تماماً بأي مطبعة في العالم. يُستخدم في الهوية البصرية للشركات.
هذا المفهوم يُسبّب أكثر الأخطاء شيوعاً في التصميم. نتعلمه مرة وإلى الأبد.
| المقارنة | PPI | DPI |
|---|---|---|
| الاسم الكامل | Pixels Per Inch بكسل في البوصة |
Dots Per Inch نقطة في البوصة |
| ينتمي إلى | الصور الرقمية والشاشات | الطباعة والطابعات |
| ما يقيسه | كثافة البكسلات في الصورة الرقمية | كثافة نقاط الحبر التي تطبعها الطابعة |
| القيم الشائعة | 72 ppi (ويب) | 96 ppi (ويندوز) | 144+ ppi (شاشات Retina) | 150 dpi (طباعة عادية) | 300 dpi (طباعة احترافية) | 600+ dpi (جودة عالية) |
الويب والشاشات القديمة
ويبطباعة عادية / مؤقتة
طباعة عاديةطباعة احترافية عالية الجودة
طباعة احترافيةلماذا 72 PPI للويب؟ لأن الشاشات القديمة كانت تعرض 72 بكسل في كل بوصة. اليوم أغلب الشاشات 96–144+ PPI، لكن المعيار الرقمي لا يزال 72 أو 96 لأن حجم الملف أهم من الدقة الزائدة على الشاشة.
| الاستخدام | القيمة | السبب |
|---|---|---|
| صور الويب والمواقع | 72–96 PPI | ملف خفيف، الشاشة لا تستفيد من أكثر |
| صور السوشيال ميديا | 72–96 PPI | منصات تضغط الصور تلقائياً |
| طباعة منزلية / مؤقتة | 150 DPI | جودة كافية لطباعة سريعة |
| طباعة احترافية (كروت، بروشور) | 300 DPI | المعيار الذهبي للطباعة الواضحة |
| اللافتات الكبيرة (بانرات) | 72–150 DPI | تُشاهَد من بعيد، جودة منخفضة تكفي |
| الكتب والمجلات | 300–600 DPI | تُقرأ عن قرب وتحتاج وضوحاً تاماً |
إذا أردت طباعة صورة 10×10 سم بجودة 300 DPI:
10 سم = 3.937 بوصة × 300 = 1181 بكسل لكل ضلع على الأقل.
الصيغة: (الحجم بالبوصة) × DPI = عدد البكسلات المطلوبة
معادلات رياضية تحدد الأشكال. يمكن تكبيره بلا حدود دون تشويه. أمثلة: SVG, AI, EPS. مثالي للشعارات والأيقونات.
شبكة من البكسلات. التكبير يُظهر التعرج (Pixelation). أمثلة: JPEG, PNG, GIF. مثالي للصور الفوتوغرافية.
الشعار يجب أن يكون دائماً Vector — لأنه يُستخدم بأحجام مختلفة: من بطاقة عمل صغيرة إلى لافتة ضخمة.
الخط يحمل 95% من المحتوى البصري. اختيار الخط الخطأ يُفسد التصميم حتى لو كان كل شيء آخر مثالياً.
خطوط كلاسيكية مع "أذنيات" صغيرة في نهايات الحروف. تبدو رسمية وموثوقة. مثال: Times New Roman، Georgia.
نظيفة وحديثة. الأكثر استخداماً في الويب والتطبيقات. مثال: Helvetica، Open Sans.
كل حرف بعرض متساوٍ. تُستخدم في الكود والترمينال. مثال: Courier، Fira Code.
تحاكي الكتابة اليدوية. تضيف دفئاً وشخصية. لكن لا تستخدمها للنصوص الطويلة — صعبة القراءة.
لا تستخدم أكثر من خطّين في التصميم. الأفضل: خط Serif + خط Sans-Serif. مثال: Cairo للعناوين + Tajawal للنص.
التخطيط هو هيكل التصميم. بدونه، حتى الألوان والخطوط الجميلة تبدو فوضوية.
استخدم مضاعفات الـ 8 (8, 16, 24, 32, 48, 64) لمسافاتك دائماً. هذا يخلق انسجاماً رياضياً غير واضح يشعر به المستخدم دون أن يدركه.
المعيار في تصميم الويب. قابل للقسمة على 1، 2، 3، 4، 6، 12 — مرونة كاملة.
المسافة بين الأعمدة. عادةً 16–32px. توحيدها يخلق ترتيباً واضحاً.
المسافة بين حدود الصفحة والمحتوى. تحمي التصميم من "الاختناق".
العناصر المتقاربة تبدو مرتبطة ببعضها. اجعل الصورة قريبة من وصفها، والعنوان قريباً من النص.
المساحة الفارغة ليست هدراً — هي راحة للعين. التصاميم المزدحمة تُجهد المستخدم وتقلل من التأثير.
قسّم التصميم إلى 3 أعمدة و3 صفوف. ضع العناصر الرئيسية عند تقاطع الخطوط لتصميم أكثر جاذبية.
النسبة 1:1.618 موجودة في الطبيعة وتُنتج تناسقاً جمالياً طبيعياً. استخدمها في أحجام العناصر والمسافات.
هذه المبادئ هي ما يُفرّق بين المصمم المبتدئ والمحترف.
معيار إمكانية الوصول WCAG AA يتطلب نسبة تباين 4.5:1 للنص العادي. يمكنك فحص أي لونين على موقع webaim.org/resources/contrastchecker
العناصر المتشابهة (لوناً أو شكلاً) تبدو مجموعة واحدة.
العناصر المتقاربة تبدو مرتبطة ببعضها.
العين تتبع الخطوط والمنحنيات بشكل طبيعي.
العقل يُكمل الأشكال الناقصة تلقائياً.
اختيار الصيغة الخطأ يُضيّع جودة تصميمك أو يُضخّم حجم ملفاتك بلا داعٍ.
شفافية + لا تشويه. مثالي للشعارات والأيقونات على الويب.
أصغر حجماً. للصور الفوتوغرافية. لا يدعم الشفافية.
Vector. يكبر بلا حدود. مثالي للشعارات والأيقونات والرسوم.
أحدث صيغة للويب. أصغر من PNG وJPEG مع جودة أفضل.
صور متحركة بسيطة. ألوان محدودة (256 فقط).
للطباعة والمشاركة. يحافظ على التنسيق على أي جهاز.
جودة عالية للطباعة. حجم ضخم جداً — للاستوديوهات فقط.
Vector للطباعة الاحترافية. يُفتح بـ Illustrator.
| الموقف | الصيغة المثلى | السبب |
|---|---|---|
| شعار على موقع | SVG أو PNG | شفافية + جودة عالية |
| صورة فوتوغرافية للويب | WebP أو JPEG | حجم صغير |
| إرسال للمطبعة | PDF أو TIFF أو EPS | جودة عالية + يدعم CMYK |
| أيقونة على تطبيق | SVG أو PNG @2x | وضوح على شاشات Retina |
| مشاركة عرض تقديمي | يبدو متطابقاً على كل الأجهزة | |
| انيميشن بسيط | GIF أو WebP أو MP4 | GIF بدون صوت، WebP أخف |
لكل مهمة أداة مناسبة. لا توجد أداة "أفضل" على الإطلاق — بل أداة أنسب للمهمة.
تصميم UI/UX واجهات
مجاني جزئياًتصميم Vector + شعارات
مدفوعتعديل الصور + تصميم نقطي
مدفوعمطبوعات + كتب + مجلات
مدفوعتصميم سريع سهل للجميع
مجاني جزئياًبديل Illustrator بسعر واحد
دفع مرة واحدةVector مجاني مفتوح المصدر
مجاني ١٠٠٪بديل Photoshop مجاني
مجاني ١٠٠٪توليد باليتات ألوان متناسقة بضغطة زر.
مئات الخطوط المجانية للاستخدام.
اقتراحات تزاوج الخطوط المناسبة.
صور مجانية عالية الجودة بدون حقوق.
رسوم توضيحية SVG مجانية قابلة للتخصيص.
فحص نسبة تباين الألوان لمعايير الإتاحة.
المصمّم المحترف لا يفتح البرنامج أولاً. هناك خطوات واضحة قبل أي كليك.
ما المطلوب؟ من العميل؟ من الجمهور المستهدف؟ ما الرسالة؟ ما القيود (الميزانية، المدة، الوسيط)؟ دوّن كل شيء قبل البدء.
ابحث عن تصاميم مشابهة على Behance وDribbble وPinterest. لا تقلّد — استلهم. ابحث عن الاتجاهات السائدة والمنافسين.
اجمع صوراً وألواناً وخطوطاً تعكس الاتجاه المرغوب. هذه المرحلة تُوحّد رؤيتك ورؤية العميل قبل البدء.
ارسم أفكارك بسرعة على الورق أولاً. لا تفكر في التفاصيل — فقط الهيكل العام (wireframe). الورق أسرع من البرنامج.
الآن افتح برنامجك. ابدأ بالهيكل (layout)، ثم الألوان، ثم الخطوط، ثم التفاصيل. لا تبدأ من التفاصيل الصغيرة.
شارك التصميم للمراجعة. استمع للملاحظات بموضوعية — لا تتعلق عاطفياً بعملك. الهدف الخدمة، لا الإبداع الشخصي.
عدّل وحسّن بناءً على الملاحظات. التصميم الجيد نادراً ما يكون من المحاولة الأولى.
صدّر بالصيغة والدقة المناسبة للاستخدام (RGB للويب، CMYK للطباعة). احتفظ دائماً بالملف الأصلي القابل للتعديل.
نصيحة أخيرة: أفضل طريقة للتعلم هي التطبيق. صمّم شيئاً كل يوم — حتى لو كان بوست بسيط أو أيقونة صغيرة. بعد 100 تصميم ستجد نفسك محترفاً بشكل طبيعي.
Behance.net | Dribbble.com | Designspiration | Nielsen Norman Group (UX) | Smashing Magazine
ابدأ بمشاريع وهمية. أعد تصميم تطبيقات موجودة. شارك على Behance. Portfolio ضعيف أفضل من لا شيء.
مبتدئ → Canva وFigma → Illustrator → Portfolio → Freelance أو وظيفة. كل مرحلة تبني على ما قبلها.