Застосування Золотого співвідношення в сучасних конструкціях

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

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

Золотий Що?

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

Виражається як рівняння, коли a більше, ніж b, (a + b) ділиться на a дорівнює a ділиться на b (просто подивіться на зображення нижче), яке дорівнює приблизно 1.618033987. Ця цифра, часто представлена грецьким символом "phi", є Золоте радіо.

(Джерело зображення: mathsisfun.com)

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

(Джерело зображення: creativeautomaton.com)

Щоб побудувати золотий прямокутник, виберіть число, яке буде довжиною короткої сторони прямокутника. Для аргументу, скажімо 500 пікселів. Помножте це на 1.618. Результат - 809 пікселів - довжина довгої сторони прямокутника. Таким чином, прямокутник розміром 500 пікселів на 809 пікселів - це золотий прямокутник. Він підкоряється золотому співвідношенню.

Природна краса

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

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

(Джерело зображення: in2visualdesign)

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

Божественна композиція

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

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

Для сіток / блоків

Квадрат, створений лініями, буде вашим блоком вмісту. Менший прямокутник був би бічною або навігаційною панеллю. Після того як ви зрозуміли розмір вашого прямокутника, з'ясуйте, наскільки широкою має бути ваша навігаційна панель, це проста математика.

У цьому прикладі ми скажемо, що ваш прямокутник є 525 пікселів 850 пікселів.
525 є a і 850 є (a + b), і b буде шириною вашої бічної панелі.
Знайти b, ми просто віднімаємо (a + b), 325.
Тому ширина вашої бічної панелі становить 325.

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

Для тексту

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

Припустимо, що ваш контекстний текст має розмір 12.
Помножте 12 с 1.618, золоте співвідношення, і ви отримаєте 19.416.
Розмір тексту заголовка 19 або 20 буде тісно слідувати золотому співвідношенню.

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

Grid Work: Правило третин

Якщо математика не є вашою чашкою чаю, поняття золотого співвідношення можна спростити. The правило третини керує розміщенням точок інтересу в сцені. Розділіть будь-яке зображення на третини як горизонтально, так і вертикально. Ви отримаєте 9 сіток.

(Джерело зображення: digital-photography-school.com)

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

(Джерело зображення: net.tutsplus.com)

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

Стовпці та розміри шрифтів: послідовності Фібоначчі

Інший простий інструмент для веб-дизайну, пов'язаний із золотою пропорцією Числа Фібоначчі. Послідовність Фібоначчі починається з 0 і 1. Попередні два числа додаються разом для отримання наступного числа в послідовності: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ... і так далі.

Мала математика говорить нам, що взаємозв'язок між послідовними послідовними номерами Фібоначчі вражаюче наближається до золотого співвідношення - поділіть будь-яке число в послідовності на число перед ним, і ви отримаєте - ви вже здогадалися - 1.618.

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

(Джерело зображення: Wikipedia.org)

Золоті спіралі та групування вмісту

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

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

(Джерело зображення: fabiovisentin.com)

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

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

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

Більше читання:

Застосування Золотого співвідношення до веб-макетів і об'єктів

Примітка редактора: Цей пост написано Кріс Пентаго для Hongkiat.com. Кріс - досвідчений веб-розробник, дизайнер і інтернет-маркетолог, який зацікавлений у ключових технологіях, щоб зробити ваш онлайн-бізнес виконаним..