Підвищуємо ефективність веб-дизайну за допомогою Золотого Перерізу

33

Від автора: Золотий Перетин повсюдно використовується вразличного роду графіку, особливо, щоб збалансувати контент з великими обсягами тексту. Воно допомагає дизайнерам створити структуру і направити очі користувачів в необхідні місця. Нижче представлений список веб-сайтів з прикладами Золотого Перерізу, ви зможете наочно оцінити, як дизайнери використовують даний прийом!

Що таке Золотий Перетин?

Золотий Переріз являє собою математичне співвідношення, знайдене в природі, яке використовується в класичній теорії дизайну для балансування композиції. Приблизно співвідношення дорівнює 1.6180, також відоме під назвами «Золота Середина», «Божественна Пропорція», а також позначається грецькою буквою Фі «ϕ».

«Золотий прямокутник» це фігура з довгою стороною, рівною короткої помноженої на 1.6180. Приміром, у нас є div зі стороною в 300px, значить, інша сторона буде дорівнювати 300*1.6180≈ 485px. Про такому блоці можна сказати, що це золотий прямокутник.

Якщо з одного боку від фігури відсікти ідеальний квадрат, то з іншого буде ще один золотий прямокутник.

Ви можете створювати все менші і менші прямокутники, ще і ще раз, як на зображенні нижче:

Числа Фібоначчі

Числа Фібоначчі являють собою схожу закономірність, але не зовсім таку ж. Числа Фібоначчі утворюються шляхом додавання двох попередніх. Наприклад: 0, 1, 1, 2, 3, 5, 8

Якщо взяти ідеальний квадрат і додати до нього такий же, то ми отримаємо прямокутник:

Продовжуйте додавати квадрати зі стороною, що дорівнює більшій стороні прямокутника

Потім ми додамо ще один квадрат, але вже зі стороною, рівною довжині більшої сторони прямокутника:

Потім ще раз і ще раз:

Так може тривати нескінченно з тим же ефектом, як з Золотим Прямокутником. Але в цей раз фігура збільшується, а не зменшується. Обидва методу, числа Фібоначчі і Золотий Перетин, дають однакові привабливі пропорції.

А тепер давайте проаналізуємо кілька веб-сайтів на предмет цих пропорцій.

Приклад #1: YStudio

«YourLocalStudio» це студія дизайну та розробки, розташована в Копенгагені, Данія. Вони займаються візуальними концепціями будь-якої форми, покращуючи загальне відчуття від дизайну.

Як вони використовують золотий перетин

На веб-сайті студії золотий перетин використовується на двох з трьох сторінках. Домашня сторінка являє собою концептуальний огляд основних складових роботи. Тим не менш, при прокручуванні сторінки ви можете помітити в дизайні сайту суміш звичайних шаблонів з прямокутними формами.

Чому це так ефективно

Хочете виділитися з натовпу? Yourlocalstudio (YLS) саме так і зробили, застосувавши золотий перетин в дизайні свого сайту. Дизайн виглядає досить прогресивно, а також містить певну систему grid’ів. Можна сперечатися і говорити, що зараз всі сайти схожі на bootstrap… але варто почекати зовсім трохи, як з’являються все нові і нові сайти, що привертають увагу до себе все більшою динамікою макетів.

Приклад #2: Mashable

Про сайт?

Mashable – новинний портал, джерело інформації, знань і ресурсів для «онлайн покоління».

Як він використовує золотий перетин

Для демонстрації того, як Mashable використовує в своїх цілях золотий перетин я скористався тестом UX Triggers. Макет сайту гнучкий, заголовки новин розташовані зліва, а посилання на докладний опис праворуч, все це розділене на осередки сітки.

Чому це так ефективно?

Золотий перетин на цьому сайті ефективно, так як сайт вкрай завантажений інформацією, а золотий перетин додає легкості. Схожі сайти можуть виглядати набагато більш щільно завантаженими контентом при використанні звичайних grid’ів в шаблоні. Однак Mashable доводить, що Золотий Перетин може бути вкрай ефективно, навіть якщо воно не помітно.

Приклад #3: Jackson&Kent

Про що веб-сайт?

Jackson&Kent – французьке агентство веб-продукції. Вони спеціалізуються на таких послугах, як HTML5, CSS3, Drupal, WordPress, PHP/MySQL, Flash і т. д.

Як вони використовують золотий перетин

На скріншоті вище видно, як щедро агентство показує свої попередні роботи. Також на макеті можна помітити блок «Про компанії» і меню в центрі екрану. Кнопка зв’язку нижче також використовує золотий перетин в загальній системі grid’ів.

Чому це так ефективно

Даний приклад закликає вас пройтися по сайту в горизонтальній площині. Подання контенту у вигляді блоків різних розмірів робить його набагато привабливіше. На горизонтальній осі представлена стрічка з навігацією по сторінках для зручності перегляду сайту, як на настільних комп’ютерах, так і на планшетах. Це не тільки інноваційний спосіб відображення вмісту, а також абсолютно новий приклад подання користувальницького інтерфейсу.

Висновок

Золотий Перетин природним чином спрямовує увагу читача на певні точки екрану. Дана концепція допоможе вам у розташуванні контенту і більш ефективному використанні ієрархії. Поєднання макетів, шрифтів, кольорів і загальних принципів побудови золотого перерізу допоможе підняти ваші проекти на наступний рівень.