Від автора: Золотий Перетин повсюдно використовується вразличного роду графіку, особливо, щоб збалансувати контент з великими обсягами тексту. Воно допомагає дизайнерам створити структуру і направити очі користувачів в необхідні місця. Нижче представлений список веб-сайтів з прикладами Золотого Перерізу, ви зможете наочно оцінити, як дизайнери використовують даний прийом!
Що таке Золотий Перетин?
Золотий Переріз являє собою математичне співвідношення, знайдене в природі, яке використовується в класичній теорії дизайну для балансування композиції. Приблизно співвідношення дорівнює 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’ів.
Чому це так ефективно
Даний приклад закликає вас пройтися по сайту в горизонтальній площині. Подання контенту у вигляді блоків різних розмірів робить його набагато привабливіше. На горизонтальній осі представлена стрічка з навігацією по сторінках для зручності перегляду сайту, як на настільних комп’ютерах, так і на планшетах. Це не тільки інноваційний спосіб відображення вмісту, а також абсолютно новий приклад подання користувальницького інтерфейсу.
Висновок
Золотий Перетин природним чином спрямовує увагу читача на певні точки екрану. Дана концепція допоможе вам у розташуванні контенту і більш ефективному використанні ієрархії. Поєднання макетів, шрифтів, кольорів і загальних принципів побудови золотого перерізу допоможе підняти ваші проекти на наступний рівень.
