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

التباين ليس فقط مع الألوان. فيمكن أن يكون التمييز بسبب أي عدد من العناصر الرسومية (graphical).

التباين (contrast) ليس فقط مع الألوان. يمكن أن يكون التمييز بسبب الشكل، الحجم، النمط أو أي عدد من العناصر الرسومية الأخري. حتي الحروف في خطوط الطباعة يمكنها أن تنشئ تباين سيلاحظه زوارك. يمكنك أيضا استخدام التباين بطريقة عكسية، لإخفاء شيئ أو لجعله غير ملحوظ. التباين هو واحد من أساسيات التصميم الأولية. فالعودة إلي الأساسيات مفيد دائما عندما نريد إنجاز عمل. واليك 3 أمثلة لتوضيح كيف يمكنك استخدام التباين في تصميماتك… [divider] [/divider]

 1. Invision

[caption id="attachment_6298" align="alignnone" width="535"] الأزرار الوردية الفاتحة تجعل أزرار التسجيل بارزة في الصفحة الرئيسية لموقع Invision .[/caption] موقع Invision يستخدم لون وري فاتح لجعل زر الاشتراك يبرز ويكون متميز في الصفحة الرئيسية. [divider] [/divider]

2. Harvest

[caption id="attachment_6299" align="alignnone" width="535"] موقع Harvest يستخدم التباين لإنشاء اختلاف بين المنتجات وجعلها تبرز[/caption] صفحة الأسعار في Harvest تستخدم التباين لجعل المنتجات المختلفة تبرز. أيضا، هل يمكنك إكتشاف الخطة المجانية؟ تم استخدام التباين للتأكد من أنها شبه مخفية. [divider] [/divider]

3. Hacker News

[caption id="attachment_6300" align="alignnone" width="535"] موقع Hacker news يمتلئ بمحتوي كثير رائع، ولكن بسبب سوء استخدام التباين يجعل من الصعب فحصه (scanning) ورؤيته.[/caption] موقع Hacker News لا يحسن استخدام التباين ولا يوظفه جيدا. ومن الصعب فحص العناوين الرئيسية، علي الرغم من أنها متواجدة في الصفحة.   المصدر]]>