مقدمة شاملة للتصميم المرئي

سيغطي هذا الدليل الشامل أساسيات مبادئ التصميم المرئي ، مع توضيح الكثير من الرسوم التوضيحية لتعميق فهمك. سواء كنت خبيرًا احترافيًا أو جديدًا في عالم تصميم الويب ، سيساعدك تعلم أسس متينة في الأساسيات على تحسين جودة أعمال التصميم بشكل كبير.

هذه المقالة الشاملة للغاية ستعمل بمثابة 'مبدأ التصميم المرئي' ، مع كل ما تحتاجه للبدء.

المواضيع

سنغطي الكثير في هذا الدليل ، بما في ذلك المبادئ التالية:

• الوحدة
  
• انتقام
• استمرار
• تشديد
• الشكل علاقة الأرض
• التسلسل الهرمي
• التناسق
• تشابه
• مساحة بيضاء
• توازن
• قرب
• إغلاق

ما هو التصميم المرئي؟

يمكن أن يساعدك التصميم المرئي على نقل رسالة مخصصة للجمهور. التصميم هو التواصل من خلال التصميم المرئي تتواصل مع المشاهد. تتضمن 'كلماتك' أو ذخيرتك الأشكال ، والنص ، والرموز ، والصور ، والمساحة البيضاء ، والقوام ، والألوان ، وحتى الحركة (الرسوم المتحركة أو الحركة الضمنية). هدفك هو أن تكون مرشدًا يأخذ المستخدم من خلال تصميم ، ويقودهم إلى المكان الذي تريدهم أن يذهبوا إليه (وهو أيضًا المكان الأفضل لهم!). ستأخذ واجهة المستخدم الجيدة (واجهة المستخدم) هذا الاهتمام على محمل الجد وتقدم الحلول المناسبة.

أدناه ستجد سبعة مبادئ التصميم ويد الكامل للمبادئ الجشطالت مفيدة يجب أن تكون على علم. ينبغي أن تؤخذ على أنها مبادئ توجيهية ، وليس على النحو المنصوص عليه في الحجر ، وتساعدك على اتخاذ القرارات التي تؤدي إلى مزيد من التماسك والجودة.

العلاقات

أحد المواضيع المشتركة سيقودنا إلى جميع المبادئ التي نتحدث عنها اليوم: العلاقات. يأتي التصميم المرئي الجيد من النجاح في إنشاء علاقات مميزة في عملك. ومع ذلك ، ضع في اعتبارك أن المحتوى التالي سهل التعلم والفهم نسبياً ، ولكنه يتطلب تكرارًا وضع القطع معًا وتحقيق النتائج التي تخلق هذه العلاقات بنجاح.

شكل

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

ومع ذلك ، فلنبدأ بمبدأ Gestalt الأول!

وحدة

التصاميم تعمل بشكل أفضل ككل متماسك ، تهدف إلى تحقيق الوحدة عندما يتم تجميع جميع العناصر. حاول بناء هياكل موحدة. القرب والمواءمة والاستمرار والتكرار يمكن أن يساعد في تحقيق الوحدة المتصورة بين العناصر. يساعدك هذا أيضًا على فصل أجزاء من اللغز دون استخدام حدود إضافية أو عناصر تصميم أخرى. كمشاهدين ، نحن ندرك الهيكل العام أولاً عندما ننظر إلى أشياء جديدة.

دروببوإكس يفعل الكثير من الأمور الصحيحة ، والاستفادة الجيدة من كل مبدأ التصميم في الكتاب. تعد صفحة 'حول' مثالًا جيدًا للوحدة. لاحظ كيف تتحقق الوحدة البصرية بكل سهولة مع عناصر قليلة فقط على الصفحة. حتى أنهم قد يفقدوا الحدود وسيظلون يعملون.

يجب بناء الوحدة بشكل ثاب —لا يحدث في لحظة. فكر في الأمر على أنه مزيج من الوحدة الكلية والجزئية. تحتاج العناصر الصغيرة أيضًا إلى نقل التماسك عند إنشاء انطباع عام موحد.

GitHub أيضا يقوم بعمل عظيم في تأسيس الوحدة. جميع الاعتبارات البسيطة في صفحة غنية بالمحتوى مثل هذه تضيف إلى كل واحد متناسق حيث تتلاءم كل القطع معًا وحيث لا يحدث شيء سلبًا.

تجعل الوحدة والتماسك المشاهدين أكثر راحة. إن تأسيس الثقة وفهم كيفية متابعة المستخدمين للمحتوى هو منتج ثانوي مجاني. إذا لم يكن هناك شيء يقف في الطريق الذي قد يعيق انتباه المستخدمين ، فستكون تجربة المستخدم أكثر احتكاكًا.

التوضيح أعلاه مثال آخر على الاستخدام الممتاز لمبادئ الوحدة. الكتلة التي تعرض قائمة عمليات الدمج لا تحتاج إلى شيء آخر لإقامة الوحدة.

انتقام

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

تظهر لقطة الشاشة هذه من مركز مساعدة Dropbox الاستخدام الممتع لشبكة واضحة لمحاذاة العناصر بشكل صحيح.

يشمل موقع themanyfacesof.com موقعًا رائعًا كبيرًا يحمل عنوان بيرت رينولدز والذي يحتوي على العديد من الأمثلة على التوافق الجيد في العمل. تكون المحاذاة دقيقة للغاية ويتم تحقيقها في الغالب من خلال الطباعة الصوتية والشبكات الواضحة — وكسر المحاذاة بمهارة من حين لآخر.

قائمة دروببوإكس قائمة مثال آخر يستحق الدراسة. عمل تصميم بسيط وبسيط وفعال لهيكلة المحتوى باستخدام المحاذاة لأقصى تأثير.

استمرار

المحاذاة البصرية تعمل جنبا إلى جنب مع مبدأ الجشطالت للاستمرار. سننظر أكثر في كيفية استخدام هذا في عملك عندما نغطي الشبكات في هذه السلسلة. إن الكائنات التي تتبع اتجاهًا مشتركًا ، على سبيل المثال من خلال محاذاة بعضها البعض ، تخلق الانطباع بأنها أكثر ارتباطًا ببعضها بعضاً من العناصر المفقودة في هذا الدليل. يؤدي اتباع هذه السطور المنظمة للمحتوى إلى إنشاء أمر وتدفق في تخطيط.

LOL Colors هو مثال رائع على المحاذاة والاستمرار. حتى بدون استخدام حدود فصل ، يمكنك رؤية شبكة في العمل بوضوح ، ويشير شكل قطرات اللون إلى استمرار للاتجاه أسفل الصفحة.

على المستوى الكلي ، يجب أن تعمل على محاذاة الأشياء التي ترتبط ببعضها البعض ووضعها على طول حافة مشتركة. بهذه الطريقة ، تتدفق العناصر بسهولة أكبر في التركيبة العامة وتسمح للمستخدمين بالتنقل دون عناء. يمكن أن يساعد هذا الاتصال المرئي في تشكيل وحدة شاملة بين العناصر الصغيرة والكبيرة. الأمر أشبه بهامش غير مرئي يحتوي على الأجزاء الرئيسية في تصميمك معًا ويمنح العين سببًا قليلًا للتوقف عن الفواق البصري.

يمكن محاذاة الكائنات على طول الحافة ، ولكن بالتساوي على طول المحور المركزي الذي غالباً ما يكون أقل تحديدًا واضحًا. من المؤكد أن محاذاة المحتوى عبر الحواف هي الخبز والزبدة عندما تصمم للويب. يمكن استخدام المحاذاة المركزية للتأكيد على عناصر معينة أو عبارات تحث المستخدم على اتخاذ إجراء.

تشديد

التركيز هو كل شيء عن نقاط الاتصال. كلما قل عددهم ، كلما كان تركيزهم أقوى. المفتاح هنا هو عدم جعل كل شيء يبدو مهمًا - إذا تم التأكيد على كل شيء ، فلا شيء يختفي ، وكل ما ينتهي به الأمر هو الضوضاء. أنا متأكد من أنك شاهدت بعض المواقع التي تتجاهل هذا المبدأ وأطنان الجص من الأزرار الملونة غير التقليدية في كل مكان. يترك طعمًا سيئًا ، أليس كذلك؟ هذا ما يمكن أن يتركه عدم التركيز في الخلف. الأهم من ذلك ، إساءة استخدام التركيز يخلط التسلسل الهرمي.

إن أدواتك المفضلة هي المشتبه بهم المعتادون ، لكن الحجم واللون قد يكونان الأكثر فاعلية في خلق التركيز.

يجعل Dropbox مهمة رائعة في تسليط الضوء على الإجراء الذي يفترض أن يقوم المستخدم باستخدام التركيز عليه. بصريا ، لا يوجد شيء يقف في الطريق الذي يمنع المستخدم من التركيز على التسجيل. ينصب التركيز الأقوى على الأزرار الزرقاء التي تبرز بوضوح من بقية أزرار العرض. يحتوي هذا التصميم على توازن مرئي جيد— وسيكون أفضل حتى إذا كان سيستخدم زرًا أزرقًا واحدًا فقط.

يجب أن يكون واحد أو اثنين من العناصر التي تم التركيز عليها في إطار عرض معين كافٍ لتوجيه انتباه المستخدم إلى أهم العناصر في الصفحة. قد يكون تحديد العناصر الأكثر صعوبة مما يبدو. اسأل نفسك ، ما هو ضروري للغاية لجذب انتباه المستخدم أولاً. اختر بحكمة!

التركيز على المنتج ممتاز في هذا التصميم. لا الوصف ولا التركيز الخلفية من لوحة المفاتيح Orée خشبية بأي شكل من الأشكال. جميلة! التماثل يعمل بشكل جيد هنا.

ليس هناك الكثير ليقوله عن كيفية تقديم HTC لـ VIVE. التركيز في أفضل حالاتها. تصميم جيد مثل هذا يبيع بالتأكيد.

يحتوي In Craft من Invision على صفحة مقصودة مذهلة حيث يتم التركيز بشكل رائع على حقل الإدخال لعناوين البريد الإلكتروني. من الصعب أن تضيع في هذه الصفحة. اسم المنتج يبرز بشكل فعال كذلك. التمييز بين الخلفية والأمامية خاصة المهرة ومرحة.

الشكل علاقة الأرض

هذا المبدأ قوي للغاية ، لذا يجب أن تتقنه في أقرب وقت ممكن. بالعمل على التصميمات الخاصة بك ، يجب أن تسأل نفسك في كثير من الأحيان السؤال البسيط: ما العناصر الموجودة في الخلفية ، والموجودة في المقدمة؟

في هذا المثال، يمكنك أن ترى أن المحتوى والزر اتخاذ إجراء بوضوح التمسك بها من الخلفية. تمييز واضح مهم جداً للعب مع التركيز الخاص بالمستخدم. هنا الخطوط الباهتة ومرحة قليلاً، ولكن لا تزال تقدم فرقا واضحا جداً الشكل-أرض.

عندما كان أسلافنا المبكر مشغول للصيد وجمع، كثيرا ما كان ذات أهمية حيوية لتبين ما قد يكون تهديدا مباشرا أو ميزة الحق أمامهم. التمييز بين الأشياء بسرعة من كل ما هو مجرد ضجيج "الخلفية" ويبدو أن لا يزال جزء من الأسلاك لدينا "البقاء". أعتقد نمر خلف بوش في الغابة بدلاً من المطر في الأفق. عصبيا، هذه الاستراتيجية البصرية البقاء على قيد الحياة قد ترك بصمة عميقة أنه من غير المحتمل أننا سنقوم بتغيير هذه الآلية البسيطة للتصور. قد يبدو هذا مضحك ومعظمها قديمة لأهل الرقمية، ولكن معرفة هذا يجعل من الأبسط أن تقرر كيفية إبراز معلومات هامة للمستخدمين وكيفية "إخفاء" تفاصيل أقل أهمية في الخلفية.

هنا لدينا صورة خلفية بارزة جداً الذي يمتص قدرا كبيرا من الاهتمام-أنها مفيدة في أن ينقل المشاعر في شكل الاتصال الشخصي. ومع ذلك، ذكاء يتم وضع الزر اتخاذ إجراءات ولونه لأنه يجلب إلى الصدارة.

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

هذا المثال يعمل بشكل جيد، والمنظور لوازم التمييز بين الأمامية والخلفية. شخصيا أنا كنا نود أن نرى الزر الأحمر توضع في نهاية الجدول — حيث تعادل العين بطبيعة الحال إلى نتيجة للخطوط.

هذا المثال من 360 العتاد سامسونج الجديد جيدة كما يحصل عليه؛ الخلفية والأمامية العمل معا جيد للغاية. هناك تمييز واضح والخلفية الكاميرا في المقدمة يبرز أناقة. ذكي جداً ومرحة.

وفيما يلي بضعة أمثلة أكثر من التركيز الجيد وعلاقات شخصية-أرض على الطريق:

التسلسل الهرمي

التسلسل الهرمي كل شيء عن تعيين الأهمية البصرية؛ هناك نوع من ابن عمه بالتأكيد فيما يتعلق بالحد من فوضى بصرية. ودليل ماكرو لما للتركيز على الأولى وكيفية متابعة الانتقالات البصرية، أعي — مثل تحكي قصة مرئية للمستخدم يمكن التشبث بشأن عند التنقل محتوى الموقع الخاص بك. نهج عناصر التصميم كطبقات من أهمية "التي تحتاج إلى أن تكون مرتبة على نحو فعال. مع فقط بضع قطع وأكدت بشدة، كنت أخذ المشاهد بهدوء من الجهة ونقلها من خلال موقع على النحو المنشود.

ربما لا تمثل هذه الصورة من صفحة فهرس Reddit أفضل مثال على التصميم الجيد التصميم — خاصةً من حيث إنشاء تسلسل هرمي واضح وقوي. Reddit واحدة من هذه الحالات حيث أن نجاح الموقع وتصميم لا تتصل اتصالاً وثيقا، أشعر. أنها حلقة أصيلة لأنها، أعني بأن الفوضى، ولكن أنها لن تحتاج إلى الكثير لإنشاء تسلسل هرمي بصرية أكثر وضوحاً.

كما أننا تغطية قبل، كنت لا تريد كل شيء لتظهر على نفس القدر من الأهمية. وقد أن أن يكون الأمر كذلك، أن يكون العارض الخاص بك وقتاً أكثر صعوبة هضم المحتوى الخاص بك. بدلاً من ذلك، قم بإنشاء مختلف مستوى الأهمية التي تؤكد على الهيكل العام للتكوين الخاص بك. إحدى الاستراتيجيات التي تعمل كقاعدة عامة من إبهام: أكبر حجم وأهمية أكبر. حالما يتحقق هرمي أساسية من خلال الحجم والتباعد، يمكنك إحضار اللون إلى هذا المزيج، المساعدة في التأكيد على بعض العناصر حتى أكثر. التي تعمل في الاتجاه المعاكس، بدءاً من الألوان، سوف تجعل مهمتك الصعبة دون داع، أو على الأقل أقل فعالية.

أنا أحب كيف يتناول صفحة استكشاف في GitHub الطباعة لإنشاء تسلسل هرمي واضح ودقيق. من السهل جداً للعين لفحص ومتابعة المحتوى إلى الأسفل. هو أيضا وضع لون للاستخدام الجيد لإنشاء المراسي البصرية، ونفس الشيء ينطبق على نتائج البحث الخاصة بهم:

ويميز تسلسل هرمي واضح بسرعة جيدة من حلول التصميم دون المتوسط.

الصورة أعلاه مثال عظيم آخر من مصممي الطريقة البارعة في المربع المنسدل تنفيذ عملهم. وهناك الكثير من المحتوى للعمل مع، إلا أنها لا تزال ناجحة في توجيه العين من خلال النص.

اتساق

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

يوضح المثال أعلاه الاتساق على مختلف المستويات. وتتسق نمط وحجم الرسوم التوضيحية. الأزرار نفس الشكل. الوزن المرئي لكافة الأعمدة الثلاثة بل وتمت محاذاته. يشارك كل عمود نفس البنية الداخلية. وعموما، هذا بسيطة وفعالة ومدروسة.

توقعات مجموعات الاتساق أن أيا كان مصادفة التالية ستظهر مماثلة، وبالتالي الحد من المعالجة المعرفية.

تجنب استخدام طن من طرز مختلفة وأحجام الخط واحد من أهم المسارات إلى الاتساق. داخل بيئة واحدة المستخدمين يعتادون على القراءة في نمط معين أو محرف وأنت لا ينبغي أن تخل بأن.

هل شاهدت مؤخرا المواقع التي تستخدم طن من الأزرار مختلفة بدلاً من قليلة مما سيخلق الكثير من تناسق أفضل؟ اراهن لديك وسوف المراهنة بها لم ترغب في ذلك. الأزرار أدناه تنتمي إلى جرد واجهة موقع مفرد واحد. كما يمكن أن يلاحظ أدناه، أنه لأمر مدهش مدى يمكن أن تذهب في الاتجاه الخاطئ.

يمكن أن تتحسن قابلية استخدام النظام على نحو كبير عندما تشترك عناصر مشابهة كهذه في نفس الجمالية. لماذا جعل المستخدمين تعلم اللغة البصرية المتنوعة للتنقل على الصفحة الخاصة بك؟ أنها لا تقدم أي معنى!

التشابه

تفكر في ذلك، "الاتساق" جذوره في هذا المبدأ الجشطالت، التي تنص على أن أشياء مماثلة تبحث إنشاء نموذج للوحدة التي يمكنك استخدامها في التصميمات الخاصة بك. تظهر العناصر التي لها نفس الخصائص تكون أكثر ارتباطاً ببعضهما البعض — أكثر من ذلك من الأشياء غير المتشابهة.

عناصر يجري مماثلة تشير إلى علاقة، إنشاء تباين قوي بينهما والعناصر الأخرى المحيطة بها.

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

صديق لا يحقق تناسق كبير بتطبيق التشابه جيدا. هذه قائمة بالوظائف العناوين الطويلة والقصيرة على حد سواء، وبعض عناوين وبدءها بمسافة بادئة في حين أن البعض الآخر لا. يبدو مربكاً، ولكن لن تأخذ الكثير من العمل لإنشاء مزيد من التماسك عن طريق التشابه.

يمكنك تحقيق التشابه بين العناصر باستخدام المشتركة:

• لون
• النموذج
• الحجم
• الشكل
• نسيج
• التوجه
• البعد
• اتساق حجم

يمكن أن تشير جميع هذه العلاقات. اللون والشكل أمثلة قوية جداً للتأكيد على هذه العلاقات. على الرغم من تشابه سلاح الأقوياء للعائد، فإنها مع ذلك أداة لتعزيز الهياكل الهرمية، لا أحد أن يخلق ذلك بسهولة بمفردها.

هذه القائمة لتتجه repos "المصدر المفتوح" على GitHub قوية حقاً. بسيطة جداً، وسهلة القراءة وهضم، كذلك متماسكة حسب تشابهها المتكررة. كان ناجحاً في إنشاء كتل محتوى منفصلة أود أن أقول أنه لا حاجة حتى إلى الحدود:

الخريطة العقلية خفية ونحن كمستخدمين، يمكن إنشاء ليس للتقليل من شأن. ويساعد على وضع نمط لتنظيم المحتوى. الفوضى في الطرف الآخر من هذا الطيف وهو ليس ما، المصممين ونسعى إليه. تخيل صفحة من النص حيث ليست عرض الرسائل دائماً على أساس سطر بسطر، لكن تعويم عشوائياً حول الصفحة. لا دعوة للغاية للقراءة، هوة؟

هذه هي الصفحة المقصودة للمقطع استكشاف على GitHub. وهنا، باستخدام أكثر اتساقا لحجم ومظهر كانت أكثر فعالية. حجم زيادة في بعض العناصر ليست، في الواقع، قرار "تحرير" عن قصد تسليط الضوء على فئات معينة؛ هو العشوائية. عدم وجود سبب وجيه للعب مع الحجم، الوحدة أن قد بذلت أقوى يتكئ على الاتساق. أيضا، لديك نوعين من البطاقات، أحدهما مع فقط عنواناً للفئة والآخر مع نص وصفي إضافي. علاوة على ذلك، تحوم الآثار المختلفة لجميع التغيرات الثلاثة. كل هذا يخلق الاهتمام البصري، ولكن الصفحة ليس قويا كما يعرض قائمة من نفس الفرع أدناه:

من حيث الوظائف، عناصر يبحث مماثلة ينبغي إنجاز مهام مماثلة للمستخدم. عندما يحتاج المستخدمين دون داع لإعادة تعلم سلوكيات مختلفة لعناصر واجهة يبحث مماثلة، الإحباط، تستتبعه. التشابه يساعد على إدارة التوقعات — وهذا في حد ذاته أداة قوية جداً في ترسانة الخاص بك.

مساحة بيضاء

بالضبط ما يعتبر "مسافة بيضاء"؟ المساحة البيضاء مساحة فارغة لا تحمل علامات أو السلبية بين العناصر في تكوين. إطارات فعالية المحتوى. المسافة البيضاء الكلي للقطع الرئيسية في التصميم الخاص بك — التي تخلق آثار أكثر وضوحاً. من ناحية أخرى، المساحة البيضاء الصغيرة، للتفاصيل الدقيقة، مثل جميع المباعدة العناصر الطباعية.

هنا استخدام ممتازة من المساحة البيضاء يؤدي إلى التركيز القوى والأنيق على منتج جديد. هناك عدة مبادئ للعمل بنجاح، ولكن المساحة البيضاء دور أقوى لجعل هذا التصميم تعمل على ما يرام.

نلقي نظرة على المثال أعلاه. عندما نحقق الأحجام تستخدم لإنشاء مسافة بيضاء في فونديرسويتي، نرى القياسات المستخدمة اللعب بعيداً عن بعضها البعض. هذه القياسات الشائعة إنشاء مسافة بيضاء "نشط"، تعمد توجيه الانتباه. فلتكن لدينا نظرة أدناه:

المساحة البيضاء "النشط" وصف غامض، ولكن نستخدمها عندما يعرض المسافة البيضاء علاقات العناصر حوله. بيضاء النشطة يساعد على التأكيد على تكوين أو بنية المحتوى الخاص بك وذلك آثار التسلسل الهرمي إيجابيا. مسافة بيضاء "السلبي" ليس ذلك الانقسام، ولكن هو نفس القدر من الأهمية نظراً لأنها يمكن أن تخلق كميات صغيرة من التقاط الأنفاس. ومع ذلك، سيجعل الكثير المساحة البيضاء غير نشط، تفتقر إلى العلاقات المحيطة بالعناصر، عملك تبدو متهور أو حتى الفوضى.

تطبيق ممتاز من الفضاء الأبيض على ionic.io. هنا هناك علاقة في حجم وكذلك مساحة بيضاء الكلي والجزئي اللعب معا بشكل جيد.

كل يوم ، عندما تقرأ نصًا ، فإنك تشاهد التطبيق المفيد للمساحة البيضاء دون التفكير كثيرًا في ذلك. المسافة بين الكلمات والجمل والفقرات هي مساحة بيضاء وتساعدنا على استيعاب معنى الحروف المكتوبة بصريًا. إنها توجه العين من خلال المحتوى وتعطينا إشارات للتحرك الفعال من خلال النص. توفر المساحة البيضاء الكلية والجزئية فرصة للراحة ودعم التوازن الكلي.

ضع في اعتبارك أننا نهدف إلى تحقيق التمايز على الرغم من الفضاء. هذا يتيح لنا تقليص العناصر الأخرى لإنشاء التمييز. إذا كنت تحب هذه النظرة 'النظيفة' لتصميمات الويب المفضلة لديك ، فإن التطبيق الواعي للفضاء الأبيض كان على الأرجح مكونًا أساسيًا له. لا شيء يتحدث عن الأناقة والرقي أفضل من المستخدم المناسب للمساحة البيضاء.

توازن

التوازن هو كل شيء عن الحفاظ على الوزن البصري ، التوازن البصري ، في الاختيار. نرغب في أن ننظر إلى الأشياء المتوازنة حول محور عمودي بشكل غريزي - إنه جزء من رؤية ثنائية العين. التوازن عبر المحور الرأسي هو نمط آمن يجب اتباعه - وهو أمر رسمي جدًا ومطلوب. إذا تمكنت من كسر هذا التوازن ببراعة ، فقم بتكوين شيء من التوتر أو المفاجأة ، ربما لإلقاء الضوء على بعض جوانب التكوين ، فقد يبدو تصميمك أكثر ديناميكية وإثارة للاهتمام.

يحتوي الموقع الخاص بمحول بلوكهيد على بعض الأمثلة الرائعة عن كيفية تطبيق التوازن على تصميماتهم. أعلاه ، الصورة إلى اليمين مع النص المصاحب لها تحقيق توازن بصري لطيف. وينطبق نفس الشيء على الصورة أدناه. يتم تطبيق جميع التوازن والتسلسل الهرمي والفضاء والتركيز بشكل جيد.

التوازن المتناظر ليس من الصعب تحقيقه وهو طريقة آمنة لصنع تركيبة جذابة بصريا. إن المقاربة غير المتماثلة أقل صرامة أو ثابتة ، لكنها تتوقع أن تنجح الحرفة أكثر. من أجل التوازن غير المتماثل ، نحتاج إلى العمل على الحفاظ على الأجزاء غير العاكسة المختلفة في توازن مدرك.

تستخدم صفحة Dropbox المقصودة استخدامًا رائعًا للرصيد المرئي في كل مكان. يمكنك أن ترى أن الصور والنص يحققان توازنا غير متناسق ، خاصة في إشارة إلى أقسام أخرى حولهما. ولا تدعوني بدأت في استخدام الكارب الكوري للتعبير عن الاستجابة والتشغيل متعدد الأجهزة. العبقري

عندما تلعب بالتوازن البصري ، فإن جميع أدوات التصميم تكون تحت تصرفك: الحجم واللون والموضع والشكل والتكرار والملمس ، ويمكن أن تؤثر جميعها على الوزن المتصور بشكل فردي وتلعب كل منهما الآخر.

يمكن اعتبار التوازن غير المتماثل أكثر ودية وينقل تصميمًا يبدو أكثر مرحًا وديناميكيًا. لا يعني ذلك أنني فتى معجب ببرنامج دروببوإكس أو شيء ما ، ولكن من حيث التصميم ، فإن موقع دروببوإكس يجعل من استخدام كل مبدأ من مبادئ التصميم التي ناقشناها اليوم بارعة ، مما يحقق جودة إجمالية تستحق الإعجاب.

قرب

عناصر التصميم التي يتم وضعها داخل القرب النسبي لبعضها البعض تشكل بشكل طبيعي علاقة ضمنية. إن التعامل مع بئر القرب يمكن أن يؤثر على تصميماتك بشكل إيجابي ، مما يسمح لك بمغادرة عناصر أخرى قد تكون ضرورية لولا ذلك لتحقيق الوحدة البصرية—الحدود على سبيل المثال. مرة أخرى ، الوحدة هي في صميم هذا ، وجميع الأدوات التي ناقشناها حتى الآن يمكن استخدامها بدرجات متفاوتة لتحقيقها.

على موقع YoGrow ، يمكنك معرفة كيفية استخدام القرب. أود أن أقترح أنه كان باستطاعتهم استخدام ألوان وخلفيات أقل ، وبدلاً من ذلك ، تركوا القرب يفعلون سحره.

في المثال أدناه ، الذي رأيناه من قبل ، القرب هو كل ما هو ضروري ليعبر عن العلاقات بين لوحات الألوان هذه. يمكن حذف الحدود أو ألوان الخلفية ، مما يعطي مظهرًا أنيقًا.

إغلاق

الإغلاق هو تقنية تركيبية حيث يملأ المستخدم الفراغات الخاصة بتصميماتك - الفراغات التي زرعتها عمداً. هذا شكل من أشكال الاقتراح ، وهم يكمّل الصورة التي يريد المصمم رؤيتها. الإغلاق هو ما يسمح للقراء بتفسير الشرائح المصورة ، مع الأخذ في الاعتبار ما يحدث في الحضيض بين الإطارات. الإغلاق هو أيضًا ما يسمح لنا بتفسير الفضاء السلبي في الشعارات ، على سبيل المثال.

يعمل الدماغ البشري الذي يسعى للنمط عن طريق ملء القطع المفقودة بأشكال مألوفة.

خذ GitHub على سبيل المثال. الشعار الذي يستخدمونه في الصفحة هو دائرة سوداء ، مع انطباع حيواني عن Octocat داخلها. حتى في حجم صغير ، يمكنك التعرف على التميمة بسهولة ، ويتم وضعها في شريط التنقل ، فهي بمثابة مرساة مرئية تبدو متواضعة ومقيدة.

إذن ، كيف تعامل كل هذه الروابط مع تصميم واجهات للويب؟ حسنا ، نادرا ما يكون صريحا. من المرجح أن تستمتع بهذا المفهوم إذا صممت أيقونات وشعارات.

افكار اخيرة

لقد غطينا الكثير هنا! من الآن فصاعدا ، حاول النظر في هذه المبادئ عندما تنظر إلى أي تصميم أو عمل فني. حاول أن تفهم ما إذا كان منشئي المحتوى قد راعوا العلاقات المرئية في الحسبان ، وتطبيقها بشكل نشط وبناء. تذكر أنه لكي تصبح فعالاً في استخدام هذه الأفكار ، ستحتاج إلى التدريب! أثناء قيامك بذلك ، ستساعد هذه المبادئ بالتأكيد على الاستمتاع بتصميم أكثر.