النسبة الذهبية: الدليل النهائي لفهمها واستخدامها

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

تصوير بوغوميل ميهايلوف على Unsplash

تذهب النسبة الذهبية بعدة أسماء أخرى أيضًا:

• النسبة الالهية
• المعنى الذهبي
• المقطع الذهبي
• فاي (حرف يوناني)

الرياضيات وراء النسبة الذهبية

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

لفهم النسبة الذهبية ، عليك أولاً أن تفهم المستطيل الذهبي

المستطيل الذهبي هو مستطيل كبير به مربع بداخله. أضلاع المربع تساوي أقصر طول للمستطيل:

المصدر: ويكيبيديا

النسبة الذهبية هي رقم (نوعًا) يساوي 1.618 ، تمامًا مثل pi يساوي 3.14 تقريبًا ، لكن ليس بالضبط.

تأخذ خطًا وتقسمه إلى قسمين - جزء طويل (أ) وجزء قصير (ب). الطول الكامل (أ + ب) مقسومًا على (أ) يساوي (أ) مقسومًا على (ب). وكلاهما يساوي 1.618. إذن (أ + ب) مقسومًا على (أ) يساوي 1.618 ، و (أ) مقسومًا على (ب) يساوي أيضًا 1.618.

نعود إلى المستطيل الذهبي ، لأنه أسهل بكثير في الفهم

عندما تضع مربعًا داخل المستطيل ، فإنه ينشئ مستطيلًا آخر أصغر حجمًا. تجاهل الخطوط السوداء وانظر إلى المربعات الحمراء والخضراء:

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

يمكنك أيضًا إنشاء مستطيل ذهبي جديد من المستطيل الأصغر ، مثل هذا الذي حددته باللون الأزرق:

يحتوي مخطط النسبة الذهبية التقليدي على ثمانية مستطيلات ذهبية:

وإليك أصغر مستطيل ذهبي رقم 8:

إذا بدأت في أسفل اليسار وقمت بعمل قوس لتوصيل الجانب البعيد من كل مقطع عرضي مربع ومستطيل صغير ، ستحصل على Golden Spiral.

تسلسل فيبوناتشي

تسلسل فيبوناتشي سهل الفهم: تبدأ بصفر و 1 ، ثم تحصل على الرقم التالي بجمع العددين قبله. 0 + 1 = 1 ، ثم 1 + 1 = 2 ، إلخ. الأرقام القليلة الأولى في التسلسل هي 0 ، 1 ، 1 ، 2 ، 3 ، 5 ، 8 ، 13 ، 21 ، 34.

إذا كنت تستخدم هذه الأرقام لإنشاء مربعات بهذه العروض ، فيمكنك إلى حد كبير إنشاء Golden Spiral:

المصدر: Math is Fun

الدوائر الذهبية

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

المصدر: قسم لايملايت

تستخدم شعاري بيبسي وتويتر الدوائر الذهبية:

المصدر: Hybrid Talks

لقد رأيت هذا من قبل ، كثيرًا

الطبيعة مليئة بالنسب الذهبية. إنه في النباتات ، والأصداف ، والطقس ...

المصدر: تصوير آني سبرات على Unsplash

المصدر: تصوير وكالة ناسا على Unsplash

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

النسبة الذهبية في الفن والتصميم

في بعض الأحيان ، من السهل جدًا التعرف على النسبة الذهبية:

المصدر: staceysdetailinginc.com

أحيانًا تقول ، "ليس لدي أي فكرة عما تتحدث عنه ... أوه انتظر. الآن أراه. أظن."

المصدر: Marketing Insiders

في أحيان أخرى قد تصاب بالجنون عند النظر إليه ...

المصدر: Widewalls

… ولكن إذا ركزت على المستطيل الذهبي الرئيسي ، فسيصبح الأمر أكثر وضوحًا:

دعنا نلقي نظرة على مثال مشهور: البارثينون

المصدر: Creative Bloq

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

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

بدلاً من ذلك ، يتم استخدام النسبة لخلق التناغم والتناسب ، ويمكن تفسير ذلك بعدة طرق مختلفة.

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

المصدر: Archinect

المصدر: Esther Sugihto on Medium

المصدر: GoldenNumber.net

النسبة الذهبية وتصميم الموقع

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

النسبة الذهبية والتخطيط

إذا كنت تريد تخطيط النسبة الذهبية المثالي ، فاضبط الأبعاد على 1: 1.618. على سبيل المثال ، يمكنك ضبط العرض على 960 بكسل والارتفاع 594 بكسل. يبلغ حجم المستطيل الذهبي 594 بكسل على كل جانب ويحتل المستطيل باقي التخطيط (594 × 366).

يحتوي Calculator Soup على حاسبة النسبة الذهبية المفيدة حيث يمكنك تعيين أي مصطلح (A أو B أو A + B) للعثور على قيم النسبة الذهبية الصحيحة.

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

المصدر: ناشيونال جيوغرافيك

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

في رأيي ، على الرغم من ذلك ، فإن التصميم المتماثل الذي نستخدمه في السمات الأنيقة هو أكثر حداثة:

النسبة الذهبية والتباعد

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

المصدر: Digiarts 2011

هذا ما سيبدو عليه عندما أقوم بتطبيق Golden Spiral في Photoshop:

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

يمكنك أيضًا وضع طبقة تراكب النسبة الذهبية لتطبيقها على عناصر مختلفة من نفس التصميم:

المصدر: العلامة التجارية بواسطة Lemongraphic. مثال من Canva.

النسبة الذهبية والمحتوى

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

لنلق نظرة على موقع National Geographic الإلكتروني مرة أخرى ، وهذه المرة بتراكب النسبة الذهبية من Canva عليه:

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

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

المصدر: Design by Helms Workshop. مثال من Canva.

تنويه مشرف: النسبة الذهبية والصور

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

المصدر: Canva

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

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

هذه صورة التقطتها لابن عمي. لقد وضعت شبكة قاعدة الأثلاث فوقها لتظهر لك أين يملأ الموضوع الإطار ولا يملأه.

انظر أيضًا كيف يلتف Golden Spiral تمامًا حول الموضوع:

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

تغليف

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

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