Как спроектировать современный сайт

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

Создание сетки

Создание колоночной сетки (юниты)

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

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

Разделение страницы на три равные колонки не подходит для нашего рекламного блока

Четыре колонки также не подходят, потому что рекламный блок займет слишком много места в ширину

Давайте разобьем страницу на простые и понятные блоки. На набросках видны три области – левая почти в два раза больше правой. Ширина области просмотра составляет 960 пикселов, значит, страницу можно разделить на три колонки по 320 пикселов каждая.

Такое соотношение стало бы изящной основой для сетки, но одной колонки будет недостаточно для размещения рекламного блока шириной 336 пикселов. Можно уменьшить левую область и увеличить правую, но в таком случае наша сетка станет непродуманной, и впоследствии возникнут проблемы. Наша цель – создать универсальный принцип разбиения страниц, которым мы будем руководствоваться при решении проблем дизайна, возникающих в этом проекте.

Давайте добавим поля шириной 5 пикселов справа и слева от рекламного блока, чтобы отделить его от краев колонок. Таким образом, ширина крайне правой области должна быть не менее 346 пикселов. Умножив это значение на три, получим 1038 пикселов, что превышает максимальную ширину области просмотра, а ведь мы еще не учли промежутки между колонками. Структура, состоящая из трех колонок, была бы простым решением, но наша задача требует более тонких расчетов.

Следующий простой вариант – разделить страницу на четыре колонки шириной 240 пикселов каждая. Это позволит нам объединить два крайних правых блока в одну колонку шириной 480 пикселов. Такого значения достаточно для размещения рекламного блока, но это больше, чем нужно.

К тому же, оба левых блока станут слишком узкими для использования в качестве колонок. Логичное соотношение 2:1 будет нарушено.

Кратность четырем часто позволяет найти правильное решение. На рисунке страница разделена на восемь блоков

Чтобы создать более тонкую сетку колонок, восемь блоков разделим на шестнадцать

С другой стороны, количество юнитов и колонок, кратное четырем, часто позволяет найти правильное решение, даже если сами по себе они не годятся для работы. (На самом деле, большинство эффективных решений построены из четырех, восьми или шестнадцати колонок, и это нужно учитывать при создании новых сеток.) Если разделить страницу на 8 юнитов по 120 пикселов каждый, можно будет объединить 3 юнита в колонку шириной 360 пикселов, что идеально подойдет для рекламного блока. Ширина левой области составит 600 пикселов, поэтому исходное соотношение 2:1 сохраняется, и в этой области можно разместить основной текст статьи. Но левая область будет состоять из 5 юнитов – не слишком удачное число, если нам потребуется дальнейшее разделение.

Непродуманным решением является разбиение левой области на 2 колонки по 300 пикселов каждая. По сути, мы так и поступим, но эту возможность следует использовать для принятия более обдуманного решения. Разделив 8 блоков сетки шириной 120 пикселов на 16 блоков шириной 60 пикселов каждый, мы получим более тонкую сетку колонок. Теперь левую область можно разделить на 2 колонки по 5 юнитов каждая, а правая область будет состоять из 6 юнитов либо, если понадобится дальнейшее разделение, 2 колонок по 3 юнита каждая.

Сетка из шестнадцати юнитов

Шестнадцать юнитов делают сетку не только более сложной, но и более структурированной, что нам пригодится позднее. Более того, общее количество блоков кратно четырем, что соответствует правилу, приведенному в главе 3: «Чем проще сетка, тем она эффективнее». Это правило гласит, что сетки должны быть как можно более простыми с математической точки зрения, то есть юниты должны объединяться в колонки на основе простых расчетов, которые можно произвести в уме. Шестнадцать блоков шириной 60 пикселов каждый дают в сумме 960 пикселов, создавая тем самым удобную математическую основу. Мы знаем, что 2 юнита имеют ширину 120 пикселов, 3 юнита – 180 пикселов и т. д. Математическая выгода такой основы становится еще более очевидной, когда мы начинаем учитывать промежутки. Между юнитами нужны промежутки, поэтому при объединении блоков в колонки справа от полученной колонки образуется промежуток, размер которого можно рассчитать. Если ширина промежутка должна составлять 10 пикселов, то, вычитая это значение из ширины юнита, мы получим 16 юнитов шириной 50 пикселов, что еще больше упрощает расчеты.

Создание базовой сетки

После того как мы создали колоночную сетку, можно перейти к созданию базовой сетки. Напомню, что базовая линия – это невидимая линия, на которой расположены буквы. Сетка образуется множеством базовых линий. Расстояние между линиями определяется кеглем текста.

Эффективная сетка, образованная базовыми линиями, хорошо дополняет более крупные элементы, например, заголовки и подзаголовки, но базовые линии в первую очередь предназначены для размещения основного текста на странице. Как правило, для основного текста на сайтах выбирается кегль от 11 до 14 пунктов, но могут использоваться и другие значения. Можно выбирать практически любой размер шрифта, но наш глаз лучше всего воспринимает строки длиной от 60 до 80 символов. Строки, содержащие 80 или более символов, трудно читать, поэтому старайтесь их не использовать.

Возвращаясь к колоночной сетке, можно увидеть, что самая широкая зона, предназначенная для размещения текста, находится в левой области, где 10 блоков и 9 промежутков образуют область шириной 590 пикселов. Этого места достаточно для размещения основной колонки текста в шаблоне страницы статьи – самом большом из всех шаблонов. Но даже в такой широкой колонке перед абзацами обязательно должны использоваться промежутки, упрощающие визуальное восприятие, поэтому 2 юнита и 2 промежутка мы будем использовать как свободное пространство. В результате мы получаем 8 юнитов и 7 промежутков общей шириной 470 пикселов. Даже в этом случае рекомендуется добавить дополнительные отступы внутри колонки (мы еще поговорим об этом), поэтому фактическая ширина составит около 450 пикселов.

Использование образцов помогает определить правильную длину строки и размер шрифта

Какой размер шрифта подойдет для выбранной ширины?

Можно воспользоваться калькулятором, но у шрифтов могут быть разные параметры, поэтому лучше всего использовать образец текста и оценить получившуюся картину визуально.

При использовании шрифта Georgia Regular 12 пт в строку помещаются около 80 символов, шрифта Georgia Regular 14 пт – чуть больше 60 символов. Другие дизайнеры и пользователи могут выбрать другие размеры, но мы используем Georgia Regular 13 пт. Результат составит примерно 70 символов на строку.

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

Вставляя образец текста в колонки разной ширины, можно оценить правильность выбора размера шрифта

Размер шрифта позволяет рассчитать межстрочный интервал, на котором основывается сетка, образованная базовыми линиями. Вопросами выбора правильного интерлиньяжа занимались довольно давно, еще во времена становления традиционного книгопечатания, когда для создания промежутков между строками текста заливалось олово. За это время были выработаны несколько практических рекомендаций, но универсальных правил не существует. Более насыщенные шрифты требуют большего межстрочного интервала, чем обычные. Чем больше кегль шрифта, чем крупнее прописные буквы (особенно буквы В, С и 0), тем больше должен быть межстрочный интервал. Кроме того, необходимо учитывать множество других факторов – курсив, засечки, степень контраста между жирным и обычным шрифтом и т. д. Нужно помнить, что межстрочный интервал не должен быть меньше, чем кегль шрифта (особенно в основном тексте), то есть для текста, набранного шрифтом 13 пунктов, интерлиньяж не может быть менее 13 пунктов, а сам результат должен быть приятным глазу. Слишком маленький межстрочный интервал усложняет визуальное разделение абзаца на читаемые строки, а слишком большой – затрудняет переход со строки на строку.

Для нашего проекта мы выберем интерлиньяж 18 пт, чтобы текст принял цельный и приятный вид. Таким образом, мы получим сетку базовых линий – базовые линии заполняют всю страницу сверху до низу, повторяясь каждые 18 пикселов. Эта сетка поможет нам расположить текст и другие элементы, но важно помнить, что это не более, чем рекомендация. Слишком строгое следование сетке в веб-дизайне нерационально, потому что выровнять все элементы по базовой и колоночной сеткам слишком сложно. Преимущества использования сетки в веб-дизайне бросаются в глаза, если элементы выравниваются по колоночной сетке. То есть большинство пользователей не обратят внимание на выравнивание по базовой сетке.

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

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

Базовая сетка поможет выбрать параметры заголовков и подзаголовков – HTML-стилей Н1, Н2, НЗ и т. д. Заголовки Н1, как правило, имеют наибольший размер на странице, они обычно отделены от основного текста и поэтому их необязательно привязывать к базовым строкам. А заголовки Н2 и НЗ обязательно должны учитывать базовую сетку. Очевидно, что эти элементы оформления должны быть крупнее и/или более заметны, чем основной текст, но базовая сетка основана на интерлиньяже, а не на размере шрифта. Например, если мы выберем для заголовков Н2 размер 24 пт, интерлиньяж должен составить 26 пт (две базовые линии). Размер шрифта может колебаться в диапазоне от 22 до 30 пунктов, но межстрочный интервал при этом составляет 36 пунктов. Более точное значение определяется визуальной оценкой текста: попадают ли нижние выносные элементы букв (например, g и y) на расположенный ниже текст и достаточен ли интерлиньяж для удобства восприятия информации.

Не все параметры текста должны соответствовать сетке базовых строк. Здесь заголовок Н1 находится вне сетки

Расчет полей

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

При работе с печатными изданиями поля можно определить, разделив страницу на несколько горизонтальных областей, что обеспечит нахождение точного баланса между элементами по вертикали. В веб-дизайне высота страницы обычно неизвестна. Одна страница может быть небольшой и просматриваться без прокрутки, а другая страница этого же сайта может быть очень длинной. Делить такие страницы, к примеру, на трети нецелесообразно, так как полученное разделение окажется совершенно случайным.

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

Определение областей усложняется при разной высоте страниц

Как подобрать правильную высоту этих полей? Нам поможет золотое отношение. Учтем разрешение экрана компьютера и используем золотое отношение, считая, что коэффициент приближенно равен 1,618. Разделив ширину страницы (960 пикселов) на 1,618, после округления получим 593.

Прямоугольник шириной 960 и высотой 593 пиксела почти идеально соответствует золотому отношению. Если разместить этот прямоугольник в верхней части страницы, его нижний край задаст границу поля. В нашей базовой сетке ближайшая линия находится на уровне 594 пикселов – 33-я строка сверху. И снова наши расчеты будут приближенными, так что полученное число можно использовать и считать, что горизонтальные поля будут разбивать страницу на фрагменты высотой 594 пиксела, начиная с верха страницы.