الرئيسية / تصميم / النسبة الذهبية في التصميم الاحترافي

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

تُسْتَخْدَمُ النِّسْبَةُ الذَّهَبِيَّةُ ضِمْنَ إِطَارِ كُلِّ أَنْوَاعِ التَّصْمِيــمَاتِ، خَاصَّةً لِجَعْلِ التَّوَازُن فِي الْمُحْتَوَى ذُو النَّصِ الْكَثِيفِ. يمكنها أن تساعد المصممين لإنشاء تسلسل هرمى و جذب إنتباه أعين المستخدمين لمناطق معينة تفحص الأمثلة التالية وتعلم كيف يوظفها المصممون!

النسبة الذهبية هى نسبة رياضية, عادة ما توجد فى الطبيعة, وتستخدم فى نظريات التصميم الكلاسيكية لإنشاء تراكيب معتدلة. إنها تساوى 1.6180 تقريبًا, وتُعرف أيضًا بإسم “المتوسط الذهبى” , “القسم الذهبى”,ويُرمز لها بالرمز فاى “ϕ”.

المستطيل الذهبى هو مستطيل طوله يساوى 1.6180 عرضه. مثال, div أحد جوانبه يساوى 300px والآخر يساوى 300*1.6180 ≈ 485px يمكن أن يُقال عليه مستطيل ذهبى

إذا رسمت مربع من ذلك المستطيل الذهبى, ستحصل على مستطيل ذهبى آخر

يمكنك عمل نفس الشئ للمستطيل الأصغر, وستحصل على نفس النتيجة بالتأكيد كما بالصورة:

متسلسلة فيوبانشى شبيهة للنسبة الذهبية, ولكن ليسوا متطابقين . إنها عبارة عن سلسلة من الأرقام حيث يكون الرقم التالى يساوى مجموع الرقمين السابقين مثال: 0, 1, 1, 2, 3, 4, 7

إذا أخذنا مربع, واضفنا له مربع آخر فسنحصل على مستطيل:


استمر بإضافة مربعات للجانب الأكبر طولًا

ثم أضف مربع آخر, للجانب الأكبر طولًا للشكل النهائى:

هلم جرًا:

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

لنقم الآن بتحليل بعض المواقع حيث نستطيع أن نطبق على ما تعلمناه.


yourlocalstudio.dk

“Your Local Studio ” هو استديو يقدم خدمات التصميم والتطوير يوجد فى كوبنهاجن, بالدنمارك. إنهم يتخصصون فى إنشاء الأفكار المرئية المختلفة لصنع تجارب تطور الأماكن المحيطة.

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

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


mashable.com

Mashable هو موقع أخبار; مصدر معلومات, معرفة ومصادر للجيل المتصل.

لقد اسخدمت خدمة اختبار النسبة الذهبية من UX Triggers لأكتشف كيف استخدم Mashable متسلسلة فيوبانشى فى تصميمه. تخطيط مرن للمحتوى , مع العناوين فى اليسار وروابط لأخبار أخرى فى اليمين, فُصلت عن طريق الشبكية.

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


www.jandk.fr

Jackson & Kent شركة لمنتجات الويب من فرنسا. إنهم يختصون فى الخدمان التقنية مثل HTML5, CSS3, Drupal, WordPress, PHP/MySQL, Flash إلخ.

الصورة بالأسفل تُوضح كيف أن الأعمال السابقة تُمثل مساحة كبيرة من التصميم. ويوجد أيضًا مساحة من معلومات عن الشركة نفسها و شريط التنظيم “navigation bar” فى منتصف الشاشة. زر الإتصال, كما يظهر بالأسفل, يستخدم النسبة الذهبية كنظام للشبكية لتنظيم التصميم فى طريقة فريدة.

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

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

عن عبد القادر غسان

Author Image
اسمي عبدالقادر غسان دار حامد حاصل على شهادة جرافيك ديزاين من الجامعة الزيتونة الاردنية فائز بالمرتبة الثالثة في مسابقة بديل سنة 2015 احب التصميم بشدة واكافح من اجل ذالك

شاهد أيضاً

13418761_1589483654681440_8125217961333700576_n

تعديل الصور قبل اكتشاف الفوتوشوب

تلك الفترة كان عبارة عن قص ولص الصور في بعضها البعض وذالك بعد اكنشاف الكاميرا

Hello. Add your message here.
خصم ٩٠٪ على جميع الدورات - مرور عام على الانطلاق احصل على العرض