نسبت طلایی و استفاده از آن در طراحی وب

همونطور که قبلا هم قول داده بودم از این پس در سی جی تی وی قصد دارم مقالات و آموزشهایی در مورد طراحی وب بزارم که کمتر در وب فارسی به آن پرداخته میشه ، از همین بابت در این آموزش قصد دارم به توضیح یک نکته یا روش جالب به نام « نسبت طلایی » یا Golden Ratio بپردازم.

ابتدا تعریف کلی از زبان ویکی پدیا

نسبت طلایی یا عدد فی (به انگلیسی: Golden ratio) در ریاضیات و هنر هنگامی است که «نسبت بخش بزرگتر به بخش کوچکتر، برابر با نسبت کل به بخش بزرگتر» باشد.[۱]»

تعریف دیگر این عدد نسبت طلایی این است که «عددی مثبت است که اگر به آن یک واحد اضافه کنیم به مربع آن خواهیم رسید». تعریف هندسی آن چنین است: طول مستطیلی به مساحت واحد که عرض آن یک واحد کمتر از طولش باشد.

توضیحات بیشتر رو میتونید در صفحه ویکی پدیا مطالعه کنید. در واقع این نسبت در اکثر گونه های طراحی به کار میره و اصالتا یک نسبت ریاضی هست که در طبیعت به وفور یافت میشه و در طراحی های کلاسیک و قدیمی نیز برای ایجاد هماهنگی در طرح از آن استفاده میشده.

تقریبا مقدار ۱٫۶۱۸۰ با نام « نسبت طلایی شناخته میشود.

حال که با نسبت طلایی آشنا شدیم ، بد نیست کمی هم در مورد « مربع طلایی » بدانیم:

مربع طلایی ، مربعی است که طول آن ۱٫۶۱۸۰ برابر عرض آن است. برای مثال یک div رو در نظر بگیرید که عرض آن ۳۰۰ پیکسل است ، با این حساب طول آن میشود:

۱٫۶۱۸۰×۳۰۰=۴۸۵px

یه مربعی تو مایه های عکس زیر:

perfect

حالا اگه شما یک مربع واقعی (۳۰۰ در ۳۰۰ پیکسل) رو از مربع طلایی گفته شده جدا کنید. قسمت باقیمانده یک مربع طلایی دیگر خواهد بود. مانند شکل زیر:

1square

به همین ترتیب میتوانید این عملیات را برای مربع های داخلی تر بارها و بارها انجام بدهید:

squares

و نتیجتا تعدادی مربع معمولی و یک مربع طلایی خواهید داشت.

سری فیبوناچی

باز هم قبل از هرچیز یک تعریف کلی از ویکی پدیای عزیز:

غیر از دو عدد اول اعداد بعدی از جمع دو عدد قبلی خود بدست می‌آید. اولین اعداد این سری عبارت‌اند از:

۰٬ ۱٬ ۱٬ ۲٬ ۳٬ ۵٬ ۸٬ ۱۳٬ ۲۱٬ ۳۴٬ ۵۵٬ ۸۹٬ ۱۴۴٬ ۲۳۳٬ ۳۷۷٬ ۶۱۰٬ ۹۸۷٬ ۱۵۹۷٬ ۲۵۸۴٬ ۴۱۸۱٬ ۶۷۶۵٬ ۱۰۹۴۶٬ ۱۷۷۱۱

این اعداد به نام لئوناردو فیبوناچی ریاضیدان ایتالیایی نام گذاری شده‌است.

در واقع سری فیبولاناچی بسیار مشابه نسبت طلایی است اما نه دقیقا! سری فیبولانچی یک سری از اعداد هست که در آن هر عدد مجموع جمع دو عدد قبل از خود است. مشابه (مثال ذکر شده در بالا)

حال اگر بخواهیم این روش را در طراحی پیاده کنیم و از مربع استفاده کنیم ابتدا دو مربع خواهیم داشت:

f2

حال اگر بخواهیم یک مربع دیگر به آن اضافه کنیم طبق قانون فیبوناچی باید از مجموع آن دو مربع باشد:

f3

و اگر این سری را بارها و بارها ادامه دهیم به طرح زیر خواهیم رسید:

f1

که در واقع این رابطه ریاضی تقریبا یک مربع طلایی نامحدود را به ما خواهد داد که میتواند تا حد دلخواه بسط داده شود و بزرگ شود.

حال اجازه بدید تعدادی از وب سایت ها را آنالیز کنیم تا ببینیم این مربع جادویی چگونه در طراحی وب مورد استفاده قرار میگیرد:

مثال یک: YStudio

your-local-studio

 

 

 

مثال شماره دو: Mashable

mashable

 

مثال شماره سه : Jackson & Kent

 

 

cow

 

golden-mean2

وب سایت Jackson & Kent در واقع یک سرویس طراحی وب در فرانسه است که در زمینه طراحی طراحی وب ، css , html , وردپرس و … فعالیت میکند.

 

مثال شماره پنج : صفحه مترو مایکروسافت ویندوز

windows-8-metro

اگر در اینترنت و سایتهای طراحی وب جستجو کنید نمونه های بسیار زیادی خواهید دید که از این روش برای زیباتر کردن طرح استفاده کرده اند، اگر شما هم مثالی دیدید که بنظرتون آمد از این مربع طلایی استفاده کرده است. ممنون میشم در قسمت کامنت ها قرارش بدید.

 

نویسندهحامد میاحیان

من حامد میاحیان هستم :) در این وبلاگ آموزشهای ویدئویی در رابطه ( طراحی وب ) قرار میدم.

2 دیدگاه مرتبط با “نسبت طلایی و استفاده از آن در طراحی وب

  1. سلام.وبسایت خیلی خوب و جامعی
    دارید.ممنون

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *