Идеальный размер сайта

By | 07.12.2012

По моему уже все знают, что стандартный размер сайта в рунете почему-то 1000px. “Чтобы за монитор не вылезал”. А как насчет размера сайта равного 960px или 980px? Плохо, мало, некрасиво…

Почему? А вы никогда не задумывались, почему большинство сайтов рунета, как “профессиональных”, так и не очень, выглядят настолько убого? Вот смотришь — и вроде бы все хорошо, цвета, картинки, текст. Но композиция, как говориться, разваливается. На него неприятно смотреть. Даже не на уровне осознания, а как-то неудобно, глаз, как говорится, спотыкается. Тут даже не в размере сайта. Размер сайта тут не причем, дело в другом, о том и эта статья.

Причиной случит невероятный отрыв технологий — представители которых в основном инженеры или просто нерды, от искусства. И в частности графического дизайна — представители которого учились в художественных учреждениях и знают такие очевидные для них вещи как “пропорции” и “золотое сечение”. А еще немного в сторонке от вебстроительства клубятся те, кто знает что либо про эргономику и дизайн пользовательского интерфейса.

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

Возникает вопрос — как же вы сможете добиться нормального визуального и пользовательского оформления создавая сайт самостоятельно? Для этого уже давным давно придуманы многочисленные методы — например вы можете использовать модульные сетки, или использовать уже готовые решения — особенно для сайтов, где важнее юзабилити, а не дизайн. Все методы, позволяющие достичь ощущения равновесия, красоты, порядка и гармонии графическом и веб-дизайне, базируются на понятии золотого сечения.

В этой статья я попытаюсь объяснить как можно применить золотое сечение в веб дизайне и что такое правило третей. Конечно вы не станете сразу после этого гуру дизайна, но эти методики помогут вам везде, где только возможно их применить в качестве опорных точек.

Золотое сечение

Начиная с эпохи ренессанса, много художников и архитекторов старались приблизить композиции своих работ к золотой пропорции, особенно популярной была форма “золотого прямоугольника”, у которого одна сторона была длинее другой именно в этом отношении. Основанием к этой моде стало доказательство того, что такая форма, наиболее органична, универсальна, гармонична и эстетически приятна для восприятия. Эта пропорция встречается повсеместно в природе и вселенной. Использование этого метода поможет существенно улучшить ваш дизайн.

Ключом для перехода от плохого дизайна к хорошему можно назвать числе 1,618033988749895… и далее. Обычно для удобства используют число 1,6, 1,618 или 1,62. Это и есть золотая пропорция, золотое сечение.

Так почему же не применять его в веб дизайне? Применяют и очень успешно. Но не в России. Пример вычислений касательно разлиновки веб сайта вы видите ниже.

razmery-secheniaОбъясняю пример. Вы хотите создать сайт с фиксированной шириной 960px. Мало? Об этих ширинах потом. Если мы делаем блог, то сайдбар у нас располагается справа, а контент слева. Размеры области контента, относительно сайдбара считаются так:

  1. Cначала сосчитаейте ширину области контента. Про правилу золотого сечения она должна быть на 1,6 меньше, чем ширина сайта (960px). Поделим 960 на 1,62, получим 593px.
  2. Отнимите от общей ширины получившуюся: 960px – 593px = 367px.

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

Конечно веб дизайне не должен весь полностью быть строго выверен по линейке в пропорциях. Например сайт The 404 Blog сделан не совсем по строгим канонам, однако он тоже смотрится очень хорошо и правильно.

404user1Несмотря на то, что дизайн этого блога неправилен с точки зрения сечения, пользователи не замечают этого, потому что они интуитивно делят страницу на два блока: 583px (630px – 31px – 31px) и 299px (330px – 31px). Причина в пассивной игре боковых полей (линии по 31 px), они обеспечивают пропорциональные промежутки и отступы от края до контента.

404user2И хотя отношение между областями сайта равно 630 : 330 px ≈ 1.91 (не 1.62), а отношение между размерами текстовой области и меню равно 583 : 299px ≈ 1.92 (не 1.62), дизайн смотрится хорошо. Это достигается благодаря балансу — все элементы страницы имеют одинаковые пропорции 1,92. Отсюда и создается ощущение гармонии и эстетичности.

Также надо заметить, что такие отступы от краев, равны 31px не случайны еще по одной причине. Как я уже упоминал ранее, в записи про создание этого сайта существуют стандарты, по которым наиболее удобная для чтения длинна строки находится между 50–80символами текста в строке. Однако на данном сайте длина строки примерно равна 100 символам. Такой размер тоже вписывается в общую пропорциональную концепцию размеров сайта.

Посчитаем. Золотое сечение равно 1,62, на этом сайте пропорция равно 1,92. Соответственно 1,92/1,62=1,18. Округлим до 1,20. Умножаем: 80*1,2 = 95. Таким образом все укладывается в рамки законов природы. Для грубых набросков вы можете использовать отношение 5 : 3.

Правило трети

Изначально правило трети использовалось как упрощенное понимание золотого сечения и понимания пропорции и композиции. Использование правила трети позволит вам быстро составить композицию не имея на руках калькулятора.

thirdsКаждую композицию нужно разделить на девять равных частей, посредством линий, равноудаленных друг от друга и от границ композиции по вертикал и по горизонтали. Короче девять клеточек). Четыре точки-пересечения в центральной части — точки наибольшей важности в композиции, где следует размещать главные объекты. Выравнивание по правило трети дает больше экспрессии и жизни, по сравнению с обычным центрированием.

Применение правила трети возможно и в отношении к размерам сайта. Вернемся к нашим 960px, при этом его высота может варьироваться от 750px до 950px. Произведем следующие действия:

  1. Разделите ширину на 3, получим 320px
  2. Разделите среднюю высоту вашей страницы на 3 ( (750 + 950 px) / 2 ) / 3 ≈ 285px.
  3. Следовательно каждый прямоугольник должен быть размером 320px × 285px.
  4. Постройте сетку из девяти квадратов, 3 × 3

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

Пример можно увидеть, посмотрев на сайт demandware.com. Рассматривая этот сайт можно заметить, что актуальные данные расположены в точках пересечения. Также стоит отметить, что нижние блоки информации располагаются в соответствии с правилом трети и расположены строго под нижней линией, что соотносит пропорции размеров сайта как 2 : 1.

demandwЗаключение

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

One thought on “Идеальный размер сайта

  1. attic06

    хороший и актуальный особенно для байнета пост, спс, Колян)

    Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.