2018-09-28 0 коментарів

Як використовувати золотий перетин у веб-дизайні та логотипах?

вмісту

Для розробки ефективного веб-дизайну дизайнери використовують різноманітні методики та процедури від мистецтвознавства до базових математичних теорій. Одним з найпоширеніших інструментів для створення гарного дизайну є застосування математичного співвідношення, золотого перерізу. Але в чому сенс його використання і як ви можете застосувати його на своєму веб-сайті? (18.06.2020 - Додано новий розділ: Де ви можете використовувати золотий перетин у веб-дизайні?)

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

Що таке золотий перетин?

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

Це співвідношення золотого перерізу, яке є особливим, математичним співвідношенням між елементами різного розміру і яке здається дуже приємним для людського ока. Справа в тому, що менша частина пропорційна більшій частині, ніж більша частина цілому. Це співвідношення можна охарактеризувати як 1: 1,618033987, і, як правило, воно представлене оболонковою спіраллю в Інтернеті, яку ви, можливо, бачили вже багато разів.

використовувати

Але золотий перетин означає не лише форму спіралі, оскільки його можна представити іншими фігурами: на основі кола або трикутника. Відома спіраль Фібоначчі складається з прямокутників. Пов’язана послідовність чисел дорівнює 0,1,1,2,3,5,8,13,21,34, 55 тощо, коли наступне значення завжди додається додаванням двох останніх чисел.

Виходячи з цього, як створити ідеальну асиметрію? Таким чином, якщо взяти довжину меншого елемента, а потім помножити його на 1,618, ви отримаєте ідеальну довжину більшого елемента. Людство знало цю пропорцію протягом тисяч років, тому ми також можемо зіткнутися із використанням золотого перерізу в старовинних будівлях. Сьогодні він використовується багатьма в архітектурі, а також у мистецтві, фотографії та дизайні.

Золотий переріз у веб-дизайні

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

Завдяки золотому перетину можна створювати логотипи, піктограми та ілюстрації, які гармонійно поєднуються з іншими елементами веб-сайту завдяки своєму оптимальному розміру порівняно з іншими. Використання золотого перетину може зробити логотип компанії привабливим, що також важливо, оскільки логотип має виражати суть компанії.

Де ви можете використовувати золотий перетин у веб-дизайні?

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

При розробці макета

Це вже зрозуміло з прикладів вище. На практиці виглядає так, що якщо, скажімо, ви хочете знати ширину основного стовпця вмісту та бічної панелі, ви берете загальну ширину в пікселях, а потім ділите на 1,62. Це дає вам ширину основного стовпця вмісту.

Для змісту та візуальної ієрархії

Як ви вже бачили вище, ви повинні враховувати те саме при структуруванні вмісту, що надає вам правильну візуальну ієрархію.

Для логотипів

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

На типографіці

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

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

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

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

Тому що ви можете допомогти із золотим перетином вашого веб-сайту?

Математичні обчислення можуть бути нудними та трудомісткими, тож питання в тому, чи варто взагалі користуватися цим? Що і як гравіювання на золоті може додати до вашого дизайну?

Збалансований вміст

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

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

Золотий перетин чудово використовувати при створенні базової сітки веб-сторінок.

Ефективна візуальна ієрархія

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

Потужні друкарські рівні

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

Але в Інтернеті є також калькулятор для типографіки, який визначає висоту рядків і ширину стовпця на основі типу та розміру шрифту.

Приємніше перше враження

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

Правий пробіл

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

Золотий перетин у дизайні логотипу

Як і на вашому веб-сайті, ви повинні використовувати золотий перетин на своєму логотипі. Раніше цим зазвичай користувались лише більші та відомі бренди, але сьогодні все більше дизайнерів мають досвід застосування цієї техніки. Але як його можна використовувати з логотипом? В одному зі своїх дописів у блозі Бранислав Вуяшкович представив це добре на основі відомих логотипів.

Наприклад, якщо ви подивитесь на логотип National Geographic, а потім виміряєте в ньому сторони прямокутника, то виявиться, що їх співвідношення відповідає відношенню золотого перетину.

Якщо ви подивитесь на логотип Toyota, ви побачите три еліпси: один утворює рамку, в яку буде намальований розкладений і стоячий еліпс, малюючи букву Т. Однак справа не така проста. Якщо виміряти кожен еліпс, то виявиться, що вони використовують співвідношення золота.

Якщо це можливо, ще простіше продемонструвати застосування коефіцієнта при АТ, оскільки кожне коло приймає розмір, що відповідає співвідношенню.

Але також варто поглянути на логотип Apple, який по праву славиться своїм дизайном, де дизайн кривих яблук також не був виставлений на волю випадку. Пропорції кожного кола, що дає викривлення яблука, дорівнюють його золотому перерізу.

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

Кріштіан Немет

В основному я пишу. Переважно блог та соціальні медіа, але в більш широкому плані: Інтернет-маркетинг, тому він має багато SEO, вільний AdWords, веб-дизайн та багато іншого, що підходить.