التوازن غير المتماثل في تصميم الويب
عندما غطت لأول مرة فكرة أنماط تصميم متناظرة هنا على مستودع Webdesigner لم يكن لدي أي نية للحفر في مفهوم التصميم غير المتماثل.
ومع ذلك ، كلما فكرت أكثر في ذلك ، كلما شعرت بأنني مضطر إلى تغطية الموضوع لمقارنة بعض الأفكار التي تدور حول أنماط تصميم متناسقة.
في تصميم غير متماثل نجد تصاميم تحتوي على عناصر لا تخلق صورة طبق الأصل. في أغلب الأحيان ، تكون هذه التصاميم غير المتوازنة متوازنة في الواقع ، ولكن ليس فقط من خلال نصفي متماثل تمامًا.
هذا النوع من التصميم في الواقع أسهل بكثير ، مع الأخذ في الاعتبار أن معظم المحتوى لا يميل إلى التماثل المثالي.
لنفكر في مجموعة متنوعة من المواقع التي تعمل على تصميم نهج التصميم هذا وربما تكتشف بعض الأفكار التي يمكن أن تؤثر على أعمال التصميم الخاصة بك.
مقدمة لاستخدام عدم التماثل
الفتوة الترفيه
كمقدمة لمفهوم التصميم غير المتماثل يوفر هذا التصميم الدرامي نقطة انطلاق لطيفة. في حين أنه لا يوجد سبب حقيقي لهذا التصميم لا يمكن إعادة تشكيله لإنتاج تناسق مثالي ، إلا أنه لن يعمل تقريبًا أيضًا. تعمل التصاميم الكبيرة الغنية بالتصوير على تعويض نص الصفحة الرئيسية بشكل جميل. حجمها يضمن أنها مرئية للغاية وهي القوة الدافعة البصرية الرئيسية للتصميم. هذا التوازن الطبيعي بين عنصر واحد كبير وبديل أكثر كثافة هو نهج شائع جدا.
خورخي ريجابرت
يقدم هذا التخطيط تخطيط ويب قياسيًا إلى حد ما. عمود جانبي صغير يحتوي على مفتاح التنقل ، مقترنًا بعمود أكبر بكثير لمحتوى المواقع. ربما هذا واحد من حفنة من التخطيطات القياسية التي يتم استخدامها يوميا من قبل المصممين. أعتقد أن الكثير من عملية التصميم في هذه الحالة يحدث بشكل شبه تلقائي. النظر في الشريط الجانبي في هذه الحالة التي توازنت غير متناسقة في عمود المحتوى. يمتلك الشريط الجانبي لونًا داكنًا ، مما يساعده على تعويض قناة المحتوى الأخف. من دون الخلفية الداكنة ، من المحتمل أن يضيع الشريط الجانبي ولن يبرز بشكل جيد.
صور لموازنة النص
ومن المقاربات القياسية الأخرى لتصميم الويب التي ينتهي بها الأمر كونها عنصر تصميم غير متماثل هو اقتران النص مع الصور. كما سترى في العينات أدناه ، كل منها لديه صورة كبيرة. يتم إقران هذه الصورة بطريقة ما مع وجود كتلة نصية. هذا المزيج شائع للغاية.
الخدعة واضحة إلى حد ما ، فقط تأكد من أن الاثنين يكملان بعضهما البعض بطريقة ما. وبالنظر إلى أن هذين العنصرين سيخلقان عادة حلقة للعيون ، فمن المهم أن يعملا معا بطريقة ما. يتمثل المنهج الأكثر وضوحًا في جعل الصورة توضح حرفيًا أو تعرض النص الذي يتحدث عنه. أسلوب آخر شائع هو أن تمدد الصورة الفكرة المقدمة في النص.
وهنا بعض العينات للنظر فيها.
كعكة الكعك الحلو
من المؤكد أن هذا التصميم متوازن بشكل جيد ، ولكنه يستخدم عدة عناصر غير متناظرة لتحقيق ذلك. لاحظ الصورة الكبيرة لكعكة مقترنة بالنص. الصور واضحة إلى حد ما ، ولكنها مهمة بشكل أساسي. في هذه الحالة ، لا تخبرنا الكعكة فقط أن هذا متجر للكعك ، ولكن ما هو النمط المعين الذي يمكن أن تقدمه. ادمج هذا مع النص التوضيحي المرتبط به ولديك رمية مبيعات واضحة. هذا ليس كل شيء حتى لذكر التصميم اللذيذ هذا الموقع ملفوف.
المزيد من الصودا
يستخدم هذا المثال أيضًا عناصر التصميم غير المتماثلة استنادًا إلى صورة كبيرة مقترنة بنص من النص. في هذه الحالة ، لا يكون الاتصال واضحًا تقريبًا. لا يوجد عنصر مبيعات واضح المعنية. بدلاً من ذلك ، تصبح الصورة أكثر تزيّنًا وينشئ إحساسًا عامًا بالأناقة في الموقع. في رأيي ، هو أقل وظيفية بشكل طفيف ، ولكن من الصعب حقا أن نقول دون معرفة بالضبط مدى فعالية الموقع. قد يبدو أن هذا المرئي لديه هدف واحد وهو إغراءك بالحفر أكثر قليلاً لمعرفة ما يدور حوله. نوع من دعابة ، إذا صح التعبير.
تصميم الويب التكيفي
وكما قد تكون قد فهمت بالفعل ، فإن هذا النمط شائع مثل اللون الأزرق. كنت أجرؤ على التكهن بأن كل موقع تقريبا ينتهي بوضع مثل هذه الأداة البصرية للعمل في مرحلة ما. أعتقد أن طبيعة المكان الشائع تجعله موضوعًا يستحق المناقشة. في كثير من الأحيان أجد أكثر الإلهام والأفكار الجديدة من إعادة النظر في الأمور التي أقوم بها مرارا وتكرارا دون تفكير.
هذا الموقع البسيط يروج لكتاب. وبالطبع فإن العنصر الرئيسي الذي تهبط عليه هو صورة كبيرة للكتاب. قم بدمج هذا مع كتلة النص الكبيرة ولديك مساحة متوازنة تحتوي على كافة العناصر الهامة. الأهم من ذلك ، يتم الانتهاء من مع دعوة لفتت الانظار الى العمل. استمرارية هذه المنطقة بسيطة ومباشرة. تتدفق العيون بسهولة من خلالها وتستهلك المعلومات الهامة. انها ليست مربكة ، أو معقدة ، أو ذكية أو صعبة. النهج بسيط وواضح.
عناصر مقدمة وخلفية
يتمثل أحد الأساليب الجديدة للتصميم غير المتماثل في استخدام عناصر الخلفية التي توازن بشكل غير متماثل مع المقدمة. ينشئ هذا النوع من النهج ديناميكية مثيرة للاهتمام حيث تخدم الخلفية المزيد من الدور الوظيفي كجزء من المحتوى ، ومع ذلك ، لا يزال جزءًا من خلفية الموقع. غالباً ما يتم ذلك من خلال تداخل بسيط يخلق الوهم العميق. وهنا بعض العينات للنظر فيها.
بيتر ماكليفي غاليري
تمثل مواقع الويب الخاصة بهذا المعرض عرضًا مثاليًا لهذه الفكرة. هنا عنصر الخلفية يخدم العديد من الأدوار. أولاً ، إلى نقطة هذا المقطع ، يخلق توازنًا غير متماثل مع الدائرة الرمادية الكبيرة في المقدمة. هذا المزيج البصري يخلق مجالين يتسببان في ارتداد العينين ذهابًا وإيابًا. هذا ، في رأيي ، أمر جيد.
يحتوي العنصر الموجود على اليسار على العلامة التجارية الرئيسية والروابط إلى محتوى الموقع ، بينما يعلمك عنصر الخلفية بسياق الموقع. أنت تبحث في موقع معرض ، ويصبح هذا واضحًا تمامًا خلال بضع ثوانٍ من الهبوط على الموقع. أنا أحب أن مثل هذا العنصر الإعلامي كما يمكن للخلفية تلعب أيضا دورا رئيسيا في التصميم والأسلوب العام للموقع. خاصة عندما تكون صدىً تامًا للغاية مع سياق المنتج الذي يقدمه الموقع. هذا نهج بسيط ، ولكن فعالة جدا.
الكسندر غريبنيتش
هذا بسيط عني الصفحة أيضًا تحتضن هذه الفكرة البسيطة حيث يقوم عنصر الخلفية بتوازن أحد الأعمدة الأمامية بطريقة غير متماثلة. في هذه الحالة ، الخلفية ليست واضحة تمامًا. وهذا ما أحبه حقًا بشأنه. إن وهم العمق موجود تمامًا ، وبدون أي نوع من التداخل ، يصعب في الواقع تحديد ما هي الخلفية في الواقع. أفترض أننا يمكن أن نقول أن الشخص الذي يقفز ليس في الخلفية على الإطلاق. بغض النظر ، التوازن غير المتماثل واضح. وبدون الجمع الجميل بين عناصر مختلفة ، لن تكون الصفحة موجودة. يعتمد التصميم ، من نواحٍ عديدة ، على مفهوم التوازن غير المتماثل. في كثير من الأحيان يبدو أن التصاميم البسيطة للغاية يمكن أن تبدو غير عادية مع تباينات جميلة مثل هذا.
روبرت دابي
في هذه الحالة ، تلعب الخلفية دورًا مهمًا في التصميم ، ولكنها لا تنتج العناصر غير المتماثلة التي رأيناها حتى الآن. في رأيي ، البصري الكبير هو بوضوح عنصر المقدمة في التصميم. ما أحبه رغم ذلك ، هو كيفية طمس هذا الخط بمهارة مع شيء بسيط مثل الظل أسفل الصورة. هذا يدمجها بشكل فعال مع الخلفية ويخلق ديناميكية جميلة. من الواضح أن الصورة الكبيرة متوازنة بشكل غير متماثل مع النسخة المجاورة لها. قم بالمرور عبر صفحات الموقع وسوف تجد بسرور أن الخلفية تتغير وتدمج مع الصور بطرق مثيرة للاهتمام. تصميم مذهل يشعر بالانتعاش والنظافة والسلاسة. يبدو وكأنه عرض رقيق جيد لموقع محفظة بالنسبة لي.
عشرة تصاميم أخرى
أدناه لقد قدمت عشرة تصاميم إضافية تستخدم عناصر غير متماثلة. كما ذكرت بالفعل ، يمكنني وضع الكثير من مواقع الويب في هذه الفئة. لذلك ، ولأغراض هذه المقالة ، اخترت بعناية التصاميم التي أشعر أنها تستفيد من النهج بطرق غير نمطية وإبداعية. النظر في كل تصميم في ضوء هذا الموضوع ، وآمل أن تكسب بعض الأفكار الجديدة لإلهام التصميم الخاص بك المقبل.
Greenluv
اندرسون الحكمة
توقعات
13 زوجات
معهد رافلز
الحضري سفينسون
دائري
Purlize
الحافلات في بيرة
Humaan
استنتاج
التوازن هو جزء أساسي من عملية التصميم ، واستخدام العناصر غير المتماثلة هو أمر أساسي على حد سواء. أنا دائما أحب الحفر مرة أخرى في أساسيات التصميم كما أجد أنني أفهم ذلك دائما بطريقة جديدة لها تأثير على العمل الذي أقوم به. هناك طرق لا حصر لها للتعامل مع الأشياء وكسر أنماطنا يمكن أن يؤدي في كثير من الأحيان إلى تصاميم جديدة وجديدة تجدد شبابنا لشغفنا بوظائفنا.
ما هي تصميمات مواقع الويب غير المتناسقة المفضلة لديك؟ من يفعل شيئًا مختلفًا بعدم التناظر؟ اسمحوا لنا أن نعرف في التعليقات!