Математика прекрасна. Звучит немного странно? Я был в этом уверен, когда только начал заниматься дизайном. Математика – это так скучно. Вы можете быть удивлены, обнаружив, что самые красивые рисунки, произведения искусства, предметы и даже люди имеют что-то общее в математике. В частности, золотое сечение, также известное как божественное сечение, обозначаемое греческой буквой Φ (фи). В этом уроке будет рассмотрен макет веб-сайта и способы его разделения на золотые сечения.
Скелет веб-страницы
Это основные элементы веб-страниц. Существует много разных способов их организации, но этот макет, пожалуй, используется наиболее часто.
Контейнер
Все веб-страницы используют контейнер главным образом для одной и той же цели: хранить некоторые элементы страницы. Однако этот метод реализован по-разному. Например, тег body или наиболее часто используемый элемент div. Даже таблица, которая широко использовалась в прошлом (не используйте таблицу в качестве контейнера, это неправильный метод). Думайте о контейнере как о внешней стене вашего дома, в которой расположены спальни, кухня, гостиная и т. д.
Тип контейнера:
Жидкость: Заполните в соответствии с шириной браузера.
Исправлено: указанная ширина не будет меняться в зависимости от ширины браузера.
Заголовок
Заголовок на самом деле не является конкретным элементом, хотя некоторые утверждают, что это так. Он больше используется на верхнем уровне веб-страницы, где вы размещаете свой логотип, панель навигации и слоган. Многие люди предпочитают заключать эти элементы в блок div, чтобы облегчить разделение стиля страницы и содержимого. Заголовок будет рассматриваться как контейнер, поэтому у него есть два типа опций: жидкий или фиксированный, упомянутый выше.
Логотип
Ваш логотип — это ваша индивидуальность и бренд. Наиболее часто используемый метод — размещение логотипа в верхнем левом углу заголовка. Мы привыкли читать слева направо и сверху вниз, поэтому ваш журнал должен быть размещен там, где посетители смогут увидеть его с первого взгляда.
Навигация
Навигация по страницам — один из наиболее важных элементов; она нужна посетителям, чтобы использовать ваш сайт. Его должно быть легко найти и использовать, поэтому большинство людей размещают его в разделе заголовка, по крайней мере, в верхней части страницы.
тип навигации:
Горизонтально: горизонтальное отображение, называемое «навигация».
Вертикально: вертикальное отображение, называемое «меню».
Основное содержание
Каждый (должен) знать, что контент – это король! Когда люди посещают ваш сайт, это главный элемент, который они хотят видеть. Он должен быть центром веб-страницы, чтобы посетители могли быстро найти то, что ищут.
Боковая панель
Боковая панель — это элемент, в котором размещается ваш вторичный контент, например некоторые рекламные объявления, поиск по сайту, ссылки на подписку (RSS, Twitter, электронная почта и т. д.), способы связи и т. д. Этот элемент не является обязательным, хотя многие сайты его используют. Чаще всего он размещается справа, но вы также можете разместить его слева или с обеих сторон, если это не мешает просмотру основного контента. Веб-сайты используют горизонтальную или вертикальную навигацию, а боковые панели часто используют вертикальную навигацию.
Нижний колонтитул
В конце веб-страницы всегда есть нижний колонтитул, сообщающий посетителю, что он достиг конца вашей веб-страницы. Как и заголовок, нижний колонтитул не является особым элементом. Включите авторские права, юридическое уведомление и основную контактную информацию в нижний колонтитул. Рекомендуется включить некоторые важные ссылки, такие как домашняя страница, страница контактов и т. д. Некоторые веб-сайты используют эту область для предоставления соответствующих материалов или другой важной информации.
«Пробелы»
Возможно, у вас возникнет сильное желание заполнить пробелы на этих страницах, но, пожалуйста, не делайте этого. «Белое пространство» также очень важно. Вы можете увидеть, как веб-сайт NetTuts эффективно использует пустое пространство для создания баланса страницы и создания приятного впечатления.
Выше приведен скелет веб-страницы. Теперь давайте посмотрим, как разделить эти элементы на золотые секции.
Золотое сечение и использование сеток
Помните, раньше я говорил, что математика прекрасна? Мы думаем, что визуальная привлекательность основана на пропорциях (например, золотом сечении). На протяжении тысячелетий художники, дизайнеры, архитекторы и т. д. сознательно или бессознательно использовали общие пропорции, чтобы увеличить красоту своих работ. Что это за магическое число 1,62 (на самом деле 1,618...) Я не скажу вам происхождение этого числа, но расскажу, как им пользоваться.
Использовать золотое сечение очень просто. Например, вам может потребоваться узнать ширину основного контента и списков боковой панели. Возьмите общую ширину области контента и разделите ее на 1,62. Это даст вам 555,55 пикселей. Нам не нужно быть настолько точными, поэтому мы просто используем 555 пикселей. Теперь вы знаете, что ваш основной элемент контента имеет ширину 555 пикселей, а боковая панель — 345 пикселей. Видите, как это легко?!
Но подождите, на этом веселье не заканчивается! Вы также можете применить золотое сечение к ширине и высоте других элементов!
Использование сеток
Если вы похожи на большинство людей, вам не нужно каждый раз держать в руках калькулятор, чтобы вычислить золотое сечение. Тогда самый простой способ — использовать сетку. Итак, что вам нужно сделать, это разделить ширину или высоту на трети.
Чтобы создать более подробную сетку, просто продолжайте делить ее на трети. Если вы прочтете предыдущую статью «Тесный контакт с фреймворком Blueprint CSS», вы увидите, что фреймворк Blueprint CSS использует детальную систему сеток. Проектирование сетки не только проще и быстрее, но и создает красивый макет. Если вы еще не использовали сеточный дизайн, это отличная возможность попробовать его. Вы можете загрузить шаблоны сеток для фейерверков, фотошопов и других программ с сайта http://960.gs.
Как видите, NetTuts очень хорошо следует золотому сечению. Верхняя треть страницы снова разделена на трети, очень близко к золотому сечению. Неудивительно, что дизайн NetTuts настолько привлекателен!
Если вы собираетесь создать новый дизайн, я настоятельно рекомендую найти несколько популярных сайтов и просмотреть их макеты и то, как они применяют золотое сечение и сетку. Затем потратьте некоторое время на то, чтобы попрактиковаться в использовании золотого сечения и сетки в макетах.