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

تصميم واجهة المستخدم من أهم المهن المطلوبة حاليًا في سوق العمل، ولكن ما هي واجهة المستخدم؟ واجهة المستخدم هي ما نراه ونتفاعل معه على شاشات الحواسيب والأجهزة المحمولة، مثل موقع الإنترنت وتطبيقات الهاتف المحمول وتطبيقات الويب. لذلك فإن الشخص الذي يختار مواقع العناصر على الشاشة وتخطيط مختلف الصفحات والشاشات ومن يخطط أنماط ألوانها ورسوماتها، هو مصمم الواجهات، ويرتبط عمله مباشرة مع مطوّر الويب والتطبيقات كما يرتبط من جهة أخرى مع مصمم تجربة المستخدم. كيف يعمل مصمم واجهة المستخدم؟ من الصعب جدًّا على مصمم الرسوميات العمل على تصميم الواجهات منفردًا، لأن عمله مرتبط كليًا بالتنسيق مع مطوّر التطبيقات والويب، لذلك فإن الغالبية العظمى من مصممي الواجهات يعملون في فرق تضم مصمم رسوميات ومطوّر تطبيقات ومدير فريق الذي يجب أن يكون لديه إلمام بالتصميم والتطوير معًا، وقد يتضمن الفريق أفرادًا أكثر إن لزم الأمر مثل كاتب المحتوى وغيره. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن مراحل تصميم واجهة المستخدم يمر مشروع تصميم الواجهة بعدة مراحل وهي: يتلقى المدير طلبًا لتنفيذ مشروع واجهة تطبيق أو ويب ويحصل على كافة المعطيات والمعلومات اللازمة لبدء المشروع. يجتمع المدير بأعضاء الفريق ويطلعهم على المعطيات التي بين يديه ثم يوزع المهام على المصمم والمطور وعادة ما يبدأ المصممم العمل. يعمل المصمم على إنشاء رسومات نماذج أولية باستخدام القلم والورقة إلى أن يصل إلى نماذج مرضية لرؤيته الخاصة بالمشروع. ينقل المصمم هذه النماذج من الأوراق إلى الحاسوب ليرسم هذه النماذج بطريقة احترافية ومنسقة بأسلوب الإطار الشبكي Wireframe ثم يسلم هذه النماذج إلى المدير. ملاحظة: إن كان فريق العمل يعمل معًا في نفس المكتب فإنه يسلم هذه المخططات مباشرة، أو عن طريق إرسالها بالبريد الإلكتروني أو أية وسيلة اتصال أخرى، أو قد يلجأ الفريق للعمل معًا على أحد أدوات وتطبيقات سطح المكتب أو تطبيقات الويب المخصّصة لعمل الفرق في هذا المجال، حيث يتشارك الجميع الأفكار والتصاميم والنماذج ويعلّقون عليها ويتباحثون بأمرها، سنذكر بعضًا من هذه الأدوات والتطبيقات في الجزء الأخير من المقال. يتبادل المدير والمصمم الآراء والأفكار وتُنفّذ التعديلات ثم يرسل المدير النماذج إلى العميل ليبدي رأيه فيها ويطلب تعديلاته. يبدأ المصمم العمل على استخدام العناصر الرسومية والصور والألوان لإنشاء تصاميم رسومية أولية ثم يشاركها مع المدير الذي يرسلها بدوره للعميل لإبداء الرأي وطلب التعديلات. يعمل المصمم على التعديلات المطلوبة ويسلم التصاميم النهائية للمدير الذي يسلمها بدوره للمطور ليعمل على تطوير التطبيق أو الموقع ومن ثم يسلم المشروع إلى العميل. قواعد تصميم واجهة المستخدم لتصميم واجهات جيدة ومتميزة واحترافية نحتاج إلى اتباع قواعد معينة تضمن تألق وتميز التصميم كما تضمن سهولة استخدامه وقبوله من قبل المستخدمين. التناسق يجب استخدام نفس أنماط التصميم ونفس تسلسل الإجراءات للحالات المتماثلة، يتضمن ذلك الاستخدام الصحيح للألوان والطباعة والمصطلحات في الشاشات والأوامر والقوائم الفورية خلال رحلة المستخدم، حيث تسمح الواجهة المتسقة للمستخدمين بإكمال مهامهم وأهدافهم بسهولة أكبر. يجب أن يكون المستخدم مرتاحًا في استخدامه للواجهة ولا يشعر بالارتباك، مثلًا لا يجب وضع زر القائمة المنبثقة أسفل الواجهة بينما اعتاد المستخدمون على وجودها أعلى الواجهة، وكذلك لايجب أن يوضع زر شراء المنتج أعلى صفحة المنتج وفوق صورته والمعلومات حوله بينما اعتاد المستخدمون وجود هذا الزر أسفل هذه الواجهة، وهكذا. كما يُفضّل على الدوام استخدام الأشكال المألوفة والأزرار المألوفة أكثر من الأشكال الجديدة التي قد تشعر المستخدمين بالغرابة وتجعلهم يفكرون مرتين قبل استخدام العنصر أو النقر على الزر ، فهذا التردد ليس جيدًا بمقاييس تجربة المستخدم والتصميم السليم والصحيح لواجهة المستخدم. البساطة في جميع القواعد الخاصة بتصميم أي شيء تجد مبدأ البساطة دائمًا، لأن التصميم البسيط مريح أكثر للنظر ويساعد على إيصال الرسالة بسلاسة ووضوح وسهولة دون عناء وهو الهدف من التصميم، فلا أحد يحب الواجهات المزدحمة وغير المنتظمة التي تسبب الإرباك عند محاولة التعامل معها لعدم وضوح الرسالة المفروض إيصالها أو الهدف من التطبيق أو الموقع. فإضافة المزيد من العناصر المختلفة في التصميم سيقلل التركيز على العناصر المهمة والتي يجب أن يركّز عليها المصمم. لذلك يجب التخفيف من ازدحام العناصر وتأمين تصميم بسيط يتضمن أهم العناصر فقط والابتعاد عن العناصر الأقل أهمية والتي يمكن إبرازها في واجهات أخرى يمكن التنقل إليها من الواجهة الرئيسية. مثال: أهم ما يركز عليه موقعا ياهو وجوجل هو محرك البحث وعملية البحث، وبفضل التصميم البسيط والمختصر لجوجل فإن التركيز منصب على محرك البحث فحسب، بينما يسبب ازدحام العناصر المختلفة في واجهة ياهو تشتيت الانتباه عن العنصر الرئيسي الأهم وهو خانة البحث. تناسق الخطوط من المهم التمييز بين أنواع الخطوط الواجب استخدامها عند تصميم واجهات المستخدم، حيث أن هناك خطوطًا يمكن عرضها بوضوح ضمن واجهات الويب لسطح المكتب ولكنها صعبة القراءة وقليلة الوضوح عند استخدامها في الأحجام الصغيرة ضمن الشاشات الصغيرة للأجهزة المحمولة. لذلك يجب الانتباه واستخدام خطوط ثخينة نسبيًا في الواجهات المصممة للشاشات الكبيرة والخطوط النحيفة نسبيًا عند التصميم للشاشات الصغيرة. من أهم القواعد المتبعة في هذا السياق تجنب استخدام أكثر من نوعين من الخطوط ضمن أي واجهة لضمان تناسق وأناقة التصميم. مراعاة التصميم المتجاوب تساعد بعض برامج تصميم الواجهات على إنشاء تصاميم متجاوبة تتمتع بقابلية تغيير حجم العناصر والأجزاء الأساسية بحسب حجم الشاشة المعروض عليها التصميم، مثل حجم الشعار والقوائم والفقرات النصية وغيرها، بينما لا تتمتع برامج أخرى بهذه الميزة مثل برنامج الفوتوشوب والإليستريتور، لذلك يجب أن يخصص المصمم إما عناصر بأحجام متوسطة تراعي كافة الأحجام المحتملة أو يجب عليه أن ينشئ عدة نسخ من العناصر بأحجام مختلفة ليستخدمها المطور في برمجة الواجهة حتى تكون متجاوبة وقابلة للتكبير أو التصغير بحسب حجم شاشة العرض. التباين كثيرًا ما نرى واجهات لمواقع أو لتطبيقات لا تراعي مبدأ التباين على الاطلاق بحيث تكون الألوان بين العناصر المختلفة ولاسيما بين العناصر والخطوط ذات تباين متدني بحيث يكون من الصعب تمييز العناصر أو قراءة النصوص، وعلى العكس أيضًا أحيانا يكون التباين مبالغًا فيه ما يجعل النظر ومتابعة العناصر أو القراءة مزعجة للعين وغير مريحة، لذلك يجب أن يكون التباين متوسطًا ومدروسًا حتى يحقق تجربة مستخدم مريحة وجيدة. أحد أبرز أساليب تطبيق مبدأ التباين هو تصميم واجهة بلون واحد مع التدرجات القريبة وبالأخص اللون الرمادي وتدرجاته، ومع استخدام لون حيوي مميز للعنصر أو العناصر الأهم لتأمين بروزها مع تحقيق جمالية وأناقة في التصميم. الهرمية هو من المبادئ المهمة في التصميم عامة وكذلك تصميم الواجهات خاصة، نستطيع من خلاله توجيه عين المستخدم واهتمامه بطريقة تدريجية في الاتجاه الذي نريد، ويكون تطبيق هذا المبدأ عبر تعزيز خصائص مميزة إضافية تُبرز العنصر الأهم في الواجهة مع تخفيف نسبة التعزيز للعنصر التالي في الأهمية وهكذا، وبذلك يعلم تمامًا المستخدم كيفية التوجّه ضمن الواجهة. المحاذاة يجب تطبيق هذا المبدأ على جميع محاور وأطراف التصميم، وعلى عكس تصاميم أخرى حيث يطبق هذا المبدأ على محور واحد ويكون ذلك كافيًا، إلا أن ذلك غير كاف في تصميم الواجهات نظرًا لأن هذه الواجهات عادة ما تكون مكتظة بالعناصر بالموازنة مع تصاميم فنية أخرى، ما يستوجب تطبيق المحاذاة على مختلف المحاور والأطراف ليكون المنظر العام للتصميم متوازنًا ومتناسقًا. انظر للشكل التوضيحي السابق وستلاحظ مبدأ المحاذاة بكل وضوح. التقارب وهو أحد مبادئ التصميم العامة، حيث أن تطبيقه يحسّن تجربة المستخدم لأن تناثر العناصر ضمن الواجهة وتباعدها يؤدي لتجربة مزعجة للمستخدمين وغير فعّالة لذلك يجب تنظيم العناصر بقرب بعضها وبتسلسل مرتب حتى نؤمن تجربة سلسلة ومريحة للمستخدمين. الوضوح ويقصد هنا تأمين الوضوح في الخيارات والقرارات والمتطلبات التي يجب أن ينفذها المستخدم، فعلى سبيل المثال عندما تتواجد في صفحة التسجيل حقول إدخال عدة ويتطلب كل حقل نوعية إدخال مختلفة، يجب أن يكون واضحًا ومفهومًا للمستخدم ما يجب عليه إدخاله ضمن هذه الحقول وما هي الأخطاء التي ارتكبها أثناء عملية الإدخال حتى يتداركها ويصححها بطريقة سلسلة ومفهومة وواضحة. الصورة بواسطة Antonin Kus من موقع dribbble المساحة البيضاء حافظ على المساحات البيضاء قدر الإمكان وأكثر منها دون تردد، لأنها أثبتت فعاليتها في اجتذاب المستخدمين فهي تسبب الشعور بالراحة والرقي والأناقة وبها تتحقق مبادئ التناسق والبساطة بسهولة، لذلك تجنب استخدام المربعات والمستطيلات والخطوط التي تفصل بين العناصر قدر الإمكان واسمح للمساحات البيضاء بالسيطرة على مساحة التصميم العامة. مصدر الصورة أدوات تصميم واجهة المستخدم تقدم بعض هذه الأدوات والبرامج إمكانات متكاملة في تصميم الواجهات وبعضها يسمح بمشاركتها مباشرة مع باقي أعضاء الفريق لمناقشتها وتحديثها مباشرة، بينما البعض الآخر تقليدي للغاية حيث يجب أن تصمم الواجهات يدويًا من البداية ومن ثم إرسال النماذج إلى باقي أعضاء الفريق، وفي أحيان كثيرة يحتاج المصمم إلى استخدام أكثر من برنامج وتطبيق ومنصة لإتمام المهمة على أكمل وجه. أدوبي فوتوشوب أشهر برنامج للتصميم ومعالجة الصور وأكثرها شيوعًا، يمكن استخدامه لتصميم واجهات مواقع الويب أو حتى التطبيقات حيث يحتوي على أدوات الشرائح الخاصة بتقسيم وتقطيع التصميم إلى شرائح بحسب العناصر المرسومة، ومن ثم تصدّر هذه الشرائح إلى ملفات صور مستقلة لكل عنصر بتنسيق PNG لضمان خاصية الشفافية في حال تواجدها ضمن الشريحة المصدّرة، ليتمكن المطور من استخدام هذه العناصر معًا وتركيبها لإنشاء الواجهة أو التطبيق. ويمكن استخدامه لمعالجة الصور المستخدمة في التصميم أو لإنشاء عناصر أخرى كالأزرار أو الخلفيات أو أشكال القوائم وغيرها. أدوبي إليستريتور بسبب تخصصه في إنشاء الرسومات الشعاعية، فإنه البرنامج الأقوى والأنسب لإنشاء عناصر مميزة شعاعية متجاوبة التصميم لكل أجزاء وأنواع التصاميم مثل القوائم والأزرار والنماذج والرسوميات والأيقونات وغيرها. كما يمكن استخدامه لإنشاء تصاميم النماذج الأولية للمشاريع بتقنية الإطار الشبكي (Wireframe)، حيث تساعد أدواته القوية على إنشاء هذه التصاميم بسهولة وسرعة. Sketch سكتش برنامج مميز ومتخصص في إنشاء وتصميم الواجهات عالية الدقة بكل أنواعها ويعد من أقوى البرامج في هذا المجال، حيث يتضمن قوالب جاهزة للمساعدة في إنشاء هذه التصاميم، كما يتضمن إعدادات مخصصة جاهزة بحسب قياسات مختلف الأجهزة لتصميم التطبيقات والويب. لعل أبرز عيوبه هو أنه برنامج مخصص للعمل على نظام واحد فقط وهو ماكنتوش العامل على حواسيب آبل بينما لا تتوفر منه نسخ تعمل على ويندوز أو لينكس. Adobe X D يوفر أدوبي إكس دي أفضل بيئة للمشاريع الرقمية ضمن مجموعة Adobe Creative Cloud لأدوات تصميم الواجهات. لا تشبه واجهة هذا البرنامج واجهات بقية برامج أدوبي مثل الفوتوشوب والإليستريتور وغيرها، إلا أنك ستعتاد العمل عليه بسرعة لسهولة استخدامه ووفرة أدواته الخاصة بهذا النوع من التصاميم. Figma تمكنك فيجما من إنشاء واجهات وتصميمها بسرعة. حيث تفخر منصة Figma بكونها أداة تصميم تعاونية حيث يمكن لعدة مستخدمين العمل في وقت واحد على المشروع نفسه وهذا فعّال للغاية عندما يكون لديك العديد من أصحاب العلاقة في المشروع ذاته يشاركون في تشكيل النتيجة مثل المصممين والمطورين والمدراء، ولذلك هي أداة مثالية عندما تعمل على مشروع واحد بالاشتراك مع مصمم ومطور وكاتب محتوى في نفس الوقت. Balsamiq بالساميق أداة مميزة وقوية إنشاء نماذج الإطار الشبكي Wireframe حيث يمكنك تطوير البنية والتخطيطات لمشاريعك بسهولة، وتعمل عناصر السحب والإفلات على تسهيل الاستخدام ويمكنك ربط الأزرار بصفحات أخرى. هذا يعني أنه يمكنك البدء بسرعة في تخطيط واجهاتك ومن ثم مشاركتها مع فريقك أو عملائك. Zeplin مع أن زيبلن أداة جيدة لإنتاج النماذج الأولية، إلا أنه يناسب إلى حد كبير مرحلة ما بعد التصميم وما قبل التطوير جنبًا إلى جنب مع النماذج الأولية. يمكّنك تسليم التصميم والنماذج الأولية للمطورين والتأكد من تنفيذ أفكارك بطريقة جيدة. وتستطيع مشاركة ملفات سكتش Sketch و فوتوشوب Photoshop وملفات X D و فيجما Figma إلى زيبلن لاستحداث بيئة للمطورين والمصممين للعمل على المشروع معًا ومن ثم تسليمه دون الحاجة إلى إنشاء الإرشادات واستعمال وسائل التواصل المختلفة. InVision إن فيجين هو أداة تساعد في إنشاء واجهات تفاعلية جميلة مع مجموعة كبيرة من الميزات حيث يمكنك إنشاء حركات وانتقالات مخصصة من عدد من الإيماءات والتفاعلات. وبفضل هذه الأداة يمكنك التوقف عن التفكير في إنشاء العديد من النماذج لأجهزة متعددة لأنه يمكن تحقيق التصميم سريع الاستجابة داخل لوح رسم واحد. خاتمة على الرغم من أنه يجب عليك دائمًا اتخاذ قرارات قائمة على رؤيتك وخبرتك وذوقك الفني، إلا أن اتباع مجموعة من القواعد والإرشادات سيوجهك في الاتجاه الصحيح ويسمح لك باكتشاف مشاكل الاستخدام الرئيسية في وقت مبكر من عملية التصميم. تنطبق هذه القواعد على معظم واجهات المستخدم، كما تكفي مجموعة الأدوات التي ذكرناها لإنشاء تصاميم متكاملة على الرغم من وجود المزيد من التطبيقات والأدوات خارج هذه القائمة إلا أن ما ذكرناه في هذا المقال أكثر من كافٍ. والأهم هو التعاون بين أعضاء الفريق واتباع خطوات العمل لإتمام عملية التصميم وتسليم المشروع إلى العميل.

عند إنشاء موقع ويب هناك العديد من العوامل التي يجب مراعاتها جيدًا، ومن بين هذه العوامل ضرورة جعل الموقع سهل الاستخدام لجميع الأشخاص، بغض النظر عن قدراتهم و إعاقاتهم، وهنا تأتي أهمية تطبيق مبادئ سهولة الوصول لموقع الويب. إذًا ما هي بالضبط سهولة الوصول لموقع الويب؟ في الواقع، سهولة الوصول لموقع الويب هي عبارة عن مجموعة من الممارسات التي تضمن توفير نفس فرص الوصول إلى المواقع للأشخاص ذوي الاحتياجات الخاصة. بمعنى آخر: يتمكن هؤلاء الأشخاص من الاستفادة من السلع والخدمات التي تقدمها تلك المواقع بنفس القدر المتاح للآخرين، لذا لا يمكن تجاهل حقيقة أن سهولة الوصول لموقع الويب تشكل جزءًا لا يتجزأ من عملية تصميم وتطوير المواقع باحترافية. سنقدم في هذه المقالة 15 من أبرز الممارسات التي تعمل على تعزيز سهولة الوصول لموقع الويب، سوف تغطي هذه الممارسات الشائعة عدة جوانب مختلفة، مثل: تصميم واجهة المستخدم السهلة، وتوفير الوصول للمحتوى الصوتي والبصري، وضمان التوافق مع متصفحات الويب المختلفة، وغيرها الكثير. لماذا يجب أن تهتم بسهولة الوصول؟ هناك العديد من الأسباب التي تجعل المطورين والمصممين وأصحاب العمل/ العملاء يولون اهتمامًا لسهولة الوصول لضمان أنها تشكل جزءًا مبكرًا ومتكاملًا من عملية تطوير الويب، ومن ضمن تلك الأسباب ما يلي: في العديد من المناطق مثل الولايات المتحدة الأمريكية والاتحاد الأوروبي والمملكة المتحدة واليابان، يُعَد عدم التمييز ضد الأشخاص بسبب إعاقتهم مطلبًا قانونيًا، ففي الولايات المتحدة مثلًا، رُفعت 2235 دعوى قضائية جديدة بموجب قانون الإعاقة في عام 2019 بالمحكمة الفيدرالية، وهو ما يعادل متوسط دعوى قضائية واحدة في الساعة. المواقع التي يمكن الوصول إليها، عادةً ما تكون مكتوبة بشيفرة برمجية مُحسنة وأكثر قوة، مما يجعلها تحظى بتصنيف جيد على محركات البحث. المواقع التي يصعب الوصول إليها تُعد ضارة للأعمال التجارية، ففي دراسة استقصائية أُجريت في المملكة المتحدة عام 2019، وُجِد أن أكثر من 4 ملايين شخص تخلى عن موقع ويب للبيع بالتجزئة بسبب العوائق التي واجهوها في الوصول إلى الموقع. إبعاد العملاء المحتملين طوعًا بسبب صعوبة الوصول يُعَد أمرًا سيئًا من الناحية التجارية. الأخطاء الأكثر شيوعا في أهم مليون صفحة رئيسية بعد دراسة العوائق الرئيسية التي تواجه مواقع التجارة الإلكترونية التي أُبلِغ عنها من قِبَل المستخدمين الذين يواجهون بعض الصعوبات، بالإضافة إلى مجموعة كبيرة من المواقع (وهي الصفحات الرئيسية لأفضل مليون موقع) التي حُلِّلَت تلقائيًا بواسطة WebAIM في أغسطس 2019، تبين أن 98٪ من تلك الصفحات المُحللة تحتوي على خطأ واحد على الأقل. ومن بين تلك الأخطاء الأكثر شيوعًا ما يلي: نص منخفض التباين (86.1٪). نص بديل مفقود للصور (67.9٪). روابط فارغة (58.9٪). تسميات إدخال النموذج مفقودة (53.2٪). لغة المستند المفقودة (30.5٪). سنتعرف فيما يلي على كيفية تجنب الأخطاء الشائعة الأخرى. كيفية تحسين سهولة الوصول إلى موقع الويب - أفضل 15 ممارسة توجد قائمة مرجعية تشمل أفضل 15 ممارسة لتحسين الوصول إلى مواقع الويب، وتهدف هذه الممارسات إلى التغلب على العقبات الرئيسية التي يواجهها الأشخاص ذوو الاحتياجات الخاصة، مع تقديم اقتراحات عملية لحل تلك المشكلات. لكن قبل كل شيء، يجب ملاحظة أن أيًا من أهم خمسة مشاكل تقنية تُعَد أخطاءً في التصميم أو في كتابة النصوص. 1. الكثير من المحتوى من المعروف أنه مع زيادة عدد الاختيارات يزداد الجهد المطلوب لجمع المعلومات لاتخاذ قرارات جيدة، إنه نفس الشيء عندما يتوافر الكثير من المحتوى، فسرعان ما يصبح ساحقًا. ولتسهيل قراءة وفهم المحتوى، يمكن اتباع الممارسات التالية في تصميم الويب: استخدام عنوان رئيسي واحد فقط <h1> على الصفحة. استخدام العناوين الفرعية بحرية لكسر "الرتابة" في النَص وتسهيل قراءة المحتوى للمستخدمين المبصرين؛ بينما يمكن لمستخدمي التقنيات المساعدة مثل قارئات الشاشة استخدام مفاتيح مختصرة للانتقال بين العناوين، أو الحصول على خريطة ذهنية للمحتوى من خلال ترتيب العناوين. الحفاظ على تسلسل العناوين عند استخدام العناوين الفرعية، يجب التأكد من أنها تتبع تسلسل صحيح. على سبيل المثال، إذا كنت تستخدم العنوان الفرعي <h3>، فتأكد من أنه مسبوق بالعنوان الفرعي <h2>. استخدام القوائم ذات التعداد النقطي التي كُتبت شيفرتها بطريقة صحيحة في HTML بهذا الشكل <ul> ،<li> لتوضيح قوائم المحتوى، فهذا يتيح لبرامج قراءة الشاشة إعلام المستخدمين بوجود "قائمة تحتوي على 10 عناصر" ويسمح لهم بالانتقال خلالها أو تخطيها بسهولة. استخدام اللغة البسيطة يسلط دليل Our tone of voice الذي أصدره بنك مونزو الضوء على أهمية استخدام اللغة الواضحة، يمكن تلخيصه فيما يلي: في عام 2010، أجرى المحامي الأمريكي شون فلامر تجربة حيث طلب من 800 قاضي محكمة أن يقفوا إلى جانب حجة قانونية تقليدية أو إلى جانب نسخة بلغة إنجليزية بسيطة. فَضَّل الحكام بالغالبية العظمى النسخة البسيطة من اللغة الإنجليزية بنسبة 66٪ مقابل 34٪، وكان هذا التفضيل ساريًا بغض النظر عن أعمارهم أو خلفياتهم. وفي ملاحظات فلامر عن النسخة البسيطة من اللغة الإنجليزية لوحِظ ما يلي: كانت النسخة البسيطة أقصر تقريبًا بصفحة واحدة، مما يوضح أنها تقلل من الجمل والكلمات غير الضرورية، وكان متوسط عدد الكلمات في الجملة يبلغ 17.8 كلمة، بينما كان المتوسط 25.2 كلمة في النسخة التقليدية. نتيجةً لذلك، إذا كنت ترغب في إرضاء القارئ، فاستخدم لغة إنجليزية بسيطة. 2. اختبار ReCAPTCHA يُعَد اختبار ReCAPTCHA الذي تقدمه شركة Google حلًا مجانيًا لحماية مواقع الويب من البريد العشوائي، وتهدف هذه الخدمة إلى أن يكون حلًا سهلًا للبشر وصعبًا على الروبوتات والبرامج الضارة الأخرى. ومع ذلك، كان هناك العديد من المستخدمين يعانون من بعض المشاكل مع إصدار ReCAPTCHA القديم. لحسن الحظ، أصبح نمط الحروف المتذبذبة لـ reCAPTCHA مهملاً الآن. أما في الوقت الحالي، يُعَد النمط الأكثر شيوعًا هو "No CAPTCHA reCAPTCHA" والمعروف أيضًا باسم مربع الاختيار "أنا لست روبوتًا"، إذ يُطلب من المستخدمين تحديد مربع يؤكد أنهم ليسوا روبوتًا، فإذا نجحوا في تجاوزه فلن تكون هناك حاجة لأي تفاعل إضافي؛ أما إذا فشلوا في تجاوزه، فسوف يُعرض لهم تحدي جديد. ومن إحدى أشكال reCAPTCHA المتاحة وقابلة للوصول، هي reCAPTCHA v3، والتي لا تتطلب أي تفاعل من المستخدم، ولكنها تتطلب جهودًا إضافية للتعامل مع الزيارات التي تفشل في الاختبار. يُعَد اختبار reCAPTCHA v3 واجهة برمجة تطبيقات مبنية بالكامل بلغة البرمجة JavaScript، إذ تُرجع نتيجةً تمكّنك من اتخاذ إجراءات في سياق موقعك، ومن بين تلك الإجراءات الممكنة: طلب عوامل مصادقة إضافية، أو إرسال إشعار للمشرف، أو تقييد أنشطة الروبوتات التي قد تنفذ عملية Scraping أو سحب للمحتوى؛ فباستخدام اختبار reCAPTCHA v3، يمكنك تعزيز مستوى الحماية وتعزيز التحقق من الهوية في موقعك دون أن تتسبب في إزعاج المستخدمين أو طلب إجراءات معقدة. 3. الافتقار للمقروئية كي تتماشى الفقرات مع بعضها البعض، يجب اتباع بعض الممارسات لجعل النص سهل القراءة. يجب ضمان تباين كافٍ بين النص والخلفية، إذ يُعَد سوء التباين واحدًا من أكبر عوائق الوصول على الويب، لذلك تتطلب توجيهات منظمة W3C نسبة تباين لا تقل عن 4.5:1، باستثناء النصوص ذات الحجم الكبير والصور التي تحتوي على نصوص ذات حجم كبير، والتي يجب أن تكون لها نسبة تباين لا تقل عن 3:1 (باستثناء الشعارات والنصوص "المحضة")، ويتوفر العديد من الأدوات التي يمكن استخدامها لقياس نسب التباين، مثل أداة قياس التباين التي طورتها Ada Rose Cannon. في حال كان المحتوى باللغة الإنجليزية، يجب عليك تجنب استخدام الأحرف الكبيرة لكتابة العناوين بالكامل، إذ هناك أدلة تشير إلى أنها أكثر صعوبةً في القراءة نظرًا لصعوبة تمييز شكل الأحرف والكلمات المشتركة عندما تكون الأحرف الكبيرة بنفس الارتفاع. بالإضافة إلى ذلك، قد يتهجى بعض قُراء الشاشة الأحرف الكبيرة كما لو كانت اختصارات، فإذا كنت بحاجة لاستخدام الأحرف الكبيرة في العناوين، يُفضل كتابتها بالأحرف الصغيرة في HTML ثم تحويلها إلى أحرف كبيرة باستخدام CSS من خلال هذه الشيفرة text-transform: uppercase. يجب محاذاة النص إلى اليمين (أو اليسار في حالة اللغات الأجنبية) وتجنب عمل Justify أو تمليس للنص، مما يجعل القراءة أكثر صعوبةً بالنسبة للأشخاص ذوي الصعوبات في القراءة، مثل عسر القراءة، لذلك يوصي دليل أسلوب الجمعية البريطانية لعسر القراءة باستخدام خطوط بدون سواريف، مثل: Arial و Comic Sans، إذ تظهر الحروف بشكل أقل كثافة. مع ذلك يمكن الاستعانة بخطوط بديلة، مثل: Verdana و Tahoma و Century Gothic و Trebuchet و Calibri و Open Sans. 4. الصور والرسومات المُشتتة يتطلب المستوى الأساسي لإرشادات الوصول إلى محتوى الويب WCAG لأي معلومات تتحرك أو تومض أو تمرر وتحتوي على ما يلي: تبدأ تلقائيًا. تستمر لأكثر من خمس ثوانٍ. تُعرض جنبًا إلى جنب مع محتوى آخر. في هذه الحالة يجب توفير آلية تتيح للمستخدم إيقافها مؤقتًا، أو إيقاف تشغيلها، أو إخفائها، ما لم يكن الحركة أو الوميض أو التمرير جزءًا من نشاط ضروري، فالتشتيت يُعد أمرًا مزعجًا، خاصةً بالنسبة للأشخاص الذين يعانون من اضطراب نقص الانتباه وفرط الحركة ADHD أو مشاكل التفكير الأخرى، ونظرًا لأن الحركة والوميض قد يسببان نوبات صرع، فحسب إرشادات الوصول إلى محتوى الويب WCAG، أن يجب ألا يومض المحتوى أكثر من ثلاث مرات خلال فترة زمنية تدوم لمدة ثانية واحدة. احترام اختيار المستخدم بشأن الرسوم المتحركة يُعَد توفر جميع أنظمة التشغيل الرئيسية خيارًا للمستخدمين للتعبير عن تفضيلهم لتقليل الحركة على الشاشة، وذلك بسبب اضطراب طيف الجهاز الدماغي البليغ الذي يمكن أن ينتج عن الحركة، ويمكن لموقع الويب الخاص بك اكتشاف ما إذا فَعَّل المستخدم هذا الاختيار باستخدام استعلام تقليل الحركة في CSS باستخدام هذه الشيفرة prefers-reduced-motion. وفي هذا السياق، نسمح فقط بتحريك الزر إذا لم يعبر المستخدم عن أي تفضيل بشأن الحركة: @media (prefers-reduced-motion: no-preference) { button { /* `vibrate` keyframes are defined elsewhere */ animation: vibrate 0.3s linear infinite both; } } وفي حال كنت تبحث عن تعديل موقع يحتوي على العديد من قواعد الرسوم المتحركة، فقد يؤدي ما يلي إلى إيقاف جميع رسوم CSS المتحركة المعلنة مسبقًا: @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } } كما يسمح لنا عنصر HTML للصورة picture element بعرض صورة ثابتة بدلًا من صورة متحركة GIF للمستخدمين الذين يعبرون عن تفضيل تقليل الحركة. <picture> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"> <img srcset="animated.gif" alt="brick wall"> </picture> أيضًا، فيما يتعلق بموضوع احترام تفضيلات نظام التشغيل للمستخدم، قد ترغب في التفكير في تصميم موقع الويب الخاص بك للوضع المظلم. 5. معلومات غير كافية حول الروابط غالبًا ما يكون أحد أسباب ضعف المعلومات المتعلقة بالروابط ناتجًا عن سوء كتابة النص، فمعظم قارئات الشاشة تسمح للمستخدم بعرض قائمة سريعة للروابط الموجودة في الصفحة، إذ يمكن استخدام اختصار لوحة المفاتيح Ins + F7 لعرض قائمة سريعة للروابط في قارئات الشاشة التجارية الشهيرة JAWS، أما في قارئ الشاشة NVDA المجاني فيمكن عرض قائمة الروابط والعناوين والعلامات بنفس اختصار لوحة المفاتيح. ومع ذلك، إذا كان كل رابط يحتوي على نص يقول "انقر هنا" أو "اقرأ المزيد"، دون وجود أي عنصر آخر يمكن تمييز الرابط به، فإن هذا لا يوفر الفائدة المطلوبة. وأحد الطرائق السهلة لحل هذه المشكلة هو ببساطة كتابة نصوص فريدة للروابط؛ وإذا لم يكن ذلك ممكنًا، فيمكن استخدام السمة aria-label الفريدة على كل رابط لتجاوز النص المرئي للتقنيات المساعدة. وإليك مثال جيد من موقع جوملا يوضح ذلك. ففي المثال السابق سوف تلاحظ أن نص الرابط المرئي ببساطة هو "اقرأ المزيد"، ولكن Joomla تستخدم السمة aria-label لجعل كل رابط فريدًا بالنسبة للتقنيات المساعدة. <a href="joomla-group-2-president-election-results.html" aria-label="Read more: Joomla Group 2 - President election results">Read more</a> <a href="forum-for-the-future-re-engage-re-ignite-stream.html" aria-label="Read more: Forum for the Future: Re-Engage &amp; Re-Ignite Stream">Read more</a> ونظرًا لأن النص الموجود في السمة aria-label سوف يُستخدم عوض نص الرابط بواسطة التقنيات المساعدة، توصي W3C ببدء النص المستخدم في السمة aria-label بالنص المستخدم داخل الرابط، حيث "سيتيح ذلك بالتواصل المتسق بين المستخدمين". <a href="results.html" title="click here to read more about the election results">Read more></a> ويرجع السبب في عدم فعل ذلك، إلى أن معظم برامج قراءة الشاشة لا تعرض محتوى السمة title لاعتياد المطورون على حشوها بكلمات رئيسية لأغراض "تحسين محركات البحث"، لذلك يعطلها بائعو برامج قراءة الشاشة افتراضيًا، كما تقدم المتصفحات محتوى السمة title على أنها "تلميحات" تكون متاحة فقط لمستخدمي الفأرة عند عمل تحويم hover عليها بالفأرة. ينبغي أن تُعرَض الروابط على هيئة روابط افتراضيًا، تُسَطَّر الروابط في المتصفحات، لذلك من الأفضل عدم تغيير هذا الوضع، لكن إذا كان هناك خلاف مع المصمم حول هذه المسألة، فيجب توفير نسبة تباين بنسبة 3:1 بين نص الرابط والنص المحيط به الذي ليس رابطًا، كما يجب أن يوفر الرابط بعض المؤشرات غير اللونية التي تشير إلى أنه رابط، مثل: تغير الشكل عند تحويم مؤشر الفأرة فوقه أو التركيز عليه. على سبيل المثال: a:hover, a:focus {text-decoration: underline;} فعندما يركز المستخدم على الرابط باستخدام وسائل أخرى غير الفأرة، مثل: لوحة المفاتيح أو القلم الضوئي أو الإدخال الصوتي، فسيُطبق نمط التركيز Focus Style لجعل الرابط يظهر بخط تحتي أو مُسَطَّر، وبوجهٍ عام ينبغي تطبيق تأثير التحويم Hover Style في أي مكان على الصفحة. كما يجب أيضًا تطبيق تأثير التركيز Focus Style. فمن خلال "التصميم غير اللوني" الذي في حالتنا هو الخط التحتي أو التسطير، نضمن أن الزوار ذوي الرؤية المحدودة أو صعوبة في التمييز بين الألوان يمكنهم ملاحظة التغيير عند التحويم أو التركيز على التص. علاوةً على ذلك، فإن قارئات الشاشة تعلن تلقائيًا عن "الرابط" قبل الوصول إلى نص الرابط. أخبر الزوار إذا كان الرابط يفتح في علامة تبويب/ صفحة جديدة يمكن أن يسبب فتح رابط في علامة تبويب أو نافذة جديدة للزائر بعض الارتباك، خاصةً إذا كان هذا النمط مقتصرًا على بعض الروابط فقط في الصفحة مثل: فتح الروابط الخارجية في علامة تبويب جديدة، وفي حالة وجود هذا النمط بموقعك الإلكتروني، يجب أن تنبه المستخدم إما من خلال نَص الرابط نفسه أو باستخدام السمة aria-label كما بالمثال التالي: <a href="عنوان الرابط" aria-label="فتح الرابط في علامة تبويب جديدة" target="_blank">النص الخاص بالرابط</a> أخبر الزوار إذا كان الرابط يؤدي إلى ملف إذا كان الرابط يؤدي إلى ملف (مثل ملف PDF أو فيديو)، فمن الضروري إبلاغ الزوار بذلك عن طريق وضع تنبيه في نَص الرابط نفسه من خلال السمة aria-label؛ فعدم إخفاء هذه المعلومة قد يكون مفيدًا أيضًا للعديد من المستخدمين القادرين على الرؤية. على سبيل المثال، بعض الهواتف المحمولة قد لا تدعم فتح ملف بصيغة "docx."، وفي حالة إذا كان الملف كبيرًا، فمن الجيد أن تفكّر في إبلاغ المستخدم بالحجم التقريبي له، فقد يُفضل بعض المستخدمين عدم تنزيل ملف فيديو ضخم عبر شبكة الجيل الثالث (3G). ولتنفيذ ذلك يمكنك استخدام السمة download، والتي تتسبب في فتح مربع حوار نظام التشغيل لتنزيل الملف في المتصفح، وبوضع كل ذلك معًا، ستبدو الشيفرة البرمجية كما يلي: <a href="big-report.pdf" download>Annual report (PDF, 240 MB)</a> 6. خطأ آخر في التصميم: إزالة حلقة التركيز لقد ذكرنا سابقًا أن سمة التركيز focus: هي مؤشر بصري لا يقدر بثمن لأولئك الذين لا يستطيعون استخدام الفأرة لأي سبب من الأسباب، مثل الذين يعانون من متلازمة تكرار إجهاد اليد (RSI) أو مرض باركنسون أو التصلب المتعدد، ومع ذلك يرى بعض الأشخاص أن استخدام الفأرة وظهور حلقة التركيز أمرًا غير جمالي ثم يوقفونه باستخدام CSS، مما يؤدي إلى عدم قدرة المستخدمين الذين يعتمدون على لوحة المفاتيح على الوصول إلى الموقع. ولحل هذه المشكلة، قُدِّمَت سمة جديدة تُسمى focus-visible: التي قَدَّم متصفح فايرفوكس الدعم الأول لها. تُضيف هذه السمة تأثير تركيز على العنصر عند الوصول إليه باستخدام لوحة المفاتيح أو جهاز تأشير غير الفأرة، بينما لا يظهر أي شيء للمستخدمين الذين يستخدمون الفأرة للتأشير. ونظرًا لاحتمالية عدم دعم المتصفح الذي تستخدمه لتلك السمة، يقترح علينا باتريك لاوكي استخدام شيفرة CSS التالية للتعامل بشكل جيد مع جميع المتصفحات: button:focus { /* some exciting button focus styles */ } button:focus:not(:focus-visible) { /* undo all the above focused button styles if the button has focus but the browser wouldn't normally show default focus styles */ } button:focus-visible { /* some even *more* exciting button focus styles */ } 7. ملء النموذج نظرًا للأهمية الحيوية للنماذج في مواقع التجارة الإلكترونية، فمن المدهش وجود عدد كبير من النماذج غير المتاحة للوصول إليها، وغالبًا ما يحدث ذلك بسبب عدم تنسيق عناصر النموذج بطريقة صحيحة في المتصفحات القديمة، لذلك شَرَعَ المطورون بإنشاء عناصر نموذج مزيفة باستخدام سمات HTML أخرى، لكن في المقابل تتيح المتصفحات الحديثة إمكانية إنشاء نماذج تحتوي على مربعات اختيار جذابة، وأزرار اختيار متعددة، ومكونات تحديد مخصصة، ومربعات تحرير وسرد، وعناصر تحكم الإكمال التلقائي التي يمكن الوصول إليها، وغيرها الكثير. الملء التلقائي هو صديقك تتيح إمكانية تعبئة النماذج تلقائيًا Autofill في المتصفحات للزوار بتنفيذ مهام أقل، مما يزيد من احتمالية استكمال النموذج وإتمام عملية التسجيل أو الشراء لمنتجك، وبهذا الصدد توجد مقالة رائعة بعنوان "Autofill on Browsers: A Deep Dive" مُقدَّمة من eBay تتحدث بأسلوب مفصل عن هذا الموضوع (ويجب التنويه عنها ليتعرف عليها الجميع). علاوةً على ذلك، تُعد التكملة التلقائية Autocomplete الطريقة الأمثل المعتمدة حاليًا لتحقيق امتثال AA لمعيار النجاح 1.3.5: تحديد غرض المدخلات. جعل حقول النماذج تبدو كحقول النماذج افتراضيًا، تظهر حقول إدخال النماذج على شكل مربعات في المتصفحات، ويمكن تنسيقها باستخدام الهوامش والحواف والجوانب، ولكن يُفضل الاحتفاظ بها كمربعات، ففي الماضي اتبع العديد من المصممين نمط تصميم Material Design السابق لشركة جوجل قبل عام 2017، وهو تصميم يستخدم خطًا واحدًا لإدخال النص من قِبَل المستخدم. ومع ذلك، اكتشفت جوجل أن الخط الموجود أسفل حقول النص القديمة ليس واضحًا بما فيه الكفاية لبعض المستخدمين، وأنه يسبب الالتباس مع عنصر التقسيم Divider، وبناءً على ذلك غَيَّرت جوجل التصميم. وفي اختبارات استخدامية مع مشاركة 600 شخص، اتضح أن الحقول المحاطة بشكل مربع أداءها أفضل من تلك التي تحتوي على خط؛ فإذا كنت تفكر في استخدام مكتبة تصميم واجهة المستخدم الكاملة لـ Material Design المقدمة من جوجل، فينصح بقراءة المقالة "Stop using Material Design text fields!" لمعرفة ما إذا كانت تلبي احتياجاتك. ضع تسمية على جميع حقول النموذج يجب وضع تسمية على جميع حقول النموذج، بما في ذلك: إدخالات النص مربعات الاختيار أزرار الاختيار أشرطة التمرير وما إلى ذلك وأفضل طريقة لفعل ذلك هي استخدام العنصر <label> بلغة HTML. وفيما يلي عرض توضيحي لحقل نموذج غير موسوم وحقل نموذج موسوم، فالحقلان يبدوان متطابقين ولكن الحقل الأول ليس لديه تسمية في حين أن الحقل الثاني يحمل تسمية. انقر الآن على تسمية النص للحقل الثاني وستلاحظ أن التركيز يتحول إلى الحقل ذي الصلة أو المرتبط به. يسهل هذا التركيز على إدخال البيانات بالنسبة لأولئك الذين يعانون من صعوبات في التحكم الحركي، ويكون مفيدًا أيضًا عندما تحاول التحقق من خانة اختيار صغيرة على شاشة صغيرة وأنت في قطار هزاز. إضافةً إلى ذلك، فإن هذا أمر بالغ الأهمية لمستخدمي قارئ الشاشة الذين يتنقلون بين حقول النموذج (افتراضيًا، فقط الروابط وحقول النموذج يمكن تركيزها باستخدام المفتاح Tab)، فعند الانتقال إلى حقل الإدخال سيعلن قارئ الشاشة محتوى التسمية المرتبطة به. والشيفرة البرمجية لتحقيق ذلك بسيطة، فقط نحتاج إلى تعيين معرف فريد لكل حقل إدخال، ثم ربط التسمية به باستخدام السمة for. <label for="colour">What's your favourite colour?</label> <input id="colour"> إخفاء التسميات قد يحدث أحيانًا أن لا ترغب في وجود تسمية مرئية، أو قد لا يرغب المصمم في ذلك وأنت لا ترغب في وجود خلاف معه حول هذه المسألة. على أي حال، إليك مثالًا عندما تبدو التسمية التي تقول "بحث" قبل الإدخال وكأنها مبالغة. ويمكننا ربط حقل الإدخال بنص "بحث" وهو محتوى زر الإرسال، وذلك باستخدام السمة :aria-labelledby. <input type="text" aria-labelledby="searchbutton"> <button id="searchbutton" type="submit">Search</button> وكان بالإمكان استخدام السمة aria-label التي تعرفنا عليها سابقًا عند الحديث عن الروابط: <input type="text" aria-label="Search"> ومع ذلك، يُفضل دائمًا استخدام النص المرئي على الصفحة عن استخدام النص المخفي، فالنَص المرئي يمكن ترجمته عبر أدوات الترجمة، بينما النص "المخفي" في سمات HTML لن يُترجم، وتلك النصيحة أشار إليها أدريان روزيلي في مقاله My Priority of Methods for Labeling a Control. 8. توفير بدائل نصية لجميع الصور والفيديوهات والصوتيات يجب توفير بدائل نصية لجميع الصور والفيديوهات والصوتيات على مواقع الويب، ويتضمن ذلك إضافة "نص بديل" في عناصر الصورة <img> يمكن أن يكون مفهومًا للأشخاص ذوي المشاكل البصرية أو لأولئك الذين يواجهون صعوبات في عرض الصور أو لديهم قيود في استهلاك البيانات، ما جعلهم يوقفون تحميل الصور في المتصفحات الخاصة بهم؛ كما يجب أن يشمل ذلك الصور التي تحتوي على نص. وإليك بعض القواعد الأساسية: إذا كانت الصورة الغرض منها مجرد الزخرفة، يجب أن يكون النص البديل فارغًا:""=alt (ولكن من الأفضل أن تستخدم الصور الزخرفية في CSS بدلًا من ذلك). إذا وُصِفَت الصورة في نَص الصفحة، فيجب أن يكون النص البديل فارغًا (""=alt) لتجنب التكرار، ولكن توخ الحذر إذا كانت الصورة <img> داخل <figure>، وهنا يرجى الاطلاع على المقالة ?How do you figure لمزيد من التفاصيل. إذا كانت الصورة تمثل الرابط بذاته (مثال: شعار المؤسسة الذي يمكن النقر عليه للعودة إلى الصفحة الرئيسية)، فيجب أن يوضح النص البديل وجهة الرابط، مثال: "alt="home page". لا تستخدم خطوط الرموز الأيقونية فقد تكون صعبةً جدًا للأشخاص ذوي صعوبات في القراءة، فإذا ما قررت استخدامها، يُفضل تحويلها إلى تنسيق SVG. نص بديل للفيديو والصوت يجب أن لا ننس أهمية توفير نصوص بديلة للمحتوى الصوتي حتى يتمكن الأشخاص ذوو المشاكل السمعية من الاستفادة منه، وهذا يشمل توفير نصوص للبودكاست وترجمة الشرائط النصية للفيديوهات، وإذا كان الأمر مناسبًا للوسائط الخاصة بك، فيجب توفير الوصف الصوتي لها، وهو عبارة عن رواية توفر المعلومات المحيطة بالعناصر البصرية الرئيسية في الوسائط. ومرةً أخرى، يجب تجنب تشغيل الوسائط تلقائيًا، حيث يتعذر على الأشخاص ذوي الاحتياجات الخاصة بالاستفادة منها بشكل كافٍ. 9. أضف لغة الصفحة الصحيحة تُعاني حوالي 30% من صفحات البداية من عدم إعلان اللغة التي استُخدمت في كتابة المحتوى الخاص بها، مما يمكن أن يسبب الارتباك لمستخدمي قارئ الشاشة، ويُعد هذا أمرًا هامًا، فكلمة "six" مثلًا تُنطق بشكل مختلف بناءً على اللغة المستخدمة. لكن من السهل حل هذه المشكلة عن طريق إضافة السمة lang إلى عنصر HTML الخاص بك كما يلي: <html lang="en"> القيمة "ar" تُخبر قارئ الشاشة أو برنامج الترجمة أن هذه الصفحة باللغة العربية، بينما "en" تعني الإنجليزية و"es" تعني الإسبانية، وهكذا. وبالنسبة لمعظم اللغات، يُعَد تحديد اللغة سهل التنفيذ، ويتوفر لدى W3C دليل لاختيار علامة اللغة المناسبة. وفي حال كانت الصفحة تحتوي على محتوى بلغة أخرى غير اللغة الرئيسية المُعلنة، يمكنك إضافة سمة اللغة إلى العنصر الذي يحتوي على ذلك المحتوى، فعلى سبيل المثال: في صفحة وُسِمَت بأن تكون باللغة الإنجليزية: If you'd like to chat a <span lang="es">matador</span>, in some cool <span lang="es">cabana</span> And meet <span lang="es">senoritas</span> by the score, <span lang="es">Espana por favor</span> 10. ساعد الزائر على التنقل في محتواك عندما يأتي الزائر المبصر إلى صفحتك يمكنه مسحها بصريًا بسهولة لفهم أين توجد أماكن التنقل وأين يبدأ المحتوى الرئيسي، لكن لا يمكن للمستخدمين الذين يعتمدون على قارئ الشاشة أن يفعلوا ذلك. مع ذلك، لحسن الحظ تتيح لنا تقنيات HTML5 بعض العلامات الجديدة التي تساعدنا على تمييز هذه المناطق، بالإضافة إلى توفير اختصارات للانتقال إليها أو تجاوزها، ولتنفيذ ذلك يُنصح باتباع الإرشادات التالية: غَلِّف المحتوى الرئيسي، أي المحتوى الذي ليس رأس الصفحة أو التنقل الأساسي أو التذييل في العنصر <main>، ففي معظم الحالات يجب أن يكون هناك عنصر <main> واحد فقط في كل صفحة، وتسمح لك جميع المتصفحات (+IE9) بتنسيقه؛ كما تعرف التقنيات المساعدة كيفية التعامل معه. غَلِّف الرأس، ضع شعار العلامة التجارية، وشريط العناوين، وعنوان الصفحة داخل العنصر <header>. غَلِّف الذيل، ضع المعلومات القانونية، وبيانات الاتصال، وإشعار حقوق التأليف والنشر، وما إلى ذلك داخل العنصر <footer>. مَيِّز الملاحة الأساسية باستخدام العنصر <ul> مغلفًا داخل العنصر <nav>، ويمكنك تضمين هذا العنصر داخل العنصر <header> إذا كان ذلك مناسبًا لتصميم صفحتك. غَلِّف الإعلانات والمحتوى غير الأساسي داخل العنصر <aside>. إذا كانت لديك عدة منتجات أو فيديوهات أو أخبار أو مقالات في الصفحة، فغَلِّف كل واحدة منها داخل العنصر <article>. في استطلاع لمستخدمي قارئ الشاشة أجْرَته WebAIM، وُجد أن 26% منهم يستخدمون هذه المناطق باستمرار أثناء تصفح الصفحة. وبالإضافة إلى ذلك، يساعد تغليف الأجزاء المميزة من المحتوى داخل العنصر <article> على عرض المحتوى بطريقة مثالية على نظام التشغيل WatchOS الخاص بشركة Apple. 11. استخدام HTML بطريقة صحيحة هناك نهج اتبعناه في هذه المقالة وهو استخدام عناصر HTML الصحيحة، فعلى سبيل المثال: يحتوي العنصر label على سلوك متصفح مضمن يركز على حقل الإدخال المرتبط به، كما يُفضل استخدام العنصر <main> على العنصر <div class =" main"> لأنه يسمح لمستخدمي قارئ الشاشة بالانتقال مباشرة إلى المحتوى المهم، مع كونه غير مزعج تمامًا لأولئك الذين لا يستخدمون قارئ الشاشة. وإليك مثال آخر عن استخدام العنصر <button> للأزرار؛ فبدلًا من التحايل لإنشاء زر غير حقيقي باستخدام العنصر <div>، وكتابة الكثير من أسطر الشيفرة البرمجية المتداخلة لجلب سلوكيات الزر لهذا العنصر، والتي تجعل شيفرتك البرمجية أكثر هشاشة وأقل قابلية للصيانة، يمكنك عوض ذلك خلال العنصر <button> تصميم زر حقيقي مضمن به سلوكيات الزر افتراضيًا والتحكم في حجمه ليبدو أكبر أو أصغر كما تريد، كما يتميز هذا العنصر في أنه افتراضيًا يسمح بالتركيز على الزر الحقيقي باستخدام لوحة المفاتيح، بالتالي يمكن تنشيطه باستخدام مفتاح شريط المسافة أو مفتاح Enter. 12. التفاعلات المعقدة في بعض الأحيان قد يُطلب منك تطوير واجهات مستخدم معقدة تفتقر إلى العناصر الأساسية الموجودة في HTML. أولاً وقبل كل شيء، ينبغي أن تبحث عن طرائق لتبسيط هذه الواجهات لتجعلها تتماشى مع العناصر الأساسية في HTML، وفي حال كان ذلك غير ممكن فسيلزمك الدخول إلى العالم الغامض لـ JavaScript و ARIA. ومن حُسن حظنا أن دليل ممارسات WAI-ARIA يوفر العديد من الأمثلة المفيدة لتصميم واجهات يمكن الوصول إليها، مثل: العرض الشجري وشرائط التمرير المتعددة الاتجاهات وغيرها. بطبيعة الحال، أنت لست بحاجة لإعادة اختراع العجلة من جديد، إذ يمكنك الاستفادة من تلك الأمثلة المتاحة؛ مع ذلك يجب عليك الانتباه إلى أن ليست جميع تلك الأمثلة جيدة للاستخدام، فعلى الرغم مما تَنُص عليه الإرشادات، من الجيد تجنب استخدام قوائم ARIA للتنقل داخل الموقع، كما لا ينبغي عليك استخدام الخطيط الشبكي لـ ARIA إلا إذا كنت تهدف إلى إعادة إنشاء جدول بيانات Excel. 13. أُطُر العمل Frameworks في الوقت الحالي, تُستخدم أُطُر العمل مثل React و Vue بازدياد في إنشاء صفحات الويب. ورغم أن أُطُر العمل هذه لا تمنع الوصول إليها، إلا أنه في كثير من الأحيان تُختار مكونات لم تُكتب باستخدام علامات HTML الصحيحة، كما أنها لم تُختبر باستخدام التقنيات المساعدة. لكن لا يجب أن يكون الأمر على هذا النحو، إذ يقول ماركوس هيرمان: "لدي انطباع بأن المزيد والمزيد من أنظمة مكونات React المصممة مع وضع سهولة الوصول في الاعتبار آخذة في الظهور". أما فيما يتعلق بإطار العمل React، فهناك خيارات واعدة: تُعد مكتبة Reakit خيارًا يتبع بدقة معايير WAI-ARIA 1.1، فجميع المكونات تأتي مع السمات الصحيحة والتفاعلات التي يمكن التحكم بها عبر لوحة المفاتيح. اختُبرت مكتبة Reach UI باستخدام Safari و VoiceOver و Firefox و NVDA و Edge و JAWS، وعندما ينضج هذا المشروع سوف تُجرى له عملية تدقيق بواسطة WebAIM للتأكد من قابليته للوصول، لذا إذا اخترت استخدام مكتبة Reach UI، فإن تطبيقك سيكون له أساس قوي وقابل للوصول. وفيما يتعلق بإطار العمل Vue: تتبع مكتبة Vuetensils ممارسات WAI-ARIA لإتاحة سهولة الوصول، بما في ذلك الدلالات النصية وسمات ARIA والأدوار وغيرها. تُعد مكتبة Tournant UI ومكتبة Vue a11y مشروعين صغيرين، ولكنهما ينموان. وبالإضافة إلى ما سبق، فقد نشر بنك ING مكتبته الداخلية للمكونات كمشروع يُسمى Lion، والتي يمكن استخدامها مع أي إطار عمل (أو بدونه)، فهي مكتبة مكونات مفتوحة المصدر وغير مرتبطة بأي إطار عمل، ويمكن أن تكون الأساس لنظام التصميم الداخلي الخاص بك، بُنيت هذه المكتبة من الصفر لتمكين الوصول والقدرة على التوسعة، حيث تُعد تلك الأمور صعبة التغيير أو التحقق منها في وقت لاحق خلال عملية التطوير. لكن على الرغم مع ذلك، يجب عليك دائمًا إجراء مراجعة خاصة بالبرمجيات المقدمة من أطراف ثالثة. فعلى الرغم من أن مكتبة أو أداة معينة قد تكون شائعة الاستخدام، إلا أن ذلك لا يعني بالضرورة أنها تدعم قابلية للوصول. ولمساعدتك في هذا الصدد، كتب Adrian Roselli وثيقةً هامةً تحتوي على متطلبات أساسية للتحكم المخصص يمكنك استعمالها لتقييم أي مكتبة مكونات تفكر في استخدامها. 14. أنظمة إدارة المحتوى ومُنشئي المواقع تمتلك أنظمة إدارة المحتوى مفتوحة المصدر الرئيسية، مثل: ووردبريس و جوملا و دروبال، القدرة على إنتاج مواقع قابلة للوصول، على الرغم من أن الجودة تعتمد بشكل كبير على اختيار منشئ الموقع لقوالب وملحقات قابلة للوصول؛ أما بالنسبة لمُنشئي المواقع المستضافة، فيُنصح بتجنب خدمة Weebly لوجود بعض القيود لديهم على سهولة الوصول. أما بالنسبة لخدمة Squarespace وخدمة Wix، فهما قادران على إنشاء مواقع قابلة للوصول، ومع ذلك يجب عليك أن تتطلع إلى تحقيق هذا الأمر لأنه لن يحدث من تلقاء نفسه. 15. مستندات PDF على الرغم من أن مستندات PDF ليست قائمةً على تقنية الويب، إلا أنها تُستخدم في العديد من الأحيان لعرض تلك المستندات عبر صفحات الويب. فوفقًا لشركة Adobe، فإن العديد من الميزات الموجودة في تنسيقات HTML، مثل: النص البديل للصور، والتسميات لعناصر التحكم في النموذج، والعناوين الخاصة بالبيانات المجدولة، وتسلسل المحتوى ذي المعنى والمنطقي؛ كلها مدعومة بالكامل من خلال مواصفات PDF، وبفضل ذلك يستطيع مستخدمو التقنيات المساعدة الشائعة الاستفادة من أدواتهم المفضلة والوصول إلى المعلومات الموجودة في مستندات PDF. يمكنك إنشاء مستندات PDF يمكن الوصول إليها من خلال علامات أو وسوم HTML و CSS، وذلك باستخدام مكتبة تدعى Prince، والتي يمكن الاستفادة بها مجانًا للاستخدام غير التجاري. استمر في اختبار سهولة الوصول إلى موقع الويب تُعَد عملية اختبار سهولة الوصول لموقع الويب جزءًا أساسيًا من عملية التطوير، لذلك ينبغي عليك تنفيذها باستمرار قبل نشر الموقع على الويب، ويمكنك إعداد خطة اختبار بسيطة لضمان توافر المحتوى لجميع الأفراد، وتلك الخطة البسيطة يمكن أن تشمل النقاط التالية: التحقق من صحة تنسيق HTML الخاص بك. اختبار تباين الألوان. هل يمكنك التنقل في أرجاء الصفحة باستخدام لوحة المفاتيح فقط ومعرفة مكان التركيز في الصفحة؟ هل يمكنك ملء النماذج وإرسالها باستخدام لوحة المفاتيح فقط؟ اربط صفحات موقعك مع ملف revenge.css الخاص بـ Heydon Pickering الذي يعرض مربعات أخطاء باللون الوردي (مع رسائل بخط Comic Sans) في كل مكان تكتب فيه HTML غير صحيح، (لا تقلق، لن تنسى إزالته قبل نشر الصفحة على الويب). يمكنك أيضًا الاستفادة من مدقق معايير الوصول الخاص بها، كما يمكنك استخدام أدوات مثل: أداة Google Lighthouse وهي متوفرة أيضًا كامتداد لمتصفح فايرفوكس، وأداة Tenon.io التي يمكن أن تساعدك في هذه العملية. ومع ذلك، ينبغي مراعاة أن أدوات التحقق الآلي ليست موثوقة كليًا، إذ أنها لا تتمكن من كشف جميع العوامل المؤثرة في سهولة الوصول، وذلك استنادًا إلى المقالة بناء أكثر المواقع التي يتعذر الوصول إليها مع تقييم Lighthouse مثالي التي توضح أن أي أداة آلية لا يمكن الاعتماد عليها كليًا. بالتالي، فإن أفضل طريقة لاختبار سهولة الوصول لموقعك هي اختباره بمساعدة أشخاص حقيقيين من ذوي الاحتياجات الخاصة المختلفة، وقد قدم بيتر فان غريكن قائمة مفيدة للنظر فيها أثناء إجراء اختبارات الاستخدام مع هؤلاء الأشخاص، سوف تساعدك في تحسين سهولة الوصول لموقعك وتلبية احتياجات جميع المستخدمين. خاتمة في ختام هذه المقالة، تبين لنا أهمية سهولة الوصول إلى مواقع الويب وتصميمها بما يلبي احتياجات الأشخاص ذوي الاحتياجات الخاصة، فمن خلال اعتماد مجموعة من أفضل الممارسات، يمكننا تحسين تجربة المستخدم لجميع الأفراد وتوفير فرص متساوية للوصول إلى المعلومات والموارد عبر الإنترنت. ونظرًا لتنوع احتياجات المستخدمين ذوي الاحتياجات الخاصة، فإنه من الضروري أن نستخدم أدوات اختبار الوصول ونتعاون مع الأشخاص ذوي الاحتياجات الخاصة في عمليات الاختبار والتقييم، ويجب أن نتعلم من تجاربهم ونأخذ بالحسبان احتياجاتهم الفردية وتوجهاتهم لتصميم واجهات مستخدم يمكن الوصول إليها. وبتطبيقك لأفضل الممارسات لسهولة الوصول ليس مجرد احتياج أخلاقي، بل يعود بالفائدة على الموقع نفسه وأصحابه، فمن خلال جعل المواقع متاحة لجميع الأشخاص، نزيد من فرص الوصول إلى المحتوى والمنتجات، وبالتالي نوسع قاعدة المستخدمين ونعزز سمعة الموقع والعلامة التجارية. إذاً، لندمج سهولة الوصول في عملية تطوير وتصميم مواقع الويب، ولنلتزم بتطبيق أفضل الممارسات المذكورة في هذه المقالة، فهي خطوة مهمة نحو تحقيق شمولية الويب وتوفير فرص متساوية للجميع في الوصول إلى العالم الرقمي. ترجمة -بتصرف- للمقال Website Accessibility (15 Best Practices). اقرأ أيضًا إمكانية الوصول لإتاحة سهولة الاستخدام للجميع الفرق بين إمكانية الوصول والشمولية في تصميم تجربة المستخدم الاحتياجات الاجتماعية لإمكانية الوصول في تصميم تجربة المستخدم كيفية إنشاء مواقع تراعي إمكانية الوصول باستخدام مبادئ التصميم الشامل

تصميم المواقع الإلكترونية وتطوير المواقع الإلكترونية ما هي إلا مصطلحات تُستخدم على نحو متكرر عند الحديث عن إنشاء المواقع الإلكترونية، وكذلك مصطلحي واجهة المستخدم 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. اقرأ أيضًا مقدمة إلى العناصر الستَّة للتصميم عملية التصميم ذات الخطوات السبعة مبادئ تصميم الرسوميات

موضوع هذا المقال معني بإدراك العين للتصميمات، فعندما نتعلم كيفية إدراك العين البشرية ستتحسن قدرتنا على ترتيب عناصر التصميم بفاعلية أكبر. يخضع محتوى تنسيق أي صفحة رقمية لتسلسل محدد، إذ توجد الترويسات Headers أعلى النص الأساسي، بينما توجد القوائم على الشاشة في الأعلى أو الأسفل أو اليمين أو اليسار عادةً. يحاول المصممون تنظيم المحتوى بحيث تكون الأولوية لظهور الجزء الأهم من أي صفحة أولًا، ثم يُدرجون باقي المحتوى مرتبًا من الأكثر إلى الأقل أهمية. يُقصد بالتسلسل Hierarchy ترتيب المحتوى وفق الأهمية. ويُستخدم أيضًا لإبراز العلاقة بين أجزاء المحتوى عند وجودها. يحدد المستخدمون التسلسل المرئي Visual Hierarchy للتطبيق أو الموقع الإلكتروني، إذ تُعطى الأولوية للعنصر الذي يجذب العين أولًا، ثم يأتي كل عنصر يجذب الانتباه بشكل ثانوي للعنصر السابق له. مبادئ التسلسل تتلقى الحواسيب المعلومات على شكل بيانات، بينما تتلقاها العين البشرية مرئيًا، وبالتالي نخضع للميول الفطرية لأعيننا البشرية. قد تتذكر المواد التي كنا نقرأها في الطفولة وما تحويه من صور كثيرة وكتابة بخطوط كبيرة. كنا نفهمها سواء كانت قصصًا مصورة أو دفاتر تلوين أو قصصًا قصيرة، وذلك لفهمنا الرسوم التوضيحية وتتبعنا تسلسل الأحداث مع الاستعانة بالنصوص البسيطة سهلة القراءة. يتأثر إدراكنا للمعلومات بعدة عوامل تسهم في كيفية ترتيب تسلسل المحتوى ضمن التنسيق Layout. لخص جونز Jones عام 2011 العوامل المؤثرة على التسلسل بالتالي: الحجم يزداد جذب العنصر للانتباه بزيادة حجمه بالنسبة للعناصر الأصغر. تذكر عناوين الصحف، تكتب الصحف العنوان بخط كبير للإشارة إلى محتوى باقي النص المكتوب بخط أصغر، إذا كان النص لخبر عاجل مثلًا ستتجه عينك إلى العنوان مباشرةً، لاحظ كيف يبرز العنوان ويدفعك لمعرفة المزيد حوله. اللون تجذب الألوان الزاهية الانتباه أكثر من الألوان الباهتة غالبًا. نستخدم جمعيًا أقلام التمييز لتحديد بعض الأفكار أثناء الدراسة من مفكرة مطبوعة بالأبيض والأسود. يبرز اللون الأصفر أكثر من الأبيض لأنه أكثر إشراقًا وإشباعًا، ثم تجذب الألوان الأغمق انتباه العين بعد الألوان الزاهية، ثم الدرجات الأفتح، لأنها تبدو بعيدة وباهتة. أما الألوان الأقل جذبًا للانتباه فهي الدرجات الرمادية والباهتة من الألوان. تخيّل مثلًا أنك تمشي في يوم ضبابي وتحاول العثور على أصدقائك، يرتدي أحدهم سترة واقية واضحة، ستلاحظه أولًا، ثم ستجد صديقك الذي يرتدي معطفًا مطريًا خمريًا تاليًا. وسيصعب إيجاد صاحبة المعطف الطويل الفاتح. وقد لا تلاحظ وجود صديقكم الرابع بينما هو يقف بجانبكم لأنه لسوء الحظ يرتدي سترة رمادية اللون مع بنطال رياضي باللون ذاته. التباين تجذب الألوان المتباينة جيّدًا الانتباه أكثر من الألوان قليلة التباين. يساعدك التباين على إبراز العناصر الأهم في تصميمك. كل شيء نسبي، تخيل أنك تريد إنشاء تصميم مبني على خطة مهندس معماري للمجمعات السكنية العالية، إذ ترغب بعرض المباني المضاءة وجيدة التهوية وصديقة البيئة فوق سطح الأرض، ولكنك ترغب أيضًا بعرض الأساسات العميقة المتينة وموقف السيارات الموجود تحت الأرض. عند تقسيم تصميمك بهذا الأسلوب ستلفت الأنظار إلى ميزات المعيشة المبهجة للشقق الموجودة بجانب الغابة. هكذا يكون تصميم الجزء السفلي (التذييل Footer) حيث تظهر فائدة البنية وأمانها ويحفز التسلسل تفاعل المستخدم. المحاذاة تنظم المُحاذاة عناصر التصميم. يحدد وضع المحتوى أولًا ثم عمود الشريط الجانبي الأولوية للقارئ. نتوقع أن نجد المعلومات المهمة مثل أزرار تسجيل الدخول في الزاوية العلوية اليُسرى من الصفحة، وينطبق الكلام السابق على المجلات أيضًا. عندما نبحث عن جملة مقتبسة من مقابلة مثلًا، إذ يريد الكاتب تسليط الضوء على كلام المُتحدث، يكون للاقتباس تسلسل مرئي يجذب انتباهنا أولًا لأنه مكتوب بخط أكبر وخارج عن محاذاة باقي النص. التكرار تمنح أساليب التكرار المشاهد إحساسًا بارتباط أجزاء المحتوى. عند تغيير الأسلوب الرتيب لنص مكتوب إلى نص باللون الأحمر سيصرف النص المميز الانتباه إليه عن المحيط المألوف. تعد الارتباطات التشعبية Hyperlinks مثالًا آخر؛ عندما تزور صفحة تحوي الكثير من الكلمات المكتوبة باللون الأزرق وتحتها خط، تعلم مباشرةً أنها مُتجاوبة ويمكنك النقر عليها للانتقال إلى صفحات أخرى. التقارب يدل قرب عناصر التصميم من بعضها على ارتباطها. يمكننا فصل عناصر القائمة بمسافة فارغة، ويمكن تقريب العناوين من أول فقرة من المعلومات، يوضح هذا التقارب أن عناصر القائمة منفصلة رغم ارتباطها نسبيًا وأن العناوين مرتبطة بالمحتوى التالي لها. المساحة البيضاء يمكنك استغلال المساحات حول المحتوى لجذب الانتباه إلى أجزاء محددة منه، لا يُشترط أن تكون المساحة البيضاء بيضاء وقد تأخذ أي لون. تخيل الجهد الذي يمكن أن توفّره عليك. لهذه المسافات وظيفتان فهي تسهّل على العين استقبال المعلومات، وتترك لها مجالًا للتركيز على كل جزء من المعلومات مثلًا على كل فقرة. البنية والأسلوب يساعد استخدام البُنى والأساليب في ترتيب أهمية المحتوى أيضًا. فهي تعطي مظهرًا عامًا للتصميم تمامًا كالخطوط. تخيل العمل على مشروعين حيث يريد وكيلا سفر صفحتي هبوط لنشر عروض منتجعاتهما. يملك أحد المُنتجعين طابع الشاطئ وللآخر طابع البُحيرة. نعرض في منتجع الشاطئ خلفية لصورة مقربة للماء الصافي أعلى الرمال البيضاء الجميلة، كانت النتيجة مُرضية، إلا أننا حين حاولنا تكرار الأسلوب السابق مع مُنتجع البُحيرة ظهرت كثير من الحصى والحجارة الكبيرة الداكنة من خلال المياه الزجاجية الصافية وكانت هذه الُبنية مُشتتة لاحتوائها على تفاصيل أكثر من بنية الرمال الناعمة. تؤكد تقارير كوبنهاجن تزايد المصممين ولا سيما مصممي المواقع المدركين لأهمية إشراك المستخدمين مباشرة. يؤدي الاطلاع البسيط على علم النفس الغرض. أنماط التسلسل المرئي توجد أنماط شائعة للتسلسل المرئي سواء في الصفحات المطبوعة أو الرقمية. تستند هذه الأنماط إلى حركات العين الفطرية عند النظر إلى صفحة جديدة. تُقرأ اللغة الإنجليزية مثلًا من اليسار إلى اليمين، وبالتالي لقرّائها نمط معين لمسح صفحة تحوي نصًا، بينما لقرّاء اللغة العربية نمط مختلف لأن اللغة العربية تُقرأ من اليمين إلى اليسار. من المهم فهم معالجة المستخدمين للمعلومات قبل اعتماد نمط التسلسل المرئي. سنطرح تاليًا أسلوبين شائعين للقراءة باللغة الإنجليزية من اليسار إلى اليمين. النمط Z يُستخدم النمط Z للمسح البصري بكثرة في مواقع الإنترنت التي تحوي نصوصًا قليلة مثل مواقع الإعلانات المصغرة للخدمات أو المنتجات دون إدراج معلومات كثيرة. يرى المستخدم أن نصوص الصفحة قليلة وتبدأ عينه بمسحها من أعلى اليسار أفقيًا حتى أعلى اليمين ثم تُلقي نظرة سريعة على المحتوى بشكل مائل إلى أسفل اليسار قبل الانتقال أفقيًا إلى أسفل اليمين. يمكنك الاستفادة من هذا النمط عندما تضع المعلومات الأهم على امتداد الخط Z الذي تتبعه العين أثناء مشاهدة الصفحة، أي لديك أربع نقاط مرتبطة بثلاثة خطوط تشكل حرف Z. النمط F يستخدم المصممون النمط F عادة في المواقع التي تحوي نصوص كثيرة أو مقاطع فيديو. يمسح المستخدمون المحتوى وفقًا للنمط F من اليسار إلى اليمين على طول الجزء العلوي، ثم يعودون لمسح الجانب الأيسر من أعلى الصفحة إلى الأسفل بحثًا عن عناصر مرئية للمعلومات المطلوبة ثم يُكملون المسح من اليسار إلى اليمين بعد أن يجدوا العنصر الذي يبحثون عنه، ويكررون العملية السابقة حتى يصلوا إلى نهاية الصفحة. وطبعًا نقلب حرف F أفقيًا ونتابع من اليمين إلى اليسار في حالة المواقع العربية. ينتج عن المسح وفق هذا النمط مخطط يشبه الحرف F، كالموضح في الصورة الموجودة في بداية المقال. يمكن استخدام النمطين Z وF في صفحات موقع إلكتروني واحد. قد تصمم صفحة رئيسية واضحة موافقة للنمط Z، ثم يمكنك عرض المزيد من البيانات وفق النمط F عندما يتعمق المستخدم ضمن الموقع. الخلاصة يمنحنا التسلسل المرئي ترتيبًا لتسهيل فهم التصميم. نريد ترتيب الترويسات والقوائم وفقًا لأهميتها حيث نحدد ما يريده المستخدمون وإلى ماذا نريد توجيههم. يعالج المستخدمون المعلومات بصريًا، ويدركون العناصر وفق ترتيب المصمم لأولويتها باستخدامه: الحجم: تجذب العناصر الأكبر الانتباه أولًا. اللون: تجذب الألوان الزاهية الانتباه قبل الألوان الباهتة. التباين: تجذب الاختلافات الواضحة بين العناصر الانتباه إلى العنصر الأكثر إشراقًا. المحاذاة: يتوقع المستخدمون إيجاد عناصر معينة في أماكنها المُعتادة. التكرار: تجذب العناصر المُكررة انتباه المستخدم مثل الأجزاء الملونة من النص. التقارب: يشير تقريب العناصر المرتبطة من بعضها إلى وجود علاقة بينها، مثل وضع العنوان بجانب النص المرتبط به. المساحة البيضاء: إن إضافة مسافات فارغة حول العناصر يميزها إلى مجموعات منفصلة من المعلومات. البنية والأسلوب: يجذب استخدام البنى Textures والأساليب Styles الأنظار كما يضيف طابعًا على التصميم. تُقرأ التصاميم في العالم الغربي وفق نمطين للتسلسل المرئي: النمط Z: يميل المستخدمون لمسح التصاميم التي لا تحوي الكثير من التفاصيل من أعلى اليسار إلى أعلى اليمين، ثم ينتقلون وفق خط مائل إلى أسفل اليسار ثم أفقيًا إلى أسفل اليمين. النمط F: نمسح التصاميم الحاوية على نصوص كثيرة بدءًا بالأعلى من اليسار إلى اليمين، ثم من اليسار إلى الأسفل بحثًا عن المعلومات التي نرغب بمعرفتها. ثم عند مصادفتها نكمل المسح من اليسار إلى اليمين. يمكنك الاعتماد على عين المستخدم واستخدام هذه الأنماط لزيادة تأثير تصميماتك. خذ كل العوامل السابقة بالحسبان أثناء التخطيط لتصميمك. قد تقرر استخدام عدة أنماط معًا، بما في ذلك دمج النمطين Z وF. تذكر أنك توجه تصميمك للمستخدمين، وفقًا لجهازهم المستخدم والتصميم الذي قد يرغبون برؤيته على الإنترنت. ترجمة -وبتصرّف- للمقال Visual Hierarchy: Organizing content to follow natural eye movement patterns لصاحبه Mads Soegaard. اقرأ أيضًا تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساسيات التصميم المرئي مبادئ التصميم المرئي في تصميم واجهة المستخدم لماذا يحتاج كل تصميم إلى ثلاثة مستويات من التسلسل في تنسيق النصوص مبادئ علم النفس التي تساعد على تحسين تصميم موقعك الإلكتروني

سنوضح كيفية إنشاء تصميمات شعارات قديمة vintage رائعة المظهر بسهولة باستخدام برنامج الفوتوشوب، وذلك من خلال الجمع بين الرسوم القديمة وبعض أنماط النصوص والتخطيطات المرئية الجذابة. هذا النوع من الأعمال الفنية شائع الاستخدام مثل رسومات القمصان، لذلك سنوضح كيفية إعداد مستندك بالحجم المناسب لتصميم القميص، كما سنطبّق بعض تأثيرات الطباعة القديمة ونستفيد من خامات Washed and Worn لجعل التصميم الرقمي يبدو وكأنه مطبوع على قميص قديم حقيقي كما يلي: إن لم تكن فنانًا موهوبًا يمكنه إنشاء الرسومات يدويًا، فستحتاج إلى بعض الموارد للاستفادة منها في تصميمك. لقد استخدمت إحدى الرسومات المتوفرة لدي بعد الحصول عليها من الإنترنت. يمكنك إنشاء تصميم قميص قديم لعلامتك التجارية من خلال فتح برنامج فوتوشوب Adobe Photoshop، ثم إنشاء مستند جديد كما في الشكل السابق. الأبعاد الشائعة للجزء الأمامي القابل للطباعة من القميص هي 12‎×14 إنشًا، لذلك أنشئ مستندًا بهذا الحجم، واضبط الدقة resolution على 300 بكسلًا لكل إنش ppi، إذ يُحتمَل أن يُطبَع عملك الفني على القميص. وبما أننا نصمم بهدف الطباعة، فيُفضَّل استخدام نمط الألوان CMYK، وعلى الرغم من أن هذا التصميم يستخدم اللونين الأبيض والأحمر فقط، فسيكون هذا التصميم مخصَّصًا للقمصان ذات الألوان الداكنة مثل اللون الأسود، لذلك يمكن تعبئة لوحة الرسم canvas باللون الأسود الافتراضي الأمامي من خلال استخدم الاختصار ALT+Backspace. لنختر الآن رسمًا قديمًا من الإنترنت ليكون أساسًا لهذا التصميم، إذ توجد الكثير من الرسومات المأخوذة من الكتب القديمة للاختيار من بينها. سنستخدم رسم الأفعى الموجود في الشكل السابق، ويفضّل الحصول على ملف فكتور جاهز بصيغة eps لسهولة العمل. بعد البحث عن نسخة EPS لهذا الرسم وفتحها، ستتمكّن من عرضها بالأبعاد المطلوبة، وسيكون هذا الرسم بحجمه القياسي افتراضيًا، ولكن يمكن تغيير حجم الملفات المتجهة vector إلى أي حجم تريده، حيث يمكنك مضاعفة حجمه بفعالية من خلال وضع ‎*2 في نهاية البُعد العرضي width. انقر نقرًا مزدوجًا على الطبقة وأضِف التأثير Color Overlay كما في الشكل السابق. سنختار الآن اللون الأحمر بالقيم 20c و100m و100y و0k، وبما أننا نستخدم نمط الألوان CMYK، فيُفضَّل ضبط قيم محددة للحبر لتتأكّد من طباعة ألوانك بالشكل المتوقع. الرسم السابق كبير بعض الشيء، ولكن يمكنك تصغيره بأمان على الرغم من تحويل إلى نقطيّ rasterized، لذلك لا يمكنك تكبيره مرةً أخرى بعد ذلك، إن لم تنشئ كائنَا ذكيًا Smart Object أولًا. اختر أداة شكل المستطيل ذي الزوايا المنحنية Rounded Rectangle Shape وغيّر نصف قطر الزاوية إلى القيمة 1000 في شريط الأدوات العلوي، وغيّر خيار القائمة إلى مسار Path، ثم ارسم شكلًا على لوحة الرسم كما في الشكل السابق. استخدم الآن أداة الكتابة Type، ثم مرّره فوق المسار إلى أن ترى رمز الكتابة عليه، ثم انقر لبدء كتابة اسم علامتك التجارية. بدّل بين لوني المقدمة والخلفية ليُكتَب النص باللون الأبيض. العلامة التجارية الخيالية التي سنستخدمها هي شركة Sleeping Serpent Supply Co، وسنستخدم الخط Trade Gothic بأنماطه المتعددة. اختر نمط الخط العريض المضغوط Heavy Compressed، ثم فعّل الخيار كل الأحرف الكبيرة All Caps من لوحة Character، وتأكّد من أن نمط الفقرة paragraph متمركز centered. يمكنك توسيط النص بالنسبة إلى الشكل من خلال استخدام أداة تحديد المسار Path Selection، ثم ستتمكّن من سحب النص. كما يمكنك أيضًا التأكد من توسيطه، وذلك من خلال سحب دليلٍ من المساطر وتركه ينجذب إلى منتصف لوحة الرسم. يؤدي استخدام الاختصار CMD+T إلى إظهار مقابض الشكل المحيط، بحيث يمكنك التأكد من محاذاة المراكز. كبّر حجم النص بحيث يغطي النصف العلوي من المستطيل المنحني الزوايا كما في الشكل السابق. قد يكون هناك عنصر نص واحد فقط في كل مسار، لذلك استخدم الاختصار CMD+J لتكرار طبقة النص هذه والمسار المرتبط بها. بعدها عدّل النص واستخدم أداة تحديد المسار لسحب النص إلى أسفل المسار. يجب أن يُقرَأ النص بالطريقة الصحيحة من خلال وضعه في الجهة الداخلية بالنسبة للمسار، ولكن هناك حيلة ذكية لنقله إلى الجهة الخارجية في لوحة Character، وذلك من خلال تغيير إزاحة الخط الأساسي Baseline Shift إلى قيمة سالبة لتحريك النص للخارج إلى أن يحاذي المسار. يمكنك بعد ذلك إجراء أي تعديلات تريدها على الخط. نستخدم هنا نمط الخط المضغوط Compressed مع ضبط التعقّب أو التباعد بين الأحرف Tracking على القيمة 50. يمكنك إفساح المجال لمزيد من العناصر الموجودة أسفل الثعبان من خلال نقل عنصر النص عموديًا. حدّد أداة الكتابة مرةً أخرى، ثم اكتب عنصر نص آخر في مساحة فارغة، إذ يمكنك تعبئة المساحة الفارغة في تصميمات الشعارات ذات النمط القديم بكلمات مثل Established أو Trademark. استخدم نمطًا آخر من الخط Trade Gothic للتنويع في التصميم، مع الحفاظ على أسلوب طباعة ثابت. سنستخدم هنا النمط العادي من الخط العريض Heavy، ولا تنسَ مسح أي إعدادات أحرف غير مرغوب فيها. أضِف طبقةً جديدةً لرسم بعض الأشكال للتزيين بهدف تحديد عنصر النص هذا، واختر أداة الخط Line، مع تغيير القائمة في شريط الأدوات العلوي إلى الخيار شكل Shape، بعد ذلك ارسم خطًا قصيرًا له حدّ Stroke مقداره 10 بكسلات. استمر في الضغط على مفتاح ALT وادفع الشكل لتكراره على طبقة جديدة. انقل هذه النسخة الجديدة أسفل النص، ثم انقر نقرًا مزدوجًا على طبقة النص مع منحها تأثير Color Overlay نفسه لإدخال مزيد من الألوان في التصميم كما في الشكل السابق. استمر في الضغط على مفتاح Shift وانقر على كل الطبقات التي تشكل عنصر النص هذا مع الخطين، ثم استخدم الاختصار CMD+J لتكرارها. انقل هذه العناصر إلى الجانب الآخر من تخطيط الشعار وعدّله كما في الشكل السابق. ضع عنصر نص آخر في المساحة الموجودة أسفل رسم الثعبان، واستخدم هذه المرة مستطيلًا لتخطيط النص مع إعداد الحد نفسه بمقدار 10 بكسلات. تأكد من محاذاة كل شيء مع الدليل باستخدام الاختصار CMD+T للتحقق من المقبض المركزي كما في الشكل السابق. انسخ الكتابة الموجودة على طبقة المسار، وصغّر حجمها وحرّر النص. يمكنك تغيير التسلسل الهرمي المرئي لعناصر النص باستخدام أحجام وأوزان مختلفة وأنماط خطوط مختلفة. استخدمنا الخط اليدوي Cornerstore لهذا القسم كما في الشكل التالي: يجب أن تكون حذرًا في التعامل مع الخطوط اليدوية للتأكد من تدفق الأحرف بسلاسة مع بعضها البعض. قرّب واضبط إعدادات الأحرف الملائمة، حيث سيساعدك استخدام نمط التباعد بين الأحرف البصري Optical، ثم اضبط التعقّب tracking الملائم بدرجة كافية كما في الشكل السابق، ويمكنك بعد ذلك وضع المؤشر بين حرفين وإجراء تعديلات يدوية باستخدام المفتاح ALT مع مفتاحي المؤشر الأيسر أو الأيمن من لوحة المفاتيح. اربط هذا العنصر بنظام الألوان من خلال إعطائه تأثير طبقة colour overlay باللون الأحمر. أضِف طبقةً جديدةً وارسم حدودًا محيطةً حول التصميم باستخدام أداة المستطيل ذي الزوايا المنحنية Rounded Rectangle، ويجب أن يكون مركزيًا عن طريق محاذاته مع الدليل. انقر واضغط Shift على الطبقات من الطبقة العلوية إلى السفلية في لوحة الطبقات Layers لتحديدها جميعًا، ثم انقل التصميم بالكامل إلى مركز لوحة الرسم، مع تغيير حجمه إن لزم الأمر ليتلائم مع منطقة القميص القابلة للطباعة. لنطبق اللمسة النهائية من خلال إضافة بعض التأثيرات لإضفاء مظهر قديم على العمل الفني. إحدى الحيل المفضلة هنا هي تدوير زوايا الخطوط لمنحها تأثير حبر نازف. حدّد طبقة النص الرئيسية وانتقل إلى قائمة Filter ثم Noise، ثم اختر Median كما في الشكل السابق. اختر تحويل الطبقة إلى كائن ذكي Smart Object، والذي سيحافظ على قابلية تحرير النص بداخله. قرّب ضبط القيمة Median إلى أعلى مستوىً ممكن قبل أن يصبح النص غير مفهوم تمامًا. كرّر العملية لكل طبقة نص أخرى. يمكنك هنا استخدام خيار القائمة Median أعلى قائمة Filter مباشرةً، ولكن استمر في الضغط على مفتاح ALT أثناء النقر عليه للتأكد من أنه يطلب التحويل إلى كائن ذكي أولًا. ستحتاج عناصر النص الأصغر إلى قيمة أقل بكثير، لذلك اضبط الإعدادات لكل عنصر على حِدة. بما أننا نصمم قميصًا، فلنستفِد من خامات Washed and Worn التي تضفي على عملك الفني المظهر القديم لقماش متشقق وحبر متناثر بسبب غسلها وارتدائها لسنوات عديدة. جمّع كل الطبقات لوضعها في مجلد واحد، ثم طبّق قناع طبقة layer mask على هذه المجموعة. افتح أحد الخامات المغسولة والبالية Washed and Worn ثم انسخه، ثم استمر في الضغط على مفتاح ALT، وانقر على قناع الطبقة لتعديل محتوياته. الصق الخامة ثم استخدم الاختصار CMD+T لتغيير حجمها وموضعها وتدويرها للعثور على أفضل تخطيط لها. انقر في أي مكان للخروج من القناع لترى الخامة التي تمحو أجزاءً من العمل الفني كما لو أن البتات قد تلاشت تمامًا مثل القميص القديم، تمامًا مثل الشكل السابق. لا تنسَ إخفاء طبقة الخلفية السوداء قبل تصدير عملك الفني، لأنك سترغب في أن تكون خلفية الطباعة هي نسيج القميص الفعلي. والنتيجة النهائية هي شعار العلامة التجارية ذو الطراز القديم الذي يبدو رائعًا بوصفه تصميمًا لقميص T-shirt. يحسّن الرسم القديم التصميم فعليًا، خاصةً مع نظام ألوان محدود، كما يؤدي وضع مجموعة من عناصر النص في تركيبة جذابة بصريًا إلى إنشاء شعار شارة قديم مثالي للاستخدام، مثل رسم على القميص أو تصميم هوية علامة تجارية حقيقي. ترجمة -وبتصرّف- للمقال How to Create a Vintage Logo T-Shirt Design in Photoshop لصاحبه Chris Spooner. اقرأ أيضًا تصميم ملصق لشعار فيلم Deadpool ببرنامج الفوتوشوب مقدمة إلى برنامج أدوبي فوتوشوب Adobe Photoshop كيفية تصميم شعار نصي للطباعة على الملابس خطوات تطوير شعار باستخدام برنامج سكريبوس Scribus النسخة الكاملة من كتاب أساسيات تصميم الرسوميات

على عكس برنامج أدوبي فوتوشوب فإن برنامج أدوبي إليستريتور ليس مخصصًا لمعالجة الصور والرسومات النقطية (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: لترتيب الكائنات فوق أو تحت بعضها. شريط المعلومات السفلي وأخيرًا يوجد أسفل واجهة البرنامج شريط المعلومات الذي يتضمن من اليسار حجم مشاهدة العمل ويمكن بالنقر عليه تعديل هذا الحجم. كما يتضمن تحديد لوح الرسم الفعّال وأيضًا خيارات أخرى لعرض معلومات كالأداة المستخدمة أو لوح الرسم الفعّال أو التاريخ والوقت أو نموذج الألوان المستخدم وغيرها من المعلومات. خاتمة كان هذا شرحًا لواجهة برنامج الإليستريتور وما تتضمنه من قوائم وأدوات ولوحات مع شرح أهم القوائم وكافة الأدوات وأخذ فكرة عامة عن اللوحات الأكثر شيوعًا. برنامج أدوبي إليستريتور سهل وواجهاته سهلة الاستخدام ولكن استخدام الأدوات والعمل عليه يتطلب تمرينات مستمرة ومتابعة دائمة لدروس التصميم التي تعلّم كيفية استخدامه لإنشاء تصاميم رائعة وخصوصًا تلك الدروس التي توجّه لاستغلال إمكاناته الكبيرة وأدواته وأوامره بهدف تسهيل عملية التصميم وإنشاء تصاميم مذهلة توصلك لمستوى الاحترافية.