6 قانون انگشت شست برای ایجاد شبکه های وب سایت

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

فهرست مطالب

• شبکه وب سایت چیست؟
• نقش شبکه ها در طراحی وب
• شبکه های وب سایت بهترین روشها
• 1. آناتومی شبکه خود را بشناسید
• 2. طرح درست شبکه را انتخاب کنید
• 3. طراحی پاسخگو افتخار
• 4- فضای فضای سفید را ایجاد کنید
• 5- به نسبت طلایی احترام بگذارید
• 6. از قانون سوم پیروی کنید

شبکه وب سایت چیست؟

شبکه وب سایت سیستمی برای سازماندهی محتوا در صفحه و ایجاد تراز و سفارش است.

این ساختار اصلی یا اسکلت رابط کاربری شما را تشکیل می دهد. طراحان برای تصمیم گیری در مورد طراحی و ایجاد یک تجربه کاربر خوب از شبکه های وب سایت استفاده می کنند.

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

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

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

درک نقش شبکه ها در طراحی وب

در طراحی وب ، از شبکه ها برای راهنمایی طراحان با نحوه و کجا قرار دادن عناصر در صفحه استفاده می شود. این دستورالعمل ها حاشیه ها ، فضاها و ستون ها را به صورت جمعی شامل می شود - یک چارچوب فراگیر و مداوم برای محتوای صفحه ارائه می دهد.

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

چرا شبکه ها در طراحی وب مهم هستند؟

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

هنگام طراحی برای وب و موبایل ، هدف از صفحات یا رابط هایی که ما طراحی می کنیم ایجاد جریان های مختلف کاربر است. از آنجا که جریان کاربر اغلب حاوی چندین صفحه یا ویندوز است که طرح ها و چیدمان های طراحی مشابه را تکرار می کنند ، شبکه ها فرآیند توسعه Frames ، الگوها یا طرح بندی های استاندارد را برای صفحات مشابه سهولت می دهند.

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

مفهوم طرح بندی شبکه در طراحی چاپ سرچشمه می گیرد که از آنها در زمینه تایپوگرافی با هدف تنظیم دست نوشته روی کاغذ ، به ویژه کتاب و روزنامه ها استفاده می شد. گفته می شود ، بسیاری از زمینه های طراحی مدرن وجود دارد که به یک طرح مبتنی بر شبکه بستگی دارد و شکوفا می شود. این شامل طراحی وب ، طراحی تعامل و به ویژه طراحی پاسخگو است.

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

بهترین روش های استفاده از شبکه ها در طراحی وب

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

بیایید این قطعه را به صورت قطعه تقسیم کنیم.

1. آناتومی شبکه خود را بشناسید

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

1. ستون ها

ستون ها بخش های عمودی هستند که از ارتفاع ناحیه محتوا فاصله دارند و "بلوک های ساختمانی" شبکه ها محسوب می شوند. آنچه در مورد ستون ها منحصر به فرد است این است که هرچه ستون های بیشتری در یک شبکه وجود داشته باشد ، شبکه انعطاف پذیر تر است. ما به زودی این موضوع را در عمق بیشتر بحث خواهیم کرد. عرض ستون ها همیشه به طراح مربوط می شود ، اما از نظر شیوه های استاندارد ، تعداد سنتی ستون ها برای استفاده 12 در دسک تاپ ، 8 در رایانه لوحی و 4 در تلفن همراه است. بیشتر شبکه ها دارای عرض ستون 60-80px هستند. عرض ستون یک تأثیرگذار اصلی در عرض محتوای واقعی شما خواهد بود.

2. ردیف

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

3. ماژول ها

ماژول ها واحدهای فضای ایجاد شده از تقاطع ردیف ها و ستون ها هستند. ماژول ها یا ماژول های محتوا ، همانطور که اغلب به آنها گفته می شود ، بلوک های ساختمانی یک صفحه محسوب می شوند ، زیرا هر عنصر طراحی متناسب است (متن ، تصاویر ، دکمه ها و غیره) در ماژول های ایجاد شده توسط الگوهای مستطیل در یک شبکهبشر

4. ناودان

روده ها خطوط بین ستون ها و ردیف ها هستند که هر یک از این واحدها را از هم جدا می کنند. اندازه روده نسبتاً متداول 20px است. نقش روده ها ایجاد فضای منفی (مهم نیست که چقدر بزرگ یا کوچک) بین ستون ها و ردیف ها باشد. از نظر ساده ترین ، روده ها فضای بین ستون ها و فضای بین ردیف ها هستند. روده ها به ویژه برای طرح سنگ تراشی قابل توجه هستند ، جایی که عرض روده یکی از مهمترین جزئیات طرح است.

5. حاشیه

حاشیه ها فضای منفی بین قالب و لبه بیرونی محتوا هستند که می توانید به عنوان "روده های خارج" نیز فکر کنید. حاشیه های جانبی معمولاً در 20-30px در موبایل اندازه گیری می شوند و بین دسک تاپ و موبایل بسیار متفاوت هستند.

شما ممکن است کلمه حاشیه را از Jargon HTML & CSS تشخیص دهید ، جایی که از حاشیه ها به عنوان یک ویژگی برای ایجاد فضایی در اطراف یک عنصر طراحی یا ظرف استفاده می شود. به خاطر داشته باشید که اندازه یک حاشیه بر اندازه محتوای کنار آن تأثیر نمی گذارد. این به سادگی میزان فضای اطراف عنصر را تعریف می کند ، که در زمینه شبکه های چیدمان ، به طور خاص به فضای بین قالب و لبه بیرونی محتوا اشاره دارد.

بلافاصله یک وب سایت WP میزبان دریافت کنید بیشتر بدانید بلافاصله یک وب سایت WP میزبان دریافت کنید بیشتر بدانید به انجمن جهانی خالق وب ما بپیوندید همین الان ملحق شوید، همین الان بپیوندید روح جامعه را در مرکز ما احساس کنید همین الان ملحق شوید، همین الان بپیوندید با سازندگان وب دیگر ارتباط برقرار کنید ملاقات ها را پیدا کنید

2. طرح درست شبکه را انتخاب کنید

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

Block Grid: یک گزینه کلاسیک برای پست ها و مقالات منفرد

شبکه های بلوک همچنین می توانند به عنوان شبکه های تک ستون یا شبکه های خطی یاد شوند و ساده ترین ساختار شبکه محسوب می شوند. شبکه های بلوک از یک ستون واحد تشکیل شده اند و می توانند شامل یک عنصر واحد یا چندین عنصر تنظیم شده به صورت عمودی ، احاطه شده توسط حاشیه ها باشند. با استفاده از اصطلاحات که قبلاً تعریف کردیم ("آناتومی یک شبکه") ، شبکه های بلوک در اصل یک منطقه مستطیل بزرگ هستند که بیشتر فضای موجود در یک قالب را در اختیار دارند.

شبکه های بلوک اغلب برای بلوک های گسترده یا مداوم متن استفاده می شوند و اغلب در صفحات یا پست های وبلاگ یافت می شوند. نمونه دیگری که ممکن است با شبکه های بلوک روبرو شوید ، تصاویر بزرگ و گسترده ای مانند تصاویر جلد یا تصاویر قهرمان است.

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

روشی که ما آن را می بینیم ، یک دلیل اصلی که چرا شبکه های بلوک چنین مسابقه ای مناسب برای صفحات مقاله و پست های مجرد کلی هستند این است که آنها خطی را در خواندن یک داستان در آغوش می گیرند. هنگامی که هدف شما این است که بازدید کنندگان وب سایت در محتوای وب سایت یا صفحه درباره ما خوشحال شوند ، هرچه تجربه خواندن عمودی و متمرکز را تسهیل کنید ، احتمال پذیرش محتوای شما بیشتر است.

شبکه ستون: تقسیم شده و در عین حال برابر است

شبکه های ستون از چندین ستون تشکیل شده اند که بیشتر برای سازماندهی عناصر مختلف در ستون ها استفاده می شوند. شبکه های ستون می توانند به اندازه دو ستون داشته باشند ، بدون محدودیت واقعی برای تعداد آنها. گفته می شود ، طرح های شبکه استاندارد در طراحی وب شامل شش ، نه یا 12 ستون است. اما این واقعاً به طراح این است که تصمیم بگیرد چند ستون لازم است.

پس از قرار دادن در یک شبکه ستون ، متن و تصاویر از تراز خطوط عمودی ستون ها و خطوط جریان پیروی می کنند. عناصر طراحی را می توان در داخل یک ستون یا در دو یا چند مورد قرار داد تا تنوع طرح های بصری ایجاد شود. فاصله بین ستون ها (روده ها) باید در کل صفحه متناسب و سازگار باشد. یک شبکه ستون متقارن دارای تمام ستون ها با همان عرض است ، در حالی که یک شبکه نامتقارن برخی از ستون ها را نسبتاً نازک تر یا گسترده تر از سایرین خواهد داشت.

مثال بالا یک الگوی عنصر برای یک صفحه قیمت گذاری است. در حالی که صفحات قیمت گذاری می توانند به روش های بی پایان طراحی شوند ، بسیار رایج است (به خصوص برای محصولات دیجیتال) یک جدول سه یا چهار ستون را در جایی در وسط صفحه مشاهده کنید که نمایانگر گزینه های اشتراک متفاوت محصول یا خدمات است.

از نظر منطقی ، این جداول مبتنی بر ستون نتیجه مستقیمی از زیرساخت های سازگار و مبتنی بر شبکه است که به ستون های 3-4 شفاف و مختصر با حداقل مقدار متن وارد می شود. یک شبکه مبتنی بر ستون واقعاً مناسب ترین انتخاب در اینجا است ، همانطور که وقتی نوبت به نوشتن یک صفحه قیمت گذاری می رسد ، می خواهید هر اشتراک یا برنامه ای را که می خواهید تا حد ممکن و شفافیت ارائه دهید ، ارائه دهید. هیچ حواس پرتی ، هیچ تداخلی وجود ندارد ، چیزی که چشم خواننده را از اطلاعات ضروری دور کند.

شبکه مدولار: تقارن کامل

شبکه های مدولار از ستون ها و همچنین ردیف ها تشکیل شده اند. آنها غالباً با یا توصیف مانند تخته سنگ ، مقایسه می شوند و می توانند برای دسترسی آسان به یکباره بسیار مؤثر باشند.

به طور معمول ، از شبکه های مدولار در طراحی وب استفاده می شود که چندین عنصر برای سازماندهی وجود داشته باشد ، و یک شبکه ستون ، که فقط بر تراز/سازمان عمودی متمرکز است ، کافی نخواهد بود. شبکه های مدولار نام خود را از داشتن ماژول های به اندازه یکسان (که قبلاً در مورد آنها بحث کردیم) دریافت می کنند. موارد استفاده متداول برای شبکه های مدولار صفحه نمایش تلفن همراه تلفن همراه است که مجموعه کامل برنامه ها یا وب سایت های تجارت الکترونیکی را نشان می دهد که مجموعه های موجودی را در صفحات دسته خود نشان می دهد.

همانطور که در بالا نشان داده شده است ، شبکه های مدولار به طور گسترده ای برای گالری های تصویر و چیدمان کارت استفاده می شوند ، مانند یک شبکه تصویر که طیف گسترده ای از گزینه های کفپوش را نشان می دهد که یک شرکت کفپوش می تواند ارائه دهد. آنچه در مورد این گالری تصویر خاص بی نظیر است این است که با ویجت گالری Elementor Pro ساخته شده است ، که منحصراً با طراحی مبتنی بر شبکه کار می کند.

نوع گالری می تواند یک شبکه موجه (کاملاً مدولار) ، یا یک شبکه سنگ تراشی یا یک شبکه سلسله مراتبی باشد که به زودی در مورد آن صحبت خواهیم کرد. علاوه بر گزینه های مختلف چیدمان شبکه ، ویژگی Pro Gallery گزینه ای برای یک گالری چندگانه دارد که نمای گالری مختلف را امکان پذیر می کند. بازدید کنندگان وب سایت می توانند کل گالری تصویر را به طور همزمان مشاهده کنند ، یا آن را بر اساس دسته بندی ها فیلتر کنند. در هر صورت ، طرح مبتنی بر شبکه به صورت سنگ تنظیم شده است.

گزینه دیگری برای یک شبکه مدولار می تواند با یک صفحه بایگانی ساخته شود که نمایش های کوچک پست های وبلاگ (یا مقاله) را به نمایش می گذارد. این کار با ویجت پست ها امکان پذیر است ، که یک طرح کارت از تصاویر تصویر کوچک ، عناوین ، گزیده ها و تاریخ ها را نشان می دهد.

به خاطر داشته باشید که حتی اگر مربع های تصویر دارای چندین خط متن در زیر آنها هستند ، این هنوز یک شبکه مدولار است زیرا هر کارت در کل (تصویر تصویر کوچک ، عنوان ، توضیحات و تاریخ) همه در یک مستطیل به اندازه یکنواخت قرار می گیرند.

شبکه سلسله مراتبی: سازمان یافته و در عین حال آزاد

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

مثال فوق از سایت نمونه کارها یک عکاس مد ، یک مسابقه شبکه ای مناسب برای نحوه نمایش کار خود پیدا می کند: یک شبکه آزاد که از تصاویر همه ارتفاعات استقبال می کند. به این ترتیب ، دیگر نیازی به سازش و تصاویر زراعی نیست تا آنها از ارتفاع یکنواخت پیروی کنند. همچنین در هنگام حرکت در گالری ، چیزهای جالب را جالب نگه می دارد ، زیرا تنوع شکل ها دارای یک پرشکوه مخصوصاً پویا و جریان کاربر هستند. ناگفته نماند که اگر تصاویر خاصی وجود داشته باشد که عکاس می خواهد از سایرین در گالری مسلط تر باشد ، می تواند این اندازه را به اندازه بزرگتر از سایرین تبدیل کند و کاربران را ترغیب کند تا بیشتر به مواردی که دوست دارند توجه کنند.

در این الگوی Elementor برای یک صفحه About Me ، کل صفحه از یک شبکه آزاد استفاده می کند ، که یک نام مخصوصاً مناسب برای طرح صفحه است زیرا با پایین آمدن صفحه ، اندازه های چند مربع و مستطیل آزادانه قرار می گیرند. آنچه منحصر به فرد است این است که بالای صفحه (محتوای قهرمان) کاملاً آزاد است ، اما بخش های زیر از صفحه به یک طرح سه ستونی به طور مساوی تقسیم شده و سرانجام با یک طرح دو ستونی تقسیم می شود. شبکه های سلسله مراتبی قطعاً روش مناسبی برای جالب نگه داشتن چیزها هستند.

3. طراحی پاسخگو افتخار

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

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

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

یک شبکه پاسخگو ، یا شبکه سیال همانطور که از آنها نیز خوانده می شود ، همان چیزی است که می بینید وقتی می بینید عناصر به صورت پویا در حال تغییر در مرورگر/صفحه نمایش هستند. شبکه های پاسخگو به طور سیستماتیک محتوای شما را به گونه ای تراز می کنند که نمایانگر سلسله مراتب اطلاعات آنها به روشی منطقی است. این بدان معنی است که با کوچک شدن نمای ، کاشی و مقیاس محتوای شبکه بر این اساس.

4- فضای فضای سفید را ایجاد کنید

به عنوان سازندگان وب ، ما می دانیم که یک فضای سفید در جزئیات طراحی مانند خوانایی ، سلسله مراتب اطلاعات ، مقیاس پذیری و اتاق تنفس عمومی در اطراف و بین عناصر طراحی چقدر مهم است.

با توجه به اهمیت مهم آن در طراحی طرح ، این حس را دارد که فضای سفید بخشی ذاتی از وب سایت و شبکه های چیدمان است. در اصل ، طرح های شبکه نه تنها با اندازه ستون ها و ردیف های آنها بلکه با عرض و ارتفاع فضای سفید در بین ، تعریف می شوند ، در غیر این صورت به عنوان فاصله شناخته می شوند.

به عنوان مثال ، یک رویکرد طراحی مبتنی بر شبکه که اغلب توسط طراحان وب مورد استفاده قرار می گیرد ، سیستم شبکه 8PT نامیده می شود ، مفهومی که توسط دستورالعمل های طراحی مواد Google معرفی شده است.

سیستم طراحی مواد از شبکه ای استفاده می کند که از مربع 8 8 8 PT تشکیل شده است. در عمل ، هر عنصر در صفحه توسط هشت مورد/قابل تقسیم خواهد بود.

نکته جالب اینجاست که این فقط در مورد عناصر موجود در شبکه مانند تصاویر ، دکمه ها یا متون صدق نمی کند - بلکه در مورد واحدهای فضای سفید نیز صدق می کند ، که باید در چندین هشت نفر باشند.

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

در مثال بالا ، صفحه اصلی کارشناسان Elementor نشان می دهد که فضای سفید به خصوص در صفحه اصلی وب سایت چقدر می تواند مؤثر باشد. از آنجا که هدف اصلی صفحه اصلی تشویق کاربران به اقدام و یادگیری در مورد پلتفرم متخصصان است ، فضای سفید با استفاده از یک رویکرد اول محتوا ، این روند را تسهیل می کند.

این بدان معناست که از آنجا که گزاره ارزش این سکو تأکید زیادی و "زمان درخشش" در صفحه اصلی داده می شود ، برای بازدید کنندگان وب سایت کاملاً واضح است که ارزش افزوده این است که آنها در حال مواجهه هستند.

5- به نسبت طلایی احترام بگذارید

بسیاری از طراحان هنگام جستجوی بهبود اندازه ، تعادل و چیدمان طراحی شبکه خود از مفهومی به نام نسبت طلایی استفاده می کنند. در اصل ، نسبت طلایی نسبت به 1. 6180 برابر است. بر اساس نسبت طلایی همان چیزی است که به عنوان مستطیل طلایی شناخته می شود ، مستطیل که طول آن 1. 6180 برابر عرض است.

این بدان معنی است که اگر عرض 100px باشد ، طول آن 161. 80px خواهد بود. این کار برای عرض و طول تصاویر ، اشیاء یا اشکال قرار داده شده در کنار یکدیگر یا برای شکل گیری یک شکل یا خود عنصر قابل استفاده است. در هنگام استفاده از نسبت طلایی ، طراحان می توانند چگونگی تقسیم فضای افقی موجود در صفحه و چقدر فضای اختصاصی برای و اطراف هر عنصر و غیره را ارزیابی کنند.

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

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

اینجاست که این سؤال است که چگونه باید تصمیم بگیرید که چگونه بخش قهرمانان را تقسیم کنید تا کدام بخش بزرگتر یا برجسته تر باشد. این جایی است که محاسبه نسبت طلایی به مرحله اجرا می رسد.

از نظر شبکه چیدمان به طور کلی ، مستطیل طلایی و نسبت طلایی هر یک از طراحان وب راهنما را با انتخاب:

• نحوه تقسیم فضای موجود در صفحه (هم به صورت افقی و هم به صورت عمودی)
• از چند ستون استفاده می شود
• ستونهای گسترده باید چقدر باشد
• چه مقدار فضای برای اضافه کردن بین ستون ها
• نسبت ماژول ها و عناصر مختلف شبکه طرح بندی

این راهنمایی عوامل بسیاری را در نظر می گیرد ، مانند عرض صفحه ، اندازه محتوا و همچنین تعداد و اندازه ماژول هایی که محتوا در یک شبکه به آن نیاز دارد. از نظر دسترسی ، نسبت طلایی چشم کاربران را به نقاط خاص یا مناطقی روی صفحه نمایش سوق می دهد ، این همان چیزی است که طراحان می خواهند پس از تعریف و استفاده از سلسله مراتب اطلاعاتی از محتوای و طراحی خود ، تحت تأثیر قرار بگیرند.< Pan> این جایی است که این سؤال است که چگونه باید تصمیم بگیرید که چگونه بخش قهرمان را از این نظر تقسیم کنید که باید بخش بزرگتر یا برجسته تر باشد. این جایی است که محاسبه نسبت طلایی به مرحله اجرا می رسد.