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

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

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

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

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

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

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

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

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

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

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

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

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

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