البحث في الموقع

من الصعب إحصاء عدد مبادئ تصميم الرسوميات (التصميم الجرافيكي)، حيث يرى بعض المصممين أنها خمسة وآخرون يصرحون بأن العدد أكثر من ذلك، وقد تصنّف بعض المبادئ على أنها من عناصر التصميم الرئيسية من قبل آخرين، كالمساحة مثلًا، حيث يصنفها البعض من ضمن المبادئ وآخرون يصنفونها من ضمن العناصر. سنتطرّق إلى المبادئ الأساسية التي لم يختلف عليها أحد في عالم تصميم الرسوميات، والتي يجب على جميع المصممين المبتدئين والمحترفين اتباعها ومراعاتها أثناء القيام بالأعمال التصميمية. وهنالك مبادئ ونظريات أخرى في عالم تصميم الرسوميات، كنظرية الألوان والجشطالت (Gestalt psychology) والأثلاث وغيرها، وسنتطرّق إليها لاحقًا في هذه السلسلة. وسنشرح تاليًا هذه المبادئ مع توضيح الطريقة الصحيحة لتطبيقها بالرسوم البيانية مع إدراج بعض الأمثلة الحية على تطبيق هذه المبادئ. مبادئ تصميم الرسوميات الرئيسية يجب اعتماد هذه المبادئ دومًا وعدم تجاهلها في التصميم، لأنها تشكّل الفارق الحقيقي بين التصاميم الاحترافية وغير الاحترافية، كما أنها تزيد من قدرة التصميم على التأثير بالجمهور وتحقيق الهدف وإيصال الرسالة، ولكن ليس من الضروري تطبيق جميع هذه المبادئ، بل يطبّق منها فقط ما يحتاجه التصميم. 1. التكرارية Repetition يستخدم هذا المبدأ لتعزيز فكرة ما ضمن التصميم، كما يستخدم لتوحيد التصميم ككل حتى وإن احتوى مزيجًا متنوعًا من العناصر. فالتكرار يربط العناصر الفردية معًا ضمن التصميم الواحد، ويمنح شعورًا بالاستمرارية والتنظيم. ويستخدم التكرار أيضًا في تنظيم الوثائق والمقالات والكتب، فهذه السلسلة من المقالات على سبيل المثال تتبع مبدأ التكرار من خلال التكرار ذاته لتنسيق العناوين والفقرات النصية والصور في كل صفحات وفقرات السلسلة. وهذا ما يربط جميع الأجزاء في هذه السلسلة بعضها ببعض وتشعر من خلال قراءتك لها بالتنظيم والاستمرارية والترابط. كما يمكن إجراء التكرار باستخدام أساليب مختلفة كتنسيق النصوص والألوان والخطوط والأشكال وعناصر أخرى مختلفة. ويستخدم هذا المبدأ في جميع العلامات التجارية، حيث نلاحظ توحيد النمط التصميمي لجميع عبوات المنتجات لماركة معينة، فيوضع الشعار في نفس زاوية العلبة مهما اختلف حجمها ونوع المنتج، كما يُستخدم نفس نوعية الخط ونسبة حجمه لباقي التصميم، ونفس أسلوب الألوان لجميع هذه المنتجات، وهذا يعتبر تكرارًا، وهو ما يمنح ترابط هذه المنتجات جميعها مع العلامة التجارية المالكة لها، كما يرسخ هذه العلامة التجارية في عقول العملاء ويجعلهم يشعرون بارتياح أكبر للتعامل والتفاعل معها. لاحظ في هذا الرسم التوضيحي على اليمين كيفية تطبيق التكرار النمطي الذي يجعل التصميم جذابًا على عكس التصميم الأيسر الذي تجاهل تطبيق هذا المبدأ. النصوص والفقرات في صفحة هذه المجلة تتبع النسق والنمط ذاته في تطبيق واضح لمبدأ التكرارية - تصميم Red Fleece Editorial Newspaper للمصممة Stephanie Toole بترخيص المشاع CC BY-NC-ND 3.0 ترغب في الحصول على تصاميم جرافيك مميزة وجذابة؟ وظّف مصمم جرافيك خبير من مستقل لابتكار تصاميم إبداعية تعكس هوية نشاطك التجاري أضف مشروعك الآن 2. التباين Contrast عند الحديث عن التباين، يفكر الكثير من الناس في تباين الألوان فقط، ولكن يمكنك تطبيق التباين بطرق مختلفة باستخدام اللون والحجم والأشكال والطباعة، فالتباين هو الاختلاف في الخصائص المرئية الذي يجعل كائنًا واحدًا مميزًا عن الكائنات الأخرى. وهذا يعني وجود عنصرين أو أكثر متعاكسين في الخصائص، مثل الداكن والفاتح، الثخين والنحيف، الكبير والصغير، وغيرها من التباينات. ويستخدم هذا المبدأ لتوجيه انتباه المشاهد إلى العناصر الأساسية للتصميم، كما يُستخدم للحفاظ على التمييز بين العناصر المتشابهة في التصميم، وبالتالي تعزيز الوضوح العام للتصميم. التباين في التصميم الأيمن جيد وعنصر النص يبدو واضحًا على عكس التصميم الأيسر. يستخدم التباين أيضًا في التصاميم لمنح الأشكال أو الكائنات وزنًا مرئيًا أفضل وموازنة التصميم بالكامل، كما يتم استخدامه أيضًا لتنظيم جميع العناصر الرسومية الموجودة في التصميم في نفس الوقت الذي يمكنك فيه استخدام تباين الطباعة لتنظيم النص وتعزيز أهم أجزائه. يتم إنشاء التباين عندما يكون عنصران متناقضان تمامًا. على سبيل المثال، يمكن رؤية التباين في التصميم عند الموافقة على الشروط والأحكام عبر الإنترنت حيث يكون خيار "أوافق" بلون داكن، بينما يكون خيار "لا أوافق" بلون أفتح ويبدو أنه يتلاشى. كما في الصورة التالية. لاحظ التباين البارز على زر (أوافق) بغية جذب الانتباه إليه عكس زر (لا أوافق) تباين الألوان الكلاسيكي في تصميم هذا الكتيب جعله مثيرًا للاهتمام وباعثًا على التركيز والرغبة في المشاهدة - التصميم NRV Booklet Design للمصمم Shwin … بترخيص المشاع CC BY-NC-ND 3.0 3. الإيقاع Rhythm من السهل فهم مبدأ الإيقاع باستخدام الموسيقى كمثال، فعندما تستخدم عناصر متكررة في التصميم، ينتج عن ذلك مسافات بين هذه العناصر، وهذا ما ينتج عنه إيقاع مرئي كما يحدث في التراكيب الموسيقية تمامًا، حيث يمكن للمسافات بين العناصر المكررة أن تسبب إحساسًا بالإيقاع، على غرار الطريقة التي تتسبب بها المسافة بين النغمات في تكوين إيقاع موسيقي. وهناك خمسة أنواع أساسية من الإيقاع البصري يمكن للمصممين إنشاؤها، وهي إيقاع عشوائي ومنتظم ومتناوب ومتدفق وتدريجي. الإيقاعات العشوائية هي الإيقاعات التي ليس لها نمط يمكن تمييزه، والإيقاعات المنتظمة تتبع نفس التباعد بين العناصر دون تغيير، وتتبع الإيقاعات المتناوبة نمطًا محددًا يتكرر بالتناوب مع وجود تباين بين العناصر مثل النمط 1-2-3-1-2-3، وتتبع الإيقاعات المتدفقة المنحنيات على غرار طريقة تموج الكثبان الرملية أو تدفق الأمواج، وأخيرًا تتغير الإيقاعات التدريجية مع استمرارها، مع إضافة كل تغيير إلى التكرارات السابقة بالزيادة أو النقصان أو التكبير أو التصغير أو التغيير اللوني وغير ذلك. مثال قوي عن الإيقاع العشوائي المتبع في تصميم الصفحة الرئيسية لموقع The Art Center 4. التوازن Balance يعطي التوازن التصميم شكله وثباته، ولكن هذا لا يعني أن العناصر يجب أن تكون بنفس الحجم أو اللون، أو أن كل شيء يجب أن يكون متماثلًا. بل يتعلق الأمر بمساعدة عين المشاهد في التنقل عبر المحتوى بطريقة مريحة ولا تُشعره بالغرابة بسبب اختلال توازن التصميم. فكل عنصر من عناصر التصميم مثل النصوص والألوان والصور والأشكال والأنماط وما إلى ذلك يحمل وزنًا بصريًا. والوزن البصري هو المساحة البصرية التي يشغلها العنصر، وكمية الانتباه التي يأخذها من المشاهد. هناك عناصر ثقيلة وتجذب العين، وأخرى أخف ولا تلفت الانتباه، ويجب أن تبتكر طريقة لتوزيع هذه العناصر على الصفحة لمنح الإحساس بالتوازن. هناك نوعان أساسيان من التوازن: متماثل وغير متماثل. يتشكل التوازن المتماثل من التصميم على طول محور عمودي أو محور أفقي، حيث يٌقسّم وزن العناصر بالتساوي إلى جانبي التصميم، فتتشابه العناصر في طرفي التصميم. ويستخدم التوازن غير المتماثل عناصر مختلفة من حيث الشكل والحجم واللون بين طرفي التصميم، ما يجعل توفير التوازن في هذه الحالة صعبًا ويتطلب رؤية المصمم الخاصة وإدراكه لتحقيق التوازن. عناصر التصميم الأيمن متوازنة على جانبي التصميم على عكس التصميم الأيسر حيث أن العناصر في النص الأيمن منه أثقل بصريًّا من الأيسر. هل ترغب في تعلم تصميم الجرافيك عبر الإنترنت؟ استعن بأفضل خبراء تصميم الجرافيك على خمسات لإكسابك مهارات التصميم الاحترافي اطلب خدمتك الآن 5. البساطة Simplicity البساطة تعني تخفيف كم ونوع العناصر والمكونات في التصميم، ولا يعني بالضرورة أن يكون التصميم مغطى بمساحات بيضاء، فالتصميم البسيط يجبر كل من يشاهده على القول إنه بسيط ولكن جميل. قد يظن بعض المصممين من المبتدئين أن التصميم البسيط لن يكون مثيرًا للاهتمام ولن يشد أعين المشاهدين إليه، إلا أن التصميم الجيد وخصوصًا إن كان بسيطًا، سيترك أثرًا كبيرًا في نفوس المشاهدين له. ويعمل التصميم البسيط على إيصال الرسالة بشكل سريع ومفهوم وبسيط للجمهور على عكس التصاميم المعقّدة. نستطيع تطبيق البساطة في التصميم عبر تجنب الكم الهائل من العناصر المرئية، ويجب أن نحاول الحصول على فكرة واحدة قوية بدلاً من دمج الكثير من المكونات للوصول إلى النتيجة ذاتها. ولذلك فإن تطبيق البساطة على أي تصميم يحتاج لخبرة ووعي كبيرين، فلا يستطيع أي مصمم أن يحقق الهدف من التصميم البسيط وأن يمنح الشعور بالرفاهية والأناقة في تصميم بسيط. أحد أبرز الأمثلة على قوة التصاميم البسيطة هو شركة آبل، حيث اتخذ الرئيس التنفيذي للشركة ستيف جوبز من البساطة عنوانًا لتصاميم الشركة. هذه عبارة قوية جدًا بشأن البساطة ولكنها نتائجها العملية يعلمها جميع عملاء الشركة، فإن طرحت السؤال التالي على أي شخص يمتلك أحد أجهزة الشركة كالآيفون وغيره، ما الذي يعجبك فيه؟ سيكون الجواب عفويًا، "إنه بسيط"، مع أنه لن يستطيع أن يشرح لك لماذا هو بسيط، إلا أن هذا دليل على قوة وأناقة التصميم البسيط لأحد أكثر الأجهزة قوة وتعقيدًا التصميم الأيمن بسيط ومريح للنظر والمتابعة على عكس التصميم الأيسر حيث اعتمد التعقيد ما سبب عدم الارتياح لمشاهدته. 6. التقارب Proximity لا يعني التقارب أن نقوم بجمع العناصر أو المكونات معًا لتحقيق التقارب، فالتقارب عمليًّا هو إنشاء علاقة بين العناصر من خلال سمات معينة كاللون والنوع والحجم وحتى الخط. ويساعد على تشكيل الاتصال البصري بين تلك العناصر كما يمكن أن يتحقق ذلك بتقريب المسافة بين تلك العناصر أو بإنشاء عنصر جديد يصل بين العناصر البعيدة، ويحافظ على وحدة التصميم وعلى استمراريته وانسيابيته، ويساعد على توجيه تركيز المشاهد إلى نقطة معينة، إضافة لوظيفته المهمة في تنظيم عناصر التصميم. العناصر متقاربة ومنتظمة في التصميم الأيمن على عكس التصميم الأيسر الذي تباعدت فيه العناصر عن بعضها ما يؤثر سلبًا على جودة التصميم. 7. الهرمية Hierarchy الهرمية مبدأ مهم من مبادئ تصميم الرسوميات والتي تعتمد على إنشاء تسلسل تنازلي للعناصر من حيث الأهمية، بحيث يكون العنصر الأهم أولًا فالذي يليه. ويتم تحديد مستوى هذه الأهمية من خلال زيادة الوزن البصري للعنصر ويتم ذلك عبر زيادة الحجم للعناصر والنصوص أو من خلال زيادة ثقل سمات النصوص فحسب، أي الخط الثخين يليه الخط الرفيع. ما يساعد على شد انتباه المشاهد إلى العنصر الأكثر أهمية ويوجه نظره إليه مباشرة، ومن ثم يتابع النظر تسلسليًا إلى العنصر الأقل أهمية فالذي يليه. وبهذا يُوجّه المشاهد نظره باتجاه محدد ويساعد على تنظيم المحتوى بشكل أنيق ومدروس. لاحظ تطبيق هذا المبدأ بصورة صحيحة في التصميم الأيمن بحيث أن العنوان الرئيسي هو الأكبر حجمًا لأنه العنصر الأهم على عكس التصميم الأيسر. يظهر مبدأ الهرمية في عناصر النصوص ضمن التصميم لصفحة الهبوط هذه - التصميم Landing pages للمصمم Saurabh Sharma بترخيص المشاع CC BY-NC-ND 3.0 8. الانسيابية Fluidity الانسيابية في التصميم تشبه الهرمية من حيث المبدأ، ففي الهرمية تترتّب العناصر من حيث الأهمية، فنبدأ بالعناصر الأهم وصولًا إلى الأقل أهمية. أما في الانسيابية، فلا يتوقف تسلسل العناصر بهذه الطريقة بل تستمر من العنصر الأقل أهمية إلى الأكثر أهمية ثم تتابع العناصر تدرّجها ولكن هذه المرّة إلى الأقل أهمية أيضًا، أو العكس من الأكثر أهمية إلى الأقل ثم إلى الأكثر أهمية مجدّدًا. ويُعرف هذا المبدأ بالتدفق أيضًا، والغرض منه توجيه عين المشاهد باتجاه محدّد بحسب اتجاه التدفق أو اتجاه انسياب تسلسل العناصر بحسب الأهمية. لاحظ كيفية تدفق العناصر بانسيابية في التصميم الأيمن من الأصغر والفاتح في الأعلى إلى الداكن والأكبر في الوسط ثم إلى الأصغر والفاتح في الأسفل، عكس التصميم الأيسر الذي يشعرك بالفوضى وعدم الراحة للمشاهدة. 9. المحاذاة Alignment وهو توزيع وترتيب العناصر على محور واحد وهمي، ما يصنع اتصالًا مرئيًّا بين العناصر المختلفة. ويساعد تطبيق هذا المبدأ على تنظيم مظهر التصميم وإزالة التشوهات التصميمية المزعجة للنظر. ويمكن محاذاة العناصر بشكل أفقي أو عمودي أو حتى مائل، كما تنقسم المحاذاة على المحاور بحسب الاتجاهات مثل المحاذاة الأفقية العلوية أو الوسطى أو السفلية، وكذلك المحاذاة العمودية اليمنى أو الوسطى أو اليسرى وهكذا. ويمكن تصنيف المحاذاة على أنها امتداد لمبدأ التقارب، إذ يتبعان المفهوم ذاته تقريبًا. جميع العناصر في التصميم الأيمن بمحاذاة بعضها على المحور الأفقي وهذا يدل على التنظيم عكس العناصر في التصميم الأيسر. لاحظ المحاذاة التامة لكافة عناصر تصميم هذه الصفحة من نصوص وصور من إحدى المجلات، ما منحها أناقة ورُقيًا وجاذبية - تصميم VERLAG | Magazine Template للمصمم Fahd Tohry بترخيص المشاع CC BY-NC-ND 3.0 10. النسبة Proportion النسبة هي الحجم المرئي والوزن البصري للعناصر في التصميم وكيفية ارتباطها ببعضها البعض، تعد النسبة من أسهل مبادئ التصميم للفهم، فهي مقدار حجم العناصر بالنسبة لبعضها البعض. وبالتالي توجه عيون المشاهد إلى ما هو مهم في التصميم، العناصر الأكبر هي الأكثر أهمية، وبمجرد إتقان المحاذاة والتوازن والتباين، يجب أن تظهر النسبة بشكل طبيعي. لاحظ الوزن البصري الثقيل للنص والذي يشير إلى أهميته بالنسبة للعناصر الأخرى 11. التنوع Variety يستخدم مبدأ التنوع في التصميم لتحفيز اهتمام المشاهد بصريًا للتصميم، ويمكن إنشاؤه بعناصر مختلفة مثل اللون والطباعة والصور والأشكال وغيرها الكثير. ونتجنب باستخدام التنوع إنشاء تصميم رتيب وفقدان اهتمام المشاهد. ومن المهم عند استخدام مبدأ التنوع مراعاة عدم المبالغة فيه لأن ذلك سيتسبب في إثقال وزن التصميم العام وإحداث الفوضى وبالتالي خسارة الهدف من تطبيق هذا المبدأ. مع تطبيق مبادئ المحاذاة والإيقاع والتوازن والتكرارية، فإن التنوع في التصميم الأيمن زاد من جمالية التصميم وأبعد الملل منه كما هو الحال في التصميم الأيسر. 12. التركيز Emphasis يهدف مبدأ التركيز إلى التأكيد إلى أهمية العناصر في التصميم، وإلى الترتيب الذي يجب أن يكون عليه، وبناءً عليه فإن أهم المعلومات التي تحتاج إلى إظهارها في التصميم يجب أن تكون بارزة ويجب التركيز عليها. وتكون العناصر المهمة بارزة بتكبير حجمها ووضعها في موقع بارز مثل منتصف التصميم أو بالقرب منه، واستخدام نظرية الألوان لاختيار اللون الأكثر جرأة ولفتًا للانتباه وتوظيف مبدأ التباين إن احتاج الأمر لتكون بارزة أكثر. على سبيل المثال في تصميم ملصق فيلم ما، فإن أول ما يجب أن يُرى هو عنوان الفيلم، ثم يمكن أن يكون اسم المخرج وبعد ذلك أسماء الممثلين والممثلات. عنصر النص الأكثر أهمية في التصميم يجب أن يكون بارزًا من خلال زيادة وزنه البصري عبر اللون الداكن والحجم الأكبر والموضع البارز كما في التصميم الأيمن. تعمّد المصمم في لوحة الإعلانات أن يضع صورة البرجر في حجم أكبر من باقي العناصر وفي موضع مميز وبلون خلفية مميز بغية التأكيد على هذا العنصر ما يجعل المشاهد ينظر إلى هذه الصورة أولًا ويفهم المقصود من التصميم وتصل الرسالة - الصورة التصميم Burger Billboard للمصمم arch shimul بترخيص المشاع CC BY-NC-ND 3.0 13. الحركة Movement يشير مبدأ الحركة إلى كيفية تفاعل العين البشرية مع التصميم، وتوجيهها باتجاه العناصر الأكثر أهمية فما يليها. لذلك يجب أن يكون العنصر الأكثر أهمية في التصميم هو أول ما يراه المشاهد، وبعد ذلك تحتاج إلى توجيه المشاهد إلى العنصر التالي الأقل أهمية، فالذي يليه وهكذا. على سبيل المثال في ملصق إعلاني لمحاضرة ما، يجب أن يكون عنوان المحاضرة هو أول ما يشاهده الجمهور ثم مكان المحاضرة ثم وقت بدء المحاضرة، وعليه يجب أن يمنح العنوان الوزن الأثقل لكونه العنصر الأهم ومن ثم بالتتالي المكان ثم الزمان. تتفاعل عين المشاهد للتصميم الأيمن عبر الحركة من الدائرة الكبيرة الداكنة باتجاه الصغيرة الفاتحة بطريقة منتظمة ومريحة، عكس حركة عين المشاهد للتصميم الأيسر. تساعد الأرقام المتسلسلة والمائلة على توجيه نظر المشاهد باتجاه ترتيب العد وبذلك تحقق مبدأ الحركة - الصورة لموقع AbbyStolfo 14. الوحدة Unity يشير مبدأ الوحدة إلى مدى جودة عمل جميع عناصر التصميم معًا، حيث يجب أن تتلاءم عناصر التصميم معًا وتشعر وكأنها تنتمي لبعضها البعض. ويتوجب تطبيق جميع مبادئ التصميم الأخرى معًا لمحاولة إنشاء تصميم موحد. فمبدأ الوحدة ينظّم ويربط العناصر ببعضها. ولتحقيق الوحدة في التصميم فإنه يجب تطبيق مبادئ البساطة والتقارب والتكرارية. وقد يبالغ بعض المصممين في سعيهم لتحقيق الوحدة في التصميم بحيث يصممون تراكيب موحدة ومتشابهة ضمن التصميم لدرجة أنها تبدو مملة، لذلك يجب أن يتم تطبيق مبدأ التنوع هنا ولكن بحذر ودون مبالغة أيضًا. غالبًا ما تستخدم الشركات الألوان لتوحيد كل عنصر من عناصر تصاميمها، سواء كان ذلك للشعار أو لموقع الويب أو حتى في المتجر. وهناك أمثلة كثيرة على ذلك. فشركات الشحن والمطاعم أمثال DHL وماكدونالدز وغيرها، تستخدم لونًا محددًا لشعارهم وموقعهم الإلكتروني ولباس موظفيهم وديكور أماكن عملهم ولصاقات سياراتهم، ما يحقق الوحدة للعلامة التجارية والبصرية للشركة بأكملها. وحدة التصميم الأيمن زادت من جودة وجمالية التصميم بحيث انتمت جميع العناصر لبعضها على عكس التصميم الأيسر. مثال على الوحدة في التصميم للعلامة التجارية لشركة الشحن العالمية DHL من مواقع أخبارية خاتمة لاحظنا مما سبق كيفية التأثير وترك الانطباع الجيد عند تطبيق هذه المبادئ في التصميم، والفرق بين المصممين المحترفين وبين المبتدئين هو تطبيق المحترفين لهذه المبادئ بدقة وحرص، ما يجعل التصاميم أكثر احترافية وأناقة وجمالًا. بمجرد النظر إلى تصميم رديء لمصمم مبتدأ ستلاحظ على الفور غياب هذه المبادئ عن تصميمه ولو أنه أعاد التصميم ذاته مع تطبيق هذه المبادئ فسيتحول التصميم الرديء إلى تصميم احترافي وجميل. ومع ذلك ليس من الضروري تطبيق جميع هذه المبادئ دفعة واحدة على تصميم واحد، إنما نطبّق المبادئ التي يحتاجها التصميم للارتقاء بمستواه، وقد لا نحتاج في بعض التصاميم سوى إلى تطبيق مبدأ واحد فقط، الأمر كله يتعلق بالتصميم. سنتحدث في المقال التالي عن أشهر وأقوى نظرية في عالم تصميم الرسوميات وهي نظرية الألوان.

سنشرح اليوم خامس مبادئ التّصميم المرئي وآخرها، والمتعلّقَ بكيفيّة تنظيم عناصر التّصميم ومنحها معنى، دون إضافة عناصر جديدة. الفكرة بسيطة لكنّها تؤثّر في كلّ ما تراه من حولك يوميًّا. سنودّع اليوم بطّاتنا المطاطيّة الّتي رافقتنا في دروسنا السّابقة، ولكنّ ليس قبل أن تشرح لنا اثنين من أهمّ مبادئ التّصميم المرئيّ. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم (هذا الدرس) تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم المحاذاة (Alignment) تبدو البطّات القريبة مرتبطة ببعضها. نرى في الصّورة السابقة مجموعة من 6 بطّات جميلة، ونرى كذلك الكثير من العلاقات فيما بينها، وذلك بسبب كيفيّة مُحاذاتها: نرى صفّين نرى البطّتين في أقصى اليمين وأقصى اليسار على أنّهما "منفصلتان" تبدو البطّتان في الوسط أكثرها "انتظامًا" تبدو كلّ البطّات متّجهة باتّجاه واحد إن كنت ترى حركةً، فإن البطّة في أقصى اليسار تبدو متأخّرة عن رفيقاتها إن كنت ترى حركةً، فإن البطّة في أقصى اليمين تبدو وكأنّها تقود رفيقاتها جميع البطّات متطابقة، والاختلاف في إدراكنا يعود إلى أسلوب مُحاذاتها. يمكن مُحاذاة الأزرار المتشابهة الوظيفة، كما يمكن مُحاذاة مستويات مُختلفة من المستوى، أو تنظيم المعلومات في شبكة من الصّفوف والأعمدة لإيصال معنىً مُعقّد. القرب (Proximity) كلّما كانت البطّات أقرب إلى بعضها، بدت أكثر ارتباطًا. قرب الشيء أو بُعده عن شيء آخر يعطي انطباعًا عن مدى ارتباط هذين الشيئين. في الصّورة الثّانية نُشاهد 6 بطّات متماثلة ولكنّها لم تُحاذَ أفُقيًّا أو شاقوليًّا، ولكنّنا نُدرك وجود مجموعتين، إذ تبدو البطّات في كلّ مجموعة مرتبطة معًا كفريق أو عائلة، ولا شيء يُسبّب هذا الإحساس سوى قربها. في تصميماتك، اجعل العناصر المرتبطة فيما بينها أقرب بعضها من بعض، وأبعدها عن العناصر غير المرتبطة. مثلًا: عنوان وشرح مُختصر وزرّ (كدعوة لشراء أو تنزيل تطبيق)، هذه العناصر يجب أن تكون مُتقارَبة بحيث ينظر لها المستخدم على أنّها مجموعة، وهذا يُعفي المُستخدم من عناء قراءة كامل النّص لكي يدرك ارتباطه بالزّرّ. سنتعرّف في الدّروس القادمة على أنواع أنماط التّصميم والتّراتب المرئي (Visual Hierarchy). ترجمة بتصرّف للدّرس Alignment & Proximity من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 أنواع وطرق محاذاة النماذج (Forms) كيف تنشئ منزلِقًا Slider مناسبًا للواجهة الرسومية عند التصميم للجوال عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة أهمية الفراغات البيضاء في تصميم الويب

هنالك الكثير من القواسم المشتركة بين مسوِّقٍ عبر الشّبكات الاجتماعيّة وبين مُعلنٍ رائع كان يعمل في الستّينيّات من القرن المنصرم. وقد اشتهر David Ogilvy، وهو الأب الرّوحي للإعلان، بأنّه يقضي الكثير من الوقت في انتقاء العناوين، لأن العنوان هو أكثر سطرٍ يقرأه النّاس، وهو في غاية الأهميّة. وكان Ogilvy أستاذًا في أشياء كهذه، أي في ترتيب الأشياء بحسب أهميّتها. لو عاش وشَهِد زمن الشّبكات الاجتماعيّة، فأنا متأكّدٌ من أنّه سيقول شيئًا من قبيل: لم تكن الصّور بهذه الأهميّةً من قبل في الشّبكات الاجتماعيّة. فقد أصبحت الآن مفتاحًا لجذب المزيد من التّفاعل عبر الإنترنت، ويشبه في ذلك العنوان في الإعلان. المشكلة الوحيدة هنا هي عندما لا تكون بارعًا تمامًا في تصميم الرّسوم البيانيّة، وقد يكون إنشاء صورٍ ملفتة للنّظر ومثيرة للاهتمام عندئذٍ أمرًا صعبًا. كيف يمكن لغير المصمّمين أن يقوموا بإنشاء صورٍ رائعة للشبكات الاجتماعيّة؟ يمكن فعل ذلك من خلال تعلّم مبادئ تصميم بسيطة قابلة للتّكرار. وإليك ثلاث مبادئ أساسيّة في التّصميم تساعدك على إنشاء صور ملفتة للشّبكات الاجتماعيّة كلّ مرّة: المبدأ الأول: قم بإنشاء مخطط بسيط ومتوازن هكذا بدت طاولتي في Airbnb اليوم صباحًا وهكذا بدت طاولتي بعد حوالي 30 ثانية. هل تلاحظ أيّ فرق؟ تحتوي كلتا الصّورتين على نفس العناصر. لم يتم إزالة أي شيء من الطّاولة، ومع ذلك فالصّورة الثّانية تبدو أفضل بكثير عند إجراء تعديلٍ طفيف على التّنسيق، على الأقل بالنّسبة لي. ويمكن أن نتعلّم درسًا بسيطًا من ذلك، وهو أنّ تنسيق العناصر في الصّور يُحدِث فرقًا كبيرًا. ألقِ نظرةً على هذين المثالين الأساسيين: ألا تبدو الصّورة الثّانية أفضل بكثير؟ ذلك بسبب مبدئين اثنين من مبادئ التّصميم المتعلّقة بتنسيق الصّورة، وهما التّقارب proximity والمحاذاة alignment. التقارب كما يوضّح Bakari Chavanu: في المثال أعلاه، وفي الصّورة الأولى تم وضع الأيقونة والنّص بشكل متقارب جدًا. وذلك يحرم كلًا من العناصر من الوقوف لوحدها والقيام بدورها. توصل الأيقونة بصريًا فكرة ركوب الأمواج يوصل النّص تفاصيل عن ركوب الأمواج يعني تطبيق مبادئ التّقارب أنّه يجب توجيه المشاهد مباشرةً إلى الأيقونة ثم إلى النّص بشكلٍ واضح. ممّا يتيح للمشاهد فهم ما يُراد إيصاله بشكلٍ أفضل. في المثال الثّاني، تمّ تجميع النّص إلى جانب النّص فقط. إنّ تطبيق مبدأ التّقارب يضفي الوحدة unity والتّتابع continuity على الصّور. المحاذاة إنّ محاذاة العناصر في الصّورة بشكلٍ مناسب يساعد في الحفاظ على التّوازن. وإليك مثال صور مدرسة التّزلّج مرّةً أخرى. أعلى الأيقونة والنّص متحاذيين في كلتا الصّورتين. النّص بأكمله متراصف في الصّورة اليُمنى فقط. أسفل الأيقونة والنّص متحاذيين في الصّورة اليُمنى فقط. تسهم جميع هذه الاختلافات الصّغيرة في جعل الصّورة اليُمنى أكثر توازنًا وجذبًا. كيفيّة إنشاء صور متوازنة وبسيطة عندما يكون لديك عناصر مختلفة في الصّورة التي تقوم بإنشائها، كالنّص، والأيقونات والرّسوم الإيضاحيّة، فعليك أن تفكّر بالدّور الذي يلعبه كلّ عنصر في الصّورة. حافظ على نوعٍ من المحاذاة بين العناصر المختلفة، سواء كان عموديًا، أو أفقيًا أو مائلًا. المبدأ الثاني: يحدث اللون فرقا كبيرا تقول Leslie Cabarga، مؤلّفة كتاب دليل المصمّم إلى تركيبات الألوان The Designer’s Guide to Colour Combinations: إنّ اللّون ليس مجرّد عنصر مرئي فحسب، وإنّما عنصرٌ شعوري أيضَا. وبما أنّ اللّون يثير مشاعر معيّنة، فغالبًا ما قد يحدّد فيما إذا كان النّاس ينجذبون إلى الصّور التي تقوم بإنشائها أم لا. وذلك لا يعني أنّ الأمر ببساطة الابتعاد عن درجات ألوانٍ معيّنة، وإنّما يعني ضرورة التّفكير بالدّور الذي يلعبه لونٌ معيّن في ما تبتكره. وذلك الدّور بسيط هو إحداث تباين في صورك. وتصف Callie Kavourgias وظيفة اللّون والتّباين هذه كما يلي: وإليك مثالين بسيطين عن ذلك في الصّورتين التّاليتين، لكلّ زوج من الدّوائر اللّون نفسه في المنتصف، لكن يبدو كلٌ منهما مختلفًا عن الآخر. وقد تلاحظ تغيّرات في العمق مع تغييرات الألوان المختلفة: ويُظهِر هذا التّباين أنّ إدراك الألوان المستَخدمة في صورك قد يختلف اختلافًا كبيرًا بحسب طريقة مزجك لها. إنّ المبدأ الأساسي عندما يكون الأمر متعلّقًا بالألوان والتّباين: حافظ على البساطة، فغالبًا ما يكون الأقل هو الأقوى تأثيرًا. من الضّروري أن تختار مزيجًا من الألوان المتناسبة، لكن كيف تختار الألوان؟ كيفية اختيار ألوان متباينة Paletton من الأدوات الرّائعة التي اكتشفتها مؤخّرًا للمساعدة في اختيار الألوان المتباينة. وهي أداةٌ تختار ألوانًا متباينة ومتمّمة لبعضها البعض لئلا تضطرّ للتّفكير بالموضوع كثيرًا. في هذا المثال، اخترت الأحمر كلونٍ أساسي، والمتمثّل بأعلى نقطة في عجلة الألوان، وطلبت نسق الألوان الأحاديّة، وهو نسق الألوان الذي يرتكز على ظلال ودرجات لونٍ واحد. عندما أقوم بالمرور فوق المربّعات المختلفة على اليمين، تظهر لي رموزًا ست عشرية، مثل FF6B6B الذي يمكن رؤيته في الجزء الأيمن من الصّورة أعلاه، والذي يمكن أن أستخدمه في تصميماتي. في المثال الثّاني، استخدمت الأحمر أيضًا كلونٍ أساسي، لكنّني طلبت هذه المرّة نسق ألوانٍ تكاملي ثلاثي، أي ثلاث ألوان متموضعة بشكلٍ متساوي في الخطوط حول عجلة الألوان. ومرّة أخرة، أستطيع اختيار ألوانٍ متباينة تتلاءم مع بعضها. هنالك أداةٌ أخرى أستخدمها كثيرًا وهي Brand Colors، عبارةٌ عن مجموعة رموز ألوان رسميّة للشّركات ذات الشّهرة العالميّة. يظهر الرّمز السّت عشري عند المرور فوق أيّ لونٍ من الألوان، كما فعلت هنا مع شركة Addvocate،. عندما أشعر بالعجز ولا أتمكّن من التّفكير في مزيجٍ عظيم من الألوان، فغالبًا ما أستخدم أداة Brand Colors لأستوحي الأفكار. وهذا النّوع من الأدوات ينقذ غير المصمّمين من أمثالي. المبدأ الثالث: اختر خطوطا متناسقة وتسهل قراءتها قد يكون هذا التّشبيه مستخدمًا كثيرًا، لكنّ اختيار الخط يشبه اختيار الملابس التي ترتديها إلى حدٍ ما. إنّ اختيارك لملابسك يعكس جزءًا من شخصيّتك وأسلوبك. فالدّخول إلى اجتماع وأنت ترتدي بدلة مقابل أن ترتدي قميصًا بكمّين قصيرين وسروالًا قصيرًا يترك انطباعات مختلفة عنك لدى الآخرين. ومن هذا المنطلق، فعندما تستخدم خطوطًا في الصّور التي تضعها على الشّبكات الاجتماعيّة فإنّها توصل رسالة أساسيّة عنك وعن شركتك. لنستخدم مثالًا على ذلك، إليك صورتين للشبكات الاجتماعيّة يمكن الاختيار بينهما، أيّهما تفضّل؟ في الحقيقة أنا أميل نحو الصّورة على اليسار لسببين: لأن قراءتها أسهل الخطّان يبدوان متكاملين أكثر وذلك لا يعني أنّ الصّورة الأخرى سيئة للغاية، وإنّما يوضّح أهميّة التّركيز على دور النّص. يلخّص Max Luzuriaga، وهو مصمّم ومطوِّر ويب، الأمر بشكلٍ جيد: وذلك يطرح سؤالًا هامًا للغاية، كيف نختار الخط الذي نستخدمه؟ يمكن أن نعتمد هنا على نصيحة Dan Mayer الحكيمة عندما يقول: أفضل ما في اختيار الخطوط هو أنّك غير مضطرٍ للقيام بالكثير من العمل. تكشف لك بعض المواقع مثل Font Pair الخطوط التي تتماشى مع بعضها البعض إنّ إجراء بحثٍ سريع على جوجل، (كالبحث عن "best fonts for business quotes”) ، يقدّم لك أمثلة رائعة يمكن نسخها كيف تختار الخطوط للصّور التي تقوم بإنشائها: البسيط أفضل من المزخرف كن ثابتًا واستخدم نفس الخط بشكلٍ متكرّر عند إضافة خطٍ ثانٍ، اختر شيئًا مختلفًا فعليًا لكن ببساطة الخط الأوّل ختاما يسعدنا أن نسمع رأيك: كيف تقوم أنت بإنشاء صورٍ جذّابة للشّبكات الاجتماعيّة؟ ما هي المصادر التي ساعدتك على إنشاء تصاميم رائعة؟ ما هي المبادئ التي لم أذكرها والتي أثبتت جدواها بالنّسبة لك؟ ترجمة -وبتصرّف- للمقال How to Create Engaging Images for Social Media: A Simple Guide For Non-Designers لصاحبه Roy Olende.