IMpro
Санкт-Петербург, ул. Матроса Железняка 57

Золотое сечение в дизайне

golden
Золотое сечение в дизайне
IMpro
0
3 926

Прежде всего, что такое Золотое сечение?

По материалам Википедии:

Золотое сечение (золотая пропорция, деление в крайнем и среднем отношении, гармоническое деление, число Фидия, ?) — деление отрезка на части в таком соотношении, при котором большая часть относится к меньшей, как сумма к большей. Например, деление отрезка АС на две части таким образом, что большая его часть АВ относится к меньшей ВС так, как весь отрезок АС относится к АВ (т. е. |АВ| / |ВС| = |АС| / |АВ|).

Эту пропорцию принято обозначать греческой буквой ? (встречается также обозначение ?) и она равна 1.618…

d34a669cd2aa7f6b8d1297d440123702

В дошедшей до нас античной литературе золотое сечение впервые встречается в «Началах» Евклида (3 в. до н.э.). Термин «золотое сечение» был введён гораздо позднее Леонардо да Винчи, который использовал золотое сечение как пропорции «идеального человеческого тела».

fe83d0d5402c4811aad42a4707ef9cae

Например, пропорции мужского тела колеблются в пределах отношения 13 : 8 = 1,625 и немного ближе подходят к золотому сечению, чем пропорции женского тела, выражающиеся в соотношении 8 : 5 = 1,6.

Золотое сечение можно найти практически везде в живой природе.

3b8e2ec1d7a35c0aed9b3514057beef1

Можно увидеть его и в самых удачных творениях человеческих рук — принципы золотого сечения легли в основу композиционного построения многих произведений архитектуры, живописи, даже в поэзии.

e78a4c419f099bbd06ceaf5de4b4f8f3

Давайте проведем эксперимент: какой прямоугольник из ниже расположенных, с вашей точки зрения, имеет идеальные пропорции?

fe9f7b39be19b0da1e3ffac7a018f7cf

По результатам опросов, большинство людей признает самым гармоничным прямоугольник под номером 2. Именно он построен в соответствии с правилом «золотого сечения».

Вы можете спросить, зачем дизайнеру эта математика, и какой в ней практический смысл? А смысл есть. Например, отношение сторон у iPod Shuffle 1.59, iPod Classic 1.67, а у iPhone4 1.7 — объем продаж за первые 4 дня торговли превысил 1 миллион 700 тысяч штук. Даже логотип Apple построен по принципам золотого сечения. 2f4d63687a71ee9078948c19382e7795

Одной из главных задач эффективного дизайна в Web — это ясность и интуитивность. А также концентрация внимания пользователя на нужных местах страницы. Как этого добиваются?

Существует множество путей, например, использовать сетки, можно предпочесть самые элементарные решения или сосредоточится на простоте и удобстве.

Но в любом случае, Вы должны быть уверены, что у пользователей присутствует ощущение баланса, порядка, гармонии и комфорта. Как раз в этом случае применение золотого сечения становится важным этапом при разработке дизайна web-страницы. Итак, принцип золотого сечения на практике в Web поможет нам определить, какого размера должны быть элементы на странице, в каком месте и на каком расстоянии они должны располагаться друг от друга, чтобы не нарушать баланс, чтобы наш сайт выглядел гармоничным.

Воспользуемся правилом третей, основанном на применении золотого сечения. Это правило позволит нам вычислить центры внимания на странице. Для этого поделим страницу на три части по горизонтали и вертикали.

ed50dae5eec42d825f08dcfb124ec8ad

На пересечении линий находятся 4 важные точки, которые можно использовать для выделения основных деталей макета сайта.

Как правило, не стоит использовать сразу все четыре точки, но одну или две — обязательно.

Какую то важную деталь лучше поместить в левый верхний угол, т. к. пользователи начинают просматривать сайт именно оттуда — логотип, если у нас имиджевый сайт или контактную информацию, если сайт продающий.

Навигационное меню можем расположить на первой горизонтальной линии. Еще один-два важных элемента располагаем на точках пересечения горизонтальных и вертикальных линий.

Что нам дало такое расположение блоков?

Мы поместили наиболее важные вещи в местах наибольшего внимания пользователя. При таком расположение элементов, наш сайт становится более удобным и более структурированным для просмотра.

Что это дает нам, как владельцам сайта?

Например, дополнительный доход, если мы разместим рекламные блоки в тех местах, где их с большей вероятностью увидят посетители сайта.

2/3 страницы займет центральная колонка и 1/3 отведем под сайдбар.

3c73df2a2771c60861739a338b3ec14d

Еще один пример: создадим трехколоночный шаблон.

Разделим по предыдущему принципу страницу на две колонки.

А дальше центральную колонку опять поделим вертикальными линиями на три равные части, первая из которых будет сайдбаром, а две остальные — центральной частью.

e0cd35882e37b4acb9865419e40a12b3

В первом сайдбаре можно расположить основное меню сайта, содержащее самые важные ссылки. Их посетитель сайта увидит в первую очередь, (поскольку он привык читать текст слева направо), а всякую дополнительную информацию поместить во второй сайдбар.

В некоторых случаях применение Золотого сечения и Правила третей может значительно улучшить взаимосвязь вашего проекта с посетителями.

При пропорции 1:1.62, ваш сайт становится более удобным и более структурированным для просмотра. И это работает не только в Web-дизайне.

Автор: Максим, Менеджер интернет-проектов

Комментарии

Полезная рассылка

Раз в неделю мы будем отправлять вам экспертные видеоуроки и статьи по интернет-маркетингу. Никакого спама.

© 2016 IMPRO Международная школа Интернет-маркетинга №1 в Петербурге