Золотое сечение в дизайне
Прежде всего, что такое Золотое сечение?
По материалам Википедии:
Золотое сечение (золотая пропорция, деление в крайнем и среднем отношении, гармоническое деление, число Фидия, ?) — деление отрезка на части в таком соотношении, при котором большая часть относится к меньшей, как сумма к большей. Например, деление отрезка АС на две части таким образом, что большая его часть АВ относится к меньшей ВС так, как весь отрезок АС относится к АВ (т. е. |АВ| / |ВС| = |АС| / |АВ|).
Эту пропорцию принято обозначать греческой буквой ? (встречается также обозначение ?) и она равна 1.618…
В дошедшей до нас античной литературе золотое сечение впервые встречается в «Началах» Евклида (3 в. до н.э.). Термин «золотое сечение» был введён гораздо позднее Леонардо да Винчи, который использовал золотое сечение как пропорции «идеального человеческого тела».
Например, пропорции мужского тела колеблются в пределах отношения 13 : 8 = 1,625 и немного ближе подходят к золотому сечению, чем пропорции женского тела, выражающиеся в соотношении 8 : 5 = 1,6.
Например, пропорции мужского тела колеблются в пределах отношения 13 : 8 = 1,625 и немного ближе подходят к золотому сечению, чем пропорции женского тела, выражающиеся в соотношении 8 : 5 = 1,6.
Золотое сечение можно найти практически везде в живой природе.
Рис. 1 Оценка эффективности SMM из отчета Яндекс.Метрики.
Можно увидеть его и в самых удачных творениях человеческих рук — принципы золотого сечения легли в основу композиционного построения многих произведений архитектуры, живописи, даже в поэзии.
Рис. 2 Количество отправленных и полученных комментариев помогает нам оценить качество контента.
Давайте проведем эксперимент: какой прямоугольник из ниже расположенных, с вашей точки зрения, имеет идеальные пропорции?
Рис. 3 Количество пользователей и их реакция на контент.
По результатам опросов, большинство людей признает самым гармоничным прямоугольник под номером 2. Именно он построен в соответствии с правилом «золотого сечения».
Вы можете спросить, зачем дизайнеру эта математика, и какой в ней практический смысл? А смысл есть. Например, отношение сторон у iPod Shuffle 1.59, iPod Classic 1.67, а у iPhone4 1.7 — объем продаж за первые 4 дня торговли превысил 1 миллион 700 тысяч штук. Даже логотип Apple построен по принципам золотого сечения.
Вы можете спросить, зачем дизайнеру эта математика, и какой в ней практический смысл? А смысл есть. Например, отношение сторон у iPod Shuffle 1.59, iPod Classic 1.67, а у iPhone4 1.7 — объем продаж за первые 4 дня торговли превысил 1 миллион 700 тысяч штук. Даже логотип Apple построен по принципам золотого сечения.
Рис. 4 Уровень вовлеченности пользователей на Facebook.
Одной из главных задач эффективного дизайна в Web — это ясность и интуитивность. А также концентрация внимания пользователя на нужных местах страницы. Как этого добиваются?
Существует множество путей, например, использовать сетки, можно предпочесть самые элементарные решения или сосредоточится на простоте и удобстве.
Но в любом случае, Вы должны быть уверены, что у пользователей присутствует ощущение баланса, порядка, гармонии и комфорта. Как раз в этом случае применение золотого сечения становится важным этапом при разработке дизайна web-страницы. Итак, принцип золотого сечения на практике в Web поможет нам определить, какого размера должны быть элементы на странице, в каком месте и на каком расстоянии они должны располагаться друг от друга, чтобы не нарушать баланс, чтобы наш сайт выглядел гармоничным.
Воспользуемся правилом третей, основанном на применении золотого сечения. Это правило позволит нам вычислить центры внимания на странице. Для этого поделим страницу на три части по горизонтали и вертикали.
Существует множество путей, например, использовать сетки, можно предпочесть самые элементарные решения или сосредоточится на простоте и удобстве.
Но в любом случае, Вы должны быть уверены, что у пользователей присутствует ощущение баланса, порядка, гармонии и комфорта. Как раз в этом случае применение золотого сечения становится важным этапом при разработке дизайна web-страницы. Итак, принцип золотого сечения на практике в Web поможет нам определить, какого размера должны быть элементы на странице, в каком месте и на каком расстоянии они должны располагаться друг от друга, чтобы не нарушать баланс, чтобы наш сайт выглядел гармоничным.
Воспользуемся правилом третей, основанном на применении золотого сечения. Это правило позволит нам вычислить центры внимания на странице. Для этого поделим страницу на три части по горизонтали и вертикали.
Рис. 5 Конверсия для этого проекта оценивается в количестве и частоте вопросов, заданных пользователями врачам клиники.
На пересечении линий находятся 4 важные точки, которые можно использовать для выделения основных деталей макета сайта.
Как правило, не стоит использовать сразу все четыре точки, но одну или две — обязательно.
Какую то важную деталь лучше поместить в левый верхний угол, т. к. пользователи начинают просматривать сайт именно оттуда — логотип, если у нас имиджевый сайт или контактную информацию, если сайт продающий.
Навигационное меню можем расположить на первой горизонтальной линии. Еще один-два важных элемента располагаем на точках пересечения горизонтальных и вертикальных линий.
Что нам дало такое расположение блоков?
Мы поместили наиболее важные вещи в местах наибольшего внимания пользователя. При таком расположение элементов, наш сайт становится более удобным и более структурированным для просмотра.
Что это дает нам, как владельцам сайта?
Например, дополнительный доход, если мы разместим рекламные блоки в тех местах, где их с большей вероятностью увидят посетители сайта.
2/3 страницы займет центральная колонка и 1/3 отведем под сайдбар.
Как правило, не стоит использовать сразу все четыре точки, но одну или две — обязательно.
Какую то важную деталь лучше поместить в левый верхний угол, т. к. пользователи начинают просматривать сайт именно оттуда — логотип, если у нас имиджевый сайт или контактную информацию, если сайт продающий.
Навигационное меню можем расположить на первой горизонтальной линии. Еще один-два важных элемента располагаем на точках пересечения горизонтальных и вертикальных линий.
Что нам дало такое расположение блоков?
Мы поместили наиболее важные вещи в местах наибольшего внимания пользователя. При таком расположение элементов, наш сайт становится более удобным и более структурированным для просмотра.
Что это дает нам, как владельцам сайта?
Например, дополнительный доход, если мы разместим рекламные блоки в тех местах, где их с большей вероятностью увидят посетители сайта.
2/3 страницы займет центральная колонка и 1/3 отведем под сайдбар.
Еще один пример: создадим трехколоночный шаблон.
Разделим по предыдущему принципу страницу на две колонки.
А дальше центральную колонку опять поделим вертикальными линиями на три равные части, первая из которых будет сайдбаром, а две остальные — центральной частью.
Разделим по предыдущему принципу страницу на две колонки.
А дальше центральную колонку опять поделим вертикальными линиями на три равные части, первая из которых будет сайдбаром, а две остальные — центральной частью.
В первом сайдбаре можно расположить основное меню сайта, содержащее самые важные ссылки. Их посетитель сайта увидит в первую очередь, (поскольку он привык читать текст слева направо), а всякую дополнительную информацию поместить во второй сайдбар.
В некоторых случаях применение Золотого сечения и Правила третей может значительно улучшить взаимосвязь вашего проекта с посетителями.
При пропорции 1:1.62, ваш сайт становится более удобным и более структурированным для просмотра. И это работает не только в Web-дизайне.
Автор: Максим, Менеджер интернет-проектов
В некоторых случаях применение Золотого сечения и Правила третей может значительно улучшить взаимосвязь вашего проекта с посетителями.
При пропорции 1:1.62, ваш сайт становится более удобным и более структурированным для просмотра. И это работает не только в Web-дизайне.
Автор: Максим, Менеджер интернет-проектов
Еще публикации
из мира маркетинга
УЧИМ САМОСТОЯТЕЛЬНО УПРАВЛЯТЬ ПРОЕКТОМ
Смотреть все