لوحة المتصدرين

تصميم المواقع الإلكترونية وتطوير المواقع الإلكترونية ما هي إلا مصطلحات تُستخدم على نحو متكرر عند الحديث عن إنشاء المواقع الإلكترونية، وكذلك مصطلحي واجهة المستخدم UI وتجربة المستخدم UX اللذيْن يُستخدمان دائمًا. وعلى الرغم من استخدام هذه المصطلحات بالتبادل فيما بينها أحيانًا، لكن في الواقع، يمتلك كل من هذه المصطلحات معنى محددًا ومهمًا. من المهم أن تفهم الاختلاف بين هذه المصطلحات إذا كنت تعمل على إنشاء موقع إلكتروني أو كنت تخطط لذلك في المستقبل. وإليك فيما يلي مفهوم كل من تصميم المواقع الإلكترونية وتطوير المواقع الإلكترونية وتصميم واجهة المستخدم UI وتصميم تجربة المستخدم UX، إضافةً إلى أوجه التشابه والاختلاف بين هذه المصطلحات. تصميم المواقع الإلكترونية يشمل تصميم المواقع الإلكترونية تصميم كل عنصر على الموقع الإلكتروني، بما في ذلك مخطط الموقع والرسومات والألوان والنصوص والصور الفوتوغرافية ومقاطع الفيديو والعناصر المرئية لواجهة المستخدم وتجربة المستخدم، فكل ما تراه على الموقع الإلكتروني يندرج تحت مصطلح تصميم المواقع الإلكترونية. يبدأ تصميم الموقع الإلكتروني بإنشاء إطار هيكلي للموقع وتصميم مخطط الموقع وبناء النماذج الأولية والعديد من الخطوات الأخرى، لكن لا تُعَد صياغة الشيفرات البرمجية جزءًا من تصميم الموقع الإلكتروني. تصميم الموقع هو أساس بناء أي موقع إلكتروني، إلى جانب تصميم واجهة المستخدم UI وتصميم تجربة المستخدم UX، إذ يهتم تصميم المواقع الإلكترونية برسم خرائط الموقع الإلكتروني وتصميم قائمة التنقل وتحديد وظائف الموقع، مما يساعدك على تحسين تجربة استخدام الموقع وزيادة معدل التحويل، علاوةً على ذلك، يُعَد وضع المعلومات المهمة حول منتجاتك وخدماتك وأزرار الاشتراك في البريد الإلكتروني جزءًا من تصميم المواقع الإلكترونية. ويمكننا القول باختصار أن تصميم المواقع الإلكترونية هو كل ما يمكنك رؤيته على شاشة الهواتف المحمولة والأجهزة اللوحية وأجهزة الحاسوب المحمولة وأجهزة الحاسوب المكتبية، فإذا كنت مهتمًا بخدمات تصميم المواقع الإلكترونية وتريد توظيف مصمم مواقع إلكترونية محترف، فاحرص على أن تبحث في هذا المصمم عن قدرات أداء معينة، وإليك بعض الأمثلة عن الأمور التي يجب أن تبحث عنها: نماذج أعمال سابقة، ويشمل ذلك أعمالهم السابقة في تصميم مواقع إلكترونية وإدارتها. معرفتهم بأمور الطباعة والخطوط وتخطيط الصفحة. فيما يخص مواقع التجارة الإلكترونية، يجب أن تركز على فهمهم لمدى أهمية مشاركة المستخدمين وتحويلاتهم. تطوير المواقع الإلكترونية يهتم تطوير المواقع الإلكترونية بإنشاء وصيانة المواقع الإلكترونية باستخدام أنواع مختلفة من الأدوات ولغات البرمجة وأطر العمل، فحتى إنشاء صفحة ويب واحدة باستخدام لغة HTML أو لغة CSS يمكن أن يرتقي إلى أن يكون ضمن مجال تطوير المواقع الإلكترونية. يمكن أن يتراوح طول الشيفرات البرمجية من 200 سطر حتى مليوني سطر من الترميز. في بداية الأمر، اقتصر مطورو المواقع الإلكترونية على إنشاء صفحات ويب ثابتة، أما في الوقت الحاضر، يمكن لمطوري المواقع الإلكترونية إنشاء مواقع متحركة وأدوات عبر الإنترنت وتطبيقات قائمة على الويب وبوابات باستخدام تقنيات مختلفة. يتمثل تطوير المواقع الإلكترونية في معالجة الشيفرات البرمجية، وهو يُقسَم إلى نوعين من الفئات، أما النوع الأول فهو برمجة الواجهة الأمامية front-end، والنوع الآخر هو برمجة الخلفية back-end، إذ تتحكم برمجة الواجهة الأمامية front-end في العرض الفعلي لتصميم الموقع الإلكتروني، بينما تشمل برمجة الخلفية back-end معالجة بيانات المستخدم على خادم الويب web server وعرضها مرةً أخرى على المستخدم. إضافةً إلى ما سبق، يتقن بعض مطوري المواقع الإلكترونية برمجة كل من الواجهة الأمامية والخلفية، لذا فإن كنت لا تريد توظيف مطور مختص في برمجة الواجهة الأمامية ومطور آخر مختص في برمجة الخلفية، فيمكنك التفكير في خيار توظيف مبرمج متكامل يتمتع بخبرة في تطوير الواجهة الأمامية والخلفية. تصميم واجهة المستخدم UI واجهة المستخدم هي النظام الأساسي المرئي الذي يساعدنا على التحكم في وظائف الجهاز، فجميع الأجهزة التي لديها شاشة تحتوي على تصميم لواجهة المستخدم، ويمكن تقسيم تصميم واجهة المستخدم إلى ثلاث فئات، وهم التصميم الجرافيكي وتصميم التفاعل واختبار المستخدم، وإليك الفارق فيما بينهم: التصميم الجرافيكي معروف للجميع في الغالب، فهو عملية التصميم المرئي لمنتج رقمي. يتضمن تصميم التفاعل كل ما يتعلق بتصميم تدفق المعلومات، ويُنفّذ غالبًا بواسطة مصممو التفاعل. يُجرى اختبار المستخدم للتحقق من التطبيق العملي لتصميم التفاعل وجماليات الرسومات. يختلف تصميم واجهة المستخدم باختلاف شاشات الهواتف المحمولة وأجهزة الحواسيب المحمولة والأجهزة اللوحية والمواقع الإلكترونية. لذا احرص على توظيف مصمم قادر على تصميم الواجهة بأحجام شاشات مختلفة. تصميم تجربة المستخدم UX يهتم تصميم تجربة المستخدم UX في التجربة التي سيعيشها مستخدمو المواقع الإلكترونية، لذا يجب على مصممي تجربة المستخدم أن يتأكدوا من أن الموقع الإلكتروني جذاب وتفاعلي بما فيه الكفاية لتعزيز تجربة المستخدمين على الموقع، وتُقاس تجربة المستخدم على أساس القدرات التفاعلية لواجهة المستخدم التي أنشأها مصممو واجهة المستخدم. يرتبط تصميم واجهة المستخدم UI بتصميم تجربة المستخدم UX ارتباطًا وثيقًا، وبالتالي، يختلط الأمر على العديد من الأشخاص بين أدوار ومهام كل من مصممي واجهة المستخدم UI ومصممي تجربة المستخدم UX. يعمل مصمم تجربة المستخدم UX على تصميم الإطارات الهيكلية للموقع الإلكتروني وعرض اتصالات الواجهة للحصول على تعليقات المستخدمين. الخلاصة من الضروري أن تفهم استخدام وعمل كل من تصميم المواقع الإلكترونية وتطوير المواقع الإلكترونية وتصميم واجهة المستخدم وتصميم تجربة المستخدم، مما يساعدك على تضييق نطاق الاختيارات وفقًا لاحتياجاتك، وإليك فيما يلي قائمةً ببعض المهام التي يجب أن يؤديها مختص كل مجال على حدة. تصميم المواقع الإلكترونية: استجابة الموقع الإلكتروني. تحديث شكل وأسلوب عمل الموقع الإلكتروني. تحسين جودة الرسومات. توجيه حركة الزوار على صفحات الموقع. معالجة مشكلات وقت تحميل الصفحة. تطوير المواقع الإلكترونية: وظائف الموقع. أمان الموقع. الصفحة غير موجودة (خطأ 404). فشل عمليات بحث DNS. تعطل الموقع. فشل تحميل المحتوى. تصميم واجهة المستخدم UI: تحسين التنقل عبر الموقع. تخصيصات الموقع. المشاركة الاجتماعية على الموقع. الشكاوى والمشكلات المحتملة وكيفية التعامل معها. تصميم تجربة المستخدم UX: تحسين معدل التحويل. حل مشكلة ارتفاع معدل الارتداد. جذب انتباه الزوار نحو المحتوى. إبقاء الزائرين في الموقع لأطول فترة ممكنة ودفعهم لاستكشاف المزيد. على الرغم من أنه يمكن تنفيذ هذه المهام بواسطة الأشخاص المختصين، فمن المحتمل أيضًا أن يمتلك مصممو المواقع الإلكترونية أو مطورو المواقع القدرة على القيام ببعض مهام مصممي واجهة المستخدم UI أو مصممي تجربة المستخدم UX. ومع ذلك، فإن معرفة الفرق بين هذه الوظائف سيساعدك على اتخاذ القرار الصحيح عند اختيار الشخص المناسب لعملك. ترجمة -وبتصرّف- للمقال ?What’s the Difference Between Web Design & Web Development. اقرأ أيضًا دليلك لتصميم مواقع الإنترنت المتجاوبة المدخل الشامل لتعلم تطوير الويب وبرمجة المواقع برمجة مواقع الويب: دليلك المختصر

تصميم واجهة المستخدم هو العملية التي يجريها المصممون لبناء واجهات البرامج أو الأجهزة المحوسبة، مع التركيز على المظهر أو الأسلوب، ويهدف المصممون في هذه العملية إلى إنشاء واجهات سهلة الاستخدام وممتعة بالنسبة للمستخدمين. يشير تصميم واجهة المستخدم إلى واجهات المستخدم الرسومية وغيرها من الأنواع، مثل واجهات التحكم بالصوت. أنواع واجهات المستخدم واجهات المستخدم هي نقاط الوصول التي يتفاعل المستخدمون من خلالها مع التصميم، ولها 3 أنواع: واجهات المستخدم الرسومية GUIs: يتفاعل المستخدمون فيها مع تمثيلات بصرية على لوحات التحكم الرقمية، ويُعَد سطح المكتب على الحاسوب مثالًا عن واجهات المستخدم الرسومية. واجهات التحكم بالصوت VUIs: يتفاعل المستخدمون مع هذه الواجهات عبر أصواتهم، ومعظم برامج المساعد الذكي مثل سيري Siri وأليكسا Alexa وهي عبارة عن واجهات تحكم بالصوت. الواجهات القائمة على الإيماءات: يتفاعل المستخدمون مع مساحات تصميم ثلاثية الأبعاد عبر حركات جسدية، كما هو الحال في ألعاب الواقع الافتراضي VR. لتصميم أفضل واجهات المستخدم، يجب الانتباه إلى الأمور التالية: يحكم المستخدمون بسرعة على التصميم، ويهتمون بسهولة الاستخدام وقابلية الإعجاب. لا يهتم المستخدمون بتصميمك بحد ذاته، بل بسهولة تنفيذهم للمهام بأقل جهدٍ ممكن. بالتالي يجب أن يكون تصميمك غير ملاحَظ. بمعنى آخر، يجب ألا يشتت التصميم انتباه المستخدمين عن إكمال المهام، مثل طلب الطعام من تطبيق مطعم. لذلك يتعين عليك فهم حالات المستخدمين وسير المهام (والتي يمكن العثور عليها من مصادر مثل خرائط رحلة العميل)، من أجل إعداد أفضل وأوضح واجهة ممكنة تقدم تجربةً سلسة وخالية من المشاكل. يجب أن تكون واجهات المستخدم ممتعةً أيضًا (أو على الأقل مقبولة وغير مسببة للاستياء). عندما يعتمد تصميمك على الاحتياجات الحقيقية للمستخدمين، من المرجح أن يستمتعوا أكثر بتجارب تفاعلية مصممة خصيصًا لهم، وهو الأمر الذي يضمن لك عودتهم مرةً أخرى. يمكن إضافة عناصر تلعيب عند الإمكان لجعل التصميم أكثر متعةً. يجب أن تعبر واجهة المستخدم عن قيم العلامة التجارية وأن تعزز ثقة المستخدمين بها. التصميم الجيد هو تصميم عاطفي، إذ يكنّ المستخدمون مشاعر إيجابية للعلامات التجارية التي تخاطبهم على جميع الأصعدة وتحافظ على سحر التجارب الممتعة والسلسة. مخطط الواجهة الترحيبية البسيط لموقع Airbnb يلبي مباشرةً حاجة المستخدمين للسفر بسهولة وبطريقة ممتعة. الفرق بين تصميم واجهة المستخدم UI وتصميم تجربة المستخدم UX يكثر الخلط بين هذين المصطلحين، لكن تصميم واجهة المستخدم يهتم أكثر بالمظهر الخارجي والانطباع العام للتصميم، ويُعَد مصمم واجهة المستخدم مسؤولًا عن بناء جانب أساسي من تجربة المستخدم. لتوضيح الأمر، إذا شبهنا تصميم تجربة المستخدم بسيارة، يكون تصميم واجهة المستخدم بمثابة وحدة القيادة لهذه السيارة. كيف تنشئ واجهات مستخدم رائعة لنتعرف على المبادئ الأساسية لتصميم واجهة المستخدم: لتصميم واجهات مستخدم رسومية رائعة، تذكر أن المستخدمين بشر لديهم احتياجات مثل الراحة، وأنَّ مداركهم لها حدود، لذا يُنصح باتباع الإرشادات التالية: اجعل الأزرار والعناصر الشائعة الأخرى تعمل بالطريقة المتوقَّعة (بما في ذلك الاستجابات مثل تقريب الإصبعين للتصغير) لكي يتمكن المستخدمون من استخدامها دون الحاجة للتركيز: يجب أن يكون الشكل متوافقًا مع الوظيفة. عزز قابلية الاكتشاف: ضع مسميات واضحة للأيقونات مع مؤشرات وظيفية واضحة، مثل إضافة ظلال للأزرار. حافظ على بساطة الواجهات (بإدراج العناصر التي تخدم أهداف المستخدم فقط) مع انطباع غير مُلاحَظ. أنشئ مخططًا layout يراعي مرأى المستخدم وانتباهه: ركز على التسلسل الهرمي وقابلية القراءة من خلال: استخدام محاذاة صحيحة: اختر محاذاة الحافة بدلًا من محاذاة المركز. تسليط الضوء على الميزات الأساسية باستخدام ما يلي: الألوان والسطوع والتباين، لكن تجنب الإفراط في استخدام الألوان والأزرار. بالنسبة للنص: عبر حجم الخط وسماكته وميلانه والتباعد بين الحروف وحالة الحروف الكبيرة إن وجدت كما في اللغة الإنجليزية. يجب أن يكون المستخدم قادرًا على التقاط المعاني بمجرد المسح السريع للصفحة. اختصر عدد الإجراءات اللازمة لإنجاز المهمات، لكن أفرِد صفحةً خاصةً لكل وظيفة رئيسية من هذه الإجراءات، وأرشد المستخدمين من خلال إضافة تلميحات للإجراءات المطلوبة، واستخدِم تقنية الإفصاح التدريجي لتبسيط المهام المعقدة. ضع خيارات تحكم بالقرب من العناصر التي يحتاج المستخدمون إلى التحكم بها: على سبيل المثال، يجب أن يوضَع زر إرسال النموذج قريبًا من النموذج. أبقِ المستخدمين على اطلاع باستجابات النظام وإجراءاته من خلال إرسال ملاحظات. استخدم أنماط تصميم واجهة مستخدم مناسِبةً للمساعدة على توجيه المستخدمين وتقليل الأعباء (مثل الملء المسبق للنماذج)، لكن احذر من استخدام الأنماط المظلمة، مثل مربعات الاختيار المحدَّدة مسبقًا التي تصعب رؤيتُها، أو العناصر المتسللة إلى سلة شراء المستخدم. حافظ على اتساق العلامة التجارية. وضِّح دائمًا الخطوة التالية ليتمكن للمستخدمون من استنتاجها تلقائيًا مهما كانت الحالة. في الصورة أعلاه مثال عن واجهة موقع دورات تدريبية، ونلاحظ أن الألوان والسطوع والتباين تساعد على جذب الانتباه إلى الميزات الرئيسية. أفضل واجهة هي الواجهة الخالية من الوساطة بين المستخدم والمهام التي يرغب بتنفيذها، لذلك يجب منح المستخدمين تحكمًا مباشرًا ومريحًا وسهل الوصول (مع أفضل تجربة) لدرجة أن ينسوا أنهم يستخدمون تصميمك. تذكر أن تسأل باستمرار عن إمكانية تبسيط الأمور أكثر فأكثر. ترجمة -وبتصرّف- للمقال User Interface (UI) Design. اقرأ أيضًا تصميم واجهة المستخدم وتجربة المستخدم UI / UX مبادئ تصميم واجهة المستخدم UI الجيدة أفضل النصائح لتصميم واجهة المستخدم مستقبل تصميم واجهة المستخدم UI: الجيل القادم من أدوات تصميم واجهة المستخدم النسخة الكاملة لكتاب مدخل إلى تصميم واجهات المستخدم UI

من الممكن إنشاء تصميم جيد دون فهم مبادئ التصميم، لكن لا شك أن الوصول إلى تصميم يجمع بين المظهر الجيد وتجربة المستخدم المثالية يكلف كثيرًا من التجارب والأخطاء. عند الحديث عن مبادئ التصميم فإن من أكثر النقاط جدلًا تحديد العدد الفعلي لهذه المبادئ (هل هي خمسة أم سبعة أم عشرة؟)، ثم تحديد المبادئ التي يجب ضمها إلى هذه المجموعة التي تمثل أساسيات التصميم؟ إذا بحثنا في جوجل عن "principles of design"، ستظهر في النتائج مقالات تتحدث عما يتراوح من خمسة إلى أكثر من اثني عشر مبدأً مستقلًا للتصميم البصري، وحتى تلك التي تتفق في العدد ليس بالضرورة أن تتفق في ماهية المبادئ التي تدرجها ضمن هذه المجموعة. في الواقع، هناك ما يقارب اثني عشر مبدأً أساسيًا للتصميم يحتاج المصممون المبتدئون والمحترفون على حدٍّ سواء إلى مراعاتها عند العمل على مشاريعهم؛ يضاف لها حوالي اثني عشر مبدأً "ثانويًا" للتصميم والتي تُعَد أحيانًا أساسية (مثل مبادئ جشتالت وأسلوب الخط واللون والتأطير).و فيما يلي شرح وتوضيح لأهم مبادئ التصميم. مبادئ التصميم البصري الأساسية كما ذكرنا آنفًا، لا يوجد إجماع حقيقي في مجتمع المصممين حول المبادئ الأساسية للتصميم، لكن المبادئ الاثني عشر التالية للتصميم البصري هي الأكثر تكرارًا في المقالات والكتب المتعلقة بالموضوع. التباين أكثر شكاوى المصمم على ملاحظات العملاء تدور حول العميل الذي يقول أن على التصميم أن يكون بارزًا أكثر، فهو يبدو للمصمم مصطلحًا غير محدد، لكن ما يقصده العميل غالبًا هو الحاجة إلى المزيد من التباين في التصميم. يشير التباين إلى مدى اختلاف العناصر في التصميم، وخصوصًا المتجاورة منها، فهذا الاختلاف يجعل العناصر أكثر بروزًا. بالإضافة لذلك فإن التباين جانب مهم جدًا من أجل إمكانية وصول التصميم، فقلة التباين قد تؤدي إلى تعذر قراءة المحتوى النصي، خصوصًا للأشخاص الذين يعانون من مشاكل وإعاقات بصرية. يُعَد موقع Parabola نموذجًا رائعًا لمبادئ التصميم من خلال تصميمه عالي التباين التوازن يحمل كل عنصر ومبدأ للتصميم (أسلوب الخط والألوان والصور والأشكال والأنماط، إلخ) وزنًا بصريًا؛ بعض هذه العناصر ثقيلة الوزن البصري وتجذب العين، بينما بعضها الآخر أخفّ، لكن يجب أن يعطي توزيع هذه العناصر على الصفحة إحساسًا بالتوازن. هناك نوعان أساسيان للتوازن: متناظر وغير متناظر؛ حيث يوزع التصميم المتناظر العناصر ذات الوزن المتكافئ على جانبي خط مركزي وهمي، في حين يوزع التصميم غير المتناظر عناصر مختلفة الوزن على جانبي خط غير مركزي بالنسبة للتصميم ككل. يضفي التوزيع الذي يحيد قليلًا عن المركزية نوعًا من التوازن بين الصورة البارزة والكتابة المبسطة على موقع The Nue Co التأكيد يطبَّق التأكيد على أجزاء التصميم التي من المفترَض أن تكون أكثر بروزًا، أي أهم المعلومات التي يهدف التصميم إلى إيصالها. تساعد العبارة كبيرة الحجم في موقع Clique على تأكيد شعاره يمكن أيضًا استخدام التأكيد لإنقاص تأثير بعض المعلومات، ويتجلى ذلك على سبيل المثال في الكتابة بحجم صغير للعبارات الثانوية، فمثلًا تحمل الكتابة المصغرة المتموضعة بعيدًا في أسفل الصفحة وزنًا أقل بكثير من أي شيء آخر في التصميم، لذلك يقل التركيز عليها. التناسب التناسب هو أحد مبادئ تصميم الرسوميات الأسهل فهمًا، فهو ببساطة حجم العناصر بالنسبة لبعضها البعض. يساعد التناسب على الإشارة إلى العناصر المهمة وغير المهمة في التصميم، فالعناصر الأكبر أكثر أهمية من العناصر الأصغر. الاختلاف التناسبي بين الكتابة الصغيرة والصورة الكبيرة مؤشر واضح على ترتيب أهمية العناصر على موقع Bluecated Interactive التسلسل الهرمي التسلسل الهرمي مبدأ آخر من مبادئ التصميم يرتبط مباشرةً بمدى قابلية محتوى الموقع للمعالجة بطريقة جيدة بواسطة المستخدمين، وهو مؤشر على أهمية العناصر في التصميم؛ فالعنصر (أو المحتوى) الأكثر أهميةً يجب أن يدل مظهره على مدى أهميته. يُنشئ موقع Grafill تسلسلًا هرميًا عبر كل من مخطط ترتيب العناصر (الجزء الأهم في الأعلى) والحجم (المحتوى الأهم أكبر حجمًا) وأسلوب الخط (العناوين أكبر من متن النص). يتضح التسلسل الهرمي بسهولة باستخدام العناوين الرئيسية والفرعية في التصميم، إذ يجب إعطاء العنوان الرئيسي الأهمية الكبرى ليتمكن المستخدم من التعرف عليه مباشرةً على أنه العنصر الرئيسي في الصفحة، كما يجب تنسيق العناوين الفرعية وتحت الفرعية بطريقة توضح ترتيب أهميتها بالنسبة لبعضها البعض وكذلك بالنسبة للعنوان الرئيسي ولمتن النص. التكرار يُعَد التكرار طريقةً رائعةً لترسيخ الفكرة، كما أنه مفيد جدًا لتوحيد التصميم وجمع العديد من العناصر المختلفة. يمكن إجراء التكرار بعدة أساليب، مثل تكرار الألوان أو الخطوط أو الأشكال أو عناصر أخرى في التصميم. على سبيل المثال، يراعي هذا المقال التكرار في تنسيق العناوين، فكل المبادئ التصميمية تحمل التنسيق نفسه، مما يدل القارئ على أنها جميعها متساوية في الأهمية ومتعلقة ببعضها البعض، فتناسق العناوين يوحد هذه العناصر في الصفحة. الصورة على الأيسر من موقع Type and Pixel نموذج رائع للتكرار في التصميم التناغم يمكن أن يضفي التباعد بين العناصر المتكررة شعورًا بالتناغم في المظهر، بما يشبه الإيقاع الذي تمنحه الفراغات بين النوتات في مقطوعة موسيقية. هناك خمسة أنواع أساسية للتناغم البصري يمكن أن يُنشئها المصممون: عشوائي منتظم متناوب متدفق تدريجي التناغم العشوائي ليس له نمط محدد يمكن تمييزه، أما التناغم المنتظم فيترك نفس المسافة بين العناصر دون تغيير. يتبع التناغم المتناوب بدوره مجموعةً من الأنماط المتكررة، فيكون هناك اختلاف في المسافات بين العناصر المتجاورة لكن بنمط متناوب (مثل النمط 1-2-3-1-2-3)، في حين يتبع التناغم المتدفق منحنيات مشابهة لتموُّج الكثبان الرملية أو تدفق الأمواج، وأخيرًا فإن التناغم التدريجي يتغير مع تقدمه، بحيث يضاف كل تغيير إلى التكرارات السابقة. ينشأ عن التباعد غير المنتظم بين الأشكال في خلفية موقع TheArtCenter تناغمٌ عشوائي يمكن الاستفادة من التناغم في توليد عدة مشاعر، مثل الإثارة (خصوصًا في التناغم المتدفق والتدريجي) أو الطمأنينة، بالإضافة إلى دوره في توحيد النسق، ويتوقف ذلك على طريقة تطبيقه. الأنماط النمط ليس سوى تكرار لعدة عناصر تصميمية تعمل معًا، والمثال الأكثر انتشارًا الذي يألفه الكثير من الناس هو ورق الجدران ذي الأنماط المتكررة، لكن يمكن أن تشير الأنماط في التصميم أيضًا إلى مجموعة المعايير التي تحكم كيفية تصميم عناصر معينة. على سبيل المثال، التنقل العلوي هو نمط تصميمي يتفاعل معه أغلب مستخدمي الإنترنت. المساحات البيضاء المساحة البيضاء (وتعرف أيضًا بالمساحة السلبية) هي المساحة الفارغة من التصميم، أي تلك التي لا تحتوي على أي عنصر تصميمي. يعتقد الكثير من المصممين المبتدئين أن عليهم ملء كل نقطة من المساحة المخصصة للتصميم، دون الانتباه لأهمية المساحة البيضاء، والتي في الواقع تخدم غايات كثيرة ذات أهمية في التصميم، على رأسها إعطاء "فسحة تنفس" لعناصر التصميم، بالإضافة إلى المساهمة في تسليط الضوء على جزء معين من المحتوى أو من التصميم. تساعد المساحات البيضاء أيضًا على تسهيل تمييز عناصر التصميم، ولهذا السبب يكون النص أسهل قراءةً عند استخدام الحروف الصغيرة مع الكبيرة باللغة الإنجليزية (قياسًا باستخدام الحروف الكبيرة فقط)، فالحروف الصغيرة تكون محاطةً أكثر بالمساحة البيضاء، مما يسمح بتفسيرها بصورة أسرع. تضفي المساحة البيضاء "فسحة تنفس" للنص البسيط والرسوم التوضيحية في موقع Jan Behne، كما تساهم في الحفاظ على جمالية التصميم المبسط تستخدَم المساحة البيضاء في بعض الحالات لإنشاء صورة ثانوية قد لا تتضح مباشرةً للمشاهد، مما يساهم كثيرًا في إيصال العلامة التجارية بطريقة ممتعة للعملاء، والسهم الخفي في شعار شركة FedEx هو أحد الأمثلة على ذلك. الانتقال يشير الانتقال إلى الطريقة التي تتحرك بها العين فوق التصميم عند النظر إليه، إذ يجب على العنصر الأكثر أهميةً أن ينقل النظر إلى العنصر التالي الأكثر أهمية، وهكذا دواليك، ويمكن تحقيق ذلك من خلال تحديد الموضع (يقع النظر تلقائيًا على مناطق معينة من التصميم أولًا) والاستفادة من التأكيد وغيره من عناصر التصميم المذكورة أعلاه. تساهم الصور والأرقام المائلة في مبدأ الانتقال بالنسبة لموقع Abby Stolfo التنوع يستخدَم التنوع في التصميم من أجل جذب الانتباه البصري، وبغيابه يصبح التصميم بسرعة رتيبًا ومملًا للمستخدم. هناك طرائق كثيرة يمكن من خلالها تحقيق التنوع، مثل الألوان وأسلوب الخط والصور والأشكال وأي عنصر آخر في التصميم. مع ذلك فإن إضفاء التنوع ليس غايةً بحد ذاته بل وسيلة؛ فلا فائدة من التنوع إذا لم يوظَّف لتعزيز العناصر الأخرى من التصميم والتآزر معها من أجل تحقيق نتائج أكثر جمالية وإثارة للاهتمام، وبالتالي تحسين تجربة المستخدم. تتضمن خلفية موقع Kennard Lilly ألوانًا وأشكالًا مختلفةً لإثارة الاهتمام مع التأكيد في الوقت نفسه على محتوى العبارة المرفقة الانسجام لا شك أن الكثيرين منا قد صادفوا موقعًا إلكترونيًا أو تصميمًا آخر يبدو وكأنه تجميعٌ عشوائي للعناصر على الصفحة دون الاكتراث بمدى التوافق فيما بينها، وفي هذا السياق قد تتبادر إلى الأذهان مباشرةً إعلانات الصحف التي ربما تُستخدَم فيها عشرة أنواع من الخطوط معًا. يشير الانسجام إلى مدى ملاءمة عناصر التصميم مع بعضها البعض، إذ يجب أن تكون هناك علاقة واضحة بين العناصر البصرية في التصميم. يساعد الانسجام على ضمان توصيل المفاهيم بطريقة واضحة ومتسقة، كما أن التصاميم المنسجمة جيدًا تبدو أكثر تنظيمًا وأعلى جودةً وأهميةً من التصاميم قليلة الانسجام. يتولد الشعور بالانسجام بفضل استخدام اللون الأزرق في جميع أنحاء التصميم (بما في ذلك المؤثرات الزرقاء على الصور)، بالإضافة إلى توحيد نمط الخط والتناسب. مبادئ أخرى للتصميم تطرقت العديد من المقالات إلى مبادئ تصميم أخرى تتضمن: أسلوب الخط اللون مبادئ جشتالت الشبكة والمحاذاة التأطير الشكل بعضها يتناسب بوضوح مع تعريف المبادئ، بينما بعضها الآخر أقرب لأن يصنَّف من ضمن عناصر التصميم. يشير أسلوب الخط إلى طريقة ترتيب النص في التصميم، ويشمل نوع الخط المستخدَم وحجمه وسماكته والفراغات التي تتخلله وطريقة ارتباط عناصر النص المختلفة ببعضها البعض. يتأثر التصميم الجيد لأسلوب الخط تأثّرًا كبيرًا بجميع مبادئ التصميم الأخرى التي سبق ذكرها. تُعَد الألوان من أكثر العوامل المؤثرة نفسيًا في التصميم، ولها تأثير كبير على تجربة المستخدم. يؤثر علم النفس اللوني ونظرية الألوان بشدة على بعض المبادئ الأخرى المذكورة سابقًا. تتضمن مبادئ جشتالت كلًا من التشابه، والاستمرار، والإغلاق، والتقارب، والشكل والأرضية، والتناظر والترتيب. وبعض هذه المبادئ ذات صلة وثيقة بالمبادئ المذكورة سابقًا. يرتبط مبدأ الشبكة والمحاذاة ارتباطًا كبيرًا بمبدأ التوازن، وهو يشير إلى طريقة ترتيب العناصر بالنسبة لشبكة وهمية على الصفحة. يتعلق التأطير بطريقة تموضع العنصر الأساسي في التصميم بالنسبة للعناصر الأخرى على الصفحة، وهو مطروق كثيرًا في مجالات التصوير السينمائي والتصوير الفوتوغرافي، ويعالج كيفية تقديم العنصر الأهم من الصورة بالنسبة لبقية أجزاء الصورة، لكنه ينطبق أيضًا على التصميم. يُعَد الشكل جزءًا أساسي من أي تصميم، سواءً كان يشير إلى الأشكال المحددة المستخدَمة في التصميم، أو إلى الشكل العام للتصميم نفسه. تثير الأشكال المختلفة مشاعر مختلفة، فالدوائر ترتبط بالطبيعة والمرونة، في حين تكون المربعات أكثر صرامةً ورسمية؛ أما المثلثات فتمنح شعورًا بالطاقة والحركة. هذه "المبادئ" أو العناصر التصميمية هي عبارة عن جوانب مهمة في التصميم الجيد، ويجب مراعاتها إلى جانب المبادئ الأساسية الأخرى من أجل إنشاء تجربة مستخدم أفضل. الخلاصة المبادئ التي تُعَد أساسية في التصميم موضع نقاش مستمر، لكن فهم المبادئ المذكورة أعلاه وتطبيقها مهم جدًا لنجاح أي مشروع تصميم، إذ يجب أن يسعى المصممون إلى فهم كيفية تأثير كل من هذه المبادئ على عملهم، كما أن دراسة كيفية تطبيق المصممين الآخرين لهذه الأفكار في إنشاء تصاميمهم الخاصة تساعد كثيرًا على التعلم وتحقيق نتائج أفضل في التصميم. من الممكن إنشاء تصميم جيد دون فهم شامل لهذه المبادئ، لكن ذلك يعتمد على حدس المصمم، وقد يكون ذلك على حساب الكثير من التجارب والأخطاء قبل الوصول إلى نتائج ذات مظهر جيد وتجربة استخدام مثالية؛ لذا فإن التدرب على هذه المبادئ يوفر على المصمم الكثير من الوقت والجهد إلى أن يصبح تطبيقها عادةً مكتسبة لديه. مفاهيم أساسية ما هي عناصر التصميم البصري؟ تتضمن عناصر أو مبادئ التصميم البصري: التباين، والتوازن، والتأكيد، والانتقال، والمساحة البيضاء، والتناسب، والتسلسل الهرمي، والتكرار، والتناغم، والأنماط، والانسجام، والتنوع؛ بحيث تتضافر هذه المبادئ معًا لتعزيز جمالية التصميم وتحسين تجربة المستخدم. ما أهمية التباين في التصميم؟ يشير التباين إلى مدى اختلاف العناصر في التصميم، وهذا الاختلاف يجعل العناصر أسهل تمييزًا عن بعضها. بالإضافة لذلك، فإن التباين جانب مهم جدًا من أجل إمكانية وصول التصميم، فقلة التباين قد تؤدي إلى جعل قراءة المحتوى النصي في غاية الصعوبة، خصوصًا للأشخاص الذين يعانون من مشاكل وإعاقات بصرية. ما المقصود بالتناغم في التصميم؟ ينشأ التناغم عن وتيرة التباعد بين العناصر البصرية المتكررة، بما يشبه الإيقاع الناتج عن الفراغات بين النوتات في مقطوعة موسيقية. هناك خمسة أنواع أساسية للتناغم البصري يمكن أن يُنشئها المصممون: عشوائي، ومنتظم، ومتناوب، ومتدفق، وتدريجي. ما المقصود بمبدأ التوازن في التصميم؟ يحمل كل عنصر ومبدأ للتصميم (أسلوب الخط والألوان والصور والأشكال والأنماط وغيرهم) وزنًا بصريًا؛ بعض هذه العناصر ثقيلة الوزن البصري وتجذب العين، بينما بعضها الآخر أخفّ، لكن يجب أن يعطي توزيع هذه العناصر على الصفحة إحساسًا بالتوازن. كيف يمكن تحقيق التأكيد في التصميم؟ يستخدَم مبدأ التأكيد بهدف إبراز عناصر معينة في التصميم من خلال التباين اللوني أو تكبير الحجم أو زيادة المساحة البيضاء المحيطة بالعنصر أو غير ذلك، أو بهدف تقليل التركيز عليها مثل العبارات المكتوبة بخط صغير جدًا في أسفل الصفحة. ترجمة -وبتصرّف- للمقال The Principles of Design and Their Importance لصاحبته Cameron Chapman. اقرأ أيضًا مقدمة إلى العناصر الستَّة للتصميم عملية التصميم ذات الخطوات السبعة مبادئ تصميم الرسوميات

على عكس برنامج أدوبي فوتوشوب فإن برنامج أدوبي إليستريتور ليس مخصصًا لمعالجة الصور والرسومات النقطية (Raster)، بل هو أشهر وأقوى برنامج لتصميم ورسم ومعالجة الرسومات الشعاعية Vector. وعلى الرغم من توفر برامج منافسة له مثل برنامج كورل درو Corel Draw وتوافر برامج جيدة ومجانية مثل إنكسكيب Inkscape، إلا أنه ما يزال يتربع على قمة البرمجيات المتخصصة في الرسومات الشعاعية، وهو الأكثر انتشارًا وشعبية، ويتميز بتشابه واجهاته مع واجهات الفوتوشوب الشائع وبسهولة استخدامه مقارنة ببقية البرامج. ما هو أدوبي إليستريتور؟ هو برنامج تصميم ورسم احترافي يعتمد على تصميم الرسومات الشعاعية Vector ومعالجتها، طورته شركة أدوبي عام 1987 ليعمل آنذاك فقط على نظام ماكنتوش العامل على حواسيب أبل، ثم طوّرت أدوبي الإصدار الثاني عام 1989 ليعمل على نظام ويندوز. يتيح لك إنتاج تصاميم الشعارات والأيقونات والرموز والخطوط والمطبوعات الإعلانية وملفات PDF وبطاقات الأعمال وغيرها من التصاميم. تتميز الرسومات الشعاعية عن النقطية الخاصة بالفوتوشوب بأنها لا تتأثر أثناء تكبيرها أو تصغيرها ولا تتشوه أو تتلف بعكس الرسومات النقطية، وهذا ما يجعلها الأفضل لتصميم الشعارات والهويات البصرية وكافة التصاميم الطباعية الإعلانية. تنسيق الملف الأصلي لملفات الإليستريتور هو AI، ويمكنه أيضًا حفظ الملفات بتنسيق EPS وSVG ويمكنه تصدير الرسومات إلى PDF وJPEG وتنسيقات رسومات أخرى. نصيحة: عند بدء استخدامك له، ابدأ بالخربشة وتجربة الأدوات وبخاصة أدوات الرسم، حتى تألف العمل عليه وتعتاد أدواته وواجهاته، وبعدها تعمّق قليلًا في استخدام النصوص وبعض التصاميم الأساسية المعتمدة على الأشكال الرئيسية، وحاول في هذه المرحلة أن تكون رسوماتك بالأبيض والأسود فقط لتتمكن من التركيز على الرسم والتشكيل، ثم عليك ببدء تعلّم استخدام أداة القلم والتي تعد أهم وأقوى أداة في تصميم الرسومات الشعاعية، ويجب أن تتمرن على استخدام الفأرة في رسم الخطوط والمنحنيات بشكل جيد، وأخيرًا يمكنك البدء في استخدام الألوان واستكشاف أدوات جديدة وتحسين مهاراتك. مجموعة تطبيقات السحابة الذكية Creative Cloud من أدوبي. وأسوة ببرنامج الفوتوشوب فقد أُدرج الإليستريتور ضمن مجموعة تطبيقات السحابة الإبداعية Creative Cloud، الأمر الذي سهّل تخزين البيانات والملفات ضمن مكتبات السحابة ومشاركتها مع بقية البرمجيات والاستفادة من مزايا أخرى مثل حرية الوصول إلى مخزن الصور والرسوميات المختلفة والتي تعد بعشرات الآلاف والاستفادة من التحديثات المستمرة. سنتطرّق في هذا المقال إلى شرح واجهات البرنامج وأهم الأدوات والقوائم واللوحات، لتتكوّن لدينا فكرة عن ماهية البرنامج وكيفية بدء العمل عليه. يمكنك الحصول على قرص مدمج يتضمن هذا البرنامج لتثبيته على حاسوبك أو تحميله من الموقع الرسمي وسيعمل البرنامج لفترة تجريبية ثم سيتوجب عليه دفع قيمة الاشتراك الشهري حتى تتمكن من الاستمرار باستخدامه. يجب علينا الحصول على نسخة الشرق الأوسط بالواجهة الإنجليزية التي تدعم اللغة العربية من خيارات وخصائص تحرير النصوص، أو يمكن تحميل نسخة شمال أفريقيا الفرنسية بالواجهة الفرنسية التي تدعم اللغة العربية لمن يرغب في ذلك، إلا أننا سنشرح فقط الواجهة الإنجليزية. بدء العمل على البرنامج وفتح مستند جديد في كل مرة تبدأ فيها بتشغيل البرنامج تظهر لك شاشة بدء العمل (الشكل التوضيحي 1) تمامًا كما في برنامج الفوتوشوب، والتي تتضمن شريط القوائم العلوي (1) وصور مصغرة عن آخر الملفات التي عملت عليها (2). إذا أردت مشاهدة ملفاتك على حسابك ضمن السحابة الإبداعية Creative Cloud والتي يرمز لها اصطلاحًا CC فعليك اختيار CC Files أي ملفات السحابة الإبداعية (3)، ولفتح أي ملف قديم انقر عليه فقط، وفي حال أردت فتح ملف غير موجود ضمن قائمة هذه الواجهة انقر على Open فتح (4) لتبحث عنه، ولفتح مستند جديد انقر على Create New أنشئ مستند جديد (5). (الشكل التوضيحي 1) وسنتعلّم عن خيارات فتح مستند جديد لذلك انقر على فتح مستند جديد، ستظهر النافذة الخاصة بإنشاء مستند جديد كما في (الشكل التوضيحي 2). يوفّر البرنامج قوالب مساحات عمل جاهزة للاستخدام من ضمن الخيارات العلوية (1) مثل أن نختار أحد مقاسات التصاميم الطباعية المختلفة أو تصاميم الويب أو الهاتف المحمول أو الفيديو وغيرها. (الشكل التوضيحي 2) ويتضمن الجانب الأيمن من النافذة لوحة خيارات يدوية لتحديد مواصفات المشروع الذي سنعمل عليه (الشكل التوضيحي 3)، ويتضمن اسم مجموعة الإعدادات المعدة مسبقًا حيث يمكنك تسميتها لتعود إليها لاحقًا (1)، ثم خيار تحديد عرض المشروع Width ووحدة القياس المعتمدة مثل المتر ومشتقاتها والبوصة (الإنش) والبكسل والنقطة (2)، ثم خيار تحديد الارتفاع Height بنفس وحدة القياس المختارة سابقًا إضافة إلى خيار تحديد اتجاه العمل Orientation بحيث يكون عموديًا أو أفقيًا عرضيًا، وهناك خيار لتحديد عدد لوحات العمل Artboards ضمن التصميم الواحد (3). ثم علينا تحديد مقدار هوامش النزيف (Bleed) (4)، وهي هوامش ستظهر خارج إطار الحدود الأصلية للوح الرسم، أي أنها المقدار الذي يقع خارج حدود إطار لوح الرسم من التصميم والتي نستخدمها لتجنب أية حدود أو مساحات بيضاء قد تظهر على حواف العمل المطبوع بعد الطباعة بسبب خطأ في ميلان زاوية سير الورق أثناء الطباعة أو بسبب خطأ في قص حواف العمل المطبوع. قد يحصل هامش خطأ بسيط أثناء قطع التصميم بعد الطباعة فتظهر حواف بيضاء غير مرغوبة ما يستوجب قطع أجزاء إضافية من الحواف لإزالة هذه المساحات البيضاء، وبالتالي قد يتسبب ذلك بفقدان عناصر مهمة في التصميم بسبب عمليات القطع الإضافية، لذلك نقوم بالتصميم خارج حدود التصميم الأساسي لغاية حدود هوامش النزيف وبذلك نتجنب ظهور مثل تلك المساحات والحواف البيضاء. تعد هوامش النزيف بمثابة هوامش أمان لضمان عدم حدوث أية أخطاء أثناء الطباعة. هوامش النزيف Bleed تظهر باللون الأحمر خارج حدود لوح الرسم. ويوجد خيارات إضافية تظهر بالنقر عليها تتضمن خيارات النماذج اللونية (5) والتي يمكننا اختيار إما نموذج RGB أو CMYK فقط والأول كما نعلم خاص للتصميم للشاشات والثاني للمطبوعات. ثم هناك خيارات الدقة للتصاميم النقطية (6) وتتضمن ثلاثة خيارات منخفضة، متوسطة وعالية، وأخيرًا خيارات طريقة عرض التصميم (7). (الشكل التوضيحي 3) يوجد خيارات إضافية More Sittings والتي تتضمن ذات الخيارات السابقة في الشكل التوضيحي السابق مع خيارات أكثر لجهة طريقة عرض ألواح الرسم ومسافة التباعد بينها. واجهة البرنامج تتضمن واجهة البرنامج شريط القوائم في الأعلى (1) وتحته شريط خيارات الأدوات (2) وتتغير محتويات هذا الشريط تبعًا للأداة التي نستخدمها، شريط الأدوات على الجهة اليسرى (3) ولوحات العمل على الجهة اليمنى (4). وبالإمكان سحب وتحريك شريط الأدوات واللوحات ووضعها في أي مكان على الشاشة. وتتضمن قوائم الإليستريتور العديد من المهام والأدوات والخيارات، سنشرح أهمها مما يمكن شرحه بدون الحاجة لتطبيقات عملية. شريط القوائم ويتضمن بدايةً شعار البرنامج والذي يحوي في حال النقر عليه خيارات نافذة البرنامج من تصغير وتكبير واستعادة وتحريك وإغلاق. كما يتضمن قوائم سنشرحها تاليًا: قائمة الملف File وتتضمن هذه القائمة خيارات إنشاء مستند جديد من خلال New أو إنشاء مستند جديد من أحد القوالب الجاهزة من خلال الأمر New from Template، وخيارات فتح ملفات من خلال Open و Open Recent Files التي تضم قائمة بآخر الملفات المفتوحة في البرنامج، إضافة إلى خيار التصفح في بريدج Browse in Bridge وهو برنامج مصاحب للإليستريتور وبقية منتجات السحابة الإبداعية من أدوبي، يطلق عليه أيضًا مدير الوسائط، ويمنح هذا البرنامج طرقًا قوية للعثور على مجموعة الصور المتزايدة باستمرار وإدارتها وتنظيمها، إضافة لملفات برامج الفوتوشوب والإليستريتور وإن ديزاين وغيرها. صورة برنامج بريدج Bridge من مدونة أدوبي. وتحوي القائمة أيضًا خيارات الإغلاق Close لإغلاق المستند وخيارات الحفظ المختلفة Save وSave As لحفظ الملف وحفظه باسم وتنسيق مختلف، وخيار Save a Copy الذي يحفظ نسخة مطابقة من الملف بالاسم والتنسيق مع إضافة كلمة (Copy) إلى اسم الملف، وحفظ كقالب Save as Template وخيار حفظ الشرائح المحددة Save Selected Slices وخيار Revert الذي يفيد في إعادة الملف المفتوح إلى شكله الأساسي عند فتحه قبل القيام بكافة التعديلات الجديدة عليه شريطة ألا نكون قد حفظنا تلك التعديلات. وهناك خيار البحث في مخزن أدوبي عن الرسومات والتصاميم والصور Search in Adobe Stock، وخيار Place لإدراج ملفات صور ورسومات ومخططات إلى داخل التصميم وهو يعادل الأمر Import في برنامج الفوتوشوب والبرامج الأخرى المشابهة، ويدعم هذا الخيار عشرات التنسيقات كما في الشكل التوضيحي التالي. لاحظ عشرات تنسيقات الملفات التي يدعم الإليستريتور إدراجها ضمن العمل. خيار التصدير Export لتنسيقات مختلفة ويتضمن خيارات تصدير الملف للشاشات أو للويب ويليه خيار تصدير التحديد فقط Export Selection بدون تصدير كامل مساحة العمل. بقية القائمة تتضمن أوامر التحزيم للتصميم مع الملفات المرتبطة به Package إضافة إلى خيارات السكريبت Scripts وإعدادات المستند Document Setup والمعلومات الكاملة حوله File Info وتغيير نموذج ألوان المستند Document Color Mode وأمر الطباعة Print وأخيرًا أمر الخروج من البرنامج Exit. قائمة التعديل Edit وتتضمن هذه القائمة خيارات التراجع والعودة عن تنفيذ العمليات الأخيرة المطبقة Undo وRedo، إضافة إلى خيارات القص والنسخ واللصق،وتتضمن أيضًا خيارات لصق مميزة ومفيدة وهي خيارات اللصق في الأمام Paste in Front واللصق في الخلف Paste in Back والتي تفيد في لصق العنصر الموجود في الحافظة أمام بقية العناصر أو خلفها، وكذلك خيار اللصق في جميع لوحات الرسم الموجودة في التصميم Paste in All Artboards. لاحظ عملية اللصق في الأمام والخلف. كما تتضمن القائمة أيضًا أدوات النص من البحث والاستبدال والتدقيق الإملائي وتعديل القاموس. وتتضمن قائمة تعديل الألوان Edit Colors الفرعية مجموعة من أدوات تعديل الألوان والمزج والاستبدال وغيرها. وتتضمن بقية القائمة أدوات متقدمة في تعديل الإعدادات الأساسية المختلفة للبرنامج كالألوان والشفافية والطباعة واختصارات لوحة المفاتيح وغيرها. قائمة الكائن Object وتعد قائمة مهمة لما تحويه من أدوات وأوامر كثيرة جدًّا لعمليات إجرائية متنوعة على التصميم، لا يمكننا شرحها جميعها هنا إذ تحتاج لمقالات عدة، لكننا سنتحدث عن أكثرها استعمالًا. ونبدأ من التحويل Transform والتي تتضمن قائمة فرعية تحوي أوامر التحجيم والتدوير والتحريك والانعكاس وغيرها. تمنحك قائمة الترتيب Arrange القدرة على ترتيب العناصر المحددة فوق أو تحت بقية العناصر. يجمع الأمر Group مجموعة من العناصر المحددة في مجموعة واحدة ويلغي الأمر Ungroup عملية التجميع السابقة، فيما يقفل الأمر Lock العنصر بحيث لا نستطيع تحديده أو إجراء أي تعديل عليه ويلغي الأمر Unlock All القفل لجميع العناصر المقفولة. ويعمل الأمر Hide على إخفاء عناصر أو طبقات معينة فيما يظهر الأمر Show All كل ما هو مخفي. وتتضمن بقية أوامر القائمة عمليات وإجراءات كثيرة جدًّا ومفيدة في إنشاء تصاميم مميزة تحتاج لمقالات كثيرة لشرحها جميعها، يمكنك مراجعة دروس أكاديمية حسوب لفهم آلية عملها. قائمة النصوص Type وتتضمن جميع أدوات وخيارات تحرير ومعالجة النصوص والمحارف والخطوط والرموز، ومنها Add Fonts from Typekit وهي مجموعات خطوط من أدوبي متوفرة ضمن السحابة الإبداعية لأدوبي، وخيار Glyphs الذي يوفر الرموز والحروف ضمن باقات الخطوط ذات الأشكال والرموز مثل خط البسملة في الشكل التوضيحي التالي: بقية القوائم وتتضمن قائمة التحديد Select جميع أدوات وخيارات التحديد، بينما تتضمن قائمة التأثيرات Effect مرشحات من نوعين الأول هو مرشحات الإليستريتور الرئيسية والآخر هو مرشحات الفوتوشوب. تتضمن قائمة العرض View خيارات متعددة للعرض من تكبير وتصغير وإظهار وإخفاء الحواف وأدوات الأدلة المختلفة والشبكة وغيرها. وتتضمن قائمة Window عمليات ترتيب النوافذ المفتوحة ضمن البرنامج إضافة إلى فتح وإغلاق جميع لوحات العمل والأدوات ضمن البرنامج وعددها كبير. ويوجد خيار خاص في شريط القوائم يختص بتعديل ترتيب النوافذ المفتوحة في البرنامج بطرق منظمة ومعدّة مسبقًا كما في الشكل التوضيحي التالي: شريط الأدوات ويمكن سحبه ووضعه في أي مكان من واجهة البرنامج وتتضمن الأيقونة الواحدة من هذا الشريط أكثر من أداة أو أكثر من نموذج للأداة، ويمكن إظهارها بالنقر المطوّل المستمر على الأيقونة. Selection Tool أداة التحديد: هي رمز السهم الأسود الذي نستخدمه طوال الوقت. إنه يعمل كمؤشر نموذجي، مما يتيح لنا تحديد الكائنات والنصوص والنقر فوقها وسحبها، تكبيرها، تصغيرها وتدويرها. Direct Selection Tool أداة التحديد المباشر: تتيح لنا تحديد وتحرير نقاط ربط معينة للأشكال أو الخطوط الشعاعية بشكل فردي، بينما تحدد أداة التحديد العادية الشكل بالكامل، تتيح لك أداة التحديد المباشر تعديل زاوية أو جانب أو نقطة أو منحنى في كل مرة. ويمكن من خلالها تحديد مجموعة من نقاط الربط ومعالجتها. Group Selection Tool أداة تحديد المجموعة: تحدد كائن معين بسهولة داخل مجموعة لنقله أو تحريره أو تغيير حجمه بشكل فردي. Magic Wand Tool أداة العصا السحرية: تمكننا آليًّا من تحديد جميع المساحة المتقاربة في الدرجة اللونية من مكان التحديد، سيكون هذا مفيدًا إذا احتجت في أي وقت إلى ضبط اللون نفسه على العديد من الأشكال المختلفة. Lasso Tool: تعمل هذه الأداة بطريقة مشابهة لأداة التحديد المباشر ولكنها تستطيع رسم تحديد حول مجموعة من نقاط الربط الفردية لتحديدها جميعها والتحكم بها. Pen Tool أداة القلم: هي أهم أداة في عالم تصميم الرسومات الشعاعية حيث نستطيع بواسطتها أن نرسم خطوطًا وأشكالًا شعاعيةً مختلفة عبر تعيين نقاط الربط للرسم الشعاعي من خلال رسم خطوط مستقيمة أو منحنية، ويمكن التحكم بمدى انحناء الخطوط عبر مقابض خاصة تظهر للنقطة. تتطلب هذه الأداة تدريبًا كبيرًا لإتقان الرسم بها ولكن بمجرد اتقانها فإنك ستفتح أمامك المجال الواسع لرسم تصاميم فريدة ومذهلة. تتضمن بقية الأدوات ضمن قائمة هذه الأداة إضافة وإزالة نقاط الربط للشكل الشعاعي، فيما تضيف الأداة الأخيرة في القائمة مقابض لنقاط الربط أو تزيلها. Curvature Tool أداة الانحناء: هي طريقة رائعة أخرى لإنشاء أشكال شعاعية، خاصةً إذا كان للشكل حواف منحنية في الغالب. من الصعب أن تتحكم بشكل مثالي في المنحنيات باستخدام هذه الأداة موازنة بأداة القلم، ولكن منحنيات هذه الأداة هي أيضًا مستديرة بشكل مثالي أكثر من المنحنيات التي قد تنشئها باستخدام أداة القلم. Type Tool أداة الكتابة أو أداة النص: تحتوي قائمة هذه الأداة على أدوات مختلفة لكتابة النص من اليمن لليسار وبالعكس وضمن مساحة الأشكال أو الكتابة على مسار معين أو الكتابة العمودية. تتيح الأداة الأخيرة في القائمة TOUCH TYPE TOOL تحديد الأحرف فرديًا وتحريكها أو تكبيرها أو تصغيرها أو تدويرها مع المحافظة على خصائص النص لها. Line Segment Tool أداة رسم الخط: ترسم خطوطًا فردية منفصلة غير متصلة أي أنها ترسم خطًا واحدًا في كل مرة. Arch Tool أداة القوس: ترسم هذه الأداة خطوطًا منحنية منفصلة بشكل فردي في كل مرة. Spiral Tool أداة اللولبية: ترسم شكلًا لولبيًا بشكل دوّامة. Rectangular Grid Tool أداة الشبكة المستطيلة: هي مفيدة للغاية لأنها تتيح لك إنشاء جداول أو أي شيء آخر يحتاج إلى شبكة بها صفوف وأعمدة. بمجرد تحديد الأداة انقر مرة واحدة على لوح الرسم، وستظهر لك نافذة تسمح لك بتحديد حجم وكمية الصفوف والأعمدة التي تريدها. Polar Grid Tool أداة الشبكة القطبية: تعمل هذه الأداة على إنشاء شبكة قطبية، والتي يبدو أنها هدف دائري الشكل، مع خطوط متعامدة تلتقي في المنتصف. Rectangle Tool أداة رسم المستطيلات: ترسم هذه الأداة مستطيلات ومربعات على حد سواء، إن أردت رسم مربع مثالي ما عليك سوى الاستمرار بالضغط على مفتاح ‘Shift’ أثناء السحب باستخدام هذه الأداة وستحصل على مربع مثالي. تتضمن قائمة هذه الأداة أدوات رسم مستطيل أو مربع منحني الزوايا وأداة رسم الأشكال البيضوية أو الدائرية وأداة رسم المضلعات وأداة رسم النجوم وأخيرًا أداة رسم وميض الضوء. Paint Brush Tool أداة فرشاة الطلاء: تستخدم لرسم ضربات فرشاة طلاء عادية بحيث ستكون في النهاية شكلًا شعاعيًا يمكنك تعديله بأداة التحديد المباشر. Blob Brush Tool تؤدي نفس مهام أداة الفرشاة السابقة باستثناء أن الأداة السابقة تكوّن شكل ضربة الفرشاة الشعاعي فتكون نقاط ربطه على طول خط الرسم، وباقي الشكل الظاهر عبارة عن حدود خارجية للخط، بينما بواسطة هذه الأداة فإن كامل مساحة ضربة الفرشاة ستصبح شكلًا شعاعيًا. Shaper Tool أداة الصقل: تتيح لك رسم أشكال عامة يدويًا، ولكن بعد ذلك ستُعدّل تلقائيًا وتُنشِئ أقرب شكل نظامي صحيح للشكل الذي رسمته. إذا استخدمت هذه الأداة لرسم مستطيل سيء يدويًا، في اللحظة التي تحرر فيها إصبعك من الفأرة، سينشَأ تلقائيًا مستطيل سليم التكوين بزوايا قائمة. Pencil Tool أداة القلم الرصاص: ترسم خطوطًا يدوية بحاجة إلى دقة أثناء الرسم ومهارة في استخدام الفأرة أو جهاز Wacom مع القلم الخاص به. Smooth Tool أداة التنعيم: تعمل على تنعيم الخطوط والحواف لتكون أقل حدة وأكثر انسيابية. Path Eraser Tool أداة مسح المسار: تمسح المسارات كما هو واضح من اسمها. Join Tool أداة الوصل: تصل مسارين مع بعضهما ليكونا مسارًا واحدًا. Eraser Tool أداة الممحاة: تمسح الأشكال والخطوط والمسارات. Scissors Tool أداة المقص: لقص الكائن أو المسار. Knife Tool أداة السكين: تشبه أداة المقص إلا أنها لا تقص بخط مستقيم فقط كما الأداة السابقة بل يمكن القص بأي طريقة. Rotate Tool أداة التدوير: تدوّر الكائنات. Reflect Tool أداة الانعكاس: تعكس اتجاه الكائنات. Scale Tool أداة التحجيم: تكبّر أو تصغّر حجم الكائنات. Shear Tool: تشوّه هذه الأداة الكائنات بحسب تحريك الأداة، حدّد نقطة المحور ثم انقر باستخدام الأداة على أحد أطراف الكائن واستمر بالسحب بشكل عشوائي لتشاهد التشوه الحاصل في الكائن. Reshape Tool أداة إعادة التشكيل: تربط عدة نقاط ربط على خط أو شكل وتحركها جميعًا في نفس الاتجاه. Width Tool أداة العرض: تعمل على الخطوط فقط بحيث تزيد أو تنقص من حجم حدود الخط. بقية الأدوات ضمن قائمة هذه الأداة تعمل على إنشاء تأثيرات مختلفة على الكائنات مثل أداة Warp Tool التي تسبب الالتواء للكائن وأداة Twirl Tool التي تسبب تشكيل دوامة لولبية ضمن الكائن وكذلك بقية الأدوات تعمل على تأثيرات وتشوهات أخرى مختلفة على الكائنات. Puppet Warp Tool: تعمل على إنشاء نقاط مرجعية ضمن الكائن مع تكوينه ككائن شبكي وتحويل وتغيير الشكل العام للكائن عبر معالجة تلك النقطة، ويمكن إنشاء أكثر من نقطة للكائن الواحد لمعالجتها. Free Transform Tool: تتيح هذه الأداة تعديل حجم الكائن بطرق مختلفة. Shape Builder Tool أداة بناء الشكل: تدمج مجموعة من الأشكال في شكل واحد. أداتا تعبئة الأشكال أو القطاعات باللون أو النمط مع خيارات تحديد وتعديل مختلفة. Perspective Grid Tool أداة شبكة المنظور: تساعد عند تصميم رسومات ذات منظور معين بحيث تبدو وكأنها ثلاثية الأبعاد. والأداة التالية لتحرير شبكة المنظور. Mesh Tool أداة الشبكة تعد هذه الأداة متقدمة للغاية حيث تتيح لك تحديد نقاط معينة داخل قسم معين من الشكل لإضافة لون آخر. سينشئ اللونان تدرجًا لونيًا بينهما، يعمل كسطوع وتظليل وتطوّر طبيعي للألوان. بهذه هي الطريقة يصنع المصممون المتقدمون للغاية رسومات رقمية واقعية مذهلة. Gradient Tool أداة التدرج اللوني: تستخدم لتحرير اتجاه وزاوية التدرجات اللونية للكائنات الملونة بتدرجات لونية. Eyedropper Tool أداة القطارة: تتيح لك اختيار لون لاستخدامه من أحد الكائنات أو الخطوط أو الصور. Measure Tool أداة القياس: تتيح لك قياس المسافة بين نقطتين. Blend Tool أداة المزج: تتيح لك هذه الأداة التقاط كائنين ملونين مختلفين وإنشاء تدرج بينهما عن طريق مزج الكائنين معًا. تضم قائمة الأدوات هذه جميع أدوات الرموز المختلفة من إدراجها وتحويلها وتشويهها وغير ذلك. تضم قائمة الأدوات هذه جميع أدوات إنشاء وتحرير الرسومات البيانية بكل أشكالها وأنواعها. Artboard Tool أداة لوح الرسم: يمكنك إضافة لوح رسم جديد أو تعديل حجم لوح رسم موجود سابقًا أو تحريك لوح الرسم. أداتا إنشاء وتحديد الشرائح Slice المفيدة في تصميم واجهات الويب. Hand Tool أداة اليد: تسمح لك بتحريك مشهد العمل لتصفحه فقط. Print Tiling Tool: تعمل على المساعدة لطباعة المستند كبير الحجم على عدة أوراق صغيرة متجانبة للحصول على التصميم الكامل. Zoom Tool أداة التكبير: تكبّر منظور التصميم أو تصغّره حسب الرغبة. أخيرًا خيارات تحديد لون الكائن ولون حدود الكائن والتبديل بينهما مع إمكانية إضافة التدرج اللوني. لوحات الإليستريتور يوجد العديد من اللوحات التي تظهر يمين واجهة البرنامج ويمكن إظهار أي منها أو إخفاؤه من قائمة Window ومن المستحيل عرض جميع اللوحات لأنها ستغطي كامل مساحة الشاشة لكثرتها. قد تتواجد أكثر من لوحة في صف واحد ونافذة واحدة ونختار التي نريد بالنقر على عنوانها في الأعلى. مثل (الشكل التوضيحي 4) حيث تتضمن نافذة اللوحات العديد من اللوحات المجمعة في نافذة لوحة واحدة. (الشكل التوضيحي 4) ولكل لوحة قائمة خاصة بها تختلف عن قوائم بقية اللوحات بحيث تتضمن أدوات متقدمة ضمن مجال اختصاص كل لوحة. بالإمكان إحصاء نحو أربعين لوحة موجودة في الإليستريتور ونذكر بعضها: لوحة Pathfinder: تحوي أدوات معالجة الكائنات المتقاطعة كالدمج والتفريغ وغيرها. لوحة Stroke: تتضمن إعدادات الحدود كاملة لتطبيقها على حدود أو حواف الكائنات. لوحة Gradient: تتضمن إعدادات التدرجات اللونية. لوحة Appearance: تتضمن التأثيرات المطبقة على الكائن من لون وتدرجات وحدود ومرشحات وغيرها. لوحة Character: تتضمن إعدادات تحرير النصوص. لوحة Paragraph: تتضمن إعدادات الفقرات. لوحة Layers: لوحة الطبقات وتتضمن كل طبقة جميع الكائنات التي بداخلها. لوحة Artboard: تتضمن ألواح الرسم وخصائصها. لوحة Align: لترتيب الكائنات فوق أو تحت بعضها. شريط المعلومات السفلي وأخيرًا يوجد أسفل واجهة البرنامج شريط المعلومات الذي يتضمن من اليسار حجم مشاهدة العمل ويمكن بالنقر عليه تعديل هذا الحجم. كما يتضمن تحديد لوح الرسم الفعّال وأيضًا خيارات أخرى لعرض معلومات كالأداة المستخدمة أو لوح الرسم الفعّال أو التاريخ والوقت أو نموذج الألوان المستخدم وغيرها من المعلومات. خاتمة كان هذا شرحًا لواجهة برنامج الإليستريتور وما تتضمنه من قوائم وأدوات ولوحات مع شرح أهم القوائم وكافة الأدوات وأخذ فكرة عامة عن اللوحات الأكثر شيوعًا. برنامج أدوبي إليستريتور سهل وواجهاته سهلة الاستخدام ولكن استخدام الأدوات والعمل عليه يتطلب تمرينات مستمرة ومتابعة دائمة لدروس التصميم التي تعلّم كيفية استخدامه لإنشاء تصاميم رائعة وخصوصًا تلك الدروس التي توجّه لاستغلال إمكاناته الكبيرة وأدواته وأوامره بهدف تسهيل عملية التصميم وإنشاء تصاميم مذهلة توصلك لمستوى الاحترافية.