Математика красивая. Звучит немного странновато, да? Когда я начинал заниматься дизайном, я был уверен, что математика – это что-то такое строгое и скучное. Но вы будете поражены, если узнаете, что в наиболее привлекательных дизайне, произведениях искусства, объектах и даже людях есть математика. Особенно, Золотое Сечение, или так называемая божественная пропорция, обозначаемая греческой буквой Φ (фи). В этом уроке я расскажу вам, как вы можете использовать Золотое Сечение в дизайне сайтов.
- Анатомия веб-страницы
Элементы веб-страницы подобны человеческим органам, они жизненно важны для ее нормального функционирования и визуальной привлекательности.
Выше вам представлены основные элементы веб-страницы. Есть множество разных вариантов их компоновки, но данная структура используется в Вебе наиболее часто.
2. Контейнеры
Все веб-страницы используют блоки по одной простой причине: включить туда какие-то элементы, однако, есть разные способы сделать это. К примеру, теги div (тег HTML, определяет часть документа HTML и используется для группировки блочных элементов и придания им стилей – прим.пер.) или body (тег HTML, предназначенный для хранения содержания веб-страницы – прим.пер.), оба широко используются. Раньше использовались даже таблицы (не используйте таблицы, это устаревший метод). Контейнеры, как внешние стены твоего дома, в которых располагаются спальня, кухня, гостиная и так далее.
- Типы контейнеров:
- Адаптивные (растягиваются в зависимости от размера окна)
- Фиксированные (имеют заданный размер, не изменяющийся, какого бы размера ни было окно)
3. Шапка
Header нельзя назвать специфическим элементом, хотя некоторые так не считают. Шапка располагается в верхней части веб-страницы, где располагаются логотип, навигация, слоган и тому подобное. Многие люди предпочитают использовать для нее тэг div, это облегчает стили страницы, элемент разделения и/или компоновки. Header – контейнер, то есть, как упоминалось раньше, есть два варианта: сделать его адаптивным или фиксированного размера.
4. Логотип
Твой логотип – это твоя особенность и брендинг. Логотип обычно располагают в шапке, слева. Мы читаем слева направо, сверху вниз, таким образом, твой логотип – первое, что увидят посетители веб-страницы.
5. Навигация
Навигация – один из важнейших элементов веб-страницы; пользователям необходима навигация для того, чтобы пользоваться сайтом. Навигацию должно быть легко найти и использовать, именно потому ее размещают в шапке или хотя бы в верхней части сайта. Иногда на сложных сайтах, где много контента, используются оба типа навигации.
Типы навигации:
- Горизонтальная (набор ссылок, располагающихся на одной линии, обычно воспринимается как «навигация».
- Вертикальная (набор ссылок, располагающихся в некий вертикальный блок, обычно воспринимается как «меню»).
6. Основной контент
Каждому известно, или должно быть известно, что контент – это «король». Когда пользователь заходит на твою страницу, это то, на что он посмотрит в первую очередь. Контент должен фиксировать на себе внимание, чтобы пользователь быстро нашел нужную информацию.
7. Сайдбар
Sidebar – элемент, где размещается второстепенная информация, к примеру: реклама, поиск, социальные кнопки (RSS, Twitter, Email и т.п.), контакты и так далее. Этот элемент необязателен, хотя многие сайты его используют. Он чаще всего выровнен по левому краю, хотя иногда по правому или по обоим сторонам, и такой длины, чтобы не отвлекать пользователя от основного контента. Для сайтов, использующих горизонтальную и вертикальную навигацию, сайдбар часто располагают с вертикальной навигацией.
8. Футер
Футер используется для того, что показать пользователю, что страница закончилась. Как и шапка, футер – элемент, вмещающий в себя определенную информацию. В футере в первую очередь располагают авторское право, юридическую и контактную информацию. Хороший тон в футере дублировать ссылки на наиболее важные разделы сайта (дублировать меню), иногда футер также используют как возможность упомянуть какую-либо важную информацию или различные соответствующие материалы.
9. Белое пространство
Это те области страницы, которые не заняты ни контентом, ни картинками. У вас скорей всего появится желание заполнить все пустое пространство чем-либо, насколько это возможно, но не делайте этого! Для хорошего дизайна, белое пространство – такая же часть страницы, как и контент. Например, на сайте Nettuts белое пространство используется очень эффективно. Пустое пространство помогает пользователю ориентироваться на странице, разделяет контент, создает некий баланс на странице.
Таким образом, мы обсудили все, что касается структуры веб-страницы. Теперь давайте рассмотрим, как с элементами соотносится золотое сечение.
10. Золотое сечение и сетки
Помните, раньше я сказал, что математика красивая? Золотое сечение делает вещи привлекательными. На протяжении долгих веков архитекторы, дизайнеры, художники преднамеренно или нет использовали в своих работах Золотое Сечение, и это делало их эстетически привлекательными. Что это за магическое число? 1,62 (на самом деле 1,618). Я не буду вдаваться в его происхождение, но расскажу, как его использовать.
Использовать золотое сечение очень просто. Допустим, вы хотите рассчитать ширину основного контента и сайдбара. Вам нужно взять общую ширину области контента (для примера мы будем использовать 900px) и разделить на 1,62. Итак, разделим 900px на 1,62, получаем 555,55px. Такая точность нам ни к чему, округляем до 555px. Теперь вы знаете, что на основную часть уйдет 555px, а боковая панель – 345px. Просто, не правда ли?
Но постойте! Можно сделать еще интереснее. Можно также применять божественную пропорцию в соотношении ширины и высоты. Это делает различные элементы эстетически привлекательны.
11.Сетки
Если вы похожи на большинство людей, то вам не захочется доставать калькулятор каждый раз, когда вы захотите применить золотое сечение. Чтобы упростить процесс, используйте сетки, вам только нужно разделить высоту или/и ширину на три.
Трети можно еще раз разделить на три, для большей детализации. Если вы читали статью «A Close Look At the Blueprint CSS Framework», то вы знаете, что фреймворки Blueprint CSS используют детальную сетку. Мало того, что сетка делает проектирование простым и быстрым, но и создает эстетичный макет. Если вы еще не используете сетки, то стоит попробовать. Вы можете скачать сетку с сайтаhttps://960.gs.
Как видите, Tut’s+ строго придерживается Золотого Сечения. Верхняя треть страницы разделяется на трети, секция заголовка более детально также разбивается на трети, близко к божественной пропорции. Не удивительно, что дизайн выглядит таким привлекательным.
Если вы новичок в дизайне, я настоятельно рекомендую вам найти популярные сайты и поискать на них сетки и Золотое Сечение, оцените расположение элементов и их соотношение. Понадобится немного времени, чтобы научиться применять сетки и золотую пропорцию в своих макетах.
Источник: https://webdesign.tutsplus.com/tutorials/the-golden-ratio-in-web-design—net-2272
Перевод: команда webdesign2.ru
