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

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

تمر معظم مشاريع تصميم المستويات ثلاثية الأبعاد في ألعاب الفيديو بعدة مراحل:

1. ما قبل الإنتاج Pre-production. هي مرحلة وضع الخطوط العريضة وتصميم تجربة الاستخدام العامة.
2. المعارك Combat. هذه مرحلة اختيارية خاصة بالألعاب القتالية، وفيها تُحدد طبيعة التفاعل بين اللاعبين وأنواع الأعداء التي ستكون في اللعبة.
3. المخطط Layout. مرحلة رسم مخطط مرئي ثنائي الأبعاد من منظور علوي top view.
4. النماذج الهيكلية Blockout. مرحلة بناء مسودة أولية ثلاثية الأبعاد للنماذج الهيكلية (الأجسام والمباني وغيرها) لاختبار قابليتها للعب.
5. البرمجة النصية أو كتابة السكربتات Scripting. مرحلة ربط الأحداث بالسلوكيات الخاصة بها، وتشمل المهمات والأبواب -أسلوب فتحها مثلًا-، الأزرار ووظائفها، الذكاء الاصطناعي، إلخ، وقد كان هناك فرق كبير في الأجيال السابقة من محركات الألعاب بين شيفرة محرك اللعبة ومنطق السكربت أو البرمجة النصية في مستوى معين داخل اللعبة.
6. الإضاءة. مرحلة توزيع مصادر الإضاءة للعناصر داخل اللعبة لوضوح رؤيتها ولإضفاء عمق واقعي عليها.
7. فن البيئة Environment Art. هي مرحلة وضع اللمسة الفنية النهائية من خلال إضافة الأجسام والهياكل والأثاث وغيرها.
8. الإطلاق Release. مرحلة توثيق المشروع والتسويق له ونشره.

تخصيص المراحل

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

المشاريع الجماعية

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

ألعاب القتال أو خرائط الألعاب الجماعية

تحتاج ألعاب القتال combat games أو خرائط الألعاب الجماعية multiplayer maps إلى التركيز على إنشاء النماذج الهيكلية Blockouts من أجل إخراج متقن للمواجهات encounters التي يواجهها اللاعب، خاصة مع الشخصيات غير القابلة للعب Non playable characters (NPC)، وكذلك التركيز على موازنة الخرائط map balancing للتحكم في الخيارات المتاحة للاعب داخل المستوى، واختبارات مكثفة لتجربة اللعب نفسها playtests لمعرفة إن كان المستوى شيقًا أم مملًا، واضحًا أم محيرًا للاعب، وهكذا.

الألعاب الفردية القصصية

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

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

مرحلة ما قبل الإنتاج

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

تكتسب مرحلة التخطيط أهمية بالغة عند العمل في فريق لأنها التي توضع فيها الرؤية العامة للمشروع وتوقعاته، لكن تستطيع تجاوزها إن كنت تعمل وحدك كمصمم مستقل على مشروع صغير نسبيًا بعد أن تصف الخطوط العريضة للمشروع وتوقعاته وأهدافه، ويكون الشكل العام لهذه الخطوط إما وثائق نصية تشرح الرؤية العامة للمشروع، أو لوحات مهام إما حقيقية أو على تطبيقات مثل تريلّو Trello أو جايرا Jira، أو جداول بيانات Spreadsheets.

مرحلة المعارك (مرحلة اختيارية)

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

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

اقتباس

نظرًا للجهد الكبير الذي تحتاج إليه هذه المرحلة فإننا ننصح أن تبدأ بتعديل ألعاب قتال جاهزة، كي تكتسب خبرة عملية من خلال التدرب على أنظمة قتالية مجهزة ومختبرة مسبقًا.

صورة نشرها المصمم جيسون دي هيراس Jason de Hera على تويتر توضح مصفوفة الحركات لشخصيات فالكيري في لعبة God Of War.

مرحلة المخططات Layouts

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

تكون المخططات في العادة مساقط علوية ثنائية الأبعاد للمستوى، وإن كانت مساقط المنظور أو المخططات الأيزومترية Isometric شائعة كذلك -هذه المخططات ترسم المستوى من منظور أشبه بالرسم ثلاثي الأبعاد-، تذكر أن الهدف هنا ليس أن تصير فنانًا مبدعًا بل أن تستطيع إيصال فكرتك ورسالتك من المخطط الذي ترسمه، فالرسم هنا عبارة عن خطة بصرية تحدد أين يمكن للاعب أن يذهب، وما الذي يستطيع أن يفعله داخل المستوى.

صورة توضح رسمًا لخريطة Warpath متعددة اللاعبين في لعبة Team Fortress Classic، من رسم المصمم روبن ووكر Robin Walker.

مرحلة النماذج الهيكلية

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

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

هذا يعني أن ملفات النماذج الهيكلية هي مستويات كاملة أو ملفات مشاهد من اللعبة scene files يمكن لعبها وتجربتها وتحميلها داخل محرك اللعبة.

صورة لنموذج هيكلي لمستوى في لعبة Uncharted 4.

مرحلة البرمجة النصية

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

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

اقتباس

يميل البعض في مجتمعات تصميم المستويات إلى التقليل من قيمة المبرمجين الذين يكتبون هذه السكربتات النصية رغم أن عملهم هو الذي يجعل المرحلة تنبض بالحياة وهو العنصر الحاسم لتحويل الخريطة الصماء إلى تجربة تفاعلية.

صورة لنسخة أولية من لعبة Gone Home، لم تعمل الأبواب بالطريقة الصحيحة، من مقالة Code Judo.

مرحلة الإضاءة

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

تتعامل صناعة الألعاب عادة مع الإضاءة كعنصر تجميلي يتبع فن البيئة، لكن الحقيقة أن لها وظائف محورية في أسلوب اللعب نفسه، لذا يجب أن تُصمَّم بعد تنسيق دقيق مع مصمم المستوى لفهم كيف ستؤدي دورها في خدمة الهدف من المستوى واللعبة ككل.

صورة لإضاءة غرفة من العصور الوسطى نفذها هارلي ويلسون Harley Wilson توضح توزيع الإضاءة في المشهد.

مرحلة فن البيئة

ينبغي أن يكون الشكل العام للمستوى وتسلسل المرحلة قد ظهر واقترب من اكتماله بعد المراحل السابقة، وهنا تأتي مرحلة التفاصيل البصرية أو فن البيئة حيث نضيف هذه التفاصيل الفنية فيما يعرف بعملية Art Pass، حيث تحتاج أغلب المشاريع إلى تكرار هذه العملية عدة مرات.

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

صورة متحركة تظهر تطور قاعدة عسكرية بحرية في لعبة Sniper Elite.

مرحلة الإطلاق

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

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

خاتمة

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

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

ترجمة -بتصرف- للفصل How to make a level من كتاب The Level Design Book.

التصميم والبرمجة تخصصان مترابطان لا ينفصلان عن بعضهما البعض في العالم الرقمي، وبالنسبة للمبرمجين، تتضاعف أهمية فهم مبادئ التصميم أكثر وأكثر، فالأمر لا يتعلق بالأمور الجمالية فحسب، بل يؤثر أيضًا على رضا المستخدم والنجاح العام للمنتج؛ فمن خلال تطبيق مبادئ التصميم، سيكون بإمكان المبرمجين تقديم تجارب بصرية رائعة تترك انطباعًا جيدًا لدى المستخدمين.

أهمية التصميم للمبرمجين

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

يُعَد التصميم الجيد ضروريًا لتقديم منتجات ناجحة، فهو يساعد على تحسين تجربة المستخدم، وزيادة تفاعله مع المنتج، إضافةً إلى تحسين معدل التحويل؛ لذا فإن الالتزام بمبادئ التصميم سيساعد المنتج في التفوق على منافسيه وزيادة ولاء العملاء للعلامة التجارية.

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

التعاون

العمل في بيئة واحدة مع المصممين أمر شائع في مشاريع البرمجة، لذا فإن فهم المبرمجين لمبادئ التصميم سيساعدهم على التواصل بفعالية مع المصممين والتعاون معهم بصورة جيدة، مما يؤدي إلى سير العمل بسلاسة أكبر وتحقيق نتائج أفضل

التركيز على المستخدم

يضع التصميم احتياجات المستخدمين في مقدمة الأولويات، إذ يركز على سلوكياتهم وتفضيلاتهم؛ وبالتالي يمكن للمبرمجين الذين يفهمون مبادئ التصميم إنشاء تجارب تدور حول احتياجات المستخدم، مع ضمان أن تكون المنتجات سهلةً وممتعةً ومتوافقةً مع توقعات المستخدم

كفاءة التنفيذ

عندما يفهم المبرمجون مبادئ التصميم، سيأخذون تلك المبادئ في الحسبان خلال عملية البرمجة، وهو ما يؤدي إلى تنفيذٍ عالي الكفاءة، ومشكلات أقل متعلقة بالتصميم، وسرعة أكبر في التطوير

حل المشكلات

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

تعدد الخبرات

في الفرق الصغيرة أو الشركات الناشئة، غالبًا ما يتولى المبرمجون مهام متعددة، بما في ذلك مسؤوليات تصميم الواجهات؛ لذا سيساعدهم امتلاك معرفة أساسية بالتصميم على التعامل مع المهام المختلفة وتوفير الوقت والموارد.

يمكن للمبرمجين الذين يفهمون مبادئ التصميم تطوير منتجات رقمية أفضل، كما يمكنهم سد الفجوة بين التصميم والبرمجة، وتطوير منتجات سهلة الاستخدام وجذابة بصريًا.

نظرية الألوان ولوحات الألوان

نظرية الألوان هي دراسة كيفية تفاعل الألوان مع بعضها البعض، وهو مجال معقد ويتطور باستمرار، لكن هناك بعض المبادئ الأساسية التي يجب على المبرمجين فهمها.

فيما يلي أهم المبادئ التي يجب على المبرمجين معرفتها.

تناغم الألوان

من المهم استخدام الألوان التي تتناغم معًا، وهناك العديد من الطرق المختلفة لتحقيق تناغم الألوان، مثل استخدام الألوان المتشابهة Analogous Colors والألوان المكملة Complementary Color والتركيبات اللونية الثلاثية Triadic Colors

التباين

هو مدى الفرق بين لونين أو أكثر، ويمكن استخدامه لخلق شعور بالعمق والاهتمام والإثارة في التصميم، وهناك نوعين رئيسيين من التباين، هما تباين الصبغة Hue Contrast وتباين القيمة Value .Contrast

التأثير العاطفي لمجموعات الألوان المختلفة

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

الكتابة واختيار الخطوط

الكتابة هي فن الترتيب، وهي عنصر أساسي في التصميم البصري؛ إذ يمكن من خلالها تقديم المعلومات وترتيبها حسب الأولوية، إضافةً إلى تأسيس هوية مرئية.

يجب على المبرمجين التعرف على المفاهيم التالية فيما يخص الكتابة.

عائلات الخطوط

هي مجموعات الخطوط التي تشترك في نفس التصميم الأساسي، وهناك العديد من عائلات الخطوط المتاحة، ولكل منها خصائصها الفريدة، مثل خطوط Arial وكذلك Times New Roman.

أنماط الخط

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

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

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

مبادئ التخطيط Layout والتكوين Composition

التخطيط Layout والتكوين Composition هما المبدآن اللذان يحكمان كيفية ترتيب العناصر في التصميم، وهي جزئية ضرورية لإنشاء واجهات جذابة وسهلة الاستخدام.

التخطيط الجيد يؤدي إلى بنية مرئية واضحة ويوجه المستخدمين من خلال المحتوى، وفيما يلي المبادئ التي يجب على المبرمجين فهمها.

التوازن

توزيع المحتوى في التصميم بما يساعد على تحقيق التوازن البصري، وينتج عن ذلك تصميم متوازن ومتناغم.

المحاذاة

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

القرب

هي المسافة بين العناصر، فالعناصر القريبة من بعضها يجب أن تكون مترابطةً ومتعلقةً ببعضها، بينما العناصر المتباعدة تُعَد أقل ارتباطًا.

استخدام المساحة البيضاء والتوازن البصري

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

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

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

التسلسل الهرمي البصري وترتيب المعلومات

التسلسل الهرمي البصري هو ترتيب العناصر في التصميم حسب أهميتها، وهو يُستخدم لتوجيه عين المستخدم نحو المعلومات المهمة أولًا.

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

• الحجم: يُنظر إلى العناصر الكبيرة على أنها أكثر أهمية من العناصر الأصغر
• اللون: يُنظر إلى الألوان الفاتحة على أنها أكثر أهميةً من الألوان الداكنة
• التباين: يُنظر إلى العناصر التي بينها تباين كبير على أنها أكثر أهميةً من العناصر ذات الألوان المتقاربة
• الموضع: يُنظر إلى العناصر التي تُوضع في أماكن بارزة على أنها أكثر أهميةً من العناصر التي تُوضع في مواقع هامشية

الرموز والرسوم التوضيحية

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

وفيما يلي الأمور التي يجب على المبرمجين فهمها فيما يتعلق بالرموز والرسوم التوضيحية:

• البساطة: يجب أن تكون الرموز بسيطةً وسهلة الفهم، كما يجب ألا تحتوي على الكثير من التفاصيل أو الفوضى
• الوضوح: يجب أن تكون الرموز واضحةً وذات معنى، بحيث يفهمها المستخدم على الفور
• الاتساق: من الضروري أن تكون الرموز متسقةً مع بعضها البعض، من خلال استخدام نفس النمط والتنسيق لجميع الرموز

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

المقصود بتصميم تجربة المستخدم UX هو تصميم المنتجات والخدمات بطريقة يسهل استخدامها، وتكون فعالةً وممتعةً للمستخدمين. يركز مصممو تجربة المستخدم على احتياجات المستخدمين ورغباتهم، ويستخدمون لتحقيق ذلك مجموعة متنوعة من الطرق التي تساعدهم على إنشاء تصميمات فعالة ومرضية.

التصميم الموجه للمستخدم UCD

التصميم الموجه للمستخدم UCD هو نهج تصميمي يضع المستخدم في مركز عملية التصميم، مما يعني أنه يجب على المبرمجين أن يفهموا احتياجات المستخدم ورغباته وأهدافه للوصول إلى منتج فعال ومرضي.

هناك العديد من مبادئ التصميم الموجه للمستخدم UCD، أهمها:

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

المخططات الهيكلية Wireframes والنماذج الأولية prototypes

تُعَد المخططات الهيكلية Wireframes والنماذج الأولية prototypes تقنيتان أساسيتان لترجمة الأفكار إلى تصاميم ملموسة.

المخططات الهيكلية Wireframes هي طريقة سريعة وسهلة لتصور التصميم، ويمكن القيام بها باستخدام الورقة والقلم أو من خلال مجموعة متنوعة من الأدوات البرمجية، وتتمثل فائدتها في إمكانية الحصول على تعليقات وآراء المستخدمين في وقت مبكر من عملية التصميم، بحيث يمكن إجراء تغييرات على التصميم قبل عملية التنفيذ.

النماذج الأولية prototypes هي تقنية أكثر تقدمًا، تتيح إمكانية إنشاء نماذج تفاعلية لواجهة المستخدم، ويمكن استخدامها لاختبار قابلية الاستخدام للتصميم والحصول على ملاحظات من المستخدمين.

إنشاء دعوات لاتخاذ إجراء CTAs

تُعَد الدعوات لاتخاذ إجراء CTAs جزءًا مهمًا من أي واجهة مستخدم، فهي التي تدفع المستخدمين إلى اتخاذ الإجراءات المطلوبة، مثل النقر فوق زر معين، أو ملء نموذج، أو إجراء عملية شراء، ونحو ذلك.

هناك بعض الأشياء الرئيسية التي يجب أخذها في الحسبان عند كتابة دعوات لاتخاذ إجراء CTAs:

• استخدام لغة واضحة وموجزة: يجب أن يكون نص الدعوة واضحًا وموجزًا
• استخدام لغة مباشِرة: يجب استخدام عبارات مباشرة وقوية تخبر المستخدم بما يجب عليه فعله. فعلى سبيل المثال، عوضًا عن استخدام عبارة قراءة المزيد يمكن استخدم عبارة اشترك الآن
• إبراز الدعوة: يجب إبراز عبارة الدعوة إلى اتخاذ إجراء CTA بين عناصر محتوى الصفحة، ويمكن تحقيق ذلك باستخدام لون أو خط أو حجم مختلف عن النصوص الأخرى
• وضع الدعوة في مكان بارز: يجب وضع عبارة الدعوة إلى اتخاذ إجراء CTA في مكان بارز؛ إذ من المحتمل أن يراها جميع المستخدمين، وقد يكون ذلك في الجزء العلوي من الصفحة، أو أسفل الصفحة، أو بجانب المحتوى الذي ترتبط به الدعوة.

تصميم متجاوب مع الهواتف المحمولة

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

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

تصميم لأحجام شاشة متعددة ودقات متنوعة

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

فيما يلي بعض المبادئ الرئيسية التصميم المتجاوب:

• استخدام مخططات مرنة: يجب أن تكون المخططات مرنةً كفاية للتكيف مع أحجام الشاشات المختلفة، ويمكن القيام بذلك باستخدام استعلامات الوسائط CSS أو Flexbox
• استخدام صور متجاوبة: يجب أن يكون هناك خيار لتغيير حجم الصور، بحيث تتناسب مع المساحة المتاحة؛ ويمكن القيام بذلك باستخدام CSS أو باستخدام خدمة تغيير حجم الصور
• استخدام تنقل سهل وسلس: يجب أن يكون التنقل سهل على جميع الأجهزة، ويمكن تحقيق ذلك باستخدام بنية تنقل بسيطة ومتجاوبة

أنماط التفاعل والإيماءات عبر الهواتف المحمولة

تعتمد الهواتف المحمولة على اللمس، مما يعني أن المستخدمين يتفاعلون معها عن طريق لمس الشاشة، وهذا ما يفرض مجموعةً جديدةً من التحديات على المبرمجين الذين يحتاجون إلى إنشاء واجهات متجاوبة مع اللمس.

فيما يلي بعض أنماط التفاعل الشائعة التي يجب على المبرمجين فهمها:

• النقر: النقر هو التفاعل اللمسي الأكثر شيوعًا، ويُستخدم لتحديد عنصر أو الضغط على زر أو فتح رابط
• التمرير: يُستخدم للتمرير عبر قائمة أو للتحرك بين الشاشات المختلفة
• القرص بإصبعين: يُستخدم للتكبير أو التصغير على صورة أو خريطة
• السحب والإفلات: يُستخدم السحب والإفلات لنقل عنصر من مكان إلى آخر
• التدوير: يُستخدم التدوير لتغيير اتجاه عنصر، مثل الخريطة أو الصورة
• حجم الشاشة: يؤثر حجم الشاشة على حجم وتباعد العناصر في الواجهة
• دقة الشاشة: تؤثر دقة الشاشة على وضوح الصور والنصوص
• إمكانات الجهاز: ستؤثر إمكانات الجهاز -مثل المعالج والذاكرة- على أداء الواجهة

إمكانية الوصول في التصميم

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

مقدمة إلى معايير إمكانية الوصول إلى محتوى الويب WCAG

توفر أدلة إمكانية الوصول إلى محتوى الويب WCAG معلومات شاملة حولة كيفية إنشاء محتوى يمكن للجميع الوصول إليه، فأدلة WCAG هي مجموعة من الإرشادات التي طورتها جمعية World Wide Web Consortium بهدف تطوير الويب وإتاحته لذوي الاحتياجات الخاصة.

تنقسم أدلة WCAG إلى ثلاثة مستويات:

• المستوى A: تتضمن أدلة المستوى A الحد الأدنى من متطلبات إمكانية الوصول
• المستوى AA: توفر أدلة المستوى AA ميزات إضافية تتعلق بإمكانية الوصول، ويُوصى بها لمعظم مواقع الويب
• المستوى AAA: هو المستوى الأعلى، إذ توفر أدلة المستوى AAA أعلى الميزات الممكنة في مجال إمكانية الوصول، ويُوصى بها للمواقع التي تحتاج إلى الوصول إلى نطاق واسع من المستخدمين

هناك عدد من الأدوات التي يمكن استخدامها لاختبار مدى امتثال الموقع بأدلة WCAG، مثل أداة AX وأداة TAW.

تغطي أدلة WCAG مجموعةً واسعةً من الموضوعات، بما في ذلك:

• بدائل نصية: توفر بدائل نصية للمحتوى غير النصي، مثل الصور ومقاطع الفيديو
• التنقل في لوحة المفاتيح: تحرص على إمكانية التنقل عبر جميع المحتوى باستخدام لوحة المفاتيح فقط
• التباين: استخدام ألوان عالية التباين لجعل النص والصور سهلة القراءة
• الهيكل: تنظيم المحتوى بطريقة سهلة الفهم
• محتوى قابل لإعادة الاستخدام: استخدام محتوى يسهل نسخه واعادة استخدامه

تصميم للمستخدمين ذوي الاحتياجات البصرية والسمعية والحركية والذهنية

يتطلب التصميم للمستخدمين ذوي الاحتياجات الخاصة دراسةً خاصة، وذلك لأن الأشخاص ذوي الاحتياجات يعانون بطرق مختلفة؛ فما ينجح مع شخص ما قد لا ينجح مع شخص آخر، لذا يجب فهم الأنواع المختلفة من الإعاقات وكيفية تأثيرها على المستخدمين، بحيث يمكن للمطورين إنشاء ما يشمل الجميع.

أول نوع شائع من الإعاقات هو الإعاقات البصرية، وتتضمن العمى الكامل ونقص الرؤية وعمى الألوان، بحيث لا يتمكن للأشخاص ذوو الإعاقات البصرية رؤية النصوص أو الصور على موقع إلكتروني أو على تطبيق، لذلك من المهم استخدام ألوان عالية التباين وخطوط واضحة، ومن المهم أيضًا توفير نصوص بديلة للصور والوسائط الأخرى.

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

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

والنوع الأخير المنتشر من الإعاقات هو الإعاقات الذهنية، وتشمل الإعاقات الذهنية عددًا من الأمراض، مثل نقص القدرة العقلية، واضطرابات التوحد، والأمراض العقلية الشديدة والمزمنة، والسكتة الدماغية، ومرض ألزهايمر، وغيرها من أشكال الخرف؛ وهؤلاء الأشخاص قد يواجهون صعوبةً في فهم المعلومات المعقدة، أو اتباع التعليمات، أو تذكر الأشياء، لذا من المهم محاولة تبسيط الأوامر وتوفير شروحات حول بعض الأزرار في الموقع الإلكتروني

إرشادات تباين الألوان وقابلية قراءة النص

يُعَد تباين الألوان الكافي وقابلية قراءة النص من الأمور الضرورية للمستخدمين ذوي الإعاقات البصرية.

يمكن أن تساعد الإرشادات التالية على إنشاء موقع إلكتروني يمكن لجميع المستخدمين التعامل معه:

• استخدام ألوان عالية التباين: يوصي معيار WCAG 2.1 بنسبة الحد الأدنى للتباين 4.5 : 1 للنصوص العادية، وكذلك 3 : 1 للنصوص الكبيرة، ويمكن استخدام أدوات اختبار التباين لمعرفة نسبة التباين في ألوان موقعك، مثل أداة فحص التباين
• استخدام خطوط واضحة: من المهم تجنب استخدام الخطوط الصغيرة أو الخطوط الرقيقة أو الخطوط الزخرفية، واستخدام حجم خط لا يقل عن 16
• ترك مساحة بيضاء: تزيد المساحة البيضاء من سهولة القراءة، مع استخدام العناوين المناسبة والعناوين الفرعية لتنظيم المحتوى
• استخدام الصور ومقاطع الفيديو المناسبة: المحتوى المرئي مفيد لإيصال المعلومات، مع استخدام نصوص بديلة لجميع الصور ومقاطع الفيديو

توفير نصوص بديلة للصور والوسائط

توفر النصوص البديلة أوصاف نصية للصور والوسائط المتعددة، وهي ضرورية للمستخدمين المكفوفين أو الذين لديهم رؤية منخفضة؛ إذ لا يمكنهم رؤية الصور، لذا يجب أن يكون النص البديل وصفيًا، بحيث يعبر عن محتوى وسياق الصورة.

التعاون مع المصممين

التعاون بين المبرمجين والمصممين أمر لا بُدّ منه لتقديم تجارب رقمية مميزة.

التواصل الفعال مع المصممين

يُعَد التواصل القوي ضروريًا بين المبرمجين والمصممين، وهو يشمل القدرة على نقل التفاصيل التقنية من جهة المبرمجين والقيود التصميمية من جهة المصممين، مما يخلق بيئةً تعاونيةً تؤدي إلى نتائج تصميمية أفضل.

فيما يلي بعض النصائح للتواصل الفعال مع المصممين:

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

فهم موجز التصميم والعقبات الإبداعية

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

فيما يلي بعض الأشياء التي يجب البحث عنها في موجز التصميم:

• أهداف المشروع: ما هي الأهداف العامة للمشروع؟
• الجمهور المستهدف: من هم مستخدمي المنتج؟
• الوظائف التي يؤديها: ما هي الميزات التي يحتاجها المنتج؟
• الجانب الجمالي: ما هو المظهر الذي يجب أن يبدو عليه للمنتج؟
• الميزانية: كم هو المبلغ المتاح للمشروع؟
• الجدول الزمني: متى يجب إكمال المنتج؟

التعاون من خلال لوحات الإلهام Mood Boards وأدلة الأسلوب Style Guides

توفر لوحات الإلهام Mood Boards وأدلة الأسلوب Style Guides مرجعًا بصريًا أساسًا للتوجه العام للتصميم، إذ يمكن استخدامهما لتوصيل رؤية المصمم إلى المبرمج ولضمان أن تكون خيارات التصميم متناسقةً عبر جميع أجزاء المشروع.

فيما يلي بعض النصائح للتعاون عبر لوحات الإلهام وأدلة الأسلوب:

• الانخراط في وقت مبكر من العملية: كلما بدأتم في التعاون أبكر، كان ذلك أفضل
• إعطاء الملاحظات في وقت مبكر: لا داعي للانتظار حتى نهاية العملية للحديث عن تغييرات
• احترام رؤية المصمم: لقد بذل المصمم الكثير من الوقت والجهد لإنشاء لوحات الإلهام وأدلة الأسلوب، لذا من المهم احترام رؤيته

تقديم الملاحظات واستقبالها

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

فيما يلي بعض النصائح الخاصة بتقديم الملاحظات واستقبالها:

• أن نكون محددين: معنى ذلك أن لا نقول مثلًا: "لم يعجبني التصميم"، بل نخبر المصمم بما لا يعجبنا تحديدًا وما السبب
• تعليقات بناءة: تقديم اقتراحات بناءة حول كيفية تحسين التصميم
• أن نكون محترمين: من المهم تذكر أن المصمم قد بذل جهدًا كبيرًا في العمل على التصميم، لذا من المهم احترام جهوده

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

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

فيما يلي بعض النصائح لمعالجة تحديات سير العمل بين الطرفين:

• التواصل مبكرًا: يجب أن يبقى كل من المصممين والمبرمجين على اطلاع على تطورات عمل الطرف الآخر
• المرونة: من المهم أن نكون على استعداد لتعديل عملية التصميم أو التطوير حسب الحاجة
• استخدام ضبط النسخ: سيساعد ذلك على تتبع التغييرات وتجنب الخلافات
• استخدام أداة تصميم تعاونية: سيجعل ذلك من السهل مشاركة ومراجعة التصميمات

من خلال اتباع هذه النصائح، يمكن للبرمجين والمصممين التعاون بفعالية وتقديم تجارب رقمية مميزة.

أدوات التصميم والبرامج

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

تُستخدم برامج التصميم لإنشاء تصاميم مرئية تعكس أفكارًا معينة، ويمكن استخدامها لتصميم كل شيء؛ من الرسومات البسيطة إلى الرسومات المعقدة والرسومات المتحركة، وإليك بعض برامج التصميم الشائعة:

• أداة Adobe Creative Suite: هي حزمة برامج تتضمن مجموعة من البرامج التصميمية لتحرير الصور والرسومات المتجهة والرسومات المتحركة
• أداة Sketch: هو برنامج للتصاميم المتجهة، يتميز بواجهة سهلة الاستخدام وقدرة على إنشاء نماذج أولية تفاعلية
• أداة Figma: هي أداة تصميم سحابية زادت شعبيتها في الآونة الأخيرة لمزاياها وقدرتها على تصدير التصميمات بمجموعة متنوعة من التنسيقات
• أداة Zeplin: تتيح هذه الأداة للمبرمجين استخراج الأصول ومواصفات التصميم من تصميمات أداة Figma وبرنامج Sketch

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

دمج سير عمل التصميم والبرمجة

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

سد الفجوة بين التصميم والبرمجة

قد يكون التكامل بين التصميم والبرمجة أمرًا صعبًا، نظرًا لأن المصممين والمبرمجين يتحدثون لغات مختلفة؛ إذ يفكر المصممون بالأمور المرئية، بينما يفكر المبرمجون بالأمور البرمجية. ولسد الفجوة بين هذين التخصصين، يجب على المبرمجين فهم أساسيات التصميم، وكذا يجب على المصممين فهم أساسيات البرمجة.

فيما يلي بعض النصائح لسد الفجوة بين التصميم والبرمجة:

• متابعة دورات أو دروس تعليمية في التصميم
• قراءة كتب ومقالات عن التصميم
• مناقشة المصممين وطرح الأسئلة عليهم
• تجربة استخدام أدوات وبرامج التصميم
• الطلب من المصممين تعلم أساسيات لغات البرمجة، مثل لغة HTML ولغة CSS ولغة JavaScript

تطبيق أنظمة التصميم ومكتبات المكونات

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

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

فيما يلي بعض النصائح لتطبيق أنظمة التصميم ومكتبات المكونات:

• إنشاء مكتبة صغيرة والعمل على توسيعها وتطويرها بمرور الوقت
• الحرص على أن يكون نظام التصميم مرنًا مع التغييرات المحتملة
• الاستماع إلى ملاحظات المصممين والمبرمجين
• العمل على تدوين نظام التصميم، بحيث يمكن للجميع فهمه

الممارسات الفعالة لتسليم التصميم للمبرمجين

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

فيما يلي بعض النصائح لتسليم التصميم للمبرمجين:

• استخدام أداة تصميم تعاونية تتيح للمصممين والمبرمجين العمل معًا على نفس الملفات
• تحديد مواصفات تصميم واضحة ومختصرة
• تزويد المبرمجين بجميع الأصول التي يحتاجونها لتنفيذ التصميم
• إجراء مراجعات تصميم منتظمة مع المبرمجين

إجراء مراجعات منتظمة بين المصممين والمبرمجين

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

فيما يلي بعض النصائح لإجراء مراجعات منتظمة بين المصممين والمبرمجين:

• الحصول على آراء مجموعة متنوعة من الأشخاص، بما في ذلك المصممين والمبرمجين والمستخدمين
• يجب أن تكون التعليقات بنّاءةً وتركز على تحسين المنتج، لا على انتقاد الأشخاص
• الانفتاح عل على سماع جميع التعليقات مع استعداد لإجراء التغييرات

اختبار A/B والتصميم المستند إلى البيانات

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

اختبار A/B هو طريقة لمقارنة نسختين من التصميم يختلفان في عنصر محدد، بهدف تحديد أيهما يؤدي إلى نتائج أفضل؛ فعلى سبيل المثال، يمكن اختبار ألوان مختلفة من الأزرار لترى أيها لديه معدل نقر أعلى.

وبمجرد جمع البيانات من اختبارات A/B أو مصادر أخرى، يمكن استخدام هذه البيانات لتحسين التصميمات، من خلال إجراء تغييرات بسيطة متكررة على التصميمات مع مرور الوقت، وذلك بناءً على البيانات التي نجمعها.

تحسين رحلات المستخدم

رحلة المستخدم هي المسار الذي يسلكه المستخدم عبر تطبيقك أو موقعك الإلكتروني.

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

في الختام

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

ترجمة -وبتصرّف- للمقال The Ultimate Design Principles Guide For Developers لصاحبه Hossein Mousavi.

اقرأ أيضًا

• أساسيات تصميم واجهات الاستخدام للمبرمجين
• لماذا يجب على المبرمجين أن يتعلموا التصميم
• أنماط التصميم البرمجي Design patterns

في عام 2001، اجتمع ثلاثة أصدقاء في إدنبرغ Edinburgh ليتشاركوا اقتراحاتهم عن مشروع يعملون عليه معًا، وقد أعدّ كلٌّ منهم مجموعة أفكار ليصوتوا عليها ويختاروا الفكرة الأفضل، لكن واحدًا منهم فقط كان قد أعدَّ نموذجًا أوليًا لفكرته.

شارك غاريث ويليامز Gareth Williams مع أصدقائه ملف إكسل كان قد أعده ليساعده على إيجاد رحلات طيران رخيصة، مما حمَّس الجميع مباشرةً لفكرته المتمثلة في إنشاء موقع ويب للبحث عن رحلات طيران؛ وفي عام 2002 صدرت النسخة الأولى من موقع سكاي سكانر Skyscanner لحجوزات الطيران.

لا تقتصر أهمية إعداد النماذج الأولية prototypes على إقناع المستثمرين وشركاء المشروع بالفكرة، بل تستخدَم هذه النماذج أيضًا في مرحلة التطوير للمساعدة على التخطيط وتقييم المنتج واختباره قبل إنفاق الكثير من المال والوقت. لكن كيف يتم إعداد هذه النماذج؟ هذا ما سنتحدث عنه فيما يلي.

ما هو النموذج الأولي ولماذا نحتاج إليه؟

في مجال تصميم البرمجيات، يُعَد النموذج الأولي عبارة عن تصميم أولي للمنتج يمكن أن يتفاعل معه المستخدمون. تكون النماذج الأولية غير مبرمجة بعد، لكن يمكن استعراضها من خلال أدوات معينة للتنقل بين الشاشات ومحاكاة تجربة المستخدم النهائي. تسمح النمذجة الأولية بتوفير الوقت والمال في مرحلة التطوير، لأنها تساعد على اكتشاف المشاكل التي تعيق سهولة الاستخدام في مرحلة مبكرة وتحسين التصميم قبل مرحلة بناء المنتج.

والآن لماذا نحتاج إلى نماذج أولية؟

• من أجل طرح الأفكار: تُعَد النماذج الأولية طريقةً سهلةً لتجربة الأفكار المختلفة والتعبير عنها ضمن فريق التصميم.
• من أجل جذب الأطراف المعنية: كما قال غاريث ويليامز مؤسس منصة سكاي سكانر: "إذا كان بوسعك أن تُري الآخرين بعينهم ما الذي تريد القيام به عندما تريد منهم المساعدة في ذلك، فسيكون موقفك أقوى بكثير مقارنةً بأن تحاول فعل ذلك من خلال الكتابة أو الشرح".
• من أجل التواصل بين فريق التصميم وفريق الهندسة: تساعد النماذج الأولية على تقليل الشكوك التي قد تنتاب المطورين عند تقديم التصميم إليهم.
• من أجل تحديد المشاكل التي تعيق سهولة الاستخدام: النموذج الأولي القابل للنقر عليه يسمح للمصممين بمراقبة تفاعلات المستخدم النهائي قبل كتابة أي سطر من الأكواد؛ أما بالنسبة للمستخدمين، فالنماذج الأولية تبدو لهم بنفس مظهر المنتج النهائي وبنفس انطباعه، لذا فإن تفاعلاتهم تكون طبيعية وأقرب ما يمكن إلى طريقة تفاعلهم في الواقع.

هناك الكثير من الالتباس حول ماهية النموذج الأولي وتمييزه عن غيره من المفاهيم المستخدَمة لأغراض مشابهة، مثل النماذج المُحاكية mockups والرسوم التخطيطية wireframes ونموذج إثبات المفاهيم proof of concept. لنشرح الفروقات بين هذه المصطلحات فيما يلي:

الفرق بين نموذج إثبات المفاهيم PoC والنموذج الأولي prototype ونموذج الحد الأدنى القابل للتطبيق MVP

• نموذج إثبات المفاهيم PoC هو التمثيل الأبسط والأقل تكلفةًً الذي يمكنك إنشاؤه للمنتج، والغرض منه هو التحقق من الجدوى التقنية لفكرة المنتج. يمكن أن يكون نموذج إثبات المفاهيم على شكل عرض تقديمي أو مقطع فيديو أو رسم بياني أو شكل أولي للوظيفة، أو أي شيء يوضح لصنّاع القرار إمكانية وضرورة تنفيذ ذلك، مع توضيح النطاق والتقنيات اللازمة للمشروع في معظم الأحيان.
• نموذج الحد الأدنى القابل للتطبيق MVP يمثل قفزةً نوعيةً قياسًا بنموذج إثبات المفاهيم، فهو يُعَد نسخةً مبكرةً من المنتج ذات ميزات أصغرية، ويهدف إلى معرفة كيفية قبول الجمهور للمنتج، وغالبًا ما يجري إصداره للجمهور من أجل الاختبار وجمع الآراء.
• النموذج الأولي prototype يُعَد مرحلةً وسطيةً بين النموذجين السابقين، وهو عملي أكثر من نموذج إثبات المفاهيم PoC كما أنه أكثر تفصيلًا منه، لكنه يركز فقط على التصميم دون أن يحتوي فعليًا على أية ميزة، خلافًا لنموذج الحد الأدنى القابل للتطبيق MVP.

لمحة عامة توضح الفرق بين نموذج إثبات المفاهيم PoC والنموذج الأولي prototype ونموذج الحد الأدنى القابل للتطبيق MVP.

الفرق بين الرسم التخطيطي Wireframe والنموذج المحاكي Mockup والنموذج الأولي prototype

الرسوم التخطيطية والنماذج المحاكية هي عبارة عن إصدارات مختلفة للنماذج الأولية.

توضيح الفرق بين الرسوم التخطيطية والنماذج المحاكية والنماذج الأولية عالية الدقة.

الرسوم التخطيطية Wireframes هي الخطوط العريضة للتصميم، وهي توضح مكان المحتوى والأزرار والنص وما إلى ذلك. ويمكن إنشاء الرسم التخطيطي يدويًا أو باستخدام أدوات خاصة.

تمثل الرسوم التخطيطية الهيكل الأساسي لواجهة المستخدم دون الخوض في التفاصيل، وهي بذلك تسمح للمصممين بتعديل العناصر ومواضعها بسرعة. ويُعَد الرسم التخطيطي هو الخطوة الأولى في عملية التصميم بعد جمع المعلومات، ويعمل على إنشائها عادةً فريق تجربة المستخدم.

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

في الأخير، الشكل النهائي للنماذج الأولية هو النموذج الأولي الوظيفي القابل للعمل عليه، وهو إصدار قابل للنقر من النموذج المحاكي، قادر على محاكاة تجربة المستخدم الحقيقية إلى حدٍّ بعيد، وله أنواع مختلفة أيضًا:

• نموذج أولي للجدوى: يستخدم لمعرفة أفضل تقنية تناسب فكرة المنتَج من أجل تجنب المجازفة.
• نموذج أولي عالي الدقة hi-fi: يستخدم لجمع بيانات أداء المستخدم (مستوى الرضا، عدد المشاكل في كل جلسة، إلخ).
• نموذج أولي ببيانات حية: عندما تملأ النموذج الأولي ببيانات حقيقية بدلًا من بيانات العينة لجعل بيئة الاختبار صعبة التنبؤ بها.

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

مناهج إعداد النماذج الأولية

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

النمذجة الأولية سريعة الإقصاء

كما يشير الاسم، يكون النموذج الأولي هنا صالحًا للاستخدام لفترة قصيرة، مثلًا لدورة تطوير واحدة فقط، وخلال هذه الفترة يخضع هذا النموذج لبضعة دورات من التعديل والاختبار، وفي النهاية يُحال إلى التخلص منه. على سبيل المثال، النماذج الأولية الورقية تُعَد من النمط سريع الإقصاء، فبعد أن يقبل بها جميع الأطراف، يحين وقت بناء نموذج أولي جديد.

تساعد النماذج الأولية سريعة الإقصاء على جمع ملاحظات المستخدمين المبدئيين، التي تستخدم لاحقًا لإنشاء نموذج أولي وظيفي.

النمذجة الأولية التطورية

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

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

النمذجة الأولية التجميعية

تُستخدم هذه المنهجية عادةً لمنتجات المؤسسات الكبيرة، وتتضمن تجزئة المنتج إلى عدة أجزاء وإنشاء نموذج أولي لكل جزء على حدة. يجري اختبار كل نموذج أولي بشكل منفصل ويتم تحسينه قبل دمج النماذج الأولية الجزئية معًا لتشكيل النموذج الأولي المتكامل. ولضمان ملاءمة جميع الأجزاء لبعضها من ناحية المظهر والانطباع، يجب إعداد دليل إرشادي يوضح الأسلوب المتبع مسبقًا.

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

النمذجة الأولية الفائقة

تُستخدم هذه المنهجية تحديدًا في تطوير الويب، وتُقسَم إلى ثلاث مراحل وفقًا للطبقات الثلاثة لتطبيق الويب:

1. بناء رسوم تخطيطية ثابتة بلغة HTML من أجل طبقة العرض.
2. تحويل الرسوم التخطيطية بلغة HTML إلى نموذج أولي وظيفي من خلال ربطها بخدمات محاكية.
3. تطبيق الخدمات على النسخة النهائية من النموذج الأولي.

تسمح النمذجة الأولية الفائقة بعرض النموذج الأولي على المستخدمين في كل مستوى.

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

مراحل إعداد النماذج الأولية

يُعَد إنشاء النماذج الأولية عملًا تصميميًا، لذا يمكن التعامل معه مثل أي مشروع تصميم آخر، وذلك ابتداءً من جمع المعلومات حول ما يجب أن يتضمنه التصميم، وصولًا إلى اختبار مدى جودة تلبية التصميم النهائي لمتطلبات المستخدم. لنوضح المزيد من التفاصيل والنصائح فيما يلي.

مراحل إنشاء النماذج الأولية.

المرحلة الأولى: جمع المتطلبات

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

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

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

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

يمكنك البدء بتحديد القرارات التي ستتخذها بناءً على الإجابات التي ستحصل عليها، بعدها حدد عدد الإجابات التي ستحتاج إليها لاتخاذ القرار، كأن تقرر أنه إذا أبدى 15% على الأقل من المشاركين بالاستبيان اهتمامهم بميزة معينة، فسوف تضيف هذه الميزة إلى وثيقة المتطلبات.

• ملاحظات المستخدم: كما هو الحال في المقابلات، يجتمع محلل البيانات مع أحد المستخدمين في جلسة، لكنه في هذه المرة يتولى مراقبة أداء المستخدم لمهمة ما، حيث يُطلَب من المستخدم أن يؤدي المهمة بالطريقة التي ينفذها بها عادةً، ويسجل المحلل كل حدث بدقة، وفي بعض الأحيان يحدد عمليات معينة. يمكن في عملية جمع ملاحظات المستخدم أن تستعمَل تسجيلات الشاشة والفيديو أيضًا. مع ذلك، يمكن أن يتصرف المستخدم بطريقة غير طبيعية تحت المراقبة، وغالبًا ما يتطلب الأمر العديد من الجلسات من أجل التقاط جميع التفاصيل.

بعد جمع المعلومات من المستخدمين والأطراف المعنية، يراجع الأعضاء المسؤولون جميع التسجيلات ويختارون المتطلبات الأكثر تكرارًا، وتمثل هذه المرحلة انطلاقةً ممتازةً لإعداد النموذج الأولي.

المرحلة الثانية: إعداد تصميم سريع

تتضمن هذه المرحلة إنشاء أبسط نسخة من النموذج الأولي (الرسوم التخطيطية والنماذج المحاكية)، وهناك عدة طرائق لتصميم واجهة المستخدم UI:

• الرسم: يمكنك الرسم على دفتر أو على لوح أبيض موجود في المكتب أو رقميًا، وذلك باستخدام أدوات رسم أو خرائط ذهنية على الإنترنت. يُعَد الرسم أسرع طريقة لتمثيل أفكار واجهة المستخدم، وهو تمثيل مؤقت لتحسين الأفكار، لكنه ليس أفضل طريقة للتصميم، فهناك طرائق أكثر فعالية، ومع ذلك يبقى الرسم أنسب طريقة لتبادل الأفكار بسرعة.
  • الأدوات المستخدمة: Miro، Diagrams.net، Sketch.io، أدوات الرسم المادية.
• النماذج الورقية: وهي طريقة قديمة ولكنها مفضلة لدى المصممين، فالنماذج الأولية الورقية رخيصة الثمن ويمكن لأي شخص صنعها، كما أنها نشاط مثالي عندما يتعاون الفريق على إنجازه. تأخذ النماذج الأولية الورقية عادةً شكل رسوم تخطيطية، وتتضمن استخدام الطي والتمرير بالإضافة إلى تعدد الطبقات. تستغرق النماذج الورقية المعقدة وقتًا لإنجازها، ومع ذلك فالنتائج تكون تقريبية، مما يُشعِر المستخدمين بأريحية البوح بانتقاداتهم.
  • الأدوات المستخدمة:
  • printable prototype templates
  • phone stencils
  • أدوات الرسم المادية.

مقطع يوتيوب توضيحي:

أمثلة على تمرير العناصر في نموذج أولي ورقي.

من الأفضل تأجيل كل أشكال التصميم الجاد إلى المرحلة التالية.

المرحلة الثالثة: تطوير النموذج الأولي

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

• الرسوم التخطيطية القابلة للنقر: يتم إنشاؤها من خلال برمجيات الرسم التخطيطي، ويمكن استخدامها في اختبارات المحاكاة وسهولة الاستخدام. يمكن رفع الرسومات والنماذج الورقية التي أُعِدَّت مسبقًا إلى برنامج الرسم التخطيطي من أجل ربط الشاشات وإنشاء جميع العناصر رقميًا لتبدو بمظهر أفضل. ورغم أن إنشاء هذا النوع من النماذج الأولية سهل وسريع الإعداد، إلا أنه قد يتطلب الشرح والتوضيح، فقد لا يدرك المستخدمون أن هذا ليس هو الشكل النهائي.
  • الأدوات المستخدمة: مايكروسوفت باوربوينت، Balsamiq و Figma و Justinmind و Lucidchart و Mockflow وغيرها.
  • متى تُستخدَم؟ تستخدم الرسوم التخطيطية القابلة للنقر في المراحل المبكرة، عندما يتطلب الأمر اختبار إصدارات مختلفة من التصميم قبل اعتماد أحدها.
• النماذج المحاكية Mockups: وهي عبارة عن صور ثابتة لكن أكثر واقعية للمنتج النهائي، تسمح بتطبيق متطلبات الأطراف المعنية فيما يتعلق بالعلامة التجارية والألوان والخطوط والأيقونات والعناصر الأخرى. لا تحظى النماذج المحاكية بشعبية كبيرة، لأن الكثير من المصممين يقررون عدم إضاعة الوقت عليها والانتقال مباشرةً إلى إنشاء نماذج أولية عالية الدقة على أساس الرسوم التخطيطية، ومع ذلك فإن النماذج المحاكية مهمة جدًا لدراسة الانطباع العاطفي واختبار العناصر المرئية المهمة.
  • الأدوات المستخدمة: InVision، Sketch، Figma، Adobe XD، Framer.
  • متى تستخدَم؟ تستخدم النماذج المحاكية في التسويق والعروض التقديمية لربط الأطراف المعنية بالمنتج عاطفيًا قبل إنشاء النموذج الأولي.

إنشاء نموذج مُحاكٍ

• النماذج الأولية عالية الدقة: وهي التمثيل الأقرب للمنتج النهائي، وتسمح باختبار كيفية تفاعل الناس مع كل من العناصر المرئية للمنتج ومسار المستخدم، كما أنها الطريقة الوحيدة لاختبار الرسوم المتحركة والانتقالات والتفاعلات الصغيرة. بالإضافة إلى ذلك، فإن النموذج الأولي عالي الدقة يعطي الفريق فكرةً جيدةً عن الوقت والجهد اللازمين للتطبيق الفعلي للمنتج، لكنه من ناحية أخرى أصعب إنشاءً ويتطلب وقتًا أطول، كما أن إجراء إصلاحات عليه يستغرق وقتًا أطول مقارنةً بالرسوم التخطيطية. بالنسبة لإمكانية إجراء محاكاة في هذا النموذج الأولي فهي عالية جدًا، وذلك باستخدام بعض الأدوات التي تسمح بالوصول إلى بيانات حية أو حتى برمجة بسيطة.
  • الأدوات المستخدمة: Proto.io، Figma، Flinto، Framer، Principle، Invision.
  • متى تُستخدَم؟ تمثل النمذجة الأولية عالية الدقة المرحلة الأخيرة من التصميم، وتُجرى مباشرةً قبل الشروع بمرحلة التطوير من أجل تقييم سهولة استخدام المنتج، كما أنها وسيلة مساعدة لا يمكن الاستغناء عنها عند تقديم العروض والشروحات. يُنصح بعدم البدء بهندسة المنتج قبل إتمام إعداد النموذج الأولي والموافقة عليه، مما يساعد على تجنب الكثير من المشكلات اللاحقة غير المتوقعة.

مقطع يوتيوب توضيحي:

مثال عن نموذج أولي تفاعلي عالي الدقة

المرحلة الرابعة: اختبار النموذج الأولي وتحسينه

سواءً قررت الاكتفاء برسوم تخطيطية أو إعداد نموذج أولي نهائي، فإن الخطوة التالية هي عرض النموذج الأولي على الأطراف المعنية والمستخدمين لأخذ آرائهم. ومن أجل تحقيق ذلك، تحتاج إلى التواصل معهم عبر الإنترنت أو على أرض الواقع ليستخدموا النموذج الأولي.

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

يمكن إجراء ذلك وجهًا لوجه أو عبر مكالمة فيديو أو حتى بدون التواصل المباشر مع المستخدم. تتيح لك منصات اختبار المستخدم مثل Maze أو Lookback أو UserTesting إمكانية نشر نموذجك الأولي عبر الإنترنت، لتعمل هذه الأدوات على جمع البيانات اللازمة عن النقرات ومسارات المستخدم والأنماط.

تقرير اختبار المستخدم موضحًا الأداء الوظيفي.

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

المرحلة الخامسة: تنفيذ المنتج

يُعرَض النموذج الأولي المتفق عليه على فريق الهندسة لتبدأ بذلك عملية التطوير الطويلة والمعقدة، لكن دور فريق تجربة المستخدم UX وواجهة المستخدم UI لا ينتهي هنا، فوفقًا لمنهجية أجايل للتطوير، يجب اختبار كل جزء من المنظومة دوريًا وتكراره من أجل التحقق من سهولة استخدام المنتج الوظيفي الحقيقي، وهذا الاختبار يأتي بعد مقابلات وممارسات تقييم شبيهة بتلك التي تجرى أثناء النمذجة الأولية.

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

الخلاصة

النموذج الأولي هو القناة التي تمر عبرها الفكرة، فليس هناك وسيلة للتعبير للآخرين عن المنتج الذي في مخيلتك أفضل من بناء نموذج يحاكيه. من ناحية أخرى فإن النموذج الأولي يُعَد دليلًا تأكيديًا على أنك لا تتحدث عن عبث بل تعرف فكرتك جيدًا، نظرًا لأنك قد أعددتَ نموذجًا تمهيديًا يمثل بشكل تقريبي ما سيبدو عليه الشكل النهائي.

يُعَد إنشاء نموذج أولي أمرًا اعتياديًا وضروريًا في عمليات تصميم المنتج وتطويره، وهو من أهم الأشياء التي عليك فعلها إذا قررت طلب تمويل من جهةٍ ما لمشروعك، إذ يتطلب ذلك عرض نموذج أولي توضيحي يمثل فكرة منتجك بشفافية ووضوح، وهو أمر مهم من أجل كسب دعم طويل الأمد من الداعمين وتعزيز الثقة لديهم.

باختصار، النموذج الأولي هو المفتاح لترسيخ ثقتك بفكرتك وكسب ثقة الفريق والأطراف المعنية والمورّدين، فضلًا عن بناء منتجات رائعة دون مجازفات أو مخاطر.

ترجمة -وبتصرّف- للمقال Prototyping, Explained: Why and How to Build a Sample Version of a Product.

اقرأ أيضًا

• المرحلة الرابعة في عملية التفكير التصميمي: مرحلة بناء النماذج الأولية
• الفوائد العملية لبناء النماذج الأولية
• تصميم النماذج الأولية للواجهات الرسومية: نصائح للتصاميم المتجاوبة والموجهة للأجهزة المحمولة

ربما تُصادف المسمَّيَين الوظيفيَّين لمصمم تجربة المستخدم UX ومصمم واجهة المستخدم UI فتعتقد أنهما مترادفان، ورغم وجود بعض التداخل بينهما، إلا أنهما في الواقع مجالان مستقلان عن بعضهما.

يشار إلى تجربة المستخدم اختصارًا بـ UX، ويُعنى فريق تجربة المستخدم بدراسة كيفية تفاعل المستخدمين مع المنتج أو الخدمة بهدف فهم احتياجات المستخدمين، وهذه الدراسات من شأنها مساعدة المصممين على تقديم منتجات فعالة وبديهية يرغب الناس فعليًا باستخدامها؛ أما واجهة المستخدم فيشار إليها اختصارًا بـ UI، وهي تهتم بالشاشات والأيقونات والأزرار والعناصر البصرية والواجهات في تجربة المستخدم. سنتحدث في هذا المقال عن المجالين كليهما من خلال تسليط الضوء على المواضيع التالية:

• ما المقصود بكل من تجربة المستخدم UX وواجهة المستخدم UI في التصميم؟
• ما هي أوجه الاختلاف بين تصميم تجربة المستخدم وتصميم واجهة المستخدم؟
• كيف ينسجم العمل بين تصميم تجربة المستخدم وتصميم واجهة المستخدم؟
• كيف تختار المسار الوظيفي المناسب لك بين تصميم تجربة المستخدم وتصميم واجهة المستخدم؟

ما هو تصميم تجربة المستخدم UX؟

يهدف مصمم تجربة المستخدم إلى إنشاء منتجات ذات تجارب استخدام ملائمة ومُجدية وسهلة وممتعة في الوقت نفسه، وهو ينظر إلى المنتج نظرةً شموليةً ويركز على تلبية احتياجات المستخدم.

يلجأ مصممو تجربة المستخدم في العادة إلى عملية تدعى التصميم المتمحور حول المستخدم، وتضمن ممارسات تصميم تجربة المستخدم تقديم منتجات سهلة الاستخدام وممتعة. لا شك بأنك قد عانيت يومًا ما من بيروقراطية الإجراءات في منتجٍ أو خدمةٍ ما وشعرت بالإحباط والاستياء حيال ذلك؛ تخيل أن ممارسات تصميم تجربة المستخدم يمكن أن تحول حتى ذلك النوع من التجارب إلى تجارب ممتعة!

وتمامًا كما يعمل المصمم الداخلي والمهندس المعماري على إنشاء مساحات مادية مريحة يسهُل التنقل فيها، يعمل مصمم تجربة المستخدم عملًا مشابهًا لكن على مساحاتٍ رقمية. وسعيًا لتقديم أفضل تجربة استخدام، يدرس مصمم تجربة المستخدم الحالة التي يجري استخدام المنتج فيها (مثلًا هل يستخدم الناس المنتج وهم يتحركون؟). يعمل مصمم تجربة المستخدم أيضًا على التصميم وفقًا للجهاز الذي يُستخدَم عليه المنتج والتوقيت الذي يزداد استخدام المنتج فيه.

تُعَد كل من سهولة الوصول والتسلسل الهرمي للمعلومات ومسارات التنقل جزءًا من تجربة المستخدم، وتتطلب تعاونًا متكررًا مع مصممي واجهة المستخدم لضمان ملاءمة المنتج لأكبر قدر ممكن من المستخدمين. الهدف هو تقليل "الاحتكاك"، وهو مصطلح يشير إلى الصعوبات والعقبات غير الضرورية التي تواجه الناس عند استخدام المنتج.

ما هو تصميم واجهة المستخدم UI؟

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

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

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

أمثلة عن أوجه الاختلاف بين تصميم تجربة المستخدم وتصميم واجهة المستخدم

تجربة المستخدم هي التجربة الكلّية والشاملة لجميع التفاصيل، وتتضمن كل ما يراه المستخدم أو يشعر به، بما في ذلك المشكلة التي يحاول المنتج حلها والمكان الذي يُستخدَم فيه المنتج؛ أما واجهة المستخدم فتقتصر على الشاشة والأزرار والعناصر الأخرى التي تشكّل الواجهة.

يوضح الخبيران في تجربة المستخدم دون نورمان Don Norman وجاكوب نيلسن Jakob Nielsen الاختلاف بين تجربة المستخدم وواجهة المستخدم من خلال هذا المثال:

اقتباس

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

من اللحظة التي تخطو بها إلى داخل المتجر إلى اللحظة التي تخرج بها من المتجر حاملًا لمشترياتك، فإنك ضمن تجربة المستخدم الخاصة بك في هذا المتجر، وكلُّ ما تراه مصمَّمٌ بالطريقة التي تراها لغايةٍ ما، من أبعاد الممر إلى ترتيب الرفوف وحتى درجة الحرارة، ويشكّل كل ذلك معًا تجربة المستخدم.

إذا ذهبت للتسوق من المتجر المعتاد، لكنك اخترت الدفع الذاتي بدلًا من الدفع عبر محاسب الزبائن (الكاشيير)، فإن الواجهة التي تستخدمها لتسجيل مشترياتك والدفع هي جزءٌ من واجهة المستخدم.

باختصار، تجربة المستخدم شاملةٌ لواجهة المستخدم، وواجهة المستخدم جزءٌ من تجربة المستخدم.

يمثل التصميم البصري قمةَ الجبل الجليدي، وهو المظهر الخارجي من تجربة المستخدم، وتأتي تحته دعائم أخرى تشمل الهيكل والبنية والمجال والإستراتيجية. تؤثر هذه المستويات على بعضها البعض، ولا يمكن أن تكون مستقلةً بأي شكلٍ من الأشكال. على سبيل المثال، يمكن أن يؤثر أي قرار متعلق بالمظهر الخارجي على المستويات الأخرى؛ إضافةً إلى أنه عندما تبرز أية مشكلة أو فرصة جديدة فإن ذلك يمكن أن يؤثر على التجربة، فإذا واجه الفريق تحدياتٍ تقنية أو قيودًا على الميزانية مثلًا أثناء التطوير، فقد يتعين عليهم إعادة النظر ببعض قرارات التصميم.

إذا كان تطبيق المتجر موجودًا على هاتفك المحمول أو زرتَ الموقع الإلكتروني للمتجر على الإنترنت، فإن ذلك يُعَد جزءًا من تجربة المستخدم، ولتكتمل متعة التجربة، يجب أن يتفاعل المستخدم مع الواجهة.

تصميم تجربة المستخدم هو المجال المسؤول عن اتخاذ القرار بشأن الميزات التي سيتضمنها التطبيق: هل سيتضمن مثلًا برنامجَ ولاءٍ يُكسِب المستخدمين نقاطًا مقابل كل عملية شراء؟ وهل سيكون المستخدم قادرًا على تتبع النقاط على التطبيق؟ ربما يسمح لك التطبيق بالتسوق عبره أو رؤية العروض الحالية، وكل ذلك يندرج ضمن تجربة المستخدم! من ناحية أخرى، اتخاذ القرارات بشأن كل من نمط الخط والتخطيط والأيقونات والفراغات والأنماط البصرية يقع على عاتق تصميم واجهة المستخدم.

تُعَد تجربة المستخدم أكثر تجرُّدًا، وهي تُعنى ببيئة المستخدم ومزاجه وحالة استخدامه، في حين أن واجهة المستخدم ملموسةٌ أكثر، إذ يتفاعل المستخدم مباشرةً مع الواجهة.

يتضمن الجدول التالي أهم أوجه الاختلاف بين تصميم تجربة المستخدم وتصميم واجهة المستخدم:

يمكن اختصار أهم الفروقات بين تجربة المستخدم وواجهة المستخدم بالهدف من كل منهما:

• يهدف تصميم تجربة المستخدم إلى تحديد مشاكل المستخدم وحلها.
• يهدف تصميم واجهة المستخدم إلى إنشاء واجهات بديهية جذابة وتفاعلية.

بصورة عامة، يتولى مصممو تجربة المستخدم إنجاز المراحل الأولى من عملية تطوير المنتج، ثم يأتي بعدها دور مصممي واجهة المستخدم؛ فيرسم مصممو تجربة المستخدم الهيكل العام لرحلة المستخدم، ثم يعمل مصممو واجهة المستخدم على إنشاء العناصر البصرية والتفاعلية.

كيف ينسجم العمل بين تصميم تجربة المستخدم وتصميم واجهة المستخدم؟

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

لتوضيح كيف ينسجم العمل بين تصميم تجربة المستخدم وتصميم واجهة المستخدم، لنلقِ نظرةً على تطبيق شازام Shazam، وهو تطبيق يتعرف على الموسيقى المشغَّلة في محيطك، وهو بذلك يحل مسألةً مهمة يمكن أن يتعرض لها الناس في حياتهم، فكم من مرة سمعت أغنيةً جميلةً على الراديو أو أثناء التسوق أو في المطعم ولم تتمكن من معرفة اسمها؟ تتولى تجربة المستخدم لهذا التطبيق حل هذه المشكلة بالتحديد.

لا تقتصر مزايا هذا المنتج على التعرف على الأغنية، بل يمكِّنك أيضًا من حفظها من أجل الاستماع إليها لاحقًا، وذلك من خلال ارتباطه مع تطبيقات بث الموسيقى مثل آبل ميوزك Apple Music أو سبوتيفاي Spotify، وإعداد قائمة تشغيل تتضمن جميع المقاطع التي بحثتَ عنها من خلاله. يتمتع شازام بواجهة مستخدم بسيطة وواضحة، لأن هذا ما يحتاج إليه المستخدم.

تخيل أنك شغلت الراديو للتو واستمعت إلى أغنية جميلة تكاد تنتهي، لديك فقط بضع ثوانٍ لإخراج هاتفك المحمول، وهذي هي بالتحديد المشكلة التي يعالجها هذا التطبيق، ولذلك فإن له واجهةً مختصرةً تقتصر على زر واحد كبير له مؤثر حركي ليرشد المستخدم إلى الضغط عليه، مع عبارة "انقر للتسجيل عبر شازام".

تندرج كل من المؤثرات الحركية والأيقونة والنص ضمن تصميم واجهة المستخدم، وهي تؤثر إيجابيًا على تجربة المستخدم. يوضح هذا المثال كيف يجب أن ينسجم العمل بين تجربة المستخدم وواجهة المستخدم.

كيف تختار المسار الوظيفي المناسب لك بين تصميم تجربة المستخدم وتصميم واجهة المستخدم؟

نظرًا لوجود تداخل بين هذين المجالين، فإن الكثير من إعلانات التوظيف تطلب مصممي UX/UI، أي كلا المجالين معًا، فإذا كنت تعمل بالأصل مصممًا لتجربة المستخدم، فمن المفيد لك أن تتعلم بعض مهارات تصميم واجهة المستخدم، خصوصًا من أجل المشاريع المحدودة بالوقت والموارد؛ لكن من المفترض في الحالة المثالية أن يكون هذان العملان منفصلَين، مع وجود تعاون بين مصمم تجربة المستخدم ومصمم واجهة المستخدم.

لا شك بأن التمتع بمهارات كل من تصميم تجربة المستخدم UX وتصميم واجهة المستخدم UI أمرٌ مفيد، لكن ليس عليك أن تحترف المجالين معًا. اتخِذ قرارًا بشأن المسار الذي ترغب بسلوكه، وركز على بناء مهارات وتجارب تتعلق بهذا المسار، ومن المرجح أن تكتسب أثناء ذلك بعض مهارات المسار الآخر نظرًا لتداخلهما. يُعَد كل من تصميم تجربة المستخدم وتصميم واجهة المستخدم من الوظائف عالية الطلب، كما أنها عادةً عالية الأجور، لذلك فهي مسارات وظيفية تستحق التفكير بها.

لنتحدث قليلًا عن المسؤوليات التي تقع على عاتق كل من مصمم تجربة المستخدم ومصمم واجهة المستخدم، للمساعدة على اتخاذ القرار بشأن الوظيفة المناسبة على ضوء هذه المعلومات. فيما يلي مقارنة بين المسؤوليات المترتبة في هذه الوظائف:

المهارات الناعمة اللازمة لكل من المجالين هي نفسها تقريبًا، وهي مفيدة في كلتَي الوظيفتين على حدٍّ سواء، أما المهارات الصلبة فهي أكثر اختلافًا بينهما.

اقتباس

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

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

تصميم واجهة المستخدم UI

مما يجعل تصميم تجربة المستخدم وواجهة المستخدم وظيفتَين جذابتَين للغاية هو أنهما تنطويان على الكثير من المهارات المشتركة مع الوظائف الأخرى، ومنها:

• تصميم الرسوميات.
• إدارة المشاريع.
• إجراء الأبحاث.
• التسويق.
• خدمة العملاء.

ماذا يفعل مصمم تجربة المستخدم UX في الواقع؟

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

ماذا يفعل مصمم واجهة المستخدم UI في الواقع؟

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

أي من المجالين ذو أجر أعلى؟

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

بصورة عامة، يحصل مصمم تجربة المستخدم UX ومصمم واجهة المستخدم UI على أجور متقاربة، لذا يبقى القرار معتمدًا على المجال الذي تفضله، وكما ذكرنا سابقًا، قد تصادف وظائف لمصمم UX/UI معًا، وبالتالي من الممكن أن تجد نفسك تؤدي الوظيفتين معًا في الوقت نفسه.

الخلاصة

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

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

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

ترجمة -وبتصرّف- للمقال ?UX vs UI: What’s the Difference لصاحبته Molly Fitz-Patrick.

اقرأ أيضًا

• تصميم واجهة المستخدم وتجربة المستخدم UI / UX
• التوعية بأهمية تصميم تجربة المستخدم
• دليلك الشامل لفهم المسارات المهنية لمجال تجربة المستخدم
• مبادئ تصميم واجهة المستخدم 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.

اقرأ أيضًا

• مقدمة إلى العناصر الستَّة للتصميم
• عملية التصميم ذات الخطوات السبعة
• مبادئ تصميم الرسوميات

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

يشير جوش كلارك مؤلف كتاب "تصميم تطبيقات آيفون رائعة تستحق النقر Tapworthy: Designing Great iPhone Apps" إلى وجود ثلاثة أنماط للتفكير تشغل أذهان مستخدمي الهاتف المحمول:

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

يمكن أن نضيف إلى هذه القائمة أصنافًا أخرى ظهرت بعد تأليف جوش كتابه في مرحلة مبكرة من عصر الهواتف الذكية:

• التفاعل المطوَّل: عندما يتفاعل المستخدم مع المحتوى لفترة طويلة من خلال عدد لا متناهٍ من حركات التمرير والنقر والانتقال.
• الانتباه المتقطع: عندما تجذب الإشعارات المستخدم ليتفقد النشاطات أو الحالات الجديدة أو أي شيء آخر. لاحظ أن هذا لا يُعَد دائمًا أمرًا إيجابيًا، فالإشعارات تثير انتباه المستخدمين للعودة بلا سبب مستعجَل، وذلك بهدف تلبية احتياجات التطبيق من مقاييس الارتباط والتفاعل.

تحت مسمى "احترام الأولويات"، تقدم شركة مايكروسوفت مجموعةً من الإرشادات التي تخصّ الصنف الأخير، وهي تضم الاتجاهات الخمسة التالية:

1. فهم الأهمية والوسيلة: للتنبيهات أشكال مختلفة، مثل النوافذ المنبثقة والأضواء الساطعة والأصوات والاهتزازات، لذا فكر بمدى الحاجة إلى كل منها، واجعل درجة التنبيه متناسبةً مع أهمية الإشعار ودرجة إلحاحه.
2. التكيف مع سلوك العميل: فطريقة تفاعل العميل مع أية ميزة أو جزء من التجربة تتغير مع الوقت.
3. التكيف مع السياق: يركز كل منا على المعلومات ويرتبها ويستوعبها بطريقته الخاصة، وعندما نواجه معلومات مختلفة، فإن تفضيلاتنا وإمكانياتنا يمكن أن تتغير بسرعة وفقًا للسياق، ولهذا السبب تتغير طريقة تفاعل الشخص نفسه مع كل ميزة أو جزء من التجربة، مما يتطلب من المصمم معرفة طريقة تفاعل الناس من أجل التكيف معها.
4. السماح للعميل بالتكيف: يجب أن تكون التجارب الشخصية مناسبةً لجميع الأفراد، وفي هذا الإطار فإن الميزات القابلة للتخصيص تساعد العميل على الشعور بالقوة والسيطرة على جهازه. يصعب اليوم ضبط العديد من التنبيهات على الحواسيب أو تعطيلها، وقد يزداد الأمر سوءًا عندما تصل إشعارات من تطبيقات متعددة في الوقت نفسه. هنا، سيكون الحل الأفضل هو تمكين المستخدم من التحكم بنوع الإشعارات وتوقيتها.
5. تقليل التكلفة الذهنية: تتخطى التجارب حدود الشاشة لتشغل حواس الإنسان وتستولي عليها، إذ تقدم كل ميزة تفاعلية نقطة احتكاك ممكنة جديدة.

الاعتبارات الأساسية للتصميم من أجل الهاتف المحمول

لنسلط الضوء على بعض الجوانب الخاصة التي يجب الانتباه لها عند التصميم للهاتف المحمول.

الشاشات الصغيرة

لا تتيح شاشة الهاتف المحمول مساحةً كبيرة كما في الحاسوب الشخصي أو المحمول، لذا يجب مراعاة الفرق في أحجام الشاشات عند التصميم. يُنصَح باتباع طريقة "الهاتف المحمول أولًا" في تصميم الويب، والتي تعني البدء بالتصميم لمنصات الهواتف المحمولة الأصغر حجمًا ثم زيادة التعقيد أكثر فأكثر وفقًا للأجهزة الأخرى.

تساعد الخطوات التالية على تسهيل عملك:

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

إعطاء الأولوية للمهمة الأساسية

يضمن اتباع أسلوب "المهمة أولًا" بقاء المهمة الرئيسية في الواجهة، وهو أمر أشبه بمقياس لمدى إلحاح المهمة وضرورتها.

يُعَد تطبيق شازام Shazam مثالًا ممتازًا عن كيفية إعطاء الأولوية للمهمة الرئيسية، وهو تطبيق يحدد الموسيقا المشغَّلة في محيطك، مما يساهم في حل مشكلة قد يمر بها الكثير من الناس، فكم من مرة سمعت أغنيةً جميلةً على الراديو أو في متجر أو مكان آخر، لكنك لم تتمكن من معرفة اسمها؟ غالبًا لن يكون لديك وقت طويل لتتنقل في تطبيق شازام من أجل تحديد الأغنية، لكن التطبيق يعالج هذه المشكلة من خلال اختصار واجهته لتحتوي على زر واحد كبير على الشاشة مع تحريكه بطريقة توضح للمستخدم أنه قابل للنقر عليه، بالإضافة إلى عبارة "انقر على شازام"؛ وبذلك تتضح مباشرةً المهمة الرئيسية للتطبيق بالنسبة لأي شخص يستخدمه.

يجب الاهتمام بمدى إلحاح المهمة وأولويتها، كما هو الحال في زر تطبيق شازام.

تبسيط التنقل

لا توفر لوحات الأزرار وشاشات اللمس تنقلًا دقيقًا قياسًا بدقة الفأرة في الحاسوب، لذا حاول:

• إعطاء أولوية التنقل للمهام الأكثر أهمية.
• تقليل الحاجة للتنقل.
• التحقق من دقة مسميات التنقل ووضوحها.
• توفير مفاتيح اختصار من أجل الوصول للميزات المختلفة.
• ضرورة تخصيص 10 ملم على الأقل لكل زر.

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

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

لا يعني ذلك أن رمز قائمة هامبرغر لا ضرورة له، فله استخدامات مهمة خصوصًا في ألعاب الجوال، لكن يجب إدراك مزاياه ومساوئه.

لا تنسَ إجراء اختبار على المستخدمين للتحقق من إمكانية الوصول إلى قائمة الهاتف المحمول.

اختصار المحتوى قدر الإمكان

• لا ترهق المستخدمين واحرص على مراعاة مساحة الشاشة الصغيرة والاكتفاء بالحد الأدنى من المحتوى.
• تحقق من كون المحتوى مدعومًا على جميع الأجهزة المتوفرة، وإلا فلا تستخدمه.
• اجعل كلًا من وصف الصفحة ونص الإعلان القصير دقيقًا ومركّزًا على الفعل.

تقليل البيانات المطلوبة من المستخدمين

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

• تقديم بدائل لآلية الإدخال (فيديو أو صوت أو غيره).
• تقليل المدخلات المطلوبة في النماذج (يمكنك دائمًا طلب المزيد من البيانات من المستخدم عندما يدخل من الحاسوب).
• السماح باستمرار وضع تسجيل الدخول (معظم الهواتف الذكية محمية بكلمة مرور أو بصمة إصبع، مما يجعلها أقل عرضةً للخطر من الحواسيب).
• تقليل الحاجة للتمرير إلى الحد الأدنى، وجعل المستخدم بحاجة للتمرير باتجاه واحد فقط.

مراعاة مشكلة عدم استقرار اتصال الهاتف المحمول بالإنترنت

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

• الاحتفاظ بالبيانات وعدم فقدانها عند انقطاع الإنترنت.
• تقليل حجم الصفحة لتسريع تحميلها.
• التخلص من شبكات الإعلانات والنوافذ المنبثقة على مواقع الهاتف المحمول، والتي تستهلك كمية هائلة من النطاق الترددي والبيانات.
• تبسيط الصور قدر الإمكان وتصغير حجمها.
• تقليل عدد الصور المدمجة قدر الإمكان لتسريع زمن التحميل.

تكامل التجارب واستمرارها بين الأجهزة

عندما يبدل المستخدم بين الهاتف المحمول والحاسوب فإنه يتوقع الحصول على نفس تجربة الاستخدام، ولتحقيق ذلك يجب:

• الحفاظ على الاستمرارية؛ فإذا دخل المستخدم إلى المتجر الإلكتروني من الهاتف المحمول، فعندها يجب أن يكون قادرًا على تتبع الطلبات وإجراء عمليات شراء بنفس طريقة إجرائها على الحاسوب.
• الحفاظ على التوافق؛ وذلك من خلال تقديم خيار التبديل بين الهاتف المحمول والحاسوب حسب الرغبة.
• توحيد العلامة التجارية؛ وهذا من خلال تشابه المظهر والانطباع بين الأجهزة المختلفة.

الخلاصة

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

ترجمة -وبتصرّف- للمقال Simple Guidelines When You Design for Mobile.

اقرأ أيضًا

• تصميم واجهة المستخدم وتجربة المستخدم UI / UX
• الدليل الشامل لتصميم تجربة المستخدم UX
• دليلك الشامل خطوة بخطوة لاحتراف تصميم تجربة المستخدم UX
• النسخة الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX)

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

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

هل تحتاج إلى هاتف محمول لتناول وجبتك في المطعم؟

في أوائل عام 2014، ظهرت قصة عن إحدى المطاعم في منطقة مانهاتن في مقاطعة نيويورك، حيث تلقى المطعم عدة شكاوى حول بطء الخدمة في المطعم، لذا قرر مسؤولو المطعم معرفة السبب الكامن وراء هذا التأخير، فأجروا مقارنةً بين تسجيلات الكاميرا عام 2014 وتسجيلات الكاميرا عام 2004.

ومن خلال هذه المقارنة المستندة إلى مراقبة تسجيلات الكاميرا، اكتشف مسؤولو المطعم أن متوسط المدة المستغرقة في تناول الوجبة عام 2004 كان 65 دقيقةً، بينما ارتفعت هذه المدة لتصل إلى 115 دقيقةً عام 2014، أي زادت مدة تناول الوجبة 50 دقيقةً خلال عشر سنوات فقط.

ونتيجةً لذلك، أخذ مسؤولو المطعم على عاتقهم مهمة معرفة سبب التأخير في تناول الوجبات، ليحددوا على من يقع اللوم وما سبب ذلك، فلاحظوا أن استخدام العملاء المهووس للهواتف المحمولة هو الذي أدى إلى إطالة أوقات الوجبات، وإليك فيما يلي مقارنة بين أحداث تناول وجبة الطعام عام 2004 وعام 2014:

أحداث تناول وجبة الطعام عام 2004

1. يدخل العملاء إلى المطعم.
2. يجلسون على الطاولات وتُقدَّم لهم قوائم المأكولات.
3. في المتوسط، يقضي العملاء 8 دقائق قبل إغلاق قائمة المأكولات والاستعداد للطلب.
4. يأتي النادل على الفور تقريبًا لأخذ الطلب.
5. يُقدَّم لهم الطعام في غضون 6 دقائق تقريبًا، مع ملاحظة أنه كلما كان الطبق أكثر تعقيدًا، استغرق وقتًا أطول حتى يجهز.
6. يراقب النُّدُل الطاولات حتى يتمكنوا من الاستجابة بسرعة إذا احتاج العميل إلى شيء ما.
7. بعد انتهاء العملاء من تناول الوجبات، تُقدَّم لهم الفواتير على الطاولات، ثم يغادر العملاء في غضون 5 دقائق.

بالتالي كان متوسط الوقت المستغرق من دخول العملاء إلى المطعم حتى مغادرته هو ساعة وخمس دقائق.

أحداث تناول وجبة الطعام عام 2014

1. يدخل العملاء إلى المطعم.
2. يجلسون على الطاولات وتُقدَّم لهم قوائم المأكولات.
3. يُخرج العملاء هواتفهم حتى قبل فتح القوائم، إذ يلتقط بعضهم صورًا بينما يفعل الآخرون أشياءً أخرى على هواتفهم.
4. 7 من كل 45 عميلًا ينادون إلى النُدُل الذين يأتون إليهم على الفور، ويطلبون منهم المساعدة في الاتصال بشبكة Wi-Fi، ويأخذون 5 دقائق في المتوسط من وقت النادل.
5. يعود النُدُل إلى الطاولات ليروا ما يرغب العملاء في طلبه.
6. في معظم الحالات، يتجاهل العملاء فتح القوائم ويطلبون من النُدُل العودة لاحقًا.
7. ثم يفتح العملاء قوائم المأكولات بالمزامنة مع استخدام هواتفهم.
8. يعود النادل ليسأل العملاء عمّا إذا كانوا مستعدين للطلب أو لديهم أي أسئلة.
9. يطلب العملاء المزيد من الوقت.
10. إجمالي متوسط الوقت المستغرق من وقت جلوس العميل إلى أن قدم طلبًا هو 21 دقيقة.
11. يُقدَّم لهم الطعام في غضون 6 دقائق تقريبًا، مع ملاحظة أنه كلما كان الطبق أكثر تعقيدًا، استغرق وقتًا أطول حتى يجهز.
12. من بين كل 45 عميلًا، يقضي 26 عميلًا ما متوسطه 3 دقائق في التقاط صور للطعام.
13. من بين هؤلاء الـ 45 عميلًا، يلتقط 14 منهم صورًا لبعضهم البعض مع الطعام أمامهم أو خلال تناوله، ويستغرق ذلك 4 دقائق في المتوسط، إذ يجب عليهم مراجعة الصور وإعادة التقاطها في بعض الأحيان.
14. من بين كل 45 عميلًا، يرسل 9 منهم الطعام لإعادة تسخينه.
15. من بين كل 45 عميلًا، يطلب 27 منهم من النادل التقاط صورة جماعية لهم، كما يطلب 14 منهم إعادة التقاط الصور لأنهم غير راضين عن الصورة الأولى، وتستغرق هذه العملية في المتوسط 5 دقائق إضافية، وتمنع النادل من خدمة طاولات أخرى.
16. يكون العملاء في معظم الحالات مشغولين في هواتفهم، لذا يستغرق الأمر وسطيًا 20 دقيقةً إضافيةً من وقت الانتهاء من تناول الطعام حتى طلب الحساب.
17. بمجرد ظهور الفاتورة أمامهم، يستغرق الأمر 15 دقيقةً قبل أن يدفعوا فاتورتهم ويغادروا المطعم.
18. من بين كل 45 عميلًا، يصطدم 8 عملاء بالموظفين أو بعملاء آخرين خلال دخولهم إلى المطعم أو خروجهم منه، وذلك بسبب انشغالهم بإرسال الرسائل النصية.

أي كان متوسط الوقت المستغرق من دخول العملاء إلى المطعم حتى مغادرته هو ساعتان إلا خمس دقائق.

هل تبدو هذه التجربة وكأنها مألوفة؟ فكر في آخر مرة ذهبت فيها إلى مطعم مع بعض الأصدقاء، هل كنتم تستخدمون هواتفكم وتلتقطون الصور؟ حاول في المرة القادمة التي تذهب فيها مع أصدقائك إلى مطعم أن تراقب سلوكهم وتصرفاتهم، وتحقق مما يفعله الآخرون؛ وأين ينصب تركيزهم.

تقسيم حياتنا إلى لحظات دقيقة

في أوائل عام 2015، أصدرت شركة جوجل Google مجموعةً من المقالات حول ما يسمونه "اللحظات الدقيقة"، ومن الأمثلة على هذه اللحظات الدقيقة هي قصة المطعم السابق المليئة باللحظات الدقيقة، إذ يحصل خلالها المستخدمون على هواتفهم لإنجاز مهمة محددة. ويمكن تصنيف معظم اللحظات الدقيقة تحت عنوان "أريد المشاركة" الذي يشغل حاليًا الكثير من حياتنا اليومية.

دعنا نرى تصنيف اللحظات الدقيقة الذي حددته جوجل، ويمكنك كمصمم منتج أن تضيف أنواعًا جديدةً.

لحظات "أريد أن أعرف"

تخيل أنك أنت تجلس في المنزل في إحدى الأمسيات اللطيفة، ماذا ستفعل الآن؟ أنت تشعر وكأنك تريد مشاهدة شيء ما، لذا فإنك تريد الوصول إلى المكان الذي يمكنك من خلاله اختيار الفيلم الذي تريد مشاهدته. تريد الآن أن تعرف الإجابة أكثر من أي شيء آخر، لذلك اتصلت بشبكة الإنترنت، ثم فكرت باستخدام محرك البحث جوجل، وبدأت تبحث وتتصفح لاكتشاف الأفلام الجميلة؛ إضافةً إلى معرفة الأفلام غير الجميلة من خلال قراءة تعليقات المشاهدين الآخرين، أي أنك تريد أن تعرف الفيلم الأنسب لهذه الأمسية اللطيفة. وهذه كانت إحدى الأمثلة عن لحظات "أريد أن أعرف".

لحظات "أريد أن أذهب"

لقد قررت مشاهدة إحدى أفلام الأكشن الرائجة مؤخرًا، لكن أين؟ هنا تريد أن تحدد الأماكن القريبة منك.

لحظات "لحظات أريد أن أفعل"

قد ترغب في التعرف على عملية أو خدمة أو منتج، لذا يمكنك استخدام اليوتيوب YouTube لمعرفة ما يقوله الآخرون عن المنتجات، أو إذا أردت فقط معرفة كيفية القيام بوظيفة ما، فهنا تريد أن تتعلم كيفية القيام بشيء ما. فعلى سبيل المثال، إذا لم تعمل دراجتك النارية وأردت أن تعرف ما مشكلتها، فيمكن لليوتيوب أن يقدم لك ما تحتاج إليه.

لحظات "أريد أن أشتري"

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

في ملاحظة مماثلة، قدم جوش كلارك Josh Clark مؤلف كتاب "تصميم تطبيقات آيفون رائعة Designing Great iPhone Apps" ثلاث فئات للوصول إلى الإنترنت عبر الهاتف المحمول، وهم:

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

هناك تداخل جميل بين كل من تصنيف جوجل وتصنيف جوش كلارك Josh Clark، حيث ركزت جوجل على الغرض من المهمة، في حين ركز جوش كلارك على السياق.

العلاقة بين اللحظات الدقيقة وتصميم تجربة المستخدم UX

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

من جملة الأمور التي يجب عليك مراعاتها هي اللحظات الدقيقة، إذ يجب أن تفهمها جيدًا وتأخذها في الحسبان خلال التصميم لرحلة العميل. فعلى سبيل المثال، يعرض تطبيق Postmates Delivery للمستخدمين قائمةً بالأشياء التي يمكنهم شراؤها، والتي تمثل لحظات "أريد أن أعرف" أو "أشعر بالملل"، كما يُظهر لهم الأماكن المحلية التي يمكنهم استلام الوجبات السريعة منها، وهي تمثل لحظات "أريد الذهاب" أو "أنا هنا، كما يتيح للأشخاص إمكانية التسوق وشراء المنتجات من البقالة، وهي تمثل لحظات "أريد أن أشتري" أو "أنا أقوم بمهام صغيرة".

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

فيما بعد، تصل رحلة المستخدمين إلى مرحلة تقييم الخيارات المتاحة والمقارنة فيما بينها، أما المرحلة الثالثة، فهي عندما يشتري المستخدمون إحدى المنتجات فعلًا؛ وتأتي المرحلة الأخيرة بعد مرحلة الشراء، والتي يسميها البعض "لحظة الحقيقة المطلقة"، إذ يمكن تعريف هذه اللحظة على أنها اللحظة التي ينشئ فيها العميل محتوى بِناءً على تجربته مع هذا المنتج أو الخدمة، وينشره في مجتمعه ليجده الآخرون.

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

1. رسم خريطة للحظات التي يعيشها المستخدمون.
2. فهم احتياجات العملاء في كل لحظة.
3. فهم سياق الاستخدام لتقديم تجربة جيدة.
4. تحسين خطوات الرحلة.
5. قياس كل لحظة مهمة.

بم تذكرك الاقتراحات السابقة؟ كما هو الحال دائمًا، يتعلق الأمر بوضع تجربة المستخدم في مقدمة إستراتيجية العمل، وذلك من خلال البدء باحتياجات المستخدمين ومعرفة سياق استخدامهم للمنتج، والانطلاق من واقعهم وتجاربهم.

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

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

في الختام

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

لقد أدى استخدام الهواتف الذكية إلى تغيير طريقة معالجتنا للواقع من حولنا. ففي الماضي، كانت الحياة مقسمةً إلى أجزاء طويلة نسبيًا؛ أما في يومنا الحالي، فيمكن تقسيم تفسيرنا للواقع إلى لحظات دقيقة، أو ارتباطات سريعة وموجهة نحو المهام.

حددت جوجل مفهوم اللحظات الدقيقة في وقت مبكر من عام 2015، مشيرةً إلى أن الهواتف الذكية غالبًا ما تكون الشاشة الأولى التي يلجأ إليها المستخدمون، وقد حددت جوجل على وجه التحديد أربع لحظات دقيقة:

1. أريد أن أعرف.
2. أريد أن أذهب.
3. أريد أن أفعل.
4. أريد أن أشتري.

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

ترجمة -وبتصرّف- للمقال Designing for Micro-Moments لصاحبه Muriel Garreta Domingo.

اقرأ أيضًا

• تصميم التفاعل IxD وتصميم تجربة المستخدم UX: أوجه التشابه والاختلاف
• رسم مخطط لتصميم تجربة المستخدم UX بخطوات سهلة
• كيف تقيم تجربة المستخدم (UX) في خمس دقائق
• مستقبل تصميم واجهة المستخدم UI: الجيل القادم من أدوات تصميم واجهة المستخدم
• طريقة اعتماد نهج تكراري لتصميم واجهة المستخدم UI

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

في أوائل القرن العشرين، شرع عالم النفس النمساوي المجري ماكس فيرتهايمر Max Wertheimer في اكتشاف السبب الكامن وراء كيفية إدراك البشر للواقع، وقد توصل إلى نتيجة مذهلة، وهي أن العالم من حولنا ليس مجرد مجموعة من الأشياء الفردية، إنما تُولد تصوراتنا من خلال التفاعل بين ما نراه وما نجربه.

تسمى هذه التفاعلات مبادئ الجشطالت Gestalt في النظام البصري للدماغ، وتُعَد الأفكار التي توصل إليها العالم فيرتهايمر Wertheimer جزءًا مهمًا من علم الجشطالت، وقد ساعدتنا على فهم كيفية إدراك البشر للعالم وتفسيره.

من المحتمل أنك قد سمعت سابقًا عن مبادئ الجشطالت للتصميم الجيد، وربما قرأت كتاب "تصميم الأشياء اليومية" أو بعنوانه الأصلي "The Design of Everyday Things" لصاحبه دون نورمان Don Norman، وإذا كنت مهتمًا بعلم النفس، فمن المحتمل أنك تعرف الكثير عن نظرية الجشطالت، وعلى أي حال، إليك في هذا المقال شرحًا وافيًا عن عدة طرائق يمكنك من خلالها استخدام مبادئ التصميم الجيد لتحسين عملك.

قانون التشابه

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

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

يحاول الناس عن دون قصد أو وعي البحث عن أوجه التشابه بين الأشياء، أذ يمكن لصورة منظر طبيعي بها أشجار ومباني مثلًًا أن تثير مشاعر الأمان أو السعادة أو الراحة لدى الناظر، لأنه سيربط هذه العناصر مع المشاعر الأُسَرية والدفء.

كيف يمكننا إسقاط مبدأ التشابه على التصميم الجرافيكي؟

يمكن لمبدأ التشابه أن يساعد المصممين على تصميم شعار فعال يرسخ في أذهان المستخدمين، إذ يمكن استخدام هذا المبدأ لإنشاء شعار يُبرز مشاعرًا معينةً، مثل الفرح أو الحزن أو الحب.

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

ما الذي يعنيه ذلك بالنسبة للشعارات؟

يساعد مبدأ التشابه على جعل الشعارات التي تشبه بعضها البعض أكثر إقناعًا، مما يتيح لك إنشاء شعار مميز يبرز بين منافسيك.

يمكنك تصميم شعار يثير المشاعر الإيجابية لدى جمهورك المستهدف ويجذب العملاء المحتملين، لذا يُعَد مبدأ التشابه في نظرية الجشطالت طريقةً رائعةً لتطوير علامة تجارية يرغب الناس في شراء منتجاتها.

كيف تستخدم مبدأ التشابه؟

يأتي الآن السؤال الذي يفرض نفسه: "كيف يمكنني استخدام مبدأ التشابه عمليًا لتصميم شعار جيد؟" إليك أدناه عدة طرائق مهمةً لمساعدتك على توظيف مبدأ التشابه في تصميم شعار قوي لعلامتك التجارية.

استخدام أشكال متشابهة

إذا كان لديك شكل أساسي للتصميم في ذهنك مثل دائرة أو مربع، فيمكنك تصميم شعار فريد يعتمد على مبدأ التشابه، والخيار الشائع في هذه الحالة هو إنشاء شعار من دائرة أو مربع، وإضافة تفاصيل تثير نفس المشاعر التي يثيرها الشكل الأصلي.

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

حافظ على نفس نظام الألوان

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

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

تغيير اللون

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

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

تغيير النمط

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

كانت هذه بعض الأمثلة السريعة حول كيفية دمج مبدأ التشابه في شعارك.

قانون الاستمرارية

الاستمرارية هي تكرار الأشكال والعناصر عبر عنصرين أو أكثر، ويشيع هذا التأثير في التصميم الجرافيكي، ولكنه يحدث أيضًا في الفن والموضة والهندسة المعمارية وحتى في علم الأحياء، إذ يمكننا أن نَعُدَّ فروع الأشجار التي تتكرر عبر الغابة مثالًا على قانون الاستمرارية.

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

تحدث الاستمرارية في العديد من الأشكال، مثل تكرار نفس أسلوب الكتابة عبر الصفحات أو الخطوط أو العناوين المتعددة، ويمكن أن تحدث الاستمرارية أيضًا عن طريق تكرار نفس الشعار أو العلامة التجارية. فعلى سبيل المثال، تستخدم شركة نايك Nike ذات التصميم في كل من الأحذية الرياضية والقمصان، مما يساعد المستهلكين على التعرف على العلامة التجارية دون الحاجة إلى قراءة كلمات Nike أو Air Jordan.

غالبًا ما تُستخدم الاستمرارية في التصميم الجرافيكي لإضافة بُعد مرئي للتصميم، فعلى سبيل المثال، عند إنشاء بروشور brochure أو ملصق إعلاني poster، فسيكون التكرار أمرًا شائعًا لإضافة الاهتمام البصري والوحدة إلى التصميم، ويمكن أن يساعد تكرار العناصر، مثل النوع أو اللون أو الخط أو الشكل على خلق إحساس بالتوازن في التصميم.

لتجنب العشوائية، يمكن للمصممين الابتعاد عن التكرار عندما لا تكون هناك حاجة لذلك، إذ يجب أن تحمل العناصر المتكررة مغزًى معينًا أو تساعد على إيصال رسالة التصميم.

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

استمرار النوع

تُعَد الخطوط الموجودة في المستندات والمواقع الإلكترونية ورسائل البريد الإلكتروني ضروريةً لتوصيل المعلومات والأفكار، وهناك مجموعة متنوعة من الخطوط المتاحة، من الخطوط البسيطة serif مثل خط Times New Roman إلى الخطوط الغامقة والهندسية مثل خط Helvetica، وهي تُستخدم لأغراض مختلفة.

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

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

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

قانون الإغلاق

يُعَد قانون الإغلاق واحدًا من القوانين المهمة في التصميم الجرافيكي، فهو يشرح كيفية رؤية العين البشرية للمجال البصري، إذ تميل عقولنا إلى تفسير الأشياء التي تراها بصورتها الكاملة وحتى إن كان ينقصها جزءًا ما؛ فعلى سبيل المثال، ما يزال بإمكانك رؤية الدائرة أو المربع حتى وإن كانت تنقصهما أجزاء عديدة كما في الصورة.

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

يتحقق الإغلاق من خلال عناصر مختلفة، مثل النقطة المحورية والتوازن والتماثل والنسبة والتكرار والنظام والتباين.

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

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

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

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

ترتبط النسبة أيضًا بمقياس الرسم، إذ لا تعني الصورة الكبيرة للسيارة بالضرورة أنها أكثر أهميةً من الصورة الأصغر، إذ من الممكن إنشاء توازن في صورة أصغر بتفاصيل أكبر؛ أما الترتيب فهو أمر مشابه للتوازن، لكنه يتضمن ترتيب العناصر وانتظامها، فعندما يكون هناك انتظام في موقع العناصر في الصورة، فإن ذلك يعطي إحساسًا بالتناغم والاتزان للمشاهد.

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

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

قانون القرب

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

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

وعلى الجانب الآخر، ليس من الصواب لصق النصوص ببعضها البعض، ولا سيّما إن كانت متفاوتة الحجم، فعلى سبيل المثال، سيصعب على القراء ملاحظة نص صغير وُضِعَ بالقرب الشديد من عنوان رئيسي، وبالتالي قد يكون النص مربكًا أو يصعب فهمه.

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

قانون الشكل والخلفية

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

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

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

وفيما يتعلق بالتصميم الجرافيكي، يميل قانون الشكل والخلفية إلى وضع العناصر الأكثر أهميةً في مقدمة التصميم، وخير مثال على ذلك هو وضع شعار أو اسم منتج على عبوة أو ملصق أو عنصر مطبوع آخر، بحيث يكون الاسم هو العنصر الرئيسي الذي يحتل أكبر وحدة مساحة؛ وهناك حالتان لقانون الشكل والخلفية في التصميم الجرافيكي:

• الحالة الإيجابية: وهي التي تركز على الشكل أو العنصر، إذ تمنحه قوةً إيجابيةً وتجعله أكثر بروزًا، وتُعَد هذه الحالة اختيارًا جيدًا لتصميم الشعارات والملصقات والعناصر المطبوعة الأخرى.
• الحالة السلبية: وهي التي تركز على الخلفية، بحيث تكون العناصر في الخلف أقل وضوحًا.

كيف يمكنك استخدام قانون الشكل والخلفية لإنشاء تصاميم فعالة؟

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

فيما يلي بعض الأمثلة حول كيفية استخدام قانون الشكل والخلفية في عملك في التصميم الجرافيكي:

• موازنة التصميم: تتمثل الخطوة الأولى في تحديد النقطة المحورية لتصميمك، ضع هذه النقطة المحورية في المقدمة، ومن ثم ضع العناصر الأقل أهميةً في الخلفية، ولكن تأكد من أنها قريبة بدرجة كافية، بحيث تتحرك العين ذهابًا وإيابًا.
• التأكيد على أفضل العناصر: يتميز التصميم الجيد بتحقيق نسبة متوازنة بين الحالة الإيجابية لقانون الشكل والخلفية والحالة السلبية له، إذ يساعد هذا التوازن على توحيد تصميماتك وجعلها أقل تشوشًا. عندما تنظر إلى تصميم ما، ما الذي تلاحظه أولًا؟ النقطة المحورية أو العنصر الأكثر أهميةً أو الشخص الذي يلفت انتباهك، هذه هي العناصر التي يجب أن تركز عليها في تصميماتك.
• اختيار الحجم المناسب: عند إنشاء مخطط أو ملصق إعلاني، تأكد من اختيار الحجم المناسب، إذ يبدو الملصق الذي يحتوي على مساحة كبيرة مزدحمًا ومشغولًا، بينما لا يقدم الملصق الذي يحتوي على مساحة صغيرة نقطةً محوريةً قويةً لدرجة كافية.
• إضافة أو إزالة مسافة سلبية: يمكنك استخدام قانون الشكل والخلفية لتوجيه عين المشاهد، وذلك من خلال إضافة مساحة سلبية لإنشاء نقطة محورية أكثر أهميةً، بينما يؤدي إزالتها إلى إنشاء صورة أكثر توازنًا.
• تجنب استخدام خط واحد: إذا استخدمت خطًا واحدًا في تصميمك، فلن يظهر التصميم متوازنًا، لذا تجنب ذلك عن طريق تقسيم الخط إلى عدة مكونات، فعلى سبيل المثال، الخط الذي ينقسم إلى قسمين يُنشئ نقطة بؤريةً على شكل حرف V.
• الاهتمام البصري: إذا كان تصميمك يفتقر إلى الاهتمام البصري، فأضف المزيد من العناصر، إذ يمكنك تحريك عين المشاهد في اتجاهات مختلفة من خلال تنويع العناصر في الصورة.
• حافظ على الاتساق: يتحقق التوازن عندما تتوافق أجزاء التصميم مع بعضها البعض، فإذا ارتكبت خطأً، فسيبدو التصميم بأكمله غير جيد، لذا كن حذرًا وحافظ على اتساق تصميمك.

قانون التناظر والترتيب

يهتم التصميم الجرافيكي بعرض العناصر المرئية وترتيبها، فالتناسق والترتيب هما مبدآن يوجهان التصميم الجرافيكي، كما أنهما يُستَخدمان لضمان مظهر ممتع للتصميم النهائي.

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

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

أهمية قانون التناظر والترتيب في التصميم الجرافيكي

يُعَد قانون التناظر والترتيب من المبادئ الأساسية في التصميم الجرافيكي، فهو يُستَخدم لخلق التوازن والوحدة في التصميم؛ فعند رؤية التصميم النهائي، سيعالج دماغك المعلومات غريزيًا باتباع قانون التناظر والترتيب. على سبيل المثال، إذا نظرت إلى الجزء العلوي والسفلي من الصورة، فقد تلاحظ وجود بعض الكلمات المتشابهة، إذ ينعكس النص الموجود أعلى الصورة وأسفلها على الجانب الآخر.

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

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

يُعَد التناظر والترتيب مبدآن مهمان في التصميم الجرافيكي، لأن عقلك يطبقهما غريزيًا على التصاميم التي تشاهدها، فالهدف هو إنشاء تصميمات متوازنة ومتناغمة.

قانون المصير المشترك

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

تُعرف هذه الظاهرة في التصميم الجرافيكي باسم "التصنيف الرسومي" أو "تصنيف الألوان". وفي عالم الطباعة، شاع مصطلح "التصنيف الجرافيكي" من قبل والتر غروبيوس ومهندسين معماريين آخرين في ألمانيا في أواخر العشرينيات وأوائل الثلاثينيات من القرن الماضي.

غالبًا ما يُستَخدم التصنيف الرسومي لتحديد ما إذا كانت الألوان في قطعة فنية تتناسب جيدًا مع بعضها البعض أم لا، فقد يتطلب التصميم مثلًا ألوانًا حمراء وصفراء دافئة مع أزرق بارد، كما قد يتطلب التصميم لونًا أزرقًا سماويًا مع أخضر فاتح أو أرجواني داكن.

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

يُعَد التصنيف الرسومي ضروريًا أيضًا عند اختيار الألوان، فإذا كان هدفك تصميم لوحة ألوان متماسكة، فيمكنك اختيار لون يرتبط غالبًا بلون آخر. على سبيل المثال، إذا لاحظت أن الألوان التي تظهر معًا غالبًا هي الأخضر والأصفر، فقد تفكر في اختيار لوحة تتكون من ألوان صفراء وخضراء.

طرائق أخرى لاستخدام قانون المصير المشترك في التصميم الجرافيكي

تنطبق مبادئ التصنيف الرسومي أيضًا على هيكل الصفحة، ففي عالم الطباعة، يصف مفهوم التسلسل الهرمي للخط كيفية ترتيب خطوط معينة في الصفحة، كما تُعرف الفكرة أيضًا باسم "التسلسل الهرمي للخط" في تصميم الرسوميات.

يُعَد التسلسل الهرمي للخطوط عنصرًا مهمًا في تصميم الرسوميات، حيث يجب أن تختار أسلوب الكتابة بطريقة منطقية، ويمكن أن يساعدك قانون المصير المشترك على تحديد أفضل الخطوط لتصميمك، وذلك من خلال اختيار الخطوط التي تتناسب مع بعضها البعض.

ما الذي تعنيه نظرية الجشطالت؟

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

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

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

يمكن تقسيم الجشطالت إلى ثلاثة محاور رئيسية:

1. عضوي: يشير هذا المحور إلى كيفية ارتباط الكائنات ببعضها البعض داخل التصميم.
2. متماثل: يشير هذا المصطلح إلى كيفية تفاعل الأشكال والعناصر المتماثلة داخل التصميم.
3. وظيفي: ويُقصد به أن التصميم يؤدي غرضًا معينًا، مثل مساعدة شخص ما على إكمال مهمة.

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

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

كيف تنطبق نظرية الجشطالت على التصميم الجرافيكي؟

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

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

المفاهيم الرئيسية وراء نظرية الجشطالت

سنعرض فيما يلي أهم المفاهيم الرئيسية لنظرية الجشطالت.

النشوء

طور فريتز هايدر وماريان سيميل هذه النظرية في أواخر القرن العشرين، فهو إطار للتفكير في كيفية فهم الأفراد لمحيطهم والتفاعل معه.

يساعدنا مفهوم النشوء على فهم التفاعلات البشرية مع العالم من حولنا، فهو يشير إلى فكرة أن الشكل ينشأ من تفاعل الأجزاء التي يتكون منها، لذا يُعَد الشكل ككل أكثر أهميةً من الأجزاء الفردية التي ينشأ منها.

لكي تفهم الفكرة جيدًا، يمكنك التفكير في كيفية أداء لعبة الشطرنج، إذ يحرك اللاعب الأول حجرةً معينةً، ويستجيب اللاعب الآخر لهذه الحركة بأداء حركة أخرى، فإذا حرك اللاعب الأول حجرةً بيضاء إلى أعلى اللوحة، فسيحرك اللاعب الثاني حجرةً سوداء مقابلها.

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

علاوةً على ذلك، يؤثر ترتيب مكونات السيارة -مثل المقاعد وعجلة القيادة والنوافذ- على كيفية استخدام السائق للسيارة، وفي حال فقد السائق أحد هذه الأجزاء، فإن تجربته مع السيارة ستتغير.

في نظرية الجشطالت، يأتي النشوء من فكرة أن الكل أكثر أهميةً من أجزائه المنفصلة، ووفقًا لهذه النظرية، فإن أجزاء الكل ليست مستقلةً ولكنها تشكل أنماطًا تخلق تجمعات جديدة.

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

التفسير

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

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

في بعض الأحيان يمكننا التعرف على أنماط تفكيرنا وندرك أن معتقداتنا وافتراضاتنا تحد من آفاقنا. وبالنهاية، يجب أن تعلم أننا جميعًا نملأ الفراغات في عقولنا، لذا لا تقلق بشأن ذلك، فهي أمور موجودة فطريًا في طبيعتنا البشرية.

الاستقرار

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

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

تشرح نظرية جشطالت هذا المفهوم جيدًا، إذ تقول أن البشر هم نتيجة تفاعلات متعددة؛ وفي هذه الحالة، إذا رأى عقلك مرارًا وتكرارًا موقفًا لا يفهمه، فسيبدأ في البحث عن الاستقرار في شكل التكرار، ومع مرور الوقت، سيؤدي هذا التكرار إلى بناء العادات.

المطابقة

إذا كنت قد شاهدت أيًا من أفلام Babysitter Wanted، فقد تكون لديك فكرة عن مفهوم المطابقة، والذي يُعَد عنصرًا أساسيًا في نظرية الجشطالت، إذ يشير مصطلح المطابقة إلى قدرة الدماغ على التعرف على الأنماط وتشكيل الانطباعات بناءً على أوجه التشابه.

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

ما الفرق بين المطابقة والتعرف؟

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

في الختام

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

ترجمة -وبتصرّف- للمقال The Gestalt Principles: Theory of Good Design Psychology.

اقرأ أيضًا

• قانون التشابه: مبادئ جشتالت Gestalt في التصميم
• مبادئ علم النفس التي تساعد على تحسين تصميم موقعك الإلكتروني
• مبادئ تصميم الخدمات وتحسين جودتها
• مبادئ التصميم والتنسيق وفق النسبة الذهبية
• مبادئ التصميم: ما الواجب عمله عندما لا يستخدم أحد الميزة الخاصة بك

استحوذ نظام بانتون Pantone على الريادة في مجال علم النفس اللوني منذ عقود، وهو أول نظام لوني يحظى بقبول عالمي، فقد كان له دور أساسي في تشكيل الألوان المستخدمة في كل المجالات، بدءًا من الأزياء والتصميم الداخلي إلى التصوير والأفلام وما إلى ذلك.

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

إذا لم تتمكن من توفير انتقال سلس لعملائك بين علامتهم التجارية وموقعك للتسويق الرقمي، فسوف تواجه صعوبةً في تحقيق تحويلات، وهنا يأتي دور نظام بانتون Pantone لمطابقة الألوان.

طوّر لورنس هيربرت نظام بانتون Pantone لمطابقة الألوان CMS عام 1963 لمساعدة المصممين في الحصول على نتائج منسجمة وقابلة للتكرار، ورغم أن بانتون Pantone اشتهر بنماذجه واللونية، إلا أنه لا يقتصر على الألوان، بل يتضمن أدوات تصميم أخرى.

استُخدم بانتون Pantone في التسويق والإعلان على مدار عقود، لكنه لم يستحوذ على الصدارة في التصميم إلا منذ عهد قريب، جاعلًا التنبؤ بالألوان الرائجة وفهمها أكثر سهولة. فمع قاعدة البيانات اللونية الأشهر في العالم، يمكنك إنشاء نظام تصميم يساعد فريقك على العمل بذكاء أكبر ووتيرة أسرع.

ما هو بانتون Pantone؟

بانتون Pantone هو المرجعية الرائدة عالميًا في مجال الألوان والاتجاهات اللونية الرائجة وعلم اللون، ويستخدم نظام بانتون Pantone لمطابقة الألوان CMS من أجل تناقل الألوان ومطابقتها عند استخدامها في التغليف والإعلان وتصميم الرسوميات. أُنشِئ بانتون Pantone على أيدي فنانين يعملون بملونات الطلاء ومزج الألوان على الأقمشة.

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

كيف يعمل نظام بانتون Pantone لمطابقة الألوان

يعتمد نظام بانتون Pantone لمطابقة الألوان على اللون الدقيق للمطبوعات لإخراج لون مطابق له تمامًا، وهو يتضمن 12 مجموعة ألوان رئيسية تدعى "عائلات بانتون"، حيث تتضمن كل مجموعة 6 ألوان رئيسية تمثّل التدرجات المختلفة الفاتحة والداكنة للألوان المستخدمة حاليًا في عالم الموضة والتصميم والديكور المنزلي.

يستخدم المصممون وخبراء الموضة أحد ثلاثة أنواع من مطبوعات بانتون للحصول على لون محدد في عملهم.

أولًا، يمكن أن يستخدم المصممون وخبراء الموضة الألوان الصافية solid colours، ويقصَد بها الألوان المتجانسة في جميع أجزائها.

ثانيًا، يمكن أن يستخدم المصممون وخبراء الموضة الألوان المكملة complementary colours، وهي الألوان المتعاكسة فيما بينها. على سبيل المثال، اللونان الأزرق والأحمر مكملان لبعضهما، لأن اللون الأحمر معاكس للأزرق. يمكن الحصول على اللون المكمل للون الصافي من اللون المقابل له في العائلة المعاكسة من ألوان بانتون.

ثالثًا، يمكن أن يستخدم المصممون وخبراء الموضة الألوان المتشابهة Analogous Colours، وهي الألوان القريبة من بعضها. على سبيل المثال، الأخضر والأصفر لونان متشابهان، لأن لهما طبيعةً متقاربة، بالإضافة إلى تشابههما في الحالة الساطعة والداكنة.

على سبيل المثال، إذا كنت تريد الحصول على لون محدد مثل الأزرق انطلاقًا من لون بانتون 29-1451، فستستخدم عائلة بانتون للون البرتقالي (بانتون 30-1561).

يمكنك تغيير كمية الصباغ الرمادي المستخدم في لون بانتون 29-1451 للحصول على درجة أفتح من اللون الأزرق. وإذا كنت تريد الحصول على درجة أغمق من الأزرق، فيمكنك إضافة المزيد من لون بانتون 30-1561 إلى المزيج.

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

كما أنه لا يعمل عندما تبحث عن تدرج معين للون، بل يقدم لك قائمةً بالألوان المتشابهة التي يمكنك تجريبها حتى تجد اللون الذي تبحث عنه.

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

عندما ينشئ المصمم لوحةً لونيةً باستخدام نظام بانتون Pantone لمطابقة الألوان، يجب أن يأخذ بالحسبان تأثير الضوء والحرارة. تفيد عجلة الألوان أيضًا في مساعدة المصممين على تحقيق التجانس في المخطط اللوني.

الإرشادات الثلاثة للألوان

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

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

يمكن تلخيص الإرشادات الثلاثة بالشكل التالي:

1. يجب استخدام الألوان باعتدال.
2. يجب أن تكون الألوان مكملة لبعضها.
3. يساعد تباين الألوان على إيصال الأفكار المهمة.

ما أهمية بانتون Pantone؟

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

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

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

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

كيف تجد لون بانتون Pantone المناسب؟

قد تواجه صعوبةً في العثور على اللون المناسب لموقعك، فرغم توفر آلاف المواقع التي تقدم دلائل لونية يمكنك استخدامها، إلا أنها غالبًا ما تكون مغايرةً لما تبحث عنه. يمكنك أيضًا إجراء بحث بسيط على جوجل لتحصل على مخططات لونية وعينات قد توحي لك ببعض الأفكار، لكن من الصعب إيجاد ما يناسب مشروعك تمامًا؛ لذا فلحسن الحظ، فإن بانتون Pantone يساعدك على ذلك.

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

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

كيف تجمع بين ألوان بانتون Pantone؟

يقدِّم بانتون Pantone للمصممين وأصحاب المشاريع التجارية نظامًا للتوفيق بين الألوان، ليتمكنوا من تجميع الألوان والعناصر التصميمية ضمن فئات معينة، لكن المثير للاهتمام أن بانتون يستخدم ثلاثة ألوان في العملية برمّتها لمطابقة الألوان، وهذه الألوان الثلاثة تقترن لاحقًا مع لونين إضافيين للحصول على التدرجات الداكنة (الظلال) والفاتحة (الصبغات) من اللون، مما يعني أن بإمكانك استخدام أية ألوان ثلاثة أساسية في خياراتك اللونية.

موقع بانتون مليء بالمعلومات حول عجلة الألوان والاتجاهات اللونية الرائجة، لكن أهم ما يجب أن تعرفه قبل البدء بمزج الألوان أنه لا يجوز المزج بين ألوان من عجلات مختلفة، فلا يمكنك مثلًا أن تأخذ لونًا أحمر من عجلة معينة وتضيف له الأزرق أو الأصفر من عجلة أخرى.

لاحظ أيضًا أنك ترى دائمًا نفس المزائج اللونية مستخدمة في أماكن عديدة، والسبب في ذلك أنها ألوان مكملة لبعضها البعض.

يقدم لك بانتون Pantone أيضًا سلسلة من الخيارات اللونية، ورغم أنه لا يمكنك دائمًا العثور على لون مطابق بالكامل، إلا أنك ستجد درجةً مقاربةً جدًا للون المطلوب.

إذا كنت ترغب بتوفير حالة مزاجية أو جو ملائم لعلامتك التجارية، فعليك أن تعرف كيف تختار ألوانًا متجانسةً ملائمة، إذ لكل لون درجة حرارة لونية معينة، ويُقصَد بها مدى سطوع اللون أو مدى كونه باهتًا، لذا فمن الضروري معرفة كيفية اختيار الألوان التي تتناسب مع بعضها لتعزيز الشعور بمزاج ما أو توفير بيئة معينة.

كتالوج ألوان بانتون Pantone

عند النظر إلى لون معين، فإن الدماغ لا يكتفي بتسجيل هذا اللون، بل يحفظ أيضًا المشاعر التي يثيرها في النفس. هناك أبحاث تدعم هذه النظرية، ففي عام 2003 أظهر علماء نفس من جامعة كاليفورنيا في بيركلي أن الدماغ البشري قادر على التمييز بين الاستجابة العاطفية لألوان متقاربة جدًا بين بعضها.

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

تُعَد نماذج بانتون Pantone بالنسبة للكثيرين من أكثر الأدوات التي تساعدهم في التسويق، فهي سهلة الفهم وجيدة التصميم وتساعد على استعراض المنتج وتسهيل تخيل الألوان عليه.

خاتمة

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

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

يمكن تطبيق هذه الأفكار بسهولة على أي مشروع من المطبوعات أو تصميم الويب أو تصميم الرسوميات.

يمكنك البدء بهذا الدليل حول نظام بانتون Pantone لمطابقة الألوان من أجل الحصول على ألوان مثالية في تصميمك القادم.

ترجمة -وبتصرّف- للمقال Pantone Matching System: A Guide for Designers.

اقرأ أيضًا

• ما هو النّظام اللوني Color model
• التأثير النفسي للألوان في تصميم الويب
• أساسيات التصميم المرئي
• أفضل 12 أداة انتقاء للألوان لمصممي الويب

عند الحديث عن تصميم الشعارات، تركز معظم الدلائل الإرشادية على النواحي الجمالية لإنشاء شعار للعلامة التجارية، وهو أمر مفهوم تمامًا، لا سيما إذا علمنا أن الشعار عاملٌ يمكن أن يصنع النجاح للمشروع التجاري ويمكن أن يلحق به الفشل، لكن هناك جانب غالبًا ما يُغفَل في تصميم الشعار، ألا وهو الدقة.

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

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

إذًا لنبدأ بالموضوع دون مزيدٍ من المقدمات.

ما هي الدقة؟

قبل البدء بمناقشة دور الدقة في تصميم الشعارات، لا بد من توضيح معنى هذا المصطلح.

وفقًا لأدوبي، الدقة بكل بساطة هي عبارة عن "مقدار التفاصيل في الصورة"؛ وفي الطباعة، تمثل الدقة عدد النقاط المطبوعة في خط طوله بوصة (2.54 سم)، وهو ما يرمز اختصارًا بـ DPI؛ أما في الحواسيب والأجهزة الإلكترونية، فتقاس الدقة بعدد البكسلات Pixels في خط طوله بوصة، ويرمز بـ PPI.

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

يعتمد مدى وضوح الصورة على الشاشة على قياس هذه الشاشة وعدد البكسلات، أي أن مستوى دقة معين (عدد بكسلات محدد) سيبدو أوضح على الشاشة الأصغر ويصبح أقل وضوحًا كلما اتسعت الشاشة، وهو أمر مفهوم بديهيًا، فالعدد نفسه من البكسلات سيمتد على مساحة أكبر.

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

ما هو البكسل؟

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

تُعرَّف البكسلات على أنها المربعات الفردية التي تشكل معًا صورةً كاملة عند تركيبها في صفوف فوق بعضها البعض.

فكر قليلًا في الذي يحصل عند تكبير الصورة وجعلها قريبةً جدًا، ستجد أنك كلما اقتربت من الصورة تصبح أكثر تشوشًا، وهذا التشوش يعني أنك أصبحت قريبًا جدًا إلى الحد الذي تتمكن فيه من رؤية البكسلات المفردة (أو ما يسمى بالمربعات المشوشة) المكوِّنة للصورة التي تشاهدها.

أفضل طريقة لتجنب التشوش هي التركيز على DPI (عدد النقاط لكل بوصة) أو PPI (عدد البكسلات لكل بوصة).

يستخدم مصطلح DPI عادةً عند الحديث عن المطبوعات، في حين يستخدم مصطلح PPI لشاشات العرض والصور الرقمية، ومع ذلك فإن الكثير من الناس (وحتى الخبراء) يستخدمونهما كمصطلحين مترادفين، مما يسبب الخلط والالتباس عند مناقشة مفهوم الدقة.

والآن كيف يؤثر عدد البكسلات في ملف مرئي على مظهره؟

كلما كان DPI أو PPI أعلى، كانت الصورة حاويةً على معلومات أكثر، مما يعني أنه يمكنك رؤية المزيد من التفاصيل وأن الصورة تبدو واضحةً أكثر.

قد تعتقد الآن أن زيادة DPI أو PPI كافية لتحسين جودة الصورة، لكن كيف تضمن الوصول إلى تجربة مشاهدة ممتازة بدلًا من صورة مكثفة مليئة بالتفاصيل؟ في الحقيقة، كثافة البكسلات PPI ليست العامل الوحيد الذي يؤثر على جودة الصورة، فقياس البكسل له دور لا يقل أهمية.

على سبيل المثال، إذا كان PPI منخفضًا مع وأبعاد البكسل صغيرة، فإن ذلك سيؤدي إلى صورة مشوشة عند تكبير الصورة. وبالمثل، إذا كان PPI مرتفعًا وأبعاد البكسل كبيرة، فسيؤدي ذلك أيضًا إلى تشوش الصورة عند تكبير حجمها أكثر.

كم نقطة لكل بوصة DPI يجب أن يكون شعارك؟

تشير معظم المصادر إلى أن 72 DPI هو القيمة الأفضل.

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

تصلح قاعدة 72 DPI للتطبيق مثاليًا في الطباعة (حيث تكون البوصة في واحدة DPI بطول بوصة على أرض الواقع)، لكن الأمر أكثر تعقيدًا في الشاشات الرقمية.

لتجنب الالتباس، يجب قياس عدد البكسلات المطلق للصورة المخصصة للاستخدام على الإنترنت.

ما هي الصيغة المناسبة للشعار؟

الصيغ المتجهة مفضلة عمومًا لتصميم الشعارات، وذلك بسبب قابليتها للتوسع. ومع أن الصور النقطية مفضلة للمبتدئين، إلا أنها تسبب المشاكل إذا أردت تكبير الشعار من أجل الطباعة أو تصغيره من أجل أيقونة الهوية favicon.

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

كيف تحدد حجم الشعار الذي تحتاجه؟

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

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

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

توصيات حجم شعار الموقع

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

تبين أن المكان الذي تضع فيه الشعار (بالإضافة إلى حجمه) يمكن أن يؤثر إيجابًا أو سلبًا على الانطباع العام الذي يتركه موقعك.

والآن ما هي توصيات حجم شعار الموقع وفقًا للاستخدام المطلوب؟

ترويسة الموقع

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

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

إذًا ما هي الأبعاد المفضلة لشعار ترويسة الموقع؟

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

على سبيل المثال، إذا فتحت الصفحة الرئيسية لموقع Sola Wood Flowers، ستجد أن ارتفاع الشعار في الترويسة يبلغ 30 بكسل (وهو معيار مقبول على نطاق واسع)، مما يضمن سهولة قراءة النص دون أن يطغى على القسم الرئيسي من الموقع.

من ناحية أخرى، فإن العلامة التجارية Anderson & Sheppard اختارت لشعار موقعها مكانًا مختلفًا عن المعتاد في الصفحة الرئيسية، ولذلك استخدمت حجمًا أكبر يبلغ 985 × 60 بكسل.

هناك توصيات أخرى لأبعاد شعار الموقع مثل:

• 250 × 150 بكسل
• 350 × 75 بكسل
• 400 × 100 بكسل

تذييل الموقع

رغم أن تذييل الموقع غالبًا ما يُغفَل عند مناقشة حجم ودقة شعار الموقع، إلا أنه في الواقع مكان شائع الاستخدام لعرض شعار العلامة التجارية.

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

على سبيل المثال، إذا كان هناك متسع لإمكانية اختيار أيقونة مربعة أو عمودية، فيمكنك اختيار أبعاد تصل إلى 160 × 160 بكسل، فهي تبدو متناسبة ًمع معظم اتجاهات التصميم، لكن يمكن أيضًا اختيار أبعاد أصغر قليلًا. وقد اختار موقع Pretest Plus مثلًا حجمًا أصغر يبلغ 70 × 70 بكسل للحصول على شعار مربع الشكل.

إذا كان شعارك مليئًا بالكتابة، فاحرص على عدم اختيار حجم صغير جدًا (كما في موقع American Express)، فهذا يصعّب على الزوار التعرف على علامتك التجارية ويضرّ بالصورة العامة للشركة.

أيقونة الهوية

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

من الجيد عمومًا اختيار أبعاد صغيرة مثل 16 × 16 بكسل لأيقونة الهوية، كما في الأيقونة في الصورة أدناه من موقع Unscramblex.

توصيات خاصة بالشعارات على مواقع التواصل الاجتماعي

لا شك بأن الظهور الاحترافي على وسائل التواصل الاجتماعي أمر أساسي لنجاح العلامة التجارية.

يساعد تطوير خطة تسويقية جيدة لوسائل التواصل الاجتماعي على التمكن من الوصول إلى الجمهور، وقد يكون عاملًا حاسمًا في تحقيق معدلات تحويل مرتفعة، كما قد يكون المكونَ السري لبناء قاعدة من العملاء المخلصين.

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

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

حجم الشعار على فيسبوك

• صورة الملف الشخصي للصفحة: تُعرَض بدقة 170 × 170 بكسل على الحاسوب، و128 × 128 بكسل على الهواتف الذكية، و36 × 36 بكسل على معظم الهواتف العادية.
• صورة غلاف الصفحة: تُعرَض بدقة 820 × 312 بكسل على الحاسوب، و640 × 360 بكسل على الهواتف الذكية، والحد الأدنى لأبعادها هو 400 × 150 بكسل.

تذكر أن هذه الأرقام هي الحد الأدنى للتوصيات حول أحجام الصور على المنصة.

يوصي فيسبوك باستخدام صور PNG مراعاةً لعبء التحميل وزمنه. تذكر أيضًا أن الموقع يقص صورة الشعار بشكل دائري، لذا عليك أن تأخذ ذلك بالحسبان سلفًا.

للاطلاع على نموذج ناجح من إحدى المؤسسات، انظر كيف اختارت شركة فيلم Star Wars إحاطة شعارها باللون الأسود لتكون صورة صفحتها على فيسبوك ممتعةً للنظر.

حجم الشعار على إنستجرام

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

هناك بُعد واحد يجب أن تلتزم به على هذه المنصة. بما أن إنستجرام يعرض جميع صور الملف الشخصي بحد أقصى 180 × 180 بكسل على شاشة الحاسوب، فيجب أن يكون هذا القياس هو الحد الأدنى لأبعاد الصور المحملة على هذه المنصة.

لكن إذا كنت تريد أن تضمن أفضل تجربة استعراض ممكنة للمتابعين، فيمكنك اختيار حجم أكبر مثل 1080 × 1080 بكسل، وهو ما اختارته شركة KURU Footwear في صورة حسابها. يساعد الحجم الكبير الملائم للصورة على تجنب تشوه الشعار (أو بكسلته) حتى عند عرضه على شاشة الحاسوب أو تكبيره.

حجم الشعار على تويتر

كما هو الحال في فيسبوك، يقدم تويتر أيضًا مجموعةً من الأبعاد الموصى بها لرفع الصور والشعارات:

• صورة الملف الشخصي: 400 × 400 بكسل بشكل دائري.
• صورة الترويسة (الغلاف): 1500 × 500 بكسل.

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

من الأمثلة الممتازة لعلامة تجارية تمكنت من ملاءمة صورها مع تويتر؛ خدمة Trupanion للضمان الصحي للحيوانات الأليفة، التي اختارت الاقتصار على عرض الجزء المصور من شعار علامتها التجارية لضمان عدم التعرض لمشاكل في قابلية رؤية اسم العلامة التجارية، مع الحفاظ على توحيد هويتها بين جميع قنوات التواصل.

حجم الشعار على بينترست

إذا كان جمهورك نشطًا على بينترست Pinterest، فربما ترغب بالظهور على هذه الشبكة الاجتماعية بمظهر جذاب، لكن عليك أولًا أن تضمن عرض شعارك بطريقة جميلة.

• صورة الملف الشخصي: كما هو الحال في فيسبوك وتويتر، يعرض بينترست الصورة الشخصية بشكل دائري، لذا يجب إجراء بعض التعديلات على شعارك وفقًا لذلك. بالنسبة للأبعاد فيجب أن تكون على الأقل 280 × 280 بكسل.
• صورة الغلاف: يوصي مركز المساعدة الخاص بالمنصة بأن يكون الحد الأدنى للأبعاد 800 × 450 بكسل، لكن تذكر أن أفضل طريقة لضمان عرض غلافك بشكل صحيح هي الحفاظ على نسبة 16:9 بين البُعدين.

أحسنت صفحة Fire Pit Surplus التصرف حين كيّفت صورها مع منصة بينترست، فجعلت الصورة الأساسية المربعة في موقعها بشكل مستطيل أبعاده بنسبة 16:9، لتضمن ظهور ملفها الشخصي على منصة بينترست بشكل ملائم واحترافي.

حجم الشعار على يوتيوب

سنذكر فيما يلي الأبعاد اللازمة وفقًا لإرشادات جوجل لتكييف العناصر المرئية للعلامة التجارية، من أجل ضمان الحصول على أفضل انطباع جمالي على منصة يوتيوب:

1. صورة الملف الشخصي: 800 × 800 بكسل بصيغة JPG أو GIF أو BMP أو PNG (تظهر بشكل دائري).
2. صورة الغلاف banner: يجب أن يكون الحد الأدنى لأبعاد الصورة المحملة 2048 × 1152 بكسل (بنسبة 16:9 بين البُعدين). إذا كنت ترغب بإضافة نص أو شعار فيمكن تخصيص مساحة 1235 × 338 له.
3. العلامة المائية لمقطع الفيديو: يجب أن يكون الحد الأقصى لأبعادها 150 × 150 بكسل وحجمها أقل من 1 ميغابايت.

يمكنك رؤية نموذج لتطبيق هذه الأرقام على قناة PlayStation على يوتيوب.

شعارات مواقع التواصل الاجتماعي وقنوات التوزيع الأخرى

• تيك توك: 200 × 200 بكسل.
• لينكد إن: 268 × 268 بكسل لصورة الملف الشخصي، و1128 × 191 بكسل لصورة الغلاف.
• ديسكورد: 128 × 128 بكسل.

ما الذي يجب مراعاته في تصميم الشعار؟

الشعار المثالي هو الذي يساعد العملاء على التعرف مباشرةً على العلامة التجارية وإبرازها وإثارة اهتمام العملاء، لذا عليك أن تختار شعارًا بسيطًا سهل الملاحظة والتذكر.

فكر بشعارات العلامات التجارية التي تعرفها وتحفظها جيدًا، فهي نماذج ناجحة يمكنك التعلم منها. يجب أن يرسخ الشعار في أذهان العملاء لينمو بمشروعك التجاري.

أخطاء يجب تجنبها في تصميم الشعار

إنّ تجنب الوقوع في مشاكل دقة الشعار وجودته ليس ممكنًا دائمًا، لكن هناك بعض الأخطاء التي يمكن تجنبها بطريقة فعالة:

• لا تبخل بالإنفاق على أعمال التصميم: قد تكون ميزانيتك متواضعة فتميل لعروض العمل ذات الأسعار المعقولة، لكن تذكر أن واقع النتائج وجودتها لن يوازي أعمال المصممين المحترفين المشهورين.
• تجنب تقليد الأعمال الأصلية: إذا كنت تسعى لإبراز شعارك وجعله فريدًا ويعكس صورة إيجابية لعلامتك التجارية، يجب أن تتجنب جعل الهوية البصرية لعلامتك التجارية نسخة عن أعمال موجودة سابقًا، خصوصًا إذا كانت هذه الأعمال لمنافسيك، فهذا يقلل فرصتك في البروز والتميز. عليك إنشاء تصاميم خاصة فريدة تناسب مشروعك التجاري وتبدو بمظهر احترافي.
• لا تتبع متغيرات الاتجاهات الرائجة: تحتاج إلى تصميم شعار يبقى ملائمًا لفترة طويلة وليس شيئًا مؤقتًا؛ فمع نمو مشروعك، يجب أن يبقى شعارك في الواجهة ليُظهِر للعملاء المبادئ التي تمثلها مؤسستك من حيث الاحترافية والقيمة.
• تجنب التصميم شديد التعقيد: قد يكون الشعار مليئًا بالتفاصيل، مما يشتت الانتباه أو يفسد الرسالة التي تريد إرسالها. اجعل تصميمك بسيطًا ووافيًا للحصول على أفضل النتائج.

الخلاصة

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

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

إذا رأيت أن هذا العمل يتطلب الكثير من الجهد، فيمكنك دائمًا الاستعانة بمصمم محترف لتصميم شعارك.

ترجمة -وبتصرّف- للمقال The Ultimate Guide to Resolution in Logo Design.

اقرأ أيضًا

• دليلك إلى تصميم شعارات احترافية
• اختيار الحجم الأمثل للشعار وأهم النصائح لتصميم شعار مميز للشركات
• أساسيات التصميم المرئي
• أهمية التصميم الاحترافي للشعار

تتغير برامج تصميم الرسوميات مع توسع عمل المصممين في تصميم محتوى لجميع المنصات، ويتغير معها سير العمل، مما يستدعي السؤال عن الأدوات الأنسب لكل نمط من المصممين.

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

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

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

حزمة برامج أدوبي كرييتف Adobe Creative Suite لتصميم الرسوميات

استُخدمت برامج أدوات أدوبي كرييتف لتصميم الرسوميات من أجل إنشاء أعمال فنية من الرسوم البسيطة إلى أحدث الصور الحاسوبية، ويُعَد برنامج أدوبي فوتوشوب Adobe Photoshop من أشهر التطبيقات المستخدمة لإنشاء رسومات بمظهر احترافي، لكنه ليس الأداة الوحيدة التي طورتها أدوبي، فهناك العديد من الأدوات الأخرى التي صُممت لمساعدة المستخدم على إنشاء عمل فني، مثل حزمة أدوبي كرييتف سويت.

أدوبي كرييتف سويت عبارة عن حزمة من البرامج تتضمن أدوبي فوتوشوب وإليستريتور Illustrator وإنديزاين InDesign ودريم ويفر Dreamweaver. فوتوشوب هو البرنامج الأشهر من الحزمة، وهو يسمح بإنشاء صور وتعديلها بالإضافة إلى الكثير من الميزات الأخرى. كان أول إصدار للحزمة عام 1989، ثم طُوِّرت لتقديم منتجات أفضل مع مرور الزمن.

تُعَد أدوبي كرييتف سويت أداةً مثالية للمصممين الذين يعملون على إنشاء مواقع إلكترونية أو مشاريع أخرى تتضمن وسائط متعددة، فمثلًا يمكن الاستعانة بتطبيق إنديزاين لإنشاء المستندات النصية مثل الكتب والمجلات، وتطبيق دريم ويفر لتطوير مواقع وصفحات HTML.

أدوبي فوتوشوب Adobe Photoshop

برنامج أدوبي فوتوشوب لتصميم الرسوميات هو أحد برامج تحرير الصور الأعلى تقييمًا، طورته شركة أدوبي العالمية، وهو يساعد المصممين على تعديل الصور باحترافية، ويُعَد الخيار الأفضل للمصورين المبتدئين، كما أنه شائع الاستخدام لدى المحترفين أيضًا. لا يقتصر عمل هذا البرنامج على تحرير الصور، بل يمكن استخدامه لتطبيق مؤثرات مختلفة على الصور وإضفاء لمسة احترافية عليها.

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

برنامج أدوبي إليستريتور Adobe Illustrator لتصميم الرسوميات

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

يسمح هذا البرنامج بسهولة إنشاء وتعديل أعمال التحريك والرسوميات المتجهة، مثل الشعارات والأنماط والرسوم، وله واجهة بسيطة تتضمن الكثير من الأدوات المتوفرة.

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

برنامج أدوبي ان ديزاين Adobe InDesign لتصميم الرسوميات

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

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

يتضمن برنامج إنديزاين مجموعة قوالب مصممة مسبقًا وأدوات تساعد على إنشاء رسوميات بجودة احترافية، وهو متوافق مع طبقات فوتوشوب وأشكال إليستريتور والملفات بصيغة EPS وSVG. هذا البرنامج مثالي لإنشاء بروشورات وبطاقات عمل ومناشير ورقية وبوسترات وكتالوجات ومجلات وبطاقات بريدية وبطاقات معايدة ونشرات إخبارية وكتيبات وغيرها من التصاميم بمظهر احترافي.

برنامج أدوبي فريسكو Adobe Fresco لتصميم الرسوميات

أدوبي فريسكو هو أداة جديدة للرسم والإنشاء الرقمي، طوِّرت خصيصًا للمحترفين والطلاب والهواة. يسمح هذا البرنامج بإنشاء عالم مفعم بالشخصيات الرقمية المعبرة في بيئات وبنى مختلفة، وكل ذلك بسرعة وسهولة.

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

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

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

برنامج أدوبي ديمنشن Adobe Dimension لتصميم الرسوميات

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

يسمح هذا البرنامج بسهولة إنشاء منتجات للطباعة، من خلال الاستفادة من محرك الطباعة عالي الجودة والأدوات الفعالة التي يوفرها البرنامج، بالإضافة إلى قدرته على التعامل مع صيغ عديدة من الملفات، مثل PDF وJPG وTIFF وEPS وSWF.

يمكن التعامل من خلال هذا البرنامج مع مجموعة واسعة من المحتوى الرقمي، مثل النصوص والصور العادية والمصورة والرسوم المتجهة، كما يدعم البرنامج ملفات PostScript Level 2 وPDF/X3. يمكن أيضًا إضافة مؤثرات مثل إسقاط الظلال والانعكاس ومخطط الانعكاس والدمج والشفافية واقتصاص الصور.

سكتش Sketch

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

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

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

قدم سكتش مجموعة جديدة من المزايا لبناء النماذج الأولية، فهو يوفر الآن إمكانية إصدار ملف pdf للنموذج الأولي تلقائيًا، يتضمن روابط فعالة ورسوم متحركة وإشارات، كما يمكنه استيراد نماذج ثلاثية الأبعاد.

أفينيتي ديزاينر Affinity Designer

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

يرى البعض أن هذا البرنامج مشابه لأدوبي فوتوشوب وكوريل درو Corel Draw، لكنه في الواقع مختلف عنهم، فهو ليس مجرد برنامج تحرير صور، بل حزمة كاملة تتضمن جميع الأدوات التي يحتاجها المصمم.

يمكنك الاستفادة من ميزات كثيرة عند استخدام هذا البرنامج، ومنها:

• واجهة سهلة الاستخدام.
• أداء عالٍ.
• سهولة التعلم.
• عدم وجود رسوم اشتراك.
• تحديثات مجانية.
• دعم منصات عديدة.

أفينيتي فوتو Affinity Photo

أفينيتي فوتو هو برنامج ممتاز لتحرير الصور، عمل على إنشائه مجموعة من الأشخاص المحبين للتصوير، وأضافوا له ميزات رائعة جعلته واحدًا من أبرز برامج تحرير الصور.

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

جرافيت ديزاينر برو Gravit Designer Pro

جرافيت ديزاينر برو عبارة عن تطبيق بسيط لإنشاء تصاميم رائعة باستخدام هاتف أندرويد أو آيفون، فهذا التطبيق مجاني بالكامل لمستخدمي نظام iOS وأندرويد.

عندما تفتح التطبيق تظهر لك نافذة التصميم، ويمكنك اختيار قالب التصميم الذي ترغب باستخدامه. عند الانتهاء يمكنك الحفظ من خلال اختيار زر الحفظ/save.

من الميزات الأساسية لهذا التطبيق:

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

كانفا Canva

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

يسمح كانفا للمستخدمين بإنشاء أنواع عديدة من التصاميم بعملية مباشرة وغير معقدة. ما عليك سوى إدخال المعلومات المطلوبة ورفع الصورة أو الشعار المطلوب ثم الضغط على "إنشاء/create"، ليقوم الموقع بإنشاء تصميمك.

بعد تصميم الفكرة العامة، يمكنك معاينتها في نافذة المعاينة وإجراء التعديلات اللازمة، كما يمكنك إضافة نص أو صور. إذا أعجبك التصميم النهائي، يمكنك مشاركته على مواقع التواصل الاجتماعي أو إرساله عبر البريد الإلكتروني أو طباعته.

زارا ديزاينر برو إكس Xara Designer Pro X

زارا ديزاينر برو هو تطبيق معروف لتعديل الرسوميات، وهو أداة فعالة لتصميم المواقع والمحتوى الرسومي، وله ميزات تساعد على إنشاء تصاميم رائعة لأي محتوى على الإنترنت.

من أهم ميزات هذا البرنامج:

• متوافق مع نظام تشغيل ويندوز وماك أو إس Mac OS ولينكس.
• من أفضل أدوات تحرير الرسوميات.
• يتضمن مجموعة واسعة من المكونات الإضافية.
• يُعَد من أشهر البرامج.
• سهل الاستخدام.
• عالي الجودة.
• سعره مقبول.
• تتوفر الكثير من الدروس ومقاطع الفيديو التدريبية حوله على الإنترنت.

يُعَد زارا ديزاينر برو خيارًا ممتازًا لمصممي الويب الذين يبحثون عن تطبيق قوي لتحرير الرسوميات، فالميزات المذكورة أعلاه تجعل منه أداةً فعالة في إنشاء تصاميم ويب مذهلة.

حزمة كوريل درو جرافيكس CorelDRAW Graphics Suite

حزمة كوريل درو جرافيكس هي مجموعة متكاملة من برامج تصميم الرسوميات، وتتضمن العناصر التالية: كوريل درو CorelDraw، فوتو بريب PhotoPrep، سمارت درو SmartDraw، بيج بلس PagePlus، ويب بلس WebPlus، إكس إي XE.

كوريل درو هو برنامج تحرير رسوميات متجهة، مما يعني إمكانية إنشاء وتعديل الرسوم باستخدام الأشكال والخطوط والمنحنيات والأجسام الهندسية الأخرى. يدعم هذا البرنامج العديد من صيغ الملفات، مثل EPS وSVG وDWG وDXF وAI وPDF.

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

سمارت درو هو برنامج مجاني لإنشاء المخططات الانسيابية يعمل بنظام ويندوز، يساعد على إنشاء خرائط ذهنية ومخططات انسيابية ومخططات أرضية، وهو يدعم أنواع مختلفة من المخططات مثل مخططات الأعمدة والمخططات الدائرية والخطية والمساحية ومخططات الانتشار.

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

ويب بلس هو برنامج تصميم وتطوير ويب يسمح بإنشاء مواقع ويب، ويتيح إمكانية إضافة نموذج تواصل ومعرض صور وخيارات التنقل وتحسين محركات البحث وقوالب لمواقع الويب.

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

ما هي أفضل برامج تصميم الرسوميات للمبتدئين؟

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

أدوبي فوتوشوب CC

من الصعب على المبتدئين إنشاء تصاميم بجودة احترافية، لكن برنامج أدوبي فوتوشوب يساعدهم على ذلك، وهو يُعَد أشهر أداة لتصميم الرسوميات. يتضمن هذا البرنامج الكثير من الأدوات والمؤثرات اللازمة لإنشاء رسوميات عالية الجودة.

هناك نسختان مختلفتان من أدوبي فوتوشوب: نسخة التجربة المجانية وهي كافية للهواة من المصممين، والنسخة المدفوعة الأحدث التي يستخدمها المصممون الخبراء.

أدوبي فوتوشوب CC هو النسخة الأحدث، ويتضمن ميزات وأدوات جديدة. إذا كنت مصممًا مبتدئًا فمن الجيد تحميل هذه النسخة من البرنامج.

أدوبي إليستريتور CC

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

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

بيكسلر pixlr

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

هذه البرامج الثلاثة سابقة الذكر هي أفضل 3 برامج تصميم رسوميات للمبتدئين، ورغم وجود برامج أخرى كثيرة في السوق، إلا أنه من المستحسن البدء بأفضل البرامج.

ما البرنامج الأفضل لتصميم الشعارات؟

هناك أنواع عديدة لبرامج تصميم الشعارات، بعضها مجانية والأخرى مدفوعة، لنتحدث عن أفضلها:

أدوبي إليستريتور

وهو من أهم برامج تصميم الشعارات ومن أقوى برامج تصميم الرسوميات تأثيرًا، يستخدمه مصممو الرسوميات حول العالم، يمكنك تحميله من الإنترنت. يتيح هذا البرنامج إنشاء أنواع مختلفة من الشعارات والرسوميات، ويساعد المبتدئين على إنشاء شعارات احترافية، ويُعَد من أشهر البرامج التي يستخدمها مصممو الرسوميات المحترفون.

كوريل درو

هذا البرنامج ملائم لمن يبحث عن السرعة والكفاءة العالية، وهو سهل الاستخدام ومتوفر لكل من ويندوز وماك. قد يكون هذا البرنامج أضعف قليلًا من أدوبي إليستريتور، لكنه جيد للمبتدئين.

ما البرنامج الأفضل لتصميم واجهة المستخدم؟

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

هناك الكثير من الخيارات الشائعة المطروحة مثل فوتوشوب وإليستريتور وكوريل درو وبينت Paint وإنديزاين وغيرها، لكن أيها أفضل لتصميم واجهة المستخدم؟ لنتحدث فيما يلي عن أفضلها:

أدوبي فوتوشوب

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

سكتش

وهو أداة ممتازة وفعالة لتصميم واجهة المستخدم، يسمح برسم أفكارك وتحويلها إلى صيغة رقمية.

أفينيتي ديزاينر

وهو أيضًا أداة جيدة لتصميم واجهة المستخدم، يستخدم لتصميم الإطارات الشبكية والمخططات layouts.

خاتمة

يمكنك البدء باستخدام حزمة برامج أدوبي. قد يكون أدوبي فوتوشوب أكثر برامج إنشاء وتحرير الصور استخدامًا، ويمكنك استخدامه أيضًا للرسوميات المتجهة، كما يمكنك استخدام تطبيق أدوبي لايت روم Adobe Lightroom لتنظيم الصور، أما أدوبي دريم ويفر فهو محرر HTML وأداة تصميم ويب، ويساعدك على إنشاء وتعديل صفحات HTML والرسوميات والوسائط، وله ميزات أخرى. يستخدَم أدوبي أكروبات Adobe Acrobat لإنشاء المستندات وتوقيع العقود وملء النماذج وإنشاء ملفات PDF وغير ذلك.

قد يكون اختيار أفضل برنامج لتصميم الرسوميات خطوةً محيرة ومربكة لمن هم في بداية طريقهم، لكن الأمر لن يتطلب الكثير من البحث لإيجاد الأدوات الأنسب بالنسبة للمصممين المحترفين.

ترجمة -وبتصرّف- للمقال Best Graphic Design Software: What The Professionals Use.

اقرأ أيضًا

• مقدمة إلى تصميم الرسوميات (التصميم الجرافيكي)
• مبادئ تصميم الرسوميات
• تعرف على أشهر برامج وتطبيقات تصميم الصور والرسوميات

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

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

سنبحث في هذه الاختلافات لمساعدتك على اختيار ما يناسب مشروعك:

ما هو التصميم المتجاوب؟

يعيد التصميم المتجاوب ترتيب المحتوى بناءً على حجم المتصفح، وهو أكثر استخدامًا من التصميم المتكيف.

تستخدم استعلامات الوسائط في CSS لتعيين نقطة توقف واحدة أو أكثر. ونقاط التوقف breakpoints هي حدود منفذ العرض التي تضبط محاذاة عناصر الموقع. تعيَّن نقاط التوقف عادةً بما يلائم أحجام شاشات الأجهزة المحمولة الرائجة من هواتف أو أجهزة لوحية. ويندرج أحد الأمثلة الشائعة على ذلك تحت إطار التصميم المتجاوب؛ وهو شريط التنقل الذي يُعرَض بحجمه الكامل على الشاشات الكبيرة (الحاسوب المحمول أو المكتبي)، وكلما تناقص حجم منفذ العرض، تُضبَط القائمة بعدة أشكال ممكنة لترشيد استخدام المساحة المتوفرة؛ أما في شاشات الهواتف المحمولة الأصغر حجمًا، فتُخفى قائمة التنقل تحت رمز قائمة الهامبرغر (الخطوط الأفقية الثلاثة).

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

مزايا التصميم المتجاوب

تكمن أهم ميزة لتقنية التصميم هذه في ظهور موقع الويب بالشكل الأساسي نفسه للمستخدمين على جميع الأجهزة، مما يسمح لزوار الموقع المتكررين بسهولة إيجاد ما يبحثون عنه. وبالإضافة لذلك، تُعَد إضافة عناصر متجاوبة إلى CSS عمليةً سهلةً نسبيًا، إذ يتطلب الأمر أخذ عناصر الشاشة الكبيرة وضبطها وفق نقاط التوقف المختلفة. حتى مواقع الويب القديمة المصممة قبل ثورة الهواتف الذكية قابلة للتعديل على هذا الأساس دون الكثير من المتاعب.

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

مساوئ التصميم المتجاوب

هناك أيضًا مساوئ لاختيار التصميم المتجاوب، فقد تظهر بعض مخططات المواقع بشكل مناسب على الشاشات الكبيرة، لكن تصعب ملاءمتها مع الشاشات الصغيرة، كما قد يتطلب الأمر أيضًا الكثير من التمرير، رغم أن هذا لم يَعُد مستهجنًا كثيرًا مثل السابق. وبالإضافة لذلك، قد تكون بعض العناصر التفاعلية أو التعليمات البرمجية بطيئةً أو مرهقةً جدًا عند استخدامها على الهاتف.

ما هو التصميم المتكيف؟

يُعرَف التصميم المتكيف أيضًا بـ "التحسين التدريجي"، وهو عملية إنشاء العديد من المخططات الثابتة لمختلف أحجام الشاشات، بحيث يمكن أن يُنشئ المصمم تجارب مختلفةً تمامًا بين الهاتف المحمول والجهاز اللوحي والحاسوب.

تتمثل فكرة هذا التصميم بالبدء بشكل بسيط جدًا، ثم "تحسين" التجربة للشاشات الأكبر، وكلما توفرت مساحة أكبر في شاشة المستخدم، ظهرت له المزيد من الخيارات والميزات.

يمكنك رؤية الفرق بين التصميم المتكيف والمتجاوب من خلال تغيير حجم متصفح الويب على شاشة الحاسوب وملاحظة كيف يتغير موقع الويب وفقًا لذلك: فالموقع المتجاوب سيضبط المحتوى بما يناسب حجم الشاشة عندما تصل إلى نقاط توقف معينة، إذ قد تتكدس الأعمدة مثلًا فوق بعضها، أو تتوسع الإطارات والنصوص المكتوبة؛ أما في التصميم المتكيف، فلا وجود للمخططات التي تتغير باستمرار، بل قد يؤدي فرض نقاط توقف جديدة إلى ظهور مخطط جديد تمامًا، وربما بعض الاختلافات في المحتوى، فقد تُزال بعض العناصر غير الضرورية من التصميم المخصص للهاتف.

مزايا التصميم المتكيف

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

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

مساوئ التصميم المتكيف

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

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

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

يُعَد تحسين محركات البحث SEO أيضًا مصدر قلق للمواقع التي تقدم إصدارات مخصصة للجوال فقط باستخدام “m.yoursite.com” وما شابهه، لكن ذلك لن يؤثر على جميع الحالات، مع ذلك يجب أخذه بالحسبان إذا أثر على مشروعك.

اختيار تقنية التصميم المناسبة

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

إذا كنت تستخدم منتجات طرف ثالث مثل سِمات ووردبريس WordPress themes (التي تتبع غالبًا النمط المتجاوب)، فقد اتُّخذ القرار حول التقنية المستخدمة بالنيابة عنك؛ مع ذلك لا يزال التصميم المتكيف يحظى بالترجيح بالنسبة للمواقع الأكبر التي تمتلك الميزانية والوقت، إذ يمكن أن ينشئ المصممون تجارب رائعةً لكل جهاز على حدة باستخدام التصميم المتكيف.

باختصار، الهدف الأساسي هو ضمان أن يعمل الموقع جيدًا مع كل مستخدم، ولحسن الحظ فهناك طريقتان أثبتتا جدارتهما في تحقيق ذلك، هما التصميم المتكيف والتصميم المتجاوب.

ترجمة -وبتصرّف- للمقال Adaptive vs. Responsive Web Design لصاحبه Eric Karkovack.

اقرأ أيضًا

• مدخل إلى التصميم المتجاوب والتصميم المتكيف
• دليل المبتدئين إلى التصميم التفاعلي Interaction Design
• فلسفة تصميم الويب المتجاوب
• مقدمة في تصميم الويب المتجاوب: العناصر الزائفة واستعلامات الوسائط وغيرها

يرمز الاختصار DPI إلى النقاط لكل بوصة، بينما يرمز الاختصار PPI إلى البكسل لكل بوصة، ولكي تعرف أفضل دقة على شاشتك، يجب أن تعرف نوع الدقة الموجودة لديك.

يأتي مصطلح "بكسل pixel" من الكلمتين الإنجليزيتين "صورة picture" و"عنصر element"، وهو أصغر وحدة قياس للصور الرقمية.

تساعد زيادة عدد وحدات البكسل في الصورة على تحسين دقتها، في حين يؤدي انخفاض عدد وحدات البكسل إلى إنتاج صور قليلة الجودة، إذ تتعلق دقة الشاشة بعدد وحدات البكسل في الشبكة، وتوجد وحدات البكسل عادةً في شبكة ثنائية الأبعاد.

تعود البكسل في تاريخها إلى المهندس الأمريكي فريدريك بيلينجسلي Frederic Billingsley، الذي ابتكر أيديولوجية البكسل عام 1965، من خلال كونه أول من نشر عنصر صورة في ورقتين.

وعلى الرغم من أن مصطلحي النقاط لكل بوصة DPI والبكسل لكل بوصة PPI يصفان دقة الصورة، لكنهما يحملان مفهومين مختلفين، إذ يمثل مصطلح DPI نقاط الحبر المراد طباعتها على الورق، بينما يصف مصطلح PPI عدد وحدات البكسل المربعة على شاشة رقمية، وإليك شرحًا وافيًا عن الفرق بينهما.

البكسل لكل بوصة PPI

البكسل لكل بوصة PPI هو قياس يصف عدد وحدات البكسل التي تُعرض على شاشة الحاسوب أو التلفاز أو الأجهزة الرقمية الأخرى، وتُقاس من خلال قسمة عدد وحدات البكسل في البوصة المربعة من مساحة العرض على عدد وحدات البكسل في البوصة التي يمكن للجهاز عرضها.

على سبيل المثال، يمكن أن يحوي تلفاز 4K ما يقارب 8 ملايين بكسل، والذي يؤثر بشدة على جودة إخراج الصورة، فعندما يكون هناك عدد وحدات بكسل أقل في البوصة، سيكون حجم وحدات البكسل كبير، وستحصل على صورة منقطة، مما يؤثر سلبًا على جودة إخراج الصورة.

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

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

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

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

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

يجب أن تعلم أن إنشاء وحدات البكسل فكرة سيئة، لأن وحدات البكسل التي ينشئها الحاسوب ليست مماثلة لوحدات البكسل الحقيقية، لذا لا يُنصح بالإقدام على هذه الخطوة، على الجانب الآخر، يُعَد التخلص من وحدات البكسل أمرًا جيدًا إذا لم تكن بحاجة إلى صورة عالية الوضوح.

النقاط لكل بوصة DPI

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

يُشار إلى DPI أيضًا عند الحديث عن الطابعات، ففي الوقت الحاضر، تستخدم الطابعات عدة ألوان لكل بكسل كونها تحتوي على ألوان حبرية مختلفة، ولكن فيما مضى، كان يقتصر استخدام الطابعات على 4-5 ألوان فقط، ويُنصح دائمًا باستخدام عدد قليل من الألوان، لتكون الطابعة قادرة على طباعتها.

وحدات البكسل الفرعية: يتكون كل بكسل في الصورة من سلسلة من النقاط الصغيرة جدًا، وبالعموم، كلما رفعت عدد النقاط لكل بوصة DPI، كان لون الصورة أفضل، وحاول أن تختار دائمًا ألوانًا جميلةً، ويمكنك أن تجمع بين ألوان مختلفة لتحصل على ألوان جديدة، ولكن ابتعد عن اختيار الكثير من الألوان، لكيلا تكون الطباعة سيئة.

يجب أن تقوم بتغيير إعداد الطابعة إلى DPI منخفض لتحافظ على الحبر وتحسن من مهمة الطباعة، وسوف تلاحظ اختلافًا في الجودة، لذا من الأفضل تغييره إلى أدنى إعداد، بحيث لا يؤثر على الجودة أو الألوان.

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

الدقة

تُعبّر دقة الوحدة عن قياسات العرض × الارتفاع، وهو قياس البكسل لأي صورة، سواءً على شاشة رقمية أو على ورق طباعة.

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

الدقة القياسية هي 300 نقطة في البوصة، وكلما زادت الدقة، كانت الألوان أفضل وكان مزجها أكثر سلاسة، أما الحد الأدنى للمعايير الفوتوغرافية عالية الجودة فهي 150 نقطة في البوصة، وهي معايير تناسب الكتب والمجلات.

تستخدم الصحائف عادةً دقة 85 نقطة في البوصة، والتأثير واضح، إذ تظهر النقاط الفردية وتغيب بعض التفاصيل الدقيقة في الصورة، كما تنخفض دقة اللوحات الإعلانية لتصل إلى 45 نقطة في البوصة، وقد تتفاجأ من المعلومة الأخيرة كونك تشاهد اللوحات الإعلانية من مسافات بعيدة.

الفرق بين النقاط لكل بوصة DPI والبكسل لكل بوصة PPI

يتمثل الاختلاف الأساسي بين النقاط لكل بوصة DPI والبكسل لكل بوصة PPI في أن DPI هي نقاط حبر مادية تُطبع على الورق، في المقابل تشير PPI إلى عدد وحدات البكسل المربعة في بوصة واحدة من الصورة المعروضة على شاشة الحاسوب، ويمكننا القول أن DPI تمثل خصائص الطابعة الفعلية، في حين تمثل PPI خصائص الصورة الرقمية.

أما عن الفرق بين DPI & PPI في الشاشات والطباعة، فإن الصورة المطبوعة ستظهر عادةً حادة عند 100% DPI، في حين لا يُشترط أن تظهر الصورة حادة على الشاشة الرقمية، ويعود ذلك إلى كيفية معالجة الصور على الشاشة وكيفية ترتيب وحدات البكسل على لوحة العرض.

فيما يتعلق بالصفحات المطبوعة، فمن الشائع استخدام قيم DPI تتراوح بين 300-600، أما للشاشات الرقمية، فتتراوح قيم DPI بين 150-300، وعندما تكون قيم DPI منخفضة، تظهر الشاشات بتفاصيل قليلة، بينما يتحسن ظهور التفاصيل مع ارتفاع قيم DPI.

يمكن أن يختلف ترتيب البكسل على شاشة الحاسوب اعتمادًا على الشركة المصنعة ونظام التشغيل والمتصفح وجهاز العرض، ولكن بالعموم، يُنصح يوضع قيم DPI حول 200-400، إذ تساعد هذه القيم على إنتاج صور أكثر وضوحًا وتفصيلاً على معظم الأجهزة.

لا يعني الكلام السابق أنه يجب عليك دائمًا استخدام الدقة الأعلى، بل يجب اختيار الدقة التي تناسب احتياجات التصميم، فمن المحتمل أن تظهر الصورة ضبابية إذا كانت دقتها 1200 DPI وكانت دقة الشاشة 300 DPI.

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

وللإجابة عن السؤال الأصلي، يمكن للطابعة الحبرية النموذجية طباعة صورة بدقة 15 سطرًا في البوصة، وإذا كانت نفس الصورة بدقة 1200 نقطة في البوصة، فستتحسن جودة الطباعة.

يمكن للطابعات عالية الجودة -مثل طابعات HP أو Epson أو Xerox- إنتاج مطبوعات عالية الجودة حتى وإن لم تكن دقة الصورة عالية، فالحد الأدنى للدقة الذي يجب أن تستهدفه هو 1200 نقطة في البوصة.

إذا كنت تبحث عن طباعة عالية الجودة، فيمكنك الاعتماد على طابعات الليزر، كونها تُباع بأسعار معقولة موازنةً مع الأنواع الأخرى، ويمكن لطابعة الليزر إنتاج خطوط واضحة وصافية بدقة 2400-4800 نقطة في البوصة، ومن الأمور التي تساعدك على الحصول على طباعة جيدة هي استخدام ورق عالي الجودة.

الخلاصة

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

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

ترجمة -وبتصرّف- للمقال DPI vs PPI – What’s the Difference? Online & Print Resolution Explained.

اقرأ أيضًا

• مدخل إلى فن البِكسل Pixel Art
• تعلّم مبادئ رسم فن البكسل من نوعية Non-Isometric
• مساحات وقياسات العمل التصميمي
• توضيح الصورة وزيادة دقتها بخطوات بسيطة في Photoshop

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

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

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

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

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

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

دور المصمم الجرافيكي

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

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

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

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

كيف تصبح مصمم جرافيك؟

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

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

الصفات التي يجب أن يتحلى بها مصمم الجرافيك

يتحمل المصممون مسؤولية إنشاء صور جذابة تخاطب المستخدمين، إذ تكمن مهمتهم في حث جمهورهم المستهدف على معرفة المزيد حول المنظمة أو المنتج الذي يروجون له ومشاركة هذه المعلومات مع الآخرين، لذا يجب أن يمتلك مصممو الجرافيك العديد من المهارات المهمة مثل أي مهنة أخرى، وإليك بعض الصفات الأساسية التي يجب أن يتحلى بها المصمم الجرافيكي الناجح.

• حل المشكلات: عند مواجهة التحديات، يجب أن يكون المصمم قادرًا على استخدام قدراته في حل المشكلات من خلال التفكير الخلّاق وابتكار الحلول، ويمكن تطوير هذه المهارة من خلال الخبرة والممارسة.
• الإِبداع: لا يمكنك أن تكون مصممًا جيدًا دون امتلاك صفة الإبداع، إذ يتصف المصممون المبدعون بامتلاك رؤية فريدة وموهبة للابتكار، إضافةً إلى فكر تصميمي مميز.
• الملاحظة: تُعَد مهارة الملاحظة واحدة من أكثر المهارات أهميةً لمصمم الجرافيك، لأنه إذا كان بإمكانك ملاحظة الأشياء التي تحتاج إلى تحسين، فمن المرجح أن تبتكر أساليبًا لتحسينها.
• التفكير النقدي: يجب عليك تقييم الأفكار الإبداعية لتحديد فيما إذا كانت مجديةً وعمليةً أم ليست كذلك، إذ يجب أن يدرك مصمم الجرافيك أن ليست كل الأفكار جيدة أو ذات قيمة.
• المهارات المنطقية: القدرة على استخدام المنطق والعقل هي مهارات جوهرية للمصمم، وسواءً كنت تعمل على إنشاء تصميم رسومي أم كنت تعمل في الكتابة التسويقية لموقع إلكتروني، فمن الضروري أن تميز بين الحقائق والآراء.
• المهارات العملية: غالبًا ما توصف وظيفة التصميم الجرافيكي بأنها فنية، لكن هذا لا يعني أنها لا تحتاج إلى مهارات عملية، فحتى أكثر المصممين مهارةً وإبداعًا يحتاجون إلى أساس من المهارات العملية لأداء مهامهم على نحو جيد، وإليك بعض المهارات العملية التي يحتاجها المصمم الجرافيكي الناجح.
• تعرف على ما تريد تصميمه: قبل البدء في أي مشروع إبداعي، تأكد من فهمك للشكل الذي يجب أن يبدو عليه المنتج النهائي، قد تكون معرفة النتيجة المرجوة أمرًا صعبًا، وقد يستغرق الأمر عدة تجارب وأخطاء قبل أن تتمكن من الوصول إلى تصميم تحبه. يُعَد التواصل المرئي مع العملاء واحدًا من أكبر التحديات التي تواجه مصممي الجرافيك، ويحدث التواصل الفعال عادةً عندما يفكر مصمم الجرافيك من نفس المنطلق الذي يفكر منه العميل، أي أن يتمكن من معرفة الرسالة الذي يريد أن ينقلها للجمهور والسبب الكامن وراءها، وهذا يعني أنه يجب على مصممي الجرافيك تخصيص الوقت لفهم الجمهور المستهدف.
• دمج التقنيات المختلفة: عندما تتمكن من فهم التصميم الذي تريد إنشاءه، فقد حان الوقت لأن تبدأ بالعمل. يمكنك استخدام برامج مثل فوتوشوب Photoshop وإن ديزاين InDesign لإنشاء عناصر مرئية، ومن ثم تجمعها في قطعة واحدة نهائية. إذا كنت تريد تصميم شيء ما لأحد عملائك، فيجب عليك إنشاء نماذج أولية لاختبار تصميمات مختلفة. يجب عليك أن تعرف كيفية استخدام الأدوات ببراعة، فعلى سبيل المثال، يُعَد برنامج أدوبي إن ديزاين Adobe InDesign ممتازًا لتحرير النصوص والصور والرسومات، في حين يمكنك استخدام برنامج فوتوشوب Photoshop لإنشاء العناصر المستخدمة في برنامج إن ديزاين InDesign وأنواع الرسومات الأخرى، مثل الشعارات.
• إدارة وقتك: من المهم أن تكون جيدًا في إدارة وقتك وأولوياتك كمصمم، ففي بعض الحالات، قد يكون لديك العديد من المشاريع الواجب إنجازها، لذا يجب أن تكون قادرًا على الاستجابة بسرعة، كما أن هناك بعض المشاريع التي تستغرق وقتًا طويلاً، لذا من الضروري أن تتمكن من وضع خطة مناسبة لها. عند العمل على مشروع ما، يُفضَّل أن تخصص وقتًا للتركيز على عنصر واحد فقط في كل مرة، سيساعدك هذا الأمر على تحقيق أقصى استفادة من وقتك، وسيجنبك إرهاق نفسك وتشتيت وقتك، علاوةً على ذلك، قد يساعدك تقسيم مشروعك إلى مراحل على إنجازه في وقت أسرع.

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

المهارات التقنية التي يحتاجها مصمم الجرافيك

يمكن أن يكون التصميم الجرافيكي مزيجًا من المهارات الفنية والتقنية، إذ يُستَخدم التصميم الجرافيكي عادةً لنقل الرسائل أو الأفكار من خلال العناصر المرئية، مما يتطلب فهمًا راسخًا للعديد من جوانب التصميم.

ليس من الضروري أن يتقن المصمم لغات البرمجة المختلفة، لكنه بحاجة إلى معرفة كيفية تصميم العناصر المرئية باستخدام برامج التصميم المختلفة، مثل برنامج أدوبي فوتوشوب Adobe Photoshop وبرنامج أدوبي إليستريتور Adobe illustrator وبرنامج أدوبي إن ديزاين Adobe InDesign، وإليك بعض المهارات الأساسية التي يجب أن تتقنها.

برنامج فوتوشوب Photoshop

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

برنامج إليستريتور Illustrator

إليستريتور Illustrator هو برنامج تصميمي لإعداد الرسومات الموجهة، إذ يتيح لك إنشاء صور باستخدام خطوط مستقيمة عوضًا عن الأشكال، فعادةً ما تكون الرسومات الموجهة أكثر سهولة في الاستخدام من الرسومات القائمة على البكسل، كما أنها تميل إلى أن تكون أكثر تنوعًا، لذا فهي تُستخدم في كل شيء، من إنشاء الخرائط إلى الملصقات والشعارات.

برنامج إن ديزاين InDesign

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

المهارات الشخصية التي يحتاجها مصمم الجرافيك

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

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

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

في صدد آخر، يُعَد التواصل البصري مفتاحًا لتطوير تصميمات رسومية عالية الجودة، وعند إنشاء تصميم ما، ضع نصب عينيك النصائح التالية:

• ركز على تصميم بسيط بألوان وخطوط صافية ومتسقة.
• استخدم الطباعة المناسبة لتصميمك.
• ابق منظمًا ولا تبالغ في ذلك.
• أظهر ما لديك من خبرات بدلًا من الحديث عن ذلك.
• حدد مكان تواجد جمهورك.

تُعَد مهارة حل المشكلات واحدة من أهم المهارات التي تحتاجها لكي تبدع في مجال التصميم الجرافيكي. يجب أن تكون قادرًا على العمل مع فريقك لإنشاء تصميم يلبي احتياجاتهم أثناء العمل ضمن الميزانية المتاحة والجدول الزمني.

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

هل يمكنني أن أصبح مصمم جرافيك إذا لم أتمكن من الرسم؟

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

لا يهم الوسيلة التي تستخدمها، سواءً كانت فرشاة رسم أو قلم رصاص أو قلم تخطيط أو أي وسيلة أخرى، فالأهم هو أن تستمتع بالرسم الذي يتطور بالممارسة والصبر.

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

ما الفرق بين المصمم الجرافيكي والرسام؟

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

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

أيهما افضل؟

إنها مسألة تفضيل، قد تفضل الحرية التي تأتي مع كونك رسامًا، حتى أن بعض الرسامين يفضلون تسمية أنفسهم بالفنانين.

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

عندما تستمر في العمل على مهاراتك الفنية، ستقرر أي من هذين المجالين يناسبك أكثر من المجال الآخر.

في الختام

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

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

ترجمة -وبتصرّف- للمقال Graphic Design Skills You Need to Start a Career in Design.

اقرأ أيضًا

• مقدمة مفصلة إلى التصميم الجرافيكي
• أساسيات التصميم الجرافيكي - الجزء الأول: العناصر
• أبرز مشكلات مصممي الجرافيك مع أساليب لحلها
• كيف تحظى بوظيفة في التصميم الجرافيكي؟

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

يمكنك أن تبدأ العمل في مجال التصميم الجرافيكي دون الحاجة إلى خبرة كبيرة أو موارد ضخمة، إذ يُعَد ذلك خيارًا ممتازًا للمصممين الذين يتطلعون إلى بدء عمل ثانوي يجلب لهم بعض الأموال الإضافية، ومع ذلك، يجب عليك أن تبحث وتفكر جيدًا في أساسيات التصميم الجرافيكي قبل أن تبدأ العمل في هذا المجال، لذا جمعنا لك في هذا المقال بعض الأشياء التي تحتاج إلى تأخذها في الحسبان قبل أن تبدأ.

تعلم الأدوات الأساسية في التصميم الجرافيكي

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

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

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

إذا كنت تريد أن تكون محترفًا في التصميم الجرافيكي، فيجب أن تكون مبدعًا وتراعي التفاصيل الدقيقة، كما يجب أن تتقن استخدام برامج التصميم المختلفة، مثل برنامج أدوبي فوتوشوب Adobe Photoshop وبرنامج أدوبي إليستريتور Adobe Illustrator وبرنامج أدوبي إنديزاين Adobe InDesign وكذلك برنامج فايروركس Fireworks، إضافةً إلى برنامجي فوتوشوب إكسبرس Photoshop Express ومايكروسوفت وورد Microsoft Word.

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

ابحث عن مرشد

عندما نتحدث عن التصميم الجرافيكي، فإنه يشمل تصميم الشعارات وبطاقات العمل والبروشورات brochures ونحو ذلك، ويُعَد التصميم الجرافيكي إحدى أفضل الوظائف التي يمكن أن تعمل بها، إذ يمكن لمصمم الجرافيك أن يكسب مبلغًا جيدًا من المال من خلال هذه المهنة.

يتمتع مصممو الجرافيك بالعديد من الخيارات لكسب المال من مهاراتهم في التصميم الجرافيكي، إذ يمكنهم ممارسة العمل الحر وتنفيذ أعمال مستقلة، أو يمكنهم العمل لدى الشركات والمؤسسات التي لديها فريق عمل، مثل شركة أدوبي Adobe وشركة وول مارت Walmart وشركة جوجل Google وغيرها من الشركات، لذا يمكن لمصمم الجرافيك اختيار طريقة العمل التي يريدها.

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

ابدأ في بناء ملف نماذج أعمالك

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

عينات العميل

يجب عليك تقديم عينات من أعمالك السابقة لعملائك المحتملين، مما يساعدهم على معرفة جودة عملك والخدمات التي تقدمها. يجب أن تحرص على انتقاء عينات صور تناسب الخدمات التي تقدمها، فعلى سبيل المثال، إذا كنت تقدم خدمة تصميم المواقع الإلكترونية، فيمكنك استخدام نماذج لمواقع إلكترونية صممتها سابقًا.

عينات المشاريع

المشاريع هي نتائج الخدمات التي قدمتها لعملائك، وهي تشمل المنتجات النهائية التي سلمتها. يمكنك تقديم نماذج مختلفة من المشاريع بحيث يمكن للعملاء المحتملين معرفة نوع التصميم المناسب لهم.

بناء قاعدة عملائك

تنمو صناعة التصميم الجرافيكي يومًا تلو الآخر، مما يدفع الكثير من الشركات والمؤسسات للبحث عن مصممي جرافيك مبدعين وموهوبين، ومع ذلك، يعجز كثير من الناس عن إنشاء قاعدة عملاء في عملهم، لذا سأقدم لك فيما يلي بعض النصائح المفيدة حول كيفية بناء قاعدة عملاء في عملك في التصميم الجرافيكي.

ابدأ في نطاق صغير

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

بناء العلاقات

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

استخدام منصات التواصل الاجتماعي

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

تقديم الخدمات عبر الإنترنت

تحتاج إلى تقديم خدماتك عبر الإنترنت لجعل أعمالك في التصميم الجرافيكي أكثر نجاحًا، ففي الماضي، كان يتعين على الناس زيارة المتاجر التقليدية للحصول على معلومات حول التصميم الجرافيكي، أما في يومنا هذا، تحتوي بعض المواقع الإلكترونية على معلومات حول خدمات التصميم الجرافيكي.

يمكنك تقديم خدماتك عبر هذه المواقع أو الترويج لأعمالك في التصميم الجرافيكي. لا يهم المكان الذي تعلن فيه عن أعمالك، لكن تأكد من تقديم إعلان ذي جودة عالية، كما يمكنك استخدام تقنيات تحسين محركات البحث للترويج لأعمالك.

وضع خطة عمل واضحة

خطة العمل هي وثيقة مكتوبة تحتوي على الأنشطة التي يحتاجها العمل لتحقيق أهدافه، وهي تهدف إلى مساعدتك على تحديد المهام التي تريد القيام بها، ومقدار التكلفة اللازمة لهذه المهام، وفيما إذا كانت مربحةً أم ليست كذلك، وإليك بعض المعلومات التي يجب أن تحتوي عليها خطة عملك:

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

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

ابدأ بتسويق نفسك

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

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

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

إذا بحثت على الإنترنت، ستجد على الأرجح بعض مواقع الصور التي تتيح لك استخدام صورها مجانًا، إذ تحتوي هذه المواقع على صور يمكنك نسخها ولصقها في معرض أعمالك.

ومع ذلك، يمكن أن تكون هذه المواقع ضعيفةً أو مفقودةً، ولا يُعتنى بها غالبًا، لذا قد تجد الصور منخفضة الدقة أو لا تحتوي على معلومات حقوق الطبع والنشر.

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

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

حاول أن تعتمد على صورك الخاصة قدر الإمكان عند إنشاء معرض أعمالك، واحرص على أن تختار صورًا ذات نمط مماثل لبقية أعمالك.

يمكنك أن تستلهم الأفكار من خلال البحث في معرض أعمال المصممين الآخرين، كما يمكنك زيارة مجموعات منصات التواصل الاجتماعي ورؤية ما ينشره المصممون الآخرون.

ابدأ في التعامل مع العملاء

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

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

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

يمكنك الاعتماد على أماكن أخرى، مثل مجموعات منصة فيسبوك Facebook للمصممين المستقلين، وعرض مساعدة المصممين الآخرين في المشاريع.

غالبًا ما تمتلئ هذه المجموعات بالأشخاص الذين يبحثون عن أعمال التصميم الجرافيكي، لذا فهي مكان رائع للإعلان والعثور على العملاء المحتملين.

ولكن ماذا لو لم تكن مهتمًا بالعمل المستقل؟ لا بأس، يمكنك أن تبدأ بأن تصبح طالبًا في التصميم الجرافيكي، فهي طريقة رائعة للتعرف على مجال التصميم الجرافيكي، كما يمكنك التواصل مع مصممين آخرين مهتمين بتوظيفك كطالب في التصميم الجرافيكي.

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

وأخيرًا، إذا كان لديك الإمكانية المادية الكافية، فيمكنك شراء الصور الموجودة عبر الإنترنت وإعادة بيعها إلى مصممين آخرين.

التواصل

يُعَد التواصل جزءًا لا يتجزأ من أي عمل تجاري، فهو يساعدك على تنمية وتوسيع علامتك التجارية، كما أنه يتيح لك إمكانية الوصول إلى عملاء محتملين والحصول على فرص ثمينة.

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

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

إذا قابلت شخصًا ما في حدث اجتماعي، فاسأله عن شركته وخدماته ونوع الأشخاص الذين يعملون معهم، فقد يرغب في تقديمك إلى شخص آخر إذا كنت محظوظًا.

من الضروري أيضًا أن تكون استباقيًا، أي في حال ذهبت إلى حدث اجتماعي، فحاول أن تتواصل مع الآخرين، ولا تخف من التحدث مع الآخرين. يمكنك أن تخبرهم عن وظيفتك وعن عملك، ولا تدري أين تختبئ الفرص الذهبية.

أخيرًا، تذكر أن هدفك هو توسيع نطاق عملك، لذا فكر في كيفية العمل مع هؤلاء الأشخاص.

بناء علامتك التجارية الخاصة

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

ومع ذلك، لكي تبني علامتك التجارية كمصمم جرافيكي، يجب أن تعلم أنك لست بحاجة إلى المرور عبر شركة كبيرة، إذ يمكنك بناء اسمك بسرعة من خلال تصميم شعارك الخاص.

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

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

يمكنك أيضًا استخدام وسائل التواصل الاجتماعي لإعلام الناس بعلامتك التجارية، وتأكد من مشاركة شعارك على حساباتك الشخصية على منصات فيسبوك وإنستجرام وتويتر، كما يمكنك إضافة شعارك إلى تذييل موقعك الإلكتروني.

الحصول على الإحالات

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

يُعَد برنامج إحالة العملاء أداة قوية للحصول على المزيد من الأعمال، ويمكنك أن تطلق هذا البرنامج بسهولة، إذ يمكنك بناء نظام بسيط يمنحك مزيدًا من الإحالات. يمكنك أن تبدأ اليوم ولن يكلفك شيئًا.

الخلاصة

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

ترجمة -وبتصرّف- للمقال How to Start Your Own Graphic Design Business.

اقرأ أيضًا

• مقدمة إلى تصميم الرسوميات (التصميم الجرافيكي)
• أساسيات التصميم الجرافيكي - الجزء الأول: العناصر
• كيف تحظى بوظيفة في التصميم الجرافيكي؟

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

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

بغض النظر عن نوع الصناعة التي تعمل بها، فإنك ستحتاج إلى تصميم شعار احترافي، فسواءً كنت مكلفًا بتصميم شعار فعال، أو كنت صاحب عمل في حيرة من أمره حول كيفية تصميم شعار مميز؛ فإنك بحاجة إلى بعض الأفكار الملهمة، ونأمل أن تجد ضالّتك في هذا المقال الذي يقدم بعض الأفكار حول كيفية إنشاء أفضل شعار لعلامتك التجارية.

ما هو الشعار؟

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

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

الشعار والعلامة التجارية هما أفضل صديقان

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

قبل أن تصمم شعارًا لعلامتك التجارية، يجب أن تحدد ماهية علامتك التجارية، أي ماهو الشيء الذي يمكن لشعارك أن يقف خلفه ويدعمه، إذ يجب أن يعتمد شعارك على علامتك التجارية.

ولتصميم شعار مميز وفعال، يجب أن تضع في حسبانك بعض القواعد، مما يساعدك على البقاء مركزًا ومتحفزًا للحصول على الأفكار، وتذكر أن فكرتك الأولى قد لا تكون الأفضل دائمًا، لذا كن مبدعًا واستكشف الخيارات الأخرى.

قواعد تصميم الشعار

لا يمكنك تصميم شعار رائع بين عشية وضحاها، إذ يتطلب الأمر الكثير من التدريب، وفيما يلي القواعد التي يجب مراعاتها عند تصميم شعار ما.

إنشاء رسومات أولية

تُعَد هذه الخطوة أساسيةً وضروريةً، إذ تحتاج إلى تصميم بعض النماذج الأولية لكي يبدأ دماغك بالإبداع وإطلاق الأفكار المميزة، ولا يجب عليك أن تقلق حول التفاصيل في هذه المرحلة.

يمنحك عمل الرسومات السريعة خيارات متعددة للاختيار من بينها أو دمج أفكار منها، ولا يُعَد الانتقال مباشرةً إلى الحاسوب فكرةً جيدةً، لأنه يحد من إبداعك. وإلى جانب ذلك، يجب أن تستخدم الحاسوب عندما يكون لديك فكرةً ملموسةً للعمل عليها، لأنه بمجرد أن تحصر تفكيرك في فكرة واحدة، فإن هذا سيخنق إبداعك وقد يجعلك محبطًا عندما لا تصل إلى فكرة نهائية جيدة، لذا دع خيالك ينطلق.

ضع أفكارًا متعددةً على الورق، بغض النظر عن مدى سخافتها، وعندها تختار الفكرة المناسبة وتضع الملامح الأولية، فإنه يمكنك الانتقال للعمل على الحاسوب، حيث المكان الذي يمكنك من خلاله تحسين شعارك.

البساطة هي الخيار الأفضل

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

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

الألوان

إن نظرية الألوان معقدة، لكن فهم أنظمة الألوان الأساسية يُعَد ميزةً عظيمةً لك ولعملك، كما يجب أن تعرف الألوان التي تعكس شركتك، وخذ في الحسبان بعض أساسيات الألوان الأساسية، مثل:

• تجنب الألوان الفاتحة، كونها تميل إلى الاختفاء عندما يتم تصغير الشعار.
• لا تستخدم الألوان الزاهية للغاية، لأنهم قاسون على العين، فأنت تريد أن يرى الناس شعارك لا أن يغمضوا أعينهم.
• إذا كنت تصمم شعارًا لن يُستخدم في بلدك، فيجب أن تتعرف على كيفية إدراك الألوان في البلدان المختلفة التي سيُشاهَد فيها شعارك، وذلك لكيلا تُسيء إلى أي شخص.
• صمم شعارك بالأبيض والأسود، فإذا لم يظهر جيدًا في هذه الألوان الأساسية، فعلى الأرجح لن يبدو جيدًا في الألوان الأخرى.

الطباعة

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

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

ابتعد عن التأثيرات الشديدة

تحتوي برامج تصميم الجرافيك والرسوم التوضيحية مثل برنامج أدوبي فوتوشوب Adobe Photoshop وبرنامج أدوبي إليستريتور Illustrator على العديد من الأدوات المختلفة التي تقدم تأثيرات قوية، لكن احذر أن تنجرف خلفها بشدة، فعلى الرغم من أنها قد تعزز شعارك وتضيف إليه بعض اللمسات السحرية، لكن أفضل الشعارات لا تعتمد عليها كثيرًا، فبعض التأثيرات تبدو جميلة على الشاشة، لكن هذا الجمال يندثر ويختفي عندما تُطبع مع الشعار، وكما ذكرنا سابقًا، فإن البساطة هي مفتاح النجاح.

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

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

تصميم شعار أصلي

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

أنت تدعى "مصمم" وهذا يعني أنك مبدع، إذ أنك تستخدم إبداعك وتقدره، ولا تريد من أحد أن يسرق أفكارك وإبداعك، وكذلك المصممون الآخرون.

تجنب الشعارات متدنية القيمة

يعكس شعار علامتك التجارية هويتك وما تمثله من خدمات وقيم، لذا ابتعد عن الوسائل الرخيصة للحصول على الشعارات، إذ لا يمكنك أن تثق بشخص سيصمم لك شعارًا جيدًا مقابل دولار واحد.

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

هناك عدة أماكن يمكنك أن توظف من خلالها مصممين خبراء، وأحد هذه الأماكن منصة مستقل التي تتيح لك الوصول إلى العديد من المصممين المحترفين.

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

بعض الاختبارات لاختيار أفضل شعار لعلامتك التجارية

يمكنك أن تجري بعض الاختبارات التي تساعدك على اختيار تصميم شعار مناسب، كما تتيح لك معرفة ما إذا كنت على المسار الصحيح، أم أنك تحتاج إلى بعض التعديلات.

الاختبار الأول: هل يمثل الشعار علامتك التجارية؟

لكي تعرف فيما إذا كان الشعار يمثل علامتك التجارية أم لا، يمكنك الإجابة عن الأسئلة التالية:

• هل يمكن للعملاء والمستهلكين استنتاج المنتج أو الخدمة التي تقدمها من خلال شعار علامتك التجارية؟
• ماذا تمثل علامتك التجارية؟
• هل يقوم شعارك بعمل جيد يمثل شركتك؟

ستساعدك الإجابة عن تلك الأسئلة في معرفة إذا كان الشعار مناسبًا لعلامتك التجارية أم لا.

الاختبار الثاني: هل ترتبط ألوان الشعار بعلامتك التجارية؟

تميل معظم الشركات إلى استخدام ألوان الشركة لتصميم الشعارات، ويمكنك الإجابة عن السؤالين التاليين:

• هل تذكرك رؤية الشعار بشركتك دون أن تنطق بكلمة واحدة؟
• هل تثير ذات الشعور لدى عملائك؟

الاختبار الثالث: هل من الصعب نسيان شعارك؟

لقد غرس شعار شركة كوكا كولا Coca-Cola في ذاكرة معظمنا صورةً تدوم مدى الحياة لمشروب بني حلو، لذا يجب أن يكون شعارك لا يُنسى لكي يبرز أمام منافسيك.

حاول أن تتذكر المنتجات التي استُخدمت منذ فترة طويلة ولكن لم تَعُد تُستخدم في يومنا هذا. عندما ترى شعارها، ألا يُذكّرك ذلك بأيام الطفولة أو بمناسبة خاصة؟

الاختبار الرابع: هل الشعار فعال؟

لمعرفة فيما إذا كان شعارك فعّالًا أم لا، يمكنك أن تجيب عن الأسئلة التالية:

• هل يمكن رؤية شعارك من بعيد؟
• هل يمكن تكييفه ليناسب الأغراض المختلفة مثل القمصان واللوحات الإعلانية؟
• هل يتشوّه بسهولة عندما يكبر أو يصغر؟

تُعَد معرفة وظائف شعارك أمرًا مهمًا للغاية، فقد يظهر شعارك على منصات مختلفة، لذا يجب أن تعرف أنه لا يزال من الممكن التعرف على شعارك عند استخدامه بتنسيق مختلف.

الاختبار الخامس: هل هو أصلي؟

لا بُدَّ وأنك تريد أن يكون شعارك فريدًا لشركتك، لذا يجب أن تتأكد من أن شعارك لا يشبه شعار أي شركة منافسة، كما يجب أن تتأكد من أن عملاءك لا يخلطون بين شعارك وشعار شركة أخرى، فإذا كان الأمر كذلك، فيجب عليك أن تراجعه وتعيد تصميمه.

في الختام

تحمل الشعارات العديد من المعاني، فهي أكثر من كونها مجرد طباعة وتصميم إبداعي، لذا لا تكتفِ بتلك الظواهر الخارجية، بل ابذل جهدًا أكبر للحصول على شعار يحمل في طيّاته معانٍ عميقة، والتي تريد أن توصلها للمشاهد، مثل رسالة وهدف شركتك.

ترجمة -وبتصرّف- للمقال How to Create the Best Logo for your Business.

اقرأ أيضًا

• دليل المبتدئين خطوة بخطوة لتصميم شعار
• القواعد الذهبية لتصميم الشعارات
• اختيار الحجم الأمثل للشعار وأهم النصائح لتصميم شعار مميز للشركات
• سبعة خطوات تجعل شعارك متميزا عن منافسيك
• أساسيات ترسيخ العلامة التجارية للمصممين المبتدئين
• العلامة التجارية وأهميتها في قرار الشراء - مكونات العلامة التجارية

كثيرًا ما نسمع جملة "لا تحكم على الكتاب من عنوانه". لكن في الواقع، يُعَد غلاف الكتاب عنصرًا مهمًا وقد يلعب دورًا محوريًا في نجاح الكتاب أو فشله.

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

يُعَد الغلاف وسيلةً تجذب انتباه القارئ من خلال إخباره عن محتويات الكتاب، ولا يمكن مقاومة التناسق المرئي للعناصر الجذابة. سوف نناقش دور غلاف الكتاب الجيد في إنجاحه، وندرج بعض الاقتراحات ونساعدك على فهم سبب حكم الأشخاص على الكتاب من عنوانه.

يصمم غلاف الكتاب ليجذب الانتباه

أول وأهم وظيفة لغلاف الكتاب هي جذب الانتباه إلى الكتاب، إذ كثيرًا ما يُحكم على الكتب من عناوينها ويرى الأشخاص غلاف الكتاب قبل أن يقرؤوا عنوانه حتى. وكثيرًا ما يجذب غلاف الكتاب الجيد قرّاءً جددًا، وهو أمر لا يمكن لغلاف عادي تحقيقه.

يجب التأنّي أثناء تصميم الغلاف. يجد البعض أن الغلاف جزء مهم من الكتاب ويعدّونه أهم من النص الموجود داخله، وذلك بغضّ النظر عن جودة الكتاب. قد تخسر بسبب غلاف سيئ المبيعات اللازمة لتصل إلى قائمة الكتب الأكثر مبيعًا التي تمنحك ملصق "الأكثر مبيعًا" المهم للغاية على الغلاف.

يتناسق الغلاف الجيد مع موضوع الكتاب

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

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

كل شيء يبدأ بفكرة

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

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

يعد تصميم الغلاف أكثر من مجرد ربط

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

يفضل إدراج مراجعة سريعة ضمن غلاف الكتاب

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

يمثل غلاف الكتاب انطباع القارئ الأول عنه

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

يعتمد تصميم الغلاف على فكرة جوهرية من الكتاب

فكر بالأمر كالتالي، إذا كان لديك كتاب خيالي، فإن تصميم غلافه سيحتاج إلى شيء يناسب عالمًا خياليًا. قد تكون إحدى شخصيات الكتاب هي محور الاهتمام، وبالتالي يفضَّل إدراجها في التصميم.

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

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

يلعب أسلوب الطباعة دور كبير في تصميم الغلاف

يقصد بأسلوب الطباعة Typography نوع الخط وكيف يظهر عند الطباعة. تملك نصوص وخطوط كتب الرعب على سبيل المثال طابعًا مخيفًا. وبالمثل، تُعَد عائلة خطوط Sans Serif خطوطًا رسميةً تستخدم في الأعمال الاحترافية. وبالعكس، يمكن للأعمال الأخرى الأقل رسميةً الابتعاد عن خطوط Sans Serif ما دام طابعها متناسقًا.

لكل فئة من الكتب خط مختلف يحقق أفضل توافق. على سبيل المثال تلقى خطوط Bentham و Day Roman رواجًا في فئة الكتب الرومانسية، بينما تستخدم خطوط Gotham و Bodoni في الكتب الواقعية Non-Fiction.

خطط لمظهر غلاف كتابك

خطط أولًا لتصميم وتنسيق غلافك. حافظ على بساطة النصوص ولا تبالغ بتزيينها باستخدام الخطوط المائلة Italics أو الأحرف الغامقة Bold والسطور وتغيير أحجام النصوص. يجب أن يكون عنوان الكتاب أكبر النصوص حجمًا ويعود اختيار أحجام باقي العناصر إلى المصمم.

يمكنك أيضًا اتباع معايير تصميم أغلفة الكتب إذا أردت الإبداع من خلال العمل بوجود بعض القواعد. ويقصد بالمبدأ السابق أن تفهم القواعد لتتمكن من تجاوزها بدلًا من العمل على رقعة رسم فارغة من الصفر.

لا تبتعد عن فئة الكتاب الذي تصمم غلافه دون ضرورة

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

تعد الألوان الخيار الفني على الدوام

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

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

صمم الغلاف ليروي قصة

يوافق تصميم الغلاف الجيد محتوى الكتاب ويُعَد امتدادًا له، بينما يروي التصميم الرائع للغلاف قصته الخاصة. استفد من الصور وأسلوب الكتابة والتنسيق وكل العناصر الأخرى. استخدم الصور المرئية والرموز للتعبير عن جوانب عديدة من الكتاب. استدرج القارئ من خلال تصميم غلاف كتابك وأخبره بقصة تشجعه على قراءة المزيد.

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

لا تهمل النمط Layout

بعد أن تحدثنا عن كل التفاصيل، يجب ألا ننسى أحد أهم العناصر، ألا وهو النمط Layout؛ إذ يجب الحفاظ على جاذبية الصفحة الأولى حتى يشتري القارئ الكتاب لاحقًا مدفوعًا بفضوله. تُعَد عينا العميل هما أول ما يدفعه للشراء، ثم تأتي احتياجاته بالمرتبة الثانية. فإذا اختار المصمم تنسيق الكتاب ليجذب المتلقين، فإنه بذلك يحقق الرضا للجميع.

بعض النصائح

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

حافظ على البساطة والإبداع والحيوية عند تصميم الغلاف. يربك الإكثار من العناصر القرّاء عند رؤيتها مع العنوان. والأسلوب الأفضل هو تصميم كتاب أنيق ومتوازن وجذّاب للقراء. تعود الأرباح الكثيرة لملايين المؤلفين إلى الأغلفة الجذابة التي تكمل قصصهم الرائعة.

خاتمة

يحوي تصميم غلاف الكتاب عناصر كثيرةً قد تستثمر جهود المؤلف والمصمم أو تضيعها. يجب أن يوصل الغلاف رسالةً واضحةً إلى المشترين دون أن يحتاجوا إلى شرح خارجي عن محتوى الكتاب. يجب اختيار الخطوط والتنسيق والعناصر الأساسية الأخرى بأسلوب يجذب انتباه القارئ. حاول استخدام الألوان الجذابة التي تجمل الغلاف، ويمكنك دومًا اللجوء إلى التدرجات اللونية Gradient Effects.

يراعي تصميم الغلاف الجيد جميع الجوانب ويستخدمها بأفضل ما يمكن لضمان أن المنتج النهائي هو غلاف فريد يسهل تمييزه وجذاب، كما أنه يمنح القارئ لمحةً سريعةً عن الكتاب دون فتحه.

ترجمة -وبتصرّف- للمقال The Importance of Book Cover Design For Success

اقرأ أيضًا

• لماذا يجب أن تهتم بتصميم المنتج
• دليلك إلى تصميم الخطوط

يمكنك عرض تصاميم الشعارات من خلال منصات التواصل الاجتماعي، لكن من المفضل أحيانًا إنشاء نماذج محاكية للعلامة التجارية لتعكس المزيد من التفاصيل حول تصميم الشعار، وبذلك يتمكن عملاؤك المحتملون من رؤية التصاميم بصورة أوضح، ومعرفة ما ستبدو عليه عند دمجها مع هوية علامتهم التجارية.

من أجل عرض تصاميمك للشعارات بأفضل طريقة ممكنة، ستحتاج إلى أفضل الوسائل التي تسهّل إيصال الأفكار وتسمح لعملائك بتصوُّر العلامة التجارية الجديدة بسهولة. وتُعَد النماذج المحاكية مكانًا ممتازًا للبدء، فهي تتيح لك إمكانية عرض أعمالك بصورة أنيقة.

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

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

النموذج المحاكي هو عبارة عن ملف PSD (ملف فوتوشوب) مزوَّد بطبقة خاصة (كائن ذكي) مضافة إلى مخطط معدّ مسبقًا. ويمكن تعريف هذا النموذج باختصار على أنه قالب صورة مع كائن يمكن إضافة أي شكل عليه، لتبدو الصورة النهائية واقعيةً وممثِّلة للمنتج المستقبلي بألوانه الحقيقية. يحسَب كل من موقع الكائن وزواياه وظلاله ورسمه المنظوري عند تطبيق كل تصميم جديد.

يشير النموذج المحاكي أيضًا في مجال تصميم الويب إلى مخطط الموقع الذي ينقل النمط المرئي للموقع، وفيما يلي المزيد من التفاصيل.

النماذج المحاكية موفرة للوقت والمال

من السهل على العميل إدراك شكل التصميم إذا أتيحت له إمكانية رؤيته على منتجه، مما يعني الحاجة إلى تعديلات أقل، والحد من سوء التفاهم، وإعطاء تصور أقرب للمنتج النهائي، وهو ما يحقق المنفعة للطرفين.

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

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

من أين يمكن الحصول على نماذج محاكية

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

كيفية عرض الشعار

عندما تجد أخيرًا ما كنت تبحث عنه، سيأتي دور استعراضه. وفي حال كنت أنت صاحب المشروع، فإنك تعرضه على الموظفين والمستثمرين أولًا؛ أما في حال كنت من الموظفين، فربما تعرضه أولًا على المدير؛ بينما إذ في حال كنت مصممًا، فسيكون العميل هو أول من يرى نتائجك.

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

المضمون مهم ولكن ليس بدون الغلاف

يمكن تشبيه معاينة الشعار على خلفية بيضاء بمحاولة إدراك مذاق العصير من خلال النظر إلى عبوته. تجنب عرض الشعار لوحده، واحرص على استخدام إطار عام لنموذجٍ مُحاكٍ، ليتسنى لعملائك رؤية ما سيبدو عليه الشعار عند تطبيقه على المنتج. يمكنك مثلًا إنشاء عينات على شكل بطاقات.

النماذج المحاكية تجعل الشعارات تبدو واقعية، مثل الأعلام الكبيرة المحمولة في مدرجات المباريات، والتي تستعرض شعارات مختلفةً على أرض الواقع.

قد تنتج شركة ما مشروبات بنفس جودة مشروبات كوكا كولا، لكنها تقوم بحملات الإعلانية أقل شهرةً، فيؤثر ذلك على نجاحها، وكذلك هو الحال بالنسبة للشعار؛ فقد يكون الشعار عالي الجودة، لكن مقدار تمويل الحملة الإعلانية يؤثر على مدى نجاحه وكيفية رؤية الناس له في نهاية المطاف.

كيف تقدم العرض المثالي

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

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

الترويسات مهمة أيضًا لبُنية المحتوى، لذا افصلها دائمًا عن النص وعن العبارات التوضيحية الثانوية. يمكنك استخدام خطوط بأنماط وأحجام مختلفة، لكن لا تختر خطوطًا مختلفة لكل عنوان، بل يكفي اختيار نمط خط عريض موحَّد للعناوين ونمط خط معياري لمحتوى النص.

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

من ناحية أخرى، انتبه إلى ملكية المواد التي تستخدمها، إذ يجب أن يكون استخدامها مسموحًا به من قِبل مالكها أو مُنشئها، وإلا فسيُعَد ذلك انتحالًا. احرص أيضًا على اختيار نمط محايد لكي لا يتعارض مع نمط شعارك.

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

1. اختر العنصر الصحيح للعلامة التجارية

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

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

2. طبق شعارك على خلفيات مختلفة

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

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

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

3. ميز شعارك

يُعَد الشعار أحد أهم جوانب العلامة التجارية، إن لم يكن أهمها على الإطلاق، فهو ما يميز بينك وبين منافسيك، كما أنه يعطي الآخرين فكرةً ملموسةً عن ماهيتك، ولهذا السبب فإن المصممين يبذلون جهدًا كبيرًا لإنشاء شعار جذاب ومقنع ويبقى ملائمًا لفترة طويلة.

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

4. استخدم خاصية الكائنات الذكية في فوتوشوب

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

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

5. أنشئ مخططات متقدمة للشعار في إليستريتور

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

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

6. استخدم أقنعة القطع في فوتوشوب

تُعَد أقنعة القطع clipping masks مفيدةً لإنشاء الصور ووضعها في طبقات في فوتوشوب، حيث تسمح لك أقنعة القطع بوضع جزء من صورة فوق أخرى دون دمجهما معًا، كما يمكنك الاستفادة منها بإنشاء تأثيرات عندما يكون جزء من الصورة شفاف، حيث تتمكن من رؤية ما وراءه.

7. استخدم أدوات الإطار والمرشحات في فوتوشوب

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

جرب إضافة تأثير الطلاء (Filter > Artistic > Paint Daubs) على الطبقة السطحية لإتمام نموذجك المحاكي. من الممكن أيضًا إنشاء بطاقات عمل بمظهر احترافي باستخدام تقنيات مشابهة، لكن انتبه إلى حجم الملف عند العمل على البرنامج لكي لا تجد في النهاية أنك أنشأت ملفات كبيرة غير لازمة.

8. أنشئ قالب رمز في إليستريتور

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

9. استخدم أداة إنشاء الأشكال في إليستريتور

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

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

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

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

ترجمة -وبتصرّف- للمقال How to Present Logo Designs with Branding Mockups? لصاحبه Syed Fahad Ahmed.

اقرأ أيضًا

• دليل المبتدئين خطوة بخطوة لتصميم شعار
• القواعد الذهبية لتصميم الشعارات
• متى وكيف نعيد بناء العلامة التجارية بالطريقة الصحيحة؟
• أساسيات ترسيخ العلامة التجارية للمصممين المبتدئين
• أساسيات ابتكار العلامة التجارية
• العلامة التجارية وأهميتها في قرار الشراء - الفرق بين العلامة التجارية والمنتج

سنطرح موضوعًا مشتقًا من الرياضيات وموجودًا في كل مكان من حولنا، ألا وهو النسبة الذهبية. لن نعود إلى الفصول الدراسية، بل سنتعرف هذا المفهوم، ونعرف لماذا يُعَد جزءًا أساسيًّا لإنشاء تصاميم تجذب المُستخدِم.

تُعَد قصة النسبة الذهبية إحدى الأساطير، والتي يعود تاريخها إلى تاريخ الرمز Pi (صيغة رياضية أخرى أساسية لفهم خصائص الدوائر) أطلق عليها العلماء -ومنهم فيثاغورس، وإقليدس- أسماءً عديدةً، مثل: المتوسط الذهبي Golden Mean، والقسم المُقدَّس Divine Section.

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

ما هي النسبة الذهبية؟

استُخدِمت النسبة الذهبية لإنشاء تصاميم جذابة بصريًّا عبر التاريخ، وأصبحت رسميًّا جزءًا من نظرية التصميم في عصر النهضة. لفت ظهورها المتكرر في الهندسة -كما في المضلعات، والنجوم الخماسية- انتباه علماء الرياضيات اليونانيين القدماء؛ حيث درسوها منذ 2400 عام على الأقل. تعتمد النسبة الذهبية على العلاقة بين الأرقام المتتابعة في متتالية فيبوناتشي Fibonacci Sequence. متتالية فيبوناتشي بسيطة للغاية، ولا يُشترَط أن تكون عالم رياضيات لتتمكن من فهمها، يساوي كل عدد فيها مجموع العددين السابقين له. تبدأ بـ 1 (1+الصفر غير المرئي=1) وتكون الأعداد الـ 10 الأولى للمتتالية كالتالي:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55 

وتستمر إلى ما لا نهاية. يمكننا حساب النسبة الذهبية باستخدام المعادلة السابقة، ونُعبِّر عن الناتج بالحرف اليوناني فاي Phi. تبلغ قيمة النسبة 1.618 تقريبًا، ورغم أنها تحوي الكثير من الأرقام بعد الفاصلة العشرية، مثل العدد Pi، فإنه لا داعي للقلق بشأن تجاوُز الرقم 1.618 في مجالنا.

كيف نستخدم النسبة الذهبية في التصميم؟

تخيَّلْ مستطيلًا بعرض يساوي 1؛ لحساب المستطيل الأفضل جماليًّا، يمكنك ببساطة ضرب العرض بالنسبة الذهبية التقريبية 1.618. يساوي الضلع الطويل في هذه الحالة 1.618.

حاوِلْ رسم مستطيل بهذا المقياس إذا كان بقربك قلم رصاص وورقة ومسطرة، أو أنشِئ واحدًا في تطبيق الرسم إن أمكن. ما تراه أمامك ليس مجرد مستطيل، إنما هو المستطيل المثالي!

يمكننا حساب النسبة الذهبية في كل مجالات التصميم، فقد استخدمها المهندسون المعماريون قديمًا في حساب قاعدة وارتفاع أكروبوليس أثينا في اليونان. ستجد دأن تنسيق الغالبية العظمى من الكتب الموجودة ضمن مكتبتك موافقًا لهذه النسبة. تُوجَد النسبة الذهبية أينما نظرت حرفيًّا، فقد كبرنا ونحن معتادون عليها، ربما لأننا محاطون بالأشكال والأشكال مُشتقَّة أساسًا من النسبة الذهبية. نحتاج كوننا مصممين إلى أخذ هذا المفهوم عن ألفة المستخدمين للنسبة الذهبية وراحتهم بالنظر إليها بالحسبان في أثناء التصميم لهم. يحب الأشخاص النظر إلى هذه النسبة؛ لذلك تستخدم مجلة ناشيونال جيوغرافيك National Geographic مستطيلًا أصفر موافقًا للنسبة الذهبية.

لا تساعدنا النسبة الذهبية على إنشاء مستطيلات جميلة فحسب، بل يُمكِنك أيضًا إنشاء تكوين حلزوني باستخدام أطوال أضلاع مبنية على ترتيب تنازلي لمتتالية فيبوناتشي. إن بدأنا بطول ضلع 55 يُمكِننا تشكيل الحلزون برسمه للداخل؛ بحيث يُصبِح الطول الجديد للضلع الذي يوجهنا بالرسم 34 بعد تجاوُز نقطة البداية.

نواصل الرسم إلى الداخل بأطوال 21, 13, 8, 5, 3, 2, 1, 1 حتى نصل إلى الوسط بطول ضلع 1. يعتمد هذا الشكل الحلزوني على النسبة الذهبية، ويبدو أجمل للعين البشرية من الشكل اللولبي المتوازن؛ لأنه موجود في الطبيعة في النباتات والمحار وحتى الرخويات، كما يُقال أن نسب أجسام العديد من الحيوانات الأكبر وحتى الأجسام البشرية موافقة للنسبة الذهبية.

يُمكِننا القول إن النسبة الذهبية جزء منا؛ لذا يمكنك كونك مصممًا استخدام هذا النوع من الأشكال الحلزونية لجذب وتركيز انتباه أيِّ مُستخدِم على نقطة معينة من تصميمك. أظهرت الأبحاث أن العين البشرية تتعرف الصور الموافقة للنسبة الذهبية بسرعة أكبر من الصور الأخرى، وكذلك يفسرها الدماغ ويعالجها بسرعة أكبر.

يمكننا أيضًا استخدام النسبة الذهبية لموازنة العناصر ضمن التصميم. عناصر شعارات تويوتا وبيبسي -على سبيل المثال- مرتبة وفق النسبة الذهبية؛ فالأشكال البيضاوية متوازنة وفق النسبة الذهبية في شعار تويوتا، وكذلك الدوائر في شعار بيبسي. هل تذكر علامات تجارية أخرى موافقة لهذه النسبة "السحرية"؟ قد تكون السبب لظهور شعارات إبداعية.

حساب النسبة الذهبية

سنتطرق الآن إلى الرياضيات باختصار، المعادلة بسيطة لحساب النسبة الذهبية، والنسبة الذهبية هي العلاقة بين بُعدَي التصميم عادةً الأفقي والعمودي. لا يهم أي جانب نعُدُّه الأطول (A) وأيهما الأقصر (B). (أما إن كنت تتأكد أن تصميمًا ما موافق النسبة الذهبية، ستحتاج إلى تحديد أي الجانبين أطول أو أقصر). تكون المعادلة كالتالي:

A/B = (A+B)/A = 1.618033987 = Φ

Φ هو الحرف اليوناني Phi المُستخدَم للتعبير عن النسبة الذهبية. لماذا يكون A/B = (A+B)/A؟ هذه المعادلة صحيحة لاعتمادنا متتالية فيبوناتشي، ولأن A وB (إن عبَّرنا عنها بأرقام صحيحة) هما مجرد عددين متتاليين من متتالية فيبوناتشي؛ يمكننا التقريب إلى 1.6 و1.61 و1.618 في التصميم دون الإخلال بجمالية النسبة الذهبية، وذلك لأن بصرنا لا يلاحظ هذه الانحرافات الطفيفة.

استخدام النسبة الذهبية في التصميم

يُمكِنك استخدام النسبة الذهبية في تصاميمك بسهولة. تسمح تطبيقات مثل أدوبي فوتوشوب Adobe Photoshop وأدوبي إليستريتور Adobe Illustrator بإنشاء أدلة Guides أو طبقات Layers تساعدك على التصميم باستخدام النسبة الذهبية. وإن لم يحسب البرنامج الذي تستخدمه النسبة الذهبية تلقائيًّا، يمكنك دومًا استخدام أدوات على الإنترنت تُحدِّد نسبة أطوال الأضلاع.

الخلاصة

إن النسبة الذهبية أساسية للمصممين والمستخدمين على حد سواء، وقد اعتمدها الفلاسفة وعلماء الرياضيات والمهندسون المعماريون والفنانون والمصممون لأكثر من ألفَي عام. تحيط بنا الشعارات الموافقة للنسبة الذهبية، مثل: شعار بيبسي، وكذلك الكائنات الطبيعية، مثل صدفة النوتيلاس nautilus shell.

يتعرف بصرنا على هذه الأشكال بسرعة لانتشارها ويعالجها دماغنا كونها أشكالًا مألوفةً وجميلةً. رغم معرفة النسبة الذهبية ودراستها لعدة قرون وعلم اليونانيين القدماء بها، فإن عالم الرياضيات الإيطالي فيبوناتشي هو مَن حدد تسلسُلها الشهير في العصور الوسطى. إن أساس فهم النسبة الذهبية المُمَّثلة بالحرف اليوناني فاي Phi هو استخدام سلسلة فيبوناتشي (سلسلة أعداد تبدأ بالرقمين 1,1, ونجمع آخر عددين للحصول على العدد التالي).

تُستخدَم النسبة الذهبية على نطاق واسع في تصميم التطبيقات ومواقع الإنترنت. ويسهل اعتمادها عند إنشاء المُخطَّطات الهيكلية Wireframes. يُمكِنك التأكد من ترتيب أولويات المحتوى الذي تحتاج إليه بطريقة صحيحة، ومن وجود المتطلبات الجمالية للتخطيط، وذلك دون الحاجة لبذل الجهد في التصميم منذ البداية. ويبدأ العمل الفعلي عندما تُقرِّر أين ستضع العناصر والميزات في هذا المُخطَّط الهيكلي.

في الصورة العلوية للمثال السابق النسبة بين منطقة المحتوى واللوح الجانبي تساوي فاي؛ أي: 1.618. يمكنك التأكد بالقياسات التالية:

• العرض الإجمالي للمُخطَّط الثابت هو 960 بكسل، وهو مُقسَّم إلى منطقة محتوى وشريط جانبي، منطقة المحتوى هي الأطول.
• بتقسيم الطول الإجمالي 960 بكسل على قيمة فاي 1.618 نحصل على 593 بكسل، نعتمد هذا الطول لمنطقة المحتوى.
• نعتمد الطول المتبقي؛ أي: 367 بكسل للوح الجانبي.

تتمتع هذه الأرقام بالمرونة لأنها نسبة، هذا يعني إمكانية تطبيقها بسهولة لإنشاء عدة مُخطَّطات تصميمية؛ حيث لا داعي لاستخدام أرقام ثابتة، وكل ما عليك فعله هو التأكد أن الجزء الأكبر أطول بـ 1.618 مرة من الجزء الأصغر.

يُمكِنك تطبيق النسبة الذهبية في أي جزء من تنسيق صفحتك، إذ يُمكِنك مثلًا استخدام النسبة الذهبية ضمن الترويس Header؛ لجذب انتباه المُستخدِم، ثم استخدامها مجددًا في المتن.

يظهر في الصورة السفلية من المثال السابق الشكل الحلزوني الموافق للنسبة الذهبية. يُمكِننا بسهولة إنشاء تصاميم حلزونية موافقة للنسبة الذهبية؛ باستخدام متتالية فيبوناتشي بترتيب تنازلي لأطوال جوانب اللولب.

نعرف كوننا مصممين قيمة البرامج المتاحة لتسهيل إدراج النسبة الذهبية في أعمالنا وتحسين تجربة المُستخدِم، مثل شركة Adobe التي تُقدِّم هذه المُساعَدة الرائعة في برنامجَي Photoshop، وIllustrator.

ترجمة -وبتصرُّف- للمقال The Golden Ratio - Principles of form and layout..

اقرأ أيضًا

• أساسيات الوزن البصري في التّصميم الجرافيكي - الجزء الأوّل
• مبادئ تصميم الرسوميات
• أساسيات التصميم الجرافيكي - الجزء الأول: العناصر

لقد ولت الأيام التي كان فيها تصميم صفحات الإنترنت مجرد مزيج من الخطوط المزركشة وبعض الصور مع قالب جذاب. وتمامًا كما هو الحال مع تحسين محركات البحث SEO، فإن تصميم مواقع إلكترونية متوافقة مع محسنات محركات البحث يُعَد أمرًا أكثر أهميةً من مجرد إضافة الوظائف والجماليات فحسب. ولجعل المواقع ملائمةً مع محركات البحث بحيث تسمح للخوارزميات بالزحف نحوها وفهرستها بكل سهولة، علينا أن ندمج بروتوكولات تحسين محركات البحث SEO مع عملية تصميم الموقع، فهو الوتر الذي يجب العزف عليه عند تصميم المواقع الالكترونية.

بالنسبة لمصممي المواقع لا ينبغي لأي شيء أن يمنعهم من إنشاء موقع متوافق مع معايير تحسين محركات البحث SEO، خاصةً أن 77% من المستهلكين يبحثون عن العلامات التجارية قبل التعامل معها. ورغم أن جذب الزيارات إلى مواقع الإنترنت عبر تصاميم جذابة يُعد أمرًا سهلًا، إلا أنه لا يمكن أن يضمن المصممون أن مصدر حركة الزيارات هذه هو الجمهور المستهدف وأنها ستؤدي إلى زيادة مشاركاتهم وتفاعلهم، حيث يحتاج مصممو المواقع إلى فهم بعض مقاييس محسنات محركات البحث التي تساعدهم في تصميم مواقع الإنترنت لتبقى هذه المواقع على قمة قائمة نتائج البحث على الشبكة العنكبوتية.

لكي يتربع موقع ما في أعلى تصنيفات قوائم محركات البحث، تُعَد عمليات تحسين محركات البحث ضمن الصفحة On-page (أي الأشياء التي تقع ضمن نفوذ المصمم ليجذب بها مزيدًا من الزيارات) وكذلك تحسين محركات البحث خارج الصفحة Off-page (وهي النشاطات أو الممارسات التي تجري خارج موقعك وتزيد من معدل الزيارات، مثل الترويج عن طريق شبكات التواصل الإجتماعي) في غاية الأهمية. ومع ازدياد اهتمام العملاء بالعلامة التجارية وطرح أسئلة محددة لها، وبالنظر إلى المحتوى وأساليب التسويق؛ يجب أن يكون تصميم مواقع الإنترنت خاليًا من أي شائبة وأمرًا محتمًا لا يجب الاستغناء عنه.

ما المقصود بتصميم مواقع الإنترنت بالنسبة لمحسنات محركات البحث؟

يُطلق على عمليات تصميم مواقع الإنترنت التي تأخذ في الحسبان جميع جوانب تحسين محركات البحث داخل الصفحة On-page وتحسن من المواقع على مستوى التصميم اسم SEO web design أو تصميم مواقع الإنترنت بالنسبة لمحسنات محركات البحث، حيث تسمح عمليات التصميم هذه برفع تصنيف مواقع الإنترنت بمجرد إطلاقها على الشبكة العنكبوتية عن طريق خفض الزمن اللازم لتحميل الموقع، وجعله أكثر ملاءمةً مع الأجهزة المحمولة، واختيار روابط وصفية للمواقع.

كيف يدرج جوجل مواقع اللإنترنت ضمن نتائج بحثه؟

لن نتطرق هنا إلى الجزء التقني أو البرمجي من العملية، بل سنحاول تبسيط الموضوع وشرحه لمصممي مواقع الإنترنت ليأخذوا في الحسبان أمر تحسين محركات البحث أثناء وضعهم الخطوط العريضة لتصاميمهم. إن التحدي الذي تواجهه جوجل يتجلى في عرض الصفحات الأكثر صلةً بعملية البحث المطلوبة من بين ملايين الصفحات الموجودة؛ حيث تزحف خوارزميات جوجل نحو الموقع وتحدد قدره وأهميته بناءً على اعتبارات عديدة أو ما يسمى بإشارات التصنيف Ranking signals؛ وفي المقابل، تجلب هذه الإشارات أفضل مواقع الإنترنت والصفحات لإدراجها في قوائم جوجل تلبيةً لاحتياجات المستخدم لإعطاء أفضل نتائج بحث.

هناك نوعان من إشارات التصنيف التي تأخذها جوجل في الحسبان أثناء تقييمها لموقع ما.

1. إشارات التفاعل.
2. إشارات السمعة.

يرتبط مقياس التفاعل على نحو مباشر مع محتوى الصفحة، أي يمكن تحديد قيمة هذا المقياس بناءً على جلسات الصفحة Page Sessions (متوسط عدد الصفحات التي يشاهدها الشخص في جلسة معينة) والوقت الذي يقضيه ومعدل ارتداد الزوار Bounce rate (نفورهم من الموقع)، وتوفر إشارات التفاعل لمصمم الإنترنت رؤيةً أولية للبدء في التصميم ابتداءً من التخطيط إلى زمن التحميل وجميع الأمور الأخرى؛ أما إشارات السمعة، فهي تمكن جوجل من تحديد سمعة الموقع في رأي المشاهدين. ولكي يقيم جوجل سمعة موقع ما، فإنه يتحقق من الروابط الخلفية Backlinks التي ينشئها الموقع. وهذا هو جوهر عمل محسنات محركات البحث الذي يطبق على مواقع الإنترنت والذي لا يكون لمصمم المواقع دخل به.

العلاقة بين مصمم مواقع الإنترنت ومحسنات محركات البحث

إن الهدف الأساسي لجوجل هو ضمان إيجاد الزوار ما يبحثون عنه بسهولة. ولتوفير أفضل تجربة للمستخدم، يُدرج جوجل أفضل ما يجده على رأس قائمة نتائجه الرائعة. السؤال الذي يطرح نفسه الآن، هو إذا كان المصمم مواقع الإنترنت يعتقد أنه يمكن فعل ذلك بسهولة، أي فقط عن طريق الإتيان بتصاميم مواقع جميلة ووضع محتوى مميز يحوي كلمات مفتاحية توجه نحو تعليمات الاستعلام في قواعد البيانات على نحو دائم، فهذا يعني إما أنه مصمم مبتدئ أو شخص توقف عن تطوير نفسه وتعلم المزيد.

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

مقاييس تحسين محركات البحث لمصممي المواقع الإلكترونية

هناك أكثر من 10 مقاييس لمحسنات محركات البحث يمكن تحسينها على مستوى التصميم لتقدم أداءً أفضل لموقعك في محركات البحث.

إدراج موقعك في القمة

يجب أن يكون السعي نحو تصنيف أعلى هدف مصممي مواقع الإنترنت، وليس فقط تحسين محركات البحث؛ إذ هناك عناصر تصميمية متوافقة مع محسنات محركات البحث تُستخدم للتعديل في أثناء عملية تحسين محركات البحث من النوع على الصفحة On-page، وتُعَد عناصر مثل ملاءمة روابط URL وترميز HTTP والعلامات الوصفية Meta tags وعلامات الترويس heading tags بالإضافة إلى توصيف الروابط، أمورًا حيويةً ومشتركةً بين مصممي مواقع الإنترنت ومختصي محسنات محركات البحث. في حال بدأ المصمم في إجراءات تحسين محركات البحث في المراحل الأولى من عملية التصميم، فقد يؤدي ذلك إلى بدء تحسينه حتى قبل إطلاق الموقع على شبكة الإنترنت وبالتالي يرتفع تصنيفه عندما يبدأ بالعمل.

نتائج بحث دقيقة

تخيل أنك تزور مركزًا تجاريًا يبيع معجون أسنان. هل يمكنك تخيل عدد الخيارات المتاحة لك؟ هذا التحدي مشابه لمحركات البحث عندما تقدِّم معلومات دقيقة لغرض البحث بدلًا من بضع نتائج رائجة. ومع زيادة عدد المستخدمين على نحو يومي، سيزداد هذا التحدي معه، كما سيبحث المستهلك ويتعرف على العلامة التجارية حتى قبل دخوله للمتجر.

في الواقع هناك 136% من الأشخاص يؤمنون بالبحث عن العلامة التجارية ومنتجاتها على محركات البحث بدلًا من المواقع التي تبيع عبر الإنترنت. أي بتعبير أدق، قد يزور مستخدم هاتف محمول المتجر القريب منه في حال قد بحث عن أي كلمة مفتاحية تخص هذا الأمر. يصبح الاحتمال أعلى بنسبة 50% في حالة اجرائه بحثًا قريبًا من مسكنه، ولهذا يمكن للمصمم التعامل مع عناصر تحسين محركات البحث هذه من خلال العلامات الوصفية وتوصيف الروابط أثناء عملية التصميم، بحيث تضمن تربع الموقع على قمة جميع الكلمات المفتاحية ذات الصلة.

زيارات أكثر عبر الهاتف المحمول

ليست الشركات فقط هي من بحاجة إلى تنمية معارفها في مجال أعمالها والإطلاع على أحدث الصيحات التي تحدث، بل المحترفون أيضًا. إن مواقع الإنترنت التي تحوي روابط URL ملائمة لمحركات البحث لم يَعٌد نقطةً إيجابيةً فحسب، بل جانبًا ضروريًا، ولكنه في نفس الوقت لم يَعُد كافيًا بعد اليوم.

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

نعم في الوقت الحاضر، يجب أن تكون مواقع الإنترنت متوافقة مع الأجهزة المحمولة وهذا عنصر تصميمي صرف، أي ليس من عناصر تحسين محركات البحث. ولذلك، إذا اهتم المصممون بهذا العنصر، فإنه سيساعد مُحسّنات محرّكات البحث في جذب المزيد من الزيارات إلى الموقع، لأن الإتجاه السائد هو أن مستخدمي الهاتف المحمول يفضلون مواقع الإنترنت المتكيفة مع شاشات هواتفهم المحمولة، حيث يغادر 57% من مستخدمي الهاتف المحمول مواقع الإنترنت إن لم تكن متوافقةُ مع هاتفهم المحمول.

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

تفاعل أوسع وأفضل

تستجيب خوارزمية جوجل على نحو إيجابي مع تلك المواقع التي تبقي على المستهلكين فترةً أطول فيها. أي كلما زادت الفترة التي يقضيها المستخدم في الصفحة، قل معدل الارتداد؛ وهو الأمر الذي يزيد من احتمال ارتفاع تصنيف الموقع في محرك بحث جوجل.

تضمن مُحسّنات محرّكات البحث في العادة أن الصفحات الداخلية متوافقة ومتسلسلة على نحو جيد ومترابطة، بحيث تزيد من زمن تفاعل المستهلك مع الموقع. حيث تندمج مُحسّنات محرّكات البحث المتواجدة ضمن الصفحة On-page مع صفحات الموقع بطريقة تجعل المستخدمين يستمتعون بالمعلومات التي يحتاجونها على الموقع.

تخيل لو أن الأمر يتطلب فقط 8 ثوانٍ لكي يقرر المستهلكون ما إذا كانوا يرغبون في البقاء في الموقع والتفاعل معه أم لا، أي أنه من الضروري أن تصمم مواقع الإنترنت بطريقة تدمج فيها المعلومات عبر ربط الصفحات ببعضها البعض.

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

الفائدة ستعم كلا من الشركات والمصممين

من الواضح أنه لا يمكن لأي شركة صغيرة أو كبيرة أن تبقى بعيدةً عن عالم الإنترنت ويجب أن يكون لها حضور قوي على الشبكة العنكبوتية لكي تجذب المزيد من العملاء المحتملين؛ إذ يُعَد التواجد عبر الإنترنت للشركات الصغيرة والمتوسطة أمرًا مهمًا للغاية لضمان بقائها والنمو على نحو أسرع في وقت تعصف به الكوارث عالمنا.

من ناحية أخرى، إن حقيقة أن الشركات الكبيرة فقط هي التي بمقدورها تحمل تكاليف وجود قسم مُخصص لتحسين محركات البحث لتعتني على نحو دائم بتواجدها على الإنترنت والحفاظ على تصنيف عالٍ في محركات البحث؛ لا تمنع قدرة الشركات صغيرة على أن تحدث تأثيرًا هائلًا حتى بدون توظيف مختصي تحسين محرّكات بحث، أي إذا دمج مصمم مواقع الإنترنت جميع مقاييس محسنات محركات البحث مع تصميمه للموقع، قد يؤدي هذا الأمر إلى تقليل نفقات شركة، وكسبه المزيد من الأجر في الوقت نفسه.

حركة زيارات عالية الجودة

ليست هناك فائدة من الزيارات التي لا علاقة لها بمجال عملك، لذا من الضروري جذب زيارات إلى موقعك من مصدرها الجماهير المستهدفة. تشير أداة موز Moz التحليلية المتخصصة في تحسين محركات البحث والكلمات المفتاحية إلى أن مواقع الإنترنت التي تظهر على الصفحة الأولى من نتائج البحث تزيد من احتمالية نقر المستخدمين عليها بنسبة 71.33%. وهذا بالتحديد يعني أنه إذا صمم موقعك باستخدام عناصر دقيقة من محسنات محركات البحث على الصفحة On-page، فمن المحتمل أن يجذب المزيد من الزيارات المحددة جغرافيًا.

ويستطيع مصمم المواقع تحقيق هذا الهدف عبر تقديمه تصميمًا متكاملًا للموقع، عوضًا عن الذهاب نحو مُحسّنات محرّكات البحث، وبالتالي يحسن من معدل التفاعل ويزيد من توليد عملاء محتملين فينتج عنه عوائد أكبر للشركات.

الاطلاع على التقنيات الحديثة

لا يمكن لمصمم مواقع الإنترنت أن يتجاهل التقنية الجديدة التي تتطور بسرعة يومًا بعد يوم، إذ سيؤدي دمج هذه التقنيات المتقدمة مع تصميماته إلى زيادة عدد الزيارات وتحقيق المزيد من التفاعل، وهو الأمر الذي سيساعد في توليد المزيد من العملاء المحتملين وزيادة في الأرباح.

إذ يستخدم 60% من مستخدمي الهاتف المحمول اليوم وعلى نطاق واسع ميزة البحث الصوتي في محرك بحث جوجل للبحث عن المعلومات التي يريدونها، وهذا يعني أنه يجب على موقع الإنترنت الارتجال في استخدام الكلمات المفتاحية المتعلقة بمتطلبات هذا البحث الصوتي وتحسين تصميمات مواقع الإنترنت للاستجابة لهذه التقنية الجديدة، إذ تُعَد 1890 كلمة هي عدد الكلمات المثالي لجوجل لرفع تصنيف الصفحات. لذا إذا كان مصمم مواقع الإنترنت على دراية ببعض حيل تحسين محركات البحث، فيمكنه تحسين الكلمات المفتاحية وفقًا لاحتياجات البحث الصوتي ووضع المحتوى والعلامات الوصفية وعلامات الترويس وتوصيف الرابط بطريقة تستجيب لاستفسارات البحث الصوتي بسرعة. وبالإضافة إلى ما سبق، يمكن للمصمم دمج ملحقات تحسين محركات البحث المختلفة في تصميمه لتقليل التكلفة ورفع مستوى الأداء.

سرعة تحميل الصفحة

إن أهم مقاييس تحسين محركات البحث التي يجب على جميع مصممي مواقع الإنترنت معرفتها هي سرعة تحميل الصفحة، إذ حيث يُعَد الأمر مزعجًا للغاية في حال استغرقت الصفحة أكثر من 3 ثوان لتظهر بالكامل على الشاشة؛ أما إذا تجاوزت 5 ثوانٍ، فهذا أمر محبط جدًا، ومع ثانيتان إضافيتين سيغادر الزوار حتمًا.

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

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

السؤال هنا هو كيف يرتبط تحسين محركات البحث بتجربة المستخدم؟ حسنًا، تكمن الإجابة عن هذا السؤال في المعلومات التي يقدمها الموقع، وقابلية قراءة المحتوى وكذلك كثافة الكلمات المفتاحية.والأهم من ذلك، هو أن تصميم صفحة إنترنت بأسلوب جذاب ومرئي يجذب المزيد من الزوار ويحسن من زمن التفاعل، كما أن الانتقال السلس بين أقسام وصفحات الموقع يسمح للمستخدم بإيجاد المعلومات التي يريدها بسهولة. قد تبدو هذه الميزات بسيطةً ولا داعي لها، إلا أنها مهمة من وجهة نظر مُحسّنات محرّكات البحث، فهي تساعد على بناء صورة حسنة للعلامة التجارية في أعين المستخدمين.

اقتصادي التكلفة

يُعَد تصميم مواقع الإنترنت جهدًا يُبذل لمرة واحدة، بينما يجب أن يكون تحسين محركات البحث عملًا دائم التطوير. أي يمكن للشركات الكبيرة فقط تحمل تكاليف توظيف فريق مختص بتحسين محركات البحث؛ أما بالنسبة للشركات الصغيرة، فيمكن أن نقول وبثقة أن وجود مصمم ماهر هو نعمة للشركة، لأنه يمكنه تقليل تكلفة تأسيس موقع سريع الاستجابة وجذاب ومبتكر يلبي كل ما يتطلبه تحسين محركات البحث، إذ أن المصمم يدمج مقاييس تحسين محركات البحث مع عملية التصميم.فإذا حضّر المصمم مسبقًا العلامات الوصفية وتوصيف الرابط URL وعلامات الترويس وعلامات بنية الموقع والصور وبنية الرابط URL وكثافة الكلمات المفتاحية، فإنه سينشئ بالتأكيد موقعًا فعالًا للغاية واقتصاديًا من حيث التكلفة.

نعيش اليوم في عالم ثبت فيه أن تعدد المهام هو المهارة الوحيدة الأكثر فاعلية. فإذا كان بإمكان مصمم مواقع الإنترنت أن يكون متعدد المهارات (ولا نعني بذلك فقط قدرته على تحويل المواقع إلى تصميمات جذابة)، فيمكنه وحده رفع تصنيف المواقع في جوجل إلى حد كبير. ورغم ذلك، فإن مُحسّنات محرّكات البحث على الصفحة On-page مهمة وضرورية للاحتفاظ بتصنيف عالي.

ترجمة وبتصرّف للمقال SEO Metrics That All Website Designers Should Know لصاحبه Harsh Raval.

اقرأ أيضًا

• مخرجات تصميمية يجب على كل مصمم تجربة مستخدم أن يتقنها
• أدوات ضرورية لتصميم مواقع الويب
• تحسين الظهور في محركات البحث
• تهيئة المواقع لمُحركات البحث (SEO)، ماهيّتهُ وأهميّته؟
• التوجهات الحديثة في تحسين الظهور ضمن محركات البحث