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

من الصعب إحصاء عدد مبادئ تصميم الرسوميات (التصميم الجرافيكي)، حيث يرى بعض المصممين أنها خمسة وآخرون يصرحون بأن العدد أكثر من ذلك، وقد تصنّف بعض المبادئ على أنها من عناصر التصميم الرئيسية من قبل آخرين، كالمساحة مثلًا، حيث يصنفها البعض من ضمن المبادئ وآخرون يصنفونها من ضمن العناصر. سنتطرّق إلى المبادئ الأساسية التي لم يختلف عليها أحد في عالم تصميم الرسوميات، والتي يجب على جميع المصممين المبتدئين والمحترفين اتباعها ومراعاتها أثناء القيام بالأعمال التصميمية. وهنالك مبادئ ونظريات أخرى في عالم تصميم الرسوميات، كنظرية الألوان والجشطالت (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) في مجال تجربة المستخدم فكرة "الثّقل المرئيّ" (Visual Weight) بديهيّة نسبيًّا، فبعض العناصر تبدو "أثقل" من غيرها في تخطيط الواجهة، فتجذب الانتباه بصورة أسهل، وهذه الفكرة مهمّة لك كمصمّم لتجربة المُستخدم. وظيفتنا هي أن نُساعد المُستخدم على مُلاحظة الأشياء المُهمّة، وألّا نُشغله عن هدفه في الوقت ذاته. بإضافة ثقل مرئي لبعض عناصر التّصميم، يمكنك زيادة احتمال أن يراها المُستخدم، وبالتّالي تغيير ما سيقوم به بعد ذلك. تذكّر: الثقل المرئيّ مفهوم نسبيّ، وكلّ مبادئ التّصميم المرئيّ تقوم على مقارنة عنصر في التصميم بما حوله من عناصر. ولكي لا نطيل الحديث، إليكم نجم هذه السّلسلة من الدّروس: البطّة المطّاطيّة الأصيلة! التباين تجذب البطّة في المنتصف النّظر أكثر ممّا حولها، فالتّباين يؤثّر في الثّقل المرئيّ. هو الفرق بين العناصر الداكنة والعناصر الفاتحة، وكلما زاد الفرق بين عنصرين زاد التّباين بينهما. ما نريده في تجربة المُستخدم هو زيادة تباين العناصر المُهمّة، كالبطّة السّوداء في الصّورة أعلاه، فمعظم محتوى الصّورة فاتح اللّون، وهذا يؤدّي إلى زيادة مُلاحظة البطّة السّوداء، ولو كانت الصّورة سوداء في معظمها، لبدت البطّات البيضاء أكثر ثقلًا. لو كانت هذه البطّات أزرارًا في واجهة، لنقر معظم المُستخدمين الزّر الدّاكن. العمق والحجم يميل البشر إلى الانتباه إلى العناصر القريبة منهم في العالم المادّيّ أكثر من تلك البعيدة عنهم. وبالمثل فإنّنا نميل إلى فهم العناصر الأكبر حجمًا في العالم الرّقميّ على أنّها "أقرب" إلينا، كالبطّة الوسطى في الصّورة أعلاه، والعناصر الأصغر حجمًا على أنّها أبعد عنّا (كالبطّة المُشوّشة أعلاه). لو كانت هذه البطّات متماثلة الحجم، لنظرنا إليها غالبًا من اليمين إلى اليسار (كما نقرأ). يؤدّي استخدام تأثير التّشويش (blur) والظّلال إلى زيادة واقعيّة مفهوم العمق، والحجم يعطي هذا التأثير حتى لو كان التّصميم يتبع الأسلوب المُسطّح (flat design). كقاعدة عامّة، اجعل العناصر الأكثر أهمّية ذات حجم أكبر من تلك قليلة الأهميّة، وهذا يؤدّي إلى إنشاء تراتب مرئيّ ضمن الصّفحة يُسهّل فحصها بالعين، ويُساعدك على اختيار ما يُلاحظه المُستخدم أوّلًا. من هنا نُدرك خطأ فكرة "جعل الشّعار أكبر"، لأنّنا لا نريد للمستخدمين أن يُطيلوا النّظر في شعارنا بدل أن يشتروا شيئًا ما من الموقع! اللون لدينا في الحياة الواقعية نور الشمس، والأضواء الصّناعيّة، والحرارة والبرودة، والثياب، والأسماء التّجارية وكثير من العوامل المشابهة الّتي تؤثّر في إدراكنا للون، ونحن كمصمّمي تجربة المُستخدم علينا أن نفهم الألوان، وإن لم يكن من المطلوب التعمّق في تفاصيلها. أي هذه الألوان يبدو باردًا؟ وأيها يبدو وكأنّه تحذير؟ للألوان معنى. أي من هذه البطّات تبدو وكأنّها أقرب؟ يمكن للألوان أن "تتقدّم" أو "تتراجع". يمكن لنا أن نتعلّم بعض الأمور من البطّات في الصّورتين أعلاه. عادةً ما ننجز الرّسوم التّخطيطيّة (wireframes) بالأسود والأبيض، وهذا أمر حسن، لأنّه يسمح لنا بالتّركيز على الوظيفة، أمّا المظهر فهو مسؤوليّة مصمّمي الواجهة. إلّا أن الألوان في بعض الأحيان تكون ذات وظيفة، كألوان إشارات المرور، أو كأن يكون لون "المصّاصة" مطابقًا لطعمها، فهذا مهمّ! معنى الألوان في الصّورة الأولى ضمن الفقرة السّابقة، نرى ثلاث بطّات: زرقاء وصفراء وحمراء، وهي بطّات جميلة، ويمكن أن نُلاحظ مُباشرة أن لكلّ بطّة صبغة، ولكلّ من هذه الصّبغات "معنى" ما. لو كانت البطّات أزرارًا، فقد تكون: "تأكيد" و "إلغاء الأمر" و "حذف"، ولو كانت مؤشّرًا لامتلاء الخزّان، لكانت "مليء" و "نصف مليء" و"فارغ"، ولو كانت مؤشّرًا في فرن لكانت "بار" و "دافئ" و "حار". لعلّك أدركت الفكرة: البطّات متماثلة، لكنّ اللّون غيّر المعنى. إن لم تكن بحاجة للإشارة إلى الاختلاف في الوظيفة، فدع مصمّم الواجهة يختر الألوان، وإلّا فاجعل الألوان جزءًا من رسومك التّخطيطيّة. التراجع والتقدم يمكن للألوان كذلك أن تكون "صاخبة" أو "هادئة"، ففي الصّورة الثّانية نُشاهد بطّة حمراء واثنتين زرقاوين، تبدو الحمراء أقرب قليلًا، ولكنّها ليست كذلك. الجأ إلى هذه الحيلة في أزرار الشّراء حيث تبدو وكأنّها "تقفز" من الشّاشة، فالمستخدم يميل إلى نقر الألوان الأقرب. وبالعكس، قد ترغب أحيانًا بأن تُبقي بعض العناصر ظاهرة دون أن تُشتّت انتباه المستخدم، كالبطّتين الزّرقاوين، فهي تبدو "متراجعة"، وهذا الأسلوب مناسب لقائمة تبقى دومًا ظاهرة على الشّاشة، فلو كانت "صاخبة" لصرفت انتباه المُستخدم عن عناصر أهمّ. أبق رسومك بسيطة استخدم الألوان في الرّسوم التّخطيطيّة لبيان الوظيفة فقط، فلا داعي للمبالغة في استعمالها أو الحرص على تجميلها لعرضها أمام الزّبون، فقد يدخل معك في نقاش لا طائل من وراءه لاختيار ألوان أخرى. اجمع مبادئ التصميم المرئي معا يمكن استخدام الألوان مع ما تعلّمناه عن الثّقل المرئيّ، إذ يسهل ملاحظة العناصر الكبيرة، وأمّا العناصر الكبيرة حمراء اللّون فيستحيل تجاهلها! اجعل رسائل الخطأ والتّحذيرات حمراء وعالية التّباين، وأمّا إن كانت رسالة تأكيد لنجاح العمليّة، فيكفي أن تكون صغيرة الحجم بلون أخضر مُتراجعٍ. ترجمة بتصرّف للدّرسين Visual Weight, Contrast & Depth و Colour من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 دليل المبتدئين إلى التصميم التفاعلي Interaction Design تطور العمل في إتاحة الألوان كيف تختار اللون المثالي لعلامتك التجارية عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة أهمية الفراغات البيضاء في تصميم الويب

تحتوي النسخة الثانية من إرشادات الوصول لمحتوى الويب (WCAG 2.0) على توصيات من رابطة الشبكة العالمية (W3C) لجعل إتاحة الويب أكثر سهولة لذوي الإعاقة من المصابين بعمى الألوان، وغيرها من أوجه القصور في الرؤية. هناك ثلاث مستويات من المطابقة حددتها النسخة الثانية من إرشادات الوصول لمحتوى الويب مرتبةً تصاعديًّا: المقياس الأقل هو A، ثم المقياس AA، وأخيرًا المقياس AAA. ويجب على النصوص والصور النصية أن تطابق المقياس AA كحد أدنى. يتطلب المقياس AA أن تحتوي النصوص والصور النصية على حد أدنى من نسبة تباين الألوان (Contrast Ratio) وهي 1:4.5؛ بمعنى آخر، يجب أن يحتوي اللون الأفتح في زوجٍ ما على استِضْوَاء (Luminance)- وهو مؤشر لمعرفة درجة السطوع التي سيظهر بها اللون- أكثر أربع مرات ونصف من اللون الآخر الداكن. تم حساب نسبة التباين هذه حتى تشمل تحتها أصحاب الرؤية المقبولة، الذين لا يحتاجون إلى الاعتماد على التكنولوجيا المساعدة على تعزيز التباين، بالإضافة إلى الذين لديهم قصور في رؤية الألوان؛ وقد قُصِد بذلك تعويض النقص لديهم في حساسية التباين، والتي غالبًا ما تكون لدى أصحاب نظر 20/40، أي الذين مستوى نظرهم نصف المعدل الطبيعي 20/20. ويتطلب المقياس AAA أن تكون نسبة التباين 1:7، والتي من شأنها أن توفر تعويضًا لأصحاب نظر 20/80، أي الذين مستوى نظرهم ربع المعدل الطبيعي. أما الذين مستوى نظرهم أقل من ربع المعدل الطبيعي، فيلزمهم الاعتماد على التكنولوجيا المساعدة على تعزيز التباين والقدرات المكبرة. هناك العديد من النصوص والصور النصية التي لا يلزمها التقيد بهذه القواعد؛ مثل النص الموضوع للزخرفة، أو النص غير المهم الذي يظهر في جزئيات صورة ما، أو صور شعارات الشركات، ونحوها؛ لأن هذه النصوص المزخرفة أو الشعارات ليست أساسية لفهم محتوى الصفحة المراد قراءتها؛ ولا لتوصيل معلومات مهمة، بل هي في الأساس لنشر الهوية البصرية للشركة. وإذا لزِم الأمر، فيمكن وصف الشعار باستخدام النصوص المعرفة للصور (Alt Attribute)؛ وذلك تسهيلًا على من يستخدم تطبيقًا قارئًا لمحتويات الشاشة. لمزيد من التعلم، راجع تدوينة Julie Grundy، أخصائية الإتاحة، على Simply Accessible، حيث ناقشت أفضل الممارسات حول وصف النصوص المعرفة للصور. يلعب حجم الخط دورًا بارزًا في تحديد مقدار التباين المطلوب، فالنص الرمادي بقيم 150 للأحمر، 150 للأخضر، و150 للأزرق (RGB 150,150,150) على خلفية بيضاء نقية، يُعدَ مجتازًا للمقياس AA، طالما كُتبت به العناوين الرئيسية بحجم أكبر من 18 نقطة. أما النص الرمادي بقيم 110 للأحمر، 110 للأخضر، و110 للأزرق (RGB 110,110,110) فإنه يجتاز المقياس AA بأي حجم كُتب به، ويُعد متوافقًا مع المقياس AAA إذا كُتبت به العناوين الرئيسية بحجم أكبر من 18 نقطة. وربما يختلف خطان في درجة الوضوح مع أن لهما نفس الحجم؛ وذلك بسبب الاختلاف في نوع النمط المكتوب به، خصوصًا إذا كان النمط دقيق البنية. يلعب حجم الخط دورًا مهمًا في حساب نسبة التوافق شخصيًا، أحبذ أن يكون محتوى النص كله متوافقًا مع المقياس AAA؛ أما إذا كانت العناوين الرئيسية كبيرة والمحتوى أقل أهمية فالحد الأدنى هو مطابقة المقياس AA. تذكر أن هذه النسب موضوعة للنص أحادي اللون، المكتوب على خلفية أحادية اللون، حيث يمكن حينها قياس قيمة اللون الواحد؛ أما النص المركب على خلفية، أو نمط، أو صورة بها تدرج في درجة اللون، فيتطلب قيمةً أعلى للتباين، أو استبدال شيء في التصميم؛ كأن يُكتب النص مثلًا على شريط أحادي اللون في الخلفية؛ لتوفير وضوح كاف. إن نسب التوافق هذه هي غالبًا ما يعنيه الناس حين يزعمون أن إنجاز تصميم إتاحيّ عبر تحقيق كافة الشروط يمكن فقط أن يتم على حساب خنق الإبداع أو التقيد بألوان محددة. لكن هذا ليس صحيحًا؛ فبتجربة برنامج فاحص تباين الألوان (color-contrast checker)، ثبت أن هناك العديد من نسب التوافق المعقولة وتحقيقها سهل، خصوصًا إذا كان المصمم مدركًا للقواعد من البداية؛ فالأمر سيكون محبطًا للغاية إذا كان المصمم يريد تغيير لونٍ ضعيف المستوى إلى لون أكثر إتاحة في مرحلة لاحقة من التصميم، أو بعد أن تم اختيار ألوان العلامة التجارية بالفعل. أما إذا قرر المصمم اختيار الطريق الصعب، فسيجد بعد ذلك أنه غير مقيد على الإطلاق. إذا كان كل هذا الكلام عن الأرقام مشوِّشًا؛ فأعدك أن جانب عملك لن يتضمن أيًّا منها. يمكن بسهولة معرفة ما إذا كانت مجموعة ألوانك اجتازت الاختبار أم لا، عبر استخدام فاحص تباين الألوان. فاحص التباين إحدى أدواتي المفضلة هي Lea Verou’s Contrast Ratio ؛ فهي تسمح لك بإدخال رمز للون الخلفية، ورمز للون النص، ثم تحسب لك النِّسب. أداة Lea Verou’s Contrast Ratio checker لفحص نسبة التباين إن نسبة التباين تدعم أسماء الألوان، رموز ألوان هيكس (hex color code)، قيم الأحمر والأخضر والأزرق وألفا (RGBA)، قيم التنوع والتشبع والسطوع وألفا (HSLA)، وحتى أنها تدعم مزيجًا من كل منهم، ودعمها لقيم (RGBA) و(HSLA) يعنى أنها تدعم الألوان الشفافة أيضًا، فهي حقًّا أداة مميزة. كما يمكنك بسهولة مشاركة نتائج الفحص عبر نسخ ولصق الرابط؛ إضافة إلى ذلك، يمكنك تعديل الألوان بتغيير القيم في الرابط السلسة (URL string) بدلًا من استخدام حقول الإدخال في الصفحة. أداة رائعة أخرى هي Jonathan Snook’s Colour Contrast Check، ومن مميزاتها أنها تُظهر لك إذا ما كان مزيج الألوان يمكنه اجتياز كِلَا المقياسين AA وAAA أم لا؟ أداة Jonathan Snook’s Colour Contrast Check لقياس نسبة التباين فمع أنها لا تدعم كل القيم، إلا أنها في نفس وقت الكتابة تعرض لك حساب الفرق في السطوع، واختلاف قيم الألوان؛ هذا الأمر ربما يهمك إذا كنت تريد بعض المعلومات الإضافية. أدوات اختيار الألوان إذا كنت تعمل على تصميم في بدايته، واحتجت لمساعدة في اختيار ألوانٍ إتاحية، فأنصحك بتجربة أداة Color Safe؛ إن هذه الأداة المعتمدة على الويب تساعد المصممين على تجربة واختيار مزيج من الألوان الجاهزة التي تخضع لمقاييس التباين. كبدايةٍ، أدرج لونًا للخلفية، ثم اختر عائلة من الخطوط، وحدد حجم الخط وكثافته؛ وأخيرًا، اختر مستوى التوافق مع (WCAG)، حينها سيقوم البرنامج بإعداد قائمة شاملة من الاقتراحات التي يمكن استخدامها كألوان إتاحية للنص المراد كتابته فوق الخلفية. نموذج من عمليات بحث برنامج Color Safe لألوان إتاحية متوافقة اعتمادًا على لون الخلفية المختارة أدوات التعديل إذا فَشِلتْ مجموعة الألوان التي اخترتها في مطابقة الحد الأدنى لنسبة التباين؛ ففكر في استخدام شيء مثل Tanaguru Contrast Finder لمساعدتك على إيجاد البديل المناسب. هذه الأداة الرائعة تدمج لون المقدمة ولون الخلفية معًا، ثم تقدم مجموعة من الخَيارات الإتاحية المشابهة للألوان الأصلية. من المهم جدًا ملاحظة أن هذه الأداة تعمل بشكل أفضل حين تكون الألوان بالفعل قريبةً لكونها إتاحية، ولكنها فقط تحتاج إلى دَفعة صغيرة. لذلك، ربما لا تزودك الأداة بأية خَيارات على الإطلاق إذا كانت نسب تباين أزواج الألوان منخفضة للغاية. هذا الزوج من الألوان غير متوافق مع المقياس AA مجموعة بدائل مقترحة من Tanaguru متوافقة مع المقياس AA ترجمة -وبتصرّف- للمقال Color Accessibility Workflows لصاحبته Geri Coady.

إنّ استخدام عدة خطوط في نفس التصميم يمكن أن يكون صعباً إن لم تكن ملمّاً بالنظريات الأساسية وتدربت جيداً. برأيي أن عملية دمج الخطوط في تصميم واحد هو من أصعب مراحل التصميم. إن لم يكن لديك فكرة من أين تبدأ، فإن هذه المقالة سترشدك إلى المعلومات التي ستحتاجها. البحث عبر الإنترنت عن نصائح تتحدث حول اقتران الخطوط سيكون مربكاً وصعباً، فهناك العديد من الأمثلة التصميمية المستخدمة. لذلك قمتُ بالبحث العميق خلال الأسبوعين الماضيين وسأقدم لك الطريقة الصحيحة للعمل بحسب رأيي. إن أكثر سؤال طرحتُه على نفسي هو "كم خطّا يجب أن أستخدم؟" أنا أخبر الناس دائماً أن يعتمدوا على ما يرونه صواباً وعلى أنماط تصميماتهم، لكنني عادةً لا أفضّل استخدام أكثر من خطين. برأيي أنك يجب أن تعمل على خطين وليس أكثر. لأن جميع الخطوط تشبه الناس لها شخصية وتأثير على ما حولها. إذا استخدمت خطين بتأثيرين متعاكسين فإن ذلك سيسبب تضارباً ويشوّه التصميم ككل. فتواجد الكثير من الشخصيات القوية معاً في مكان واحد سيخلق جواً حرجاً وهشاً وهذا بالضبط ما يحصل مع الخطوط أيضاً. مع ذلك، حتى لو قلتُ أنا بأن نستخدم خطين فهذه ليست قاعدة أبداً ولا توجد قواعد تحدد عدد الخطوط المستخدمة. بإمكانك استخدام العدد الذي تجده مناسباً لتصميمك، التحدي الأكبر هو تكوين انسجام بين الخطوط المختلفة، لذلك كلما كان عدد الخطوط أقل كان أسهل بكثير إيجاد انسجام بينها كما يجعل التصميم يُحدِث تأثيراً أكبر. بإمكانك استخدام عدة خطوط مختلفة الأشكال والأوزان (السماكة) ولكنك يجب أن تجعلها متكاملة ومتناسقة في نفس الوقت. سؤال آخر "هل أشتري أم لا؟". هذا يعتمد على المشروع، هناك سبب لكون بعض الخطوط مجانية وبعضها الآخر يكلف 100 دولار من أجل 10-12 شكل مختلف. إن ميزة الخطوط المتميزة غير المجانية (Premium) هي الدقة العالية والجودة، البعض منكم ربما لن يلاحظ الفرق بين النوعين ولكن الخبراء سيقدّرون الخطوط المدفوعة القيمة (Premium) ويفضلونها على الخطوط المجانية. لا تسيئوا فهمي الآن، فأنا لا أعني بأن الخطوط المجانية سيئة ولكن هناك فرق كبير من ناحية الدقة والجودة. الفرق سيكون في التفاصيل الدقيقة كسماكة الخط، الشكل، المساحة البيضاء والمسافة بين الحروف. المسافات بين الحروف قد لا تكون مثالية في الخطوط المجانية، لأن مطوّري الخطوط لا يبذلون الكثير من الجهد في العمل عليها (ولِمَ سيفعلونَ ذلك؟) طالما أنه مجاني ولن يحصلوا على شيء بالمقابل. قد يكون هناك بعض الأدوات التي تساعد على تحسين التباعد والتقارب بين الخطوط مثل kern.js ولكنها ليست عملية للخطوط ذات الأحجام الكبيرة. هذه الصورة من stitchindye. على الرغم من أن أرقاماً أقل ومحدودة ستكون أفضل، لكن إن تمكنت من تحقيق الانسجام بينها، فقم باستخدام العدد الذي تريده من الخطوط بالأحجام والألوان الذي تريده. الخطوط المدفوعة القيمة (Premium) هي خطوط أصلية وهذا سبب آخر لاستخدامها، إذا كنت تدفع مقابل الحصول على خط ما فهناك نسبة ضئيلة بأن يستخدم أحد آخر هذا الخط، وبذلك ستكون متميزاً ومنفرداً بخطوطك بينما يستخدم جميع المصممين المبتدئين خطوط Arial وVerdana في معظم الأحيان وخطوط Arial، Times New Roman، Traditional Arabic وTahoma بالنسبة للمصممين العرب المبتدئين أيضاً. وأمر آخر جدير بالذكر هو أن شراء الخطوط يشجّع مجتمع مطوّري الخطوط على الاستمرار قدماً بعملهم في تطوير الخطوط. مطوّرو الخطوط يستطيعون الاستمرار في تطوير الخطوط إن حصلوا على المال مقابل ذلك وأنت أحد هؤلاء اللذين يستطيعون المساهمة في شراء خطوطهم وتشجيعهم على الاستمرار. وإن سألتني فأنا أرى بأن تشتري خطّا احترافيا بدلاً من الحصول على تلك الخطوط المجانية. لطالما كانت الجودة والدقة العالية مُهمّة بالنسبة لي وأعتقد أنها يجب أن تكون كذلك بالنسبة لك. ولذلك فإن هذا الاستثمار المالي سيكون له مغزى. يجب أن تفكر في نوعية الخطوط التي تحتاجها قبل الذهاب لشراء الخطوط. إن كنت تستخدم نوعاً معيناً من الخطوط للعناوين في الصفحة الرئيسية فيجب عليك ألّا تستخدم نوعاً آخر في باقي الصفحات. فكّر في السبب الأساسي لاختيار الخط، هل هو لنص الصفحة أم للعنوان؟ هل هي مجلة للشباب؟ كل هذه التفاصيل يجب أن توضع في الحسبان قبل اختيار الخطوط. كيف ننجح في تحقيق ذلك؟تحقيق الاقتران السليم بين الخطوط المختلفة يعتمد على التوافق (Concord) والتباين (Contrast)، وليس على التعارض والتضارب. الخطوط بحاجة لأن تعمل مع بعضها بشكل جيد وتتشارك الخصائص أو يمكن أن تكون هناك بعض الاختلافات إنما ضمن حدود. التعارض والتضارب بينها يمكن أن ينفَّذ إنما فقط إذا كانت متشابهة أو تبدو كأنها من نفس النوعية. التباين (Contrast)إن أردت تحقيق التباين (Contrast) يجب أن تبحث عن النوعية مثل (Blackletter، Monospace، Slab Serif، Script والخ.)، الحجم، الوزن (السماكة)، الشكل (تناسب الخطوط يجب أن يكون بنفس الأهمية، امتداد الهبوط، انحناءات الخطوط، حركتها واتجاهها، الخ.) واللون. Lucida std و Lucida Sans كما ترون في هذا المثال، خطين مختلفين يبدو أنهما متناسقين معاً. Lucida std و Lucida Sans. تم تطويرهما من قبل نفس المصمم، تعمل بشكل رائع عند الدمج بينهما. هذا مثال بسيط كلاسيكي. خط مزخرف للعنوان وبسيط ومقروء وواضح للنص العادي، لا يوجد أي خلل فني هنا. لنرى بعض التركيبات الجيدة: Georgia و Arial Rotis Serif و SansSerif خطين صُمّما من قبل نفس المصمم، يعملان بشكل رائع مع بعضهما. يمكنك أن ترى من خلال الأمثلة السابقة أن التسلسل الهرمي للنص (العناوين بمستوياتها ثم النص العادي...) واضح من خلال الحجم، ولكن هناك طرق أخرى للقيام بذلك، ألقِ نظرة على الأمثلة التالية: Helvetica Bold و Helvetica Neue UltraLight هنا التسلسل يبدو واضحاً من خلال الوزن (السماكة)، مع أن كلا الخطين بالحجم ذاته وهو 35 pt. Helvetica Light كلا الخطين بالحجم ذاته وهو 35 pt. ولكن اللون مختلف وهو ما أظهر التسلسل. Impact و Calibri مختلفان بشكل واضح يظهر فيه التسلسل بشكل جلي. الإنسجام أو التوافق (Concord)سنكتفي بهذا القدر من الحديث عن التباين. ولنتحدث عن الانسجام الآن، إن أي عناصر منسجمة ومتناسقة بين خطين ستبدو واضحة بكل تأكيد. يمكن أن يكون مستوى ارتفاع الحروف أو التناسب أو أي شيء آخر. أسهل طريقة للحصول على الانسجام والتناسق هو اختيار خطوط من ذات النوعية وتنتمي لذات العائلة من الخطوط. وقد ظهر هذا في مثال سابق كُتبَ بخط Helvetica للعنوان والنص معاً. وأحد أفضل الأمثلة على تحقيق الانسجام هو استخدام خطين من عائلة Droid. Droid Serif و Droid Sans من السهل جداً التحكم بالخطوط وتعديلها خصوصاً تلك التي تنتمي لذات العائلة أو النوعية، كما يمكن تحقيق الانسجام والتناغم بسهولة بينها لذلك أنصحك بالبدء بهذا الأسلوب من العمل. التعارضأما بالنسبة للتعارض فهو أن تحاول دمج خطوط غير متناغمة أو متناسقة مع بعضها والنتيجة هي أن التصميم سيكون سيئاً جداً وهذا مثال عن هذه الطريقة السيئة من الدمج. Blackmoor LET و Helvetiva على الرغم من أنها تحقق التباين فعلياً إلّا أن هذا التباين زائد عن الحد وقبيح. فخط العنوان Blackmoor LET هو من نوعية Blackletter القديمة والداكنة أما خط النص فهو Helvetica وهو من نوعية neo-grotesque ذو المساحات البيضاء الكبيرة وتباعد الأحرف الواضح وهذا تعارض وتعاكس هائل ويسبب التنافر والقبح في التصميم. عندما نقوم بجمع عدة خطوط مع بعضها فمن الأفضل أن تكون من نفس التصنيف. لقد شاهدتُ بعض الأمثلة التي تجاوزت هذه القاعدة ونجح الأمر معها، لكن دعونا نواجه الأمر، سيكون هذا نادراً. التناسب، الأوزان (السماكة)، الأحجام والأشكال مختلفة. انحناءات الحروف ليست على ذات السوية ولا محاور يتم العمل عليها. من السهل جداً مشاهدة اتجاه الحروف. فالخطوط من نوعية Blackletter ذات محور مائل. بينما معظم الأنواع الحديثة من الخطوط ذات محاور عمودية. هناك العديد من العناصر لا تعمل مع بعضها بتناسق وتناغم، وإن كانت الخطوط ليست منسجمة بما يكفي فإن النتيجة النهائية لن تكون جيدة بكل تأكيد. خلاصة القوليجب أن تكون هذه المقالة كافية للبدء بالاعتياد على القواعد. فهذه ليست سوى دورة تدريبية للمبتدئين تقدم لك المفاهيم الثلاثة الأهم للقيام بعملية دمج الخطوط. ضع في بالك على الدوام أننا نحن المصممين يجب علينا أن نبدع وأن نكسر القواعد بين الحين والآخر دون أن نتسبب بأي ضرر في جمالية التصميم، وبدون أن نبالغ في ذلك أيضاً. حاول أن تكون مبدعاً، وإن لم ينجح معك الأمر فجرّب شيئاً أكثر بساطة وفعالية. إن دمج الخطوط ليست عملية سهلة. فهي تتطلب عدة سنوات من عمرنا حتى نصل إلى الاتقان. نحن جميعاً بدأنا من هذه المفاهيم الثلاثة وعليك أن تفهمها وتعرف كيفية تطبيقها في مجال عملك وتعّلم الدمج بين عدة خطوط للحصول على التأثير المنشود. ترجمة -وبتصرّف- للمقال: A Beginner’s Guide to Combining Multiple Fonts.

التوازن هو مفهوم هام في عملية تصميم المواقع الإلكترونية. لتحقيق التوازن، لا بد من معرفة كيفية استخدام التناظر (Symmetry) والتباين (Asymmetry) للوصول الى الجمال والوضوح. هذه الأدوات هي جزء لا يتجزأ في عملية تصميم موقع إنترنت موحد وجميل. من المهم أن نفهم هذه الفكرة بشكل صحيح قبل استخدامها. ما هو التناظر (Symmetry)؟نحن نرى الجمال في الأشياء المتناظرة وفي الناس المتناسقين. التناظر هو عامل أساسي في علوم الجمال والجماليات. ولكن ماذا يعني ذلك حقاً؟ التناظر هو نوع من توازن الانسجام والتناسب. في جميع الكائنات هناك تناظر وتوازن. وهذا الأمر قد تم إثباته بواسطة علوم الهندسة والفيزياء. الجاذبية هي عامل مهم في التناظر الطبيعي. وهذا هو السبب في أن معظم الأشياء في الطبيعة تتطور نحو التناظر. ولهذا نرى الجمال في التماثل والتناظر. أكثر أنواع التناظر شيوعاً هو التناظر الانعكاسي. والذي يعرف أيضاً بالتناظر الثنائي. هذا يعني أساساً وجود "نصفين متطابقين". أي أنه إذا قمت بطي الكائن على محوره الأوسط، فإنك ستلاحظ أن كلا الجانبين هما نصفين متطابقين أصلاً. الطبيعة مليئة بالأمثلة عن التناظر الثنائي كالفراشات، الأوراق، الحياة البحرية والخ. إنها تُظهر هذا الشكل من التناظر. كل الحياة النباتية والحيوانات تقريباً تُظهر هذا النوع من التناظر. هناك القليل فقط لا يتمتع بالتناظر الثنائي. وطبعاً التناظر الثنائي في الطبيعة هو تقريبي، ولا تتطابق الأنصاف بشكل تام عند طيها على محورها الأوسط. أحد أفضل الأمثلة عن هذا التناظر هو الجسم البشري. كل نصف من الجسم البشري إن كان الأيمن أو الأيسر هو انعكاس للنصف الآخر. أمّا داخلياً، فالأمر مختلف. حيث أن أعضاء الجسم الداخلية لا تعكس أنصاف بعضها البعض. وهناك أنواع عديدة من التناظر الانعكاسي (الثنائي) في الطبيعة، مثل التناظر الأفقي (وهو الأكثر شيوعاً)، العمودي، القطري والخ. التباين (Asymmetry)التباين (Asymmetry) يظهر جلياً في غياب التناظر. ويمكن تحقيق التوازن التركيبي في التباين. التباين شائع أيضاً في الطبيعة وعلم الأحياء. معظمنا إما أيمن أو أعسر في استخدام اليد. وإما أن يكون نصف دماغنا الأيمن أو الأيسر هو المهيمن. أعضاؤنا الداخلية ليست متطابقة تماماً. التباين يخلق الطاقة والتوتر. في حين أن التناظر هو ثابت ومنتظم. الجمال في التباين (الصورة من WIKI) التباين في لوحة فنية رائعة للفنان Wassily Kandinsky إنك تشعر بالحركة في التباين. ولهذا السبب تبدو التصاميم المعمارية واللوحات الفنية المتباينة أكثر إثارةً للاهتمام. في التباين حرية، لا يمكن احتواؤها أو منعها، على عكس التناظر. ولكن إذا نظرنا إلى سلبيات التناظر فهو قد يكون مملاً ومُنهِكاً للعين إن لم يكن دقيقاً وصحيحاً وسيكون المنظر العام فوضوياً ومربكاً. التناظر (Symmetry) ضد التباين (Asymmetry) في تصميم المواقعالتوازن جزء لا يتجزأ في تصميم المواقع، ولهذا فإن الاستخدام المناسب لكلا الحالتين (التناظر والتباين) مهم جداً. التناظر والتناسق في مواقع الانترنت غالباً ما تكون محبـِطة لأنها تجعل التصميم يبدو مملاً وساكناً، وسيكون هناك نقص في الطاقة الحيوية للتصميم وهذا ما يجعل مهمة جذب اهتمام المتابعين صعبة. ولكن مواقع الانترنت المتناظرة ليست دائماً بهذا السوء، وهذا يعتمد على ماهية مواضيع الموقع. المواقع المتناظرة لها مزاياها الخاصة، التناظر في تصميم الموقع يعطيه التنظيم والتوازن، سيبدو الموقع نظيفاً ومرتباً، وهذا مهم خصوصاً إذا كان الموقع محترفاً ويحوي مثلاً معلومات عن المركبات والسيارات بأنواعها. تصاميم المواقع المتباينة وغير المتناسقة هي أكثر إثارةً للاهتمام وأكثر ديناميكية، بالمختصر المواقع المتناظرة تساعد على التذكّر أما المتباينة فهي مثيرة للاهتمام. وهذه أمثلة عن مواقع متناظرة: هذا مثال رائع لإظهار التناظر في مواقع الإنترنت، موقع Duuel مخصص لإيجاد أفضل المصممين "بشرط أن يكونوا" مغامرين ممن يستطيعون التنافس مع زملائهم المصممين، حيث أن التنافس مع الآخرين يُظهر أفضل المواهب لدى المصمم، ولا يحق لهم سوى استخدام التناظر الثنائي، والذي يُظهِر التناغم بين الموهبة والذكاء في تقديم عروضهم. يوجد شكل آخر من أشكال التناظر والتناسق وهو التناظر الدوراني (Rotational Symmetry) والذي يساعد على خلق الإيقاع والتناغم والتدفق. وهو يوجّه عيون المشاهدين إلى أين ستكون البداية وأين ستكون الخطوة التالية. التناظر الانسحابي (Translational) ويطلق عليه أيضاً التناظر التعددي أو التناظر الانتقالي، وهو شكل آخر من أشكال التناظر والذي يكون فيه الكائن مكرراً خلال سير مخطط التصميم، مع الإبقاء على نفس التوجه، الجحم والشكل. إن كنت تعرف مبدأ الجشطالت (Gestalt principle) فيجب أن يكون مألوفاً لديك أن دماغنا سينخدع ليقودنا الى أين يتجه التصميم، وأيضاً لتحقيق التوازن في رؤوسنا. Duplos هو موقع رائع يستخدم تقنية التباين، فعلى الرغم من أن العناصر في الموقع لا تعكس بعضها البعض، إلا أنها تحقق التوازن التركيبي للموقع، وهو ما يجعل الموقع يبدو جميلاً و مثيراً للاهتمام في نفس الوقت. يمكنك أيضاً أن تجمع بين التناظر والتباين معاً، حيث يمكنك تحقيق توازن متناغم من خلال دمج التناظر والتباين في تصميم موقعك. استخدم عناصر متناظرة لجعل مخطط التصميم احترافياً وأنيقاً، ضع المعلومات ضمن هذا السياق ليصبح تذكّرُها سهلاً، واستخدم العناصر المتباينة لجذب الانتباه، خصوصاً أن جذب اهتمام المشاهد هو الأهم. خير مثال على عملية الدمج بين الأسلوبين هو موقع جوجل الجديد، جميعنا نعرف الموقع القديم لجوجل، إنه متناظر تماماً، لقد اعتمدوا على المساحة البيضاء بدون استخدام أية عناصر إبداعية على الاطلاق، وهو موقع مفيد جداً، ومع ذلك هو ممل وجامد. الآن يتيح لك الموقع الجديد الاختيار بين عدة تصاميم وتغييرها، كما يتيح لك الاختيار ضمن مجموعة كبيرة من الثيمات (المواضيع) والصور، حتى أنه يمكنك الاختيار من ضمن صورك على موقع Picasa. شعار جوجل الآن أصبح أبيضاً عوضاً عن الشعار الملون المألوف، ولكن كل الأشياء الأخرى على حالها: الروابط، موقع الشعار وحجمه وشريط البحث وسط الموقع. الموقع الجديد مزَجَ بين التناظر والتباين بشكل هادئ ولطيف بنجاح تام. العناصر المتباينة أكثر ظهوراً ولفتاً للانتباه من العناصر المتناظرة، لهذا يجب أن يكون التخطيط العام والخلفية خاملة بصرياً، وبالتالي التناظر مهم لهذه العناصر، وينبغي استخدام التباين للتصاميم الفردية التي تهدف إلى لفت الانتباه وكسر الملل. المزيد من الأمثلة عن مواقع مثيرة للإعجابإن معظم المواقع لا تتبع أسلوباً واحداً فقط (متناظر أو متباين) إنما تستخدم كلا الطريقتين معاً، وفيما يلي بعض الأمثلة عن مواقع رائعة تستخدم التناظر والتباين معاً: خلاصةسنلخص هذه المقالة بتقديم بعض النصائح التي تساعدك على استخدام التناظر (Symmetry) والتباين (Asymmetry) لصالحك: التناظر عظيم جداً لهيكل التصميم الأساسيالعناصر المتكررة تخلق مساحة هادئة ومتوازنة. التصميم المتناظر يستطيع أن يخلق التوازن، وفي نفس الوقت يحافظ على المساحة من أجل النصوص والصور. التباين رائع للفت انتباه المشاهدينالإكثار من التناظر يسبب الملل حيث ستبدو وكأنها عُرضت مرات لا حصر لها. لجعل تصميم الموقع أكثر إثارةً للاهتمام أضف بعض العناصر المتباينة هنا وهناك وذلك لجذب الانتباه والتخلص من الرتابة في التصميم. التباين أثقل بصرياً، لهذا يوجّه عيون المشاهدين إلى المنطقة المنشودة. مع التباين، يجب أن يتم التركيز على التوازن التركيبي دائمانعم، التباين مثير للاهتمام ولكنه يبدو ناقصاً وغير مصقول كما يجب، بما أن العناصر المختلفة لها أوزان مختلفة، فيجب الحذر عند ترتيب العناصر حتى تبقى متوازنة من جميع الجوانب، هذا سيمكّنك من التحكم بسير العمل على التصميم وسيجعله يبدو جميلاً، مثيراً للاهتمام ومصقول. اتبع غريزتك في التصميمإننا نملك عيوناً تمكننا من رؤية ما هو جميل وما هو عكس ذلك، لقد تدربنا على ما يبدو لنلاحظ التوازن البصري من عدمه. فإذا كنا نرى التصميم يبدو مشوشاً، مربكاً أو حتى مملاً، لربما هو كذلك فعلاً. اللجوء الى الأساسياتلا تبالغ في تصميم الموقع ككل، كن فناناً، لكن تذكّر أن غالبية المشاهدين ليسوا كذلك. لا تبالغ في التفكير أو زيادة العناصر في التصميم، فقط انظر إلى التصميم كشخص عادي، تجنب الخلط والتشابك في التصميم لتجعل المعلومات تتدفق بسهولة وسلاسة إلى المشاهدين. ترجمة -وبتصرّف- للمقال: Web Design Symmetry and Asymmetry. حقوق الصورة البارزة: Designed by Freepik.