فهم كامل التباين في التصميم
عادة ما يتم حجز موضوع التباين للمبتدئين. سوف تقول الكتب "الأسود والأبيض لهما تباين ، أحمر وبرتقالي لا" - ولكن هناك الكثير منها.
عادة ما تلمس كتب المبتدئين فقط على تباين الألوان ، ولكن ماذا عن حجم وشكل التباين؟ غالبًا ما تكون أسهل طريقة لإخبار مصمم للهواة من أحد المصممين المحترفين هي النظر في استخدامهم للتباين.
إن إنشاء بنية ذات أهمية باستخدام الحجم والشكل واللون هو ما يعطي تأثيرًا للقارئ ووضوحًا بالنسبة إليه.
في هذه المشاركة ، سنلقي نظرة على التفاصيل بالتفصيل ، ونفحص الطباعة الكبيرة ، والأشكال غير التقليدية ، والفواصل الواضحة ، والصور ، وكيفية ملاءمتها معًا بشكل صحيح باستخدام التباين للحصول على تجربة مستخدم جيدة.
مقدمة إلى التباين
التباين يمكن أن يكون يعرف مثل "الفرق في الخواص البصرية التي تجعل الجسم (أو تمثيله في صورة) مميزًا عن الكائنات الأخرى والخلفية". بلغة بسيطة يمكن وصفها في أبسط مستوياتها بأنها "أشياء تبدو مختلفة عن بعضها البعض. "
بالنسبة للمصممين في جميع مناحي الممارسة ، ولكن بشكل خاص مصممي الويب ، فإن التباين هو أصل كل شيء تقريبًا. نحن نحاول باستمرار إنشاء تسلسل هرمي ذو أهمية ، وجذب الناس إلى مناطق معينة من الصفحة ، ونبلغ رسالة واضحة وموجزة في قلب عملنا. إن إنشاء العلاقات بين العناصر المختلفة للتصميم هو فقط أهم شيء يمكنك القيام به. ربما كنت تفعل الكثير بالفعل ، بوعي أو لا.
ومن الأمثلة الواضحة على التباين الأسود والأبيض ، كبيرها وصغيرها ، وبسرعة وبطيئة ، وسميكة ورقيقة. الأضداد هي أسهل طريقة لفهم ما هو التباين ، ولكن عند تطبيق التباين على أعمال التصميم ، فإنه ليس بالأبيض والأسود. إذا كنت تتساءل ، هذا هو المكان الذي يأتي منه القول عن الوضع "أسود وأبيض" ، مما يؤدي أيضًا إلى قول شيء ما بأنه "منطقة رمادية". فنحن في غالب الأحيان نقوم بمقارنة أشياء مختلفة ولكنها غير معاكسة ، على سبيل المثال H1 و h1 ، أو زر "إضافة إلى عربة التسوق" وزر "السحب". هذا هو المكان الذي تلعب فيه مستويات أكبر من التباين.
دعونا نلقي نظرة على أنواع التباين المختلفة وبعض الأمثلة عن كيفية استخدامها في تصميم الويب.
لون التباين
المثال الأكثر شيوعًا على الإطلاق ، هذا إلى حد كبير حيث يبدأ كل شيء. إذا كان هناك لونان مختلفان لبعضهما البعض (مثلاً ، بالأسود والأبيض) فلديهما تباين عالٍ ، في حين أنهما متشابهان جداً (أحمر وبرتقالي) ، فلديهما تباين منخفض.
تستخدم TekRoc تباينًا واضحًا في الألوان هنا من خلال تراكب صورة مشرقة ونابضة بالحياة فوق خلفية داكنة جدًا. يظهر اللون البرتقالي والأزرق اللامع بشكل واضح ويتم رسم العين على الفور فوق كل الأشياء الأخرى على الصفحة.
يستخدم تيم فان دام ميزة تباين الألوان في تصميم موقع GoWalla. لا يبرز الحد المتعدد الألوان في أعلى الصفحة فقط ، بل ينشئ اهتمامًا مرئيًا من خلال اختلافه عن الخلفية الباهتة ، ولكنه أضاف أيضًا ظلالًا باهتة للغاية بمقدار 1 بكسل إلى النص على الأزرار. يساعد البرتقالي الداكن قليلاً على خلق تباين بين النص الأبيض والخلفية البرتقالية.
إن Envato هم أساتذة التباين اللطيف ويمكن استخدام اتجاه استخدام حدود 1px لهذا الأمر أكثر من أي شخص آخر. تتميز جميع مواقعها بعدة حدود بكسل مفردة لإنشاء تباين بين الأقسام. في لقطة الشاشة أعلاه ، يمكن تقسيم منطقتين للمحتوى من خلال مساحة فقط ، أو سطر واحد ، ولكن باستخدام خطين (واحد داكن ، ضوء واحد) ، يتم إنشاء تباين دقيق بين القسمين وهو فعال للغاية.
حجم التباين
ثاني أكثر أشكال التباين شيوعا هو استخدام الحجم. يشير شيء كبير بجانب شيء صغير بشكل عام إلى أن العنصر الأكبر أكثر أهمية بكثير. هذا صحيح ، نحن نقول أن الحجم مهم!
MadeByWater هو تصميم محفظة الأردن فيتانوف. فهو يستخدم حجم التباين مع الطباعة الكبيرة للغاية لنقل اقتباس على الفور من قبل بروس لي الذي يحدد لماذا اختار أن يميز نفسه مع اسم MadeByWater.
28Thiers هو بار فاخر جذاب في فرنسا. يستخدم موقع الويب الخاص بهم استخدامًا رائعًا لمقياس التباين لجذب انتباهك على الفور إلى الصورة الكبيرة لمارتيني مع المكونات المتنوعة المحيطة بها. من الواضح على الفور أن هذا هو العنصر الأكثر أهمية في الصفحة ويريد المصمم منك أن تنظر إلى تلك الصورة وتباع على أساس أنها منشأة راقية للغاية.
SlideScreen جعل استخدامات متعددة من تباين الحجم في موقعهم. بالإضافة إلى عرض منتجهم باستخدام لقطة شاشة كبيرة ، يستخدمون أيضًا أزرارًا كبيرة جدًا لحثهم على اتخاذ إجراء أساسي. يريدون منكم مشاهدة الفيديو الخاص بمنتجهم أثناء العمل ، ثم يريدون تنزيله. هذه هي أهم عناصر الصفحة بحيث تكون أكبر بكثير من الأشياء الأخرى المحيطة بها.
شكل التباين
شكل التباين يعني جعل الأشياء بارزة في اختلافها في الشكل المادي مقارنة بالأشياء الأخرى على الصفحة. في أبسط مستوياتها الأساسية ، يمكن استخدام هذا في أشياء مثل إضافة زوايا مستديرة إلى أزرار ، ولكن عند الوصول إلى مستويات أكثر تطرفًا ، يمكن أن يجذب الكثير من الاهتمام.
يستخدم Anebstar تباين الشكل لعرض ثلاث صور مهمة في العنوان. نظرًا لأن معظم الأشياء على الويب مستطيلة ، فإن إحدى أسهل الطرق لتحقيق تباين الشكل هي استخدام دائرة. وبالطبع ، يكون لهذا المثال أيضًا تباينًا قليلًا في الحجم ممزوجًا أيضًا ، ولكن يمكنك أن ترى بوضوح كيف تبرز العناصر الدائرية من كل شيء آخر على الصفحة.
Carbonmade هو موقع مذهل مع مزيج حقيقي من الرسوم التوضيحية الرائعة والمحتوى الجيد. كان من المفترض أن يعمل زر تسجيل بسيط هنا ، ولكن ربما لم يكن حجمه أو لونه متباينًا بشكل كافٍ من الخلفية المزدحمة. إن إضافة الأخطبوط الودي خلف الزر يعطي ذلك الفرق في الشكل لرسم العين مباشرة عليه.
تستخدم WireframePlus بتة بسيطة ولكنها فعالة للغاية من حيث الشكل لتوضيح سعر خدماتها. إنهم يريدون منك أن تقرأ محتواهم ولكنهم قبل كل شيء يحاولون بيعك بسعر رائع من خلال وضع دائرة كبيرة خلفه.
التباين الموضعي
إن خلق التباين في تحديد المواقع هو طريقة أنيقة للغاية لإنشاء تسلسل هرمي للعناصر فقط باستخدام محاذاة مختلفة. في الآونة الأخيرة ، أصبحت هذه التقنية شعبية من قبل أشخاص مثل Elliot Jay Stocks ، الذين استخدموها إلى أقصى حد في أحدث موقع محفظة له.
يستخدم Elliot Jay Stocks شبكة مفصلة لتحديد محاذاة جميع العناصر على موقعه. يتم استدعاء الانتباه إلى مناطق محددة من خلال جعلهم مسافرين إلى اليسار أو اليمين على التوالي. في هذه الصورة الخاصة ، تبرز الفقرة التمهيدية لأنها محاذاة إلى أقصى اليسار ، حيث تبدو العين أولاً لقراءة شيء ما. هذا النوع من المحاذاة "ألهم" العديد من المصممين الآخرين في الأشهر الاثني عشر الماضية لإنشاء تصميمات ذات تباين موضعي في نفس النمط من النمط.
SimpleBits هي العلامة التجارية التي تعمل تحت Dan Cederholm ، قد تعرفه من مشاريع مثل Dribbble . في الانطباعات الأولى ، لا يبدو أن موقع SimpleBits يحتوي على أي تباين موضعي ، ولكن عند بدء التمرير ، يصبح كل شيء واضحًا. عندما يستخدم بعض الأشخاص صورة خلفية ثابتة لإنشاء تأثير أسلوبى أنيق ، جعل Dan شعاره والملاحة ثابتًا تمامًا في موضعه ، وبغض النظر عن المكان الذي تنتقل إليه ، تظل دائمًا في نفس المكان على الشاشة. هذا مثال رائع على التباين الموضعي غير القياسي.
SquaredEye هو متجر التصميم الذي يديره ماثيو سميث وصفحات دراسة الحالة في محفظته تستفيد بشكل رائع من التباين الموضعي. يجب أن ترى الصفحة بأكملها للحصول على الفكرة ، لكن ماثيو قد أنشأ بدقة موضعًا محددًا لكل جزء من الصفحة. وهذا يخلق تباينًا رائعًا بين الأقسام ويخلق قدرًا كبيرًا من الاهتمام البصري للقارئ دون تشتيت الانتباه.
خلاصة التباين
هناك الكثير للتناقض أكثر من مجرد "الضوء والظلام" - إنه أحد أهم المبادئ في التصميم ، ولا يمكنك أبداً تقريبًا أبداً من ذلك ، بشرط أن تستخدمه بشكل صحيح.
إن أخذ التصميمات الخاصة بك إلى المستوى التالي ليس حول العثور على عربة النطاق التالية للقفز باستخدام الزوايا الدائرية والظلال المسقطة لكل شيء ، بل عن إيجاد طرق أفضل وأكثر فاعلية لإيصال الرسالة وراء التصميم.
يعد استكشاف التباين بالتفصيل واستخدامه لإمكانياته الكاملة أحد أفضل الطرق للقيام بذلك.
ما رأيك؟ ما مقدار الاهتمام الذي تدفعه مقابل التباين في التصميمات الخاصة بك؟ هل هو شيء تفكر به طوال الوقت أم أنه شيء يأتي بشكل طبيعي؟