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

Обзор проектов

Постановка задачи: необходимо разработать дизайнерский онлайн-журнал – сайт о дизайнерах, созданный дизайнерами и адресованный дизайнерам. Он должен объединять в единое целое редакционное содержание в форме блога и возможности онлайн-общения.

Сайт состоит из четырех основных шаблонов:

• Страницы статьи.

• Информационной страницы.

• Страницы личных данных пользователя.

• Домашней/главной страницы.

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

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

• Страницы сообщения (например, сообщения об ошибке).

• Страницы содержания блога.

• Страницы настройки параметров.

• Страницы календаря.

• Шаблона для сообщений электронной почты.

Поскольку мы разрабатываем проект воображаемого сайта, то смело можем назвать его Designery.us. Это даст нам стартовую точку для решения задач брендинга, которые будут подробно рассмотрены далее.

Начало работы

Понимание требований

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

Работая с Designery.us, мы предполагаем, что вам предоставили хорошо подготовленное техническое задание в виде набора моделей страниц. Модели – это упрощенные схемы, описывающие особенности и разновидности контента, представленного на каждом шаблоне. Эти модели делают за нас бо́льшую часть работы; по сути, они содержат большинство (если не все) ограничений.

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

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