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

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

Сдвинем элементы на несколько пикселов от края колонки

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

Добавление над логотипом поля поиска

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

Добавление нижнего колонтитула

Готовый шаблон страницы

Теперь добавим торговый знак Designery в нижний правый угол страницы. Это подчеркнет необычное расположение логотипа в правой колонке.

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

Проект 1. Страница статьи

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

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

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

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

Проект страницы статьи

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

Вспомним, что при определении параметров шрифта мы решили, что самая широкая текстовая колонка будет состоять из восьми юнитов, хотя фактически их десять. Длина строки при этом (число символов в строке) должна делать текст удобочитаемым.

Образец текста в левой колонке

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

Смещение текста влево на один юнит

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