Нет лучшего способа научиться использовать сетки, чем «засучить рукава» и приступить к делу. Настало время применить на практике все накопленные теоретические знания. В этой главе описан поиск практического решения для создания веб-сайта.

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

 

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

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

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

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

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

С. 57–60: Наш проект основан на четырех моделях страниц: статья, информационная страница, страница личных данных пользователя и главная (домашняя) страница

 

Область просмотра

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

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

Итак, первое ограничение – наш дизайн должен помещаться на экране с разрешением 1024 х 768.

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

1024 х 768 – это стандартное разрешение экрана. Оно будет одним из ограничений нашего проекта

Площадь, занимаемая браузером на экране, не превышает 80 % площади, доступной при просмотре любой веб-страницы. Поэтому доступная область в браузере имеет размеры 974 х 650 пикселов

Учитывая поля на левой и правой сторонах браузера, получаем доступную «активную» область экрана примерно 960 х 650 пикселов

 

Рекламный блок

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

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

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

Кроме того, рекламные блоки способны помочь дизайнеру. Мы уже говорили, что чем строже ограничение, тем результативнее бывает решение. Бросающийся в глаза рекламный блок способен стать основой для создания сетки; он фактически определяет ее форму.

В качестве второго ограничения будет выступать большой рекламный блок рекламного интернет-агентства размером 336 х 280 пикселов. Между прочим, спецификация позволяет разместить еще два рекламных блока в ширину: прямоугольный блок среднего размера 300 х 250 и полустраничный 300 х 600 пикселов. Таким образом, в дизайн, построенный на основе большого рекламного блока, можно легко добавить рекламные блоки других размеров.

 

Бренд

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

Сделаем несколько простых предположений о торговой марке Designery.us:

• Целевая аудитория – дизайнеры всех возрастов с разным уровнем компьютерной подготовки.

• Общий стиль – дружелюбный, простой и спокойный.

• Логотип должен сразу бросаться в глаза.

 

Выводы

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

Разработать основные шаблоны страниц для онлайн-журнала, целевая аудитория – дизайнеры. Сайт объединяет статьи и функции социального общения, как это следует из моделей (см. с. 57–60). Шаблоны должны соответствовать минимальному разрешению экрана 1024 х 768 пикселов с активной областью 960 х 650 пикселов. На странице должен располагаться стандартный рекламный блок размером 336 х 280 пикселов. Готовый проект должен соответствовать продуманному и спокойному образу бренда Designery.us; логотип должен находиться на видном месте. Необходимо использовать красный, черный и белый цвета.

Дизайн всех страниц начинается с карандашных набросков

 

Создание наброска

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

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

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

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

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

 

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

 

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

В книжном дизайне размер юнитов и колонок ограничен параметрами страницы. Окончательный размер печатной страницы, плаката или рекламного щита напрямую влияет на расчет сетки. В веб-дизайне окно браузера, самый близкий аналог листа бумаги, не имеет постоянных размеров. Именно здесь строгое ограничение, приведенное в главе 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 пиксела, начиная с верха страницы.

Высота полей рассчитывается с помощью золотого отношения

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

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

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

Попробуем использовать правило третей, чтобы усовершенствовать подход к выбору размера поля. Если разделить 594 пиксела на 3, получим 198-пиксельную область, привязанную к сетке базовых линий. Используя базовую линию для задания промежутка между третями, мы получим 180-пиксельные поля по 10 базовых строк в каждом.

Вся страница разделена на поля

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

 

Создание шаблона страницы

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

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

Для создания шаблона страницы выделим основные области

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

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

Поместим логотип в нестандартное место – верхний правый угол

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

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

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

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

Элементы аккаунта выровнены по сетке

Размещение элементов навигации вверху страницы

Данная область сетки состоит из 10 блоков, которые можно объединить в 5 колонок по 2 юнита в каждом. Ширина каждой колонки 110 пикселов, этого достаточно для размещения кнопок навигации. В нашей модели используются только 3 элемента навигации: Home, Articles и Browse (Profile теперь находится в правом дальнем углу). Учитывая важность ссылки на страницу About Designery, которая изначально находилась в нижнем колонтитуле, ее можно переместить на уровень элементов навигации. Теперь мы имеем 4 элемента. Одна из колонок до сих пор не используется и ее можно назначить для ссылки Ноте, самой важной из навигационных ссылок (теперь она занимает 4 юнита, 230 пикселов). Такой выбор сделает ссылку Ноте особенно заметной даже без дополнительных выделений.

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

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

Текст на элементах навигации не выровнен по базовой сетке

Ролловер-состояние элементов навигации

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

По сути, ни один текстовый блок не попадает на левый край соответствующей колонки. Весь текст расположен на небольшом расстоянии – 5 пикселов – от края.

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

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

Текст, попадающий на край колонки, смотрится нормально

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

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

Проблемы возникают при создании различных эффектов

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

Поэтому лучше всего выбрать положение текста в обычном состоянии таким же, как и в ролловер-состоянии.

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Правая область дополнительно разбивается на более мелкие блоки, чтобы разместить необходимые элементы

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

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

Разместим форму для подписки на рассылку поближе к верхней части страницы

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

Чтобы обеспечить переход от статьи к статье, необходимо добавить дополнительные навигационные элементы над рекламным блоком

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

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

Сетка базовых линий с шагом 18 пикселов поможет определиться с размером, если для нахождения высоты строки использовать число, кратное 18. Три базовые строки (54 пиксела) – это слишком много, поэтому используем две строки (36 пикселов). Для высоты строки 36 пикселов следует выбрать размер шрифта чуть меньше. Давайте возьмем шрифт без засечек (Arial или Helvetica) и кегль 34 пт, чтобы обеспечить гармоничное соотношение между размером и интерлиньяжем.

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

Добавим стили для оформления названия статьи, имени автора и аннотации

Такие же параметры подойдут для оформления ссылок Print, Email и Share, которые должны располагаться рядом с началом статьи. Данные элементы не должны быть большими, для них можно использовать, например, свободное пространство справа от основного текста. Расположим ссылки справа от строки с именем автора и аннотацией.

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

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

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

Добавим стили для оформления иллюстраций с подписями

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

Добавление стиля цитат в основной текст

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

Добавление стиля списка в основной текст

Наконец добавим несколько полезных инструментов, дающих пользователю возможность производить действия со статьей, – print (напечатать), email (отправить по электронной почте) и share (поделиться с друзьями), – разместив их в зоне заголовка страницы. Это небольшие элементы, но они должны быть заметны, поскольку многие пользователи будут искать их. Давайте воспользуемся пустой колонкой, расположенной между текстом и рекламным блоком. Если ссылки на действия со статьей находятся в верхней части этой колонки, они будут визуально активизировать вертикальное пространство, привлекая при этом внимание к себе.

Готовый дизайн статьи

 

Проект 2. Информационная страница

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

Давайте приступим к разработке следующего шаблона – странице со сводной информацией. На ней должны быть представлены проекты, которые можно найти в выдуманной нами социальной сети Designery.us, и их авторы. По пиктограммам, соответствующим конкретным персонам или проектам, будет легко оценить содержательную сторону сайта. Схема информационной страницы разделена на две области, ширины которых соотносятся как 2:1. На первый взгляд такой подход полностью соответствует концепции, использованной при создании страницы статьи.

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

Каркас информационной страницы

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

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

Небольшой эскиз новой страницы

Информация так же сгруппирована в три колонки, но разделение между ними выражено не так сильно, как при соотношении областей 2:1, использованному на странице статьи. Мы хотим заставить колонки работать как единый объект, даже если они будут отделены друг от друга.

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

Проводя линию под элементами аккаунта, мы формируем область с другой динамикой

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

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

Расположим пиктограммы проектов в середине страницы

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

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

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

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

Аватары пользователей располагаются над названиями проектов

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

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

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

Добавим в верхний правый угол страницы функцию поиска по датам

Окончательный дизайн информационной страницы

И напоследок давайте разместим слева от фотографий ссылки, позволяющие легко найти информацию (Explore). Этот список выглядит очень просто. Но не забывайте: самые простые вещи часто оказываются и самыми лучшими.

Создавая этот дизайн, я не упомянул базовую сетку, но если присмотреться, все элементы окажутся привязаными к базовым линиям.

Информационная страница с сеткой базовых линий

Элементы оказались на сетке базовых линий благодаря подзаголовкам Explore, Top Designery.users, Browse by Date и Hot Projects on Designery. В шаблоне страницы статьи линии над каждым подзаголовком были привязаны к базовой сетке, а текст подзаголовка выравнивался по вертикали относительно пространства, образованного двумя базовыми строками. Кроме того, между началом текста и базовой строкой сделан отступ величиной в одну строку.

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

 

Проект 3. Страница профиля

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

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

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

Вверху – эскиз дизайна; внизу– макет страницы профиля

Данная схема представляет собой объединение принципа разделения страницы в соотношении 2:1 из шаблона страницы статьи и принципа симметрии с информационной страницы. Большой рекламный блок расположен в правом углу. Как и на информационной странице, в верхней части выделена горизонтальная область, совпадающая с рекламным блоком. По сути, можно считать основную структуру этой схемы «проекцией» рекламного блока.

Структура страницы как «проекция» рекламного блока

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

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

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

Добавление разделительных линий для разметки страницы

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

Один из возможных вариантов размещения пользовательской аватарки

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

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

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

Если фотография находится сверху, текст под ней кажется неупорядоченным

Другое расположение фотографии лучше подходит для отображения информации о пользователе

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

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

В качестве завершающего штриха разместим ссылки Send message и Add as a Friend сразу под фотографией. И снова такое соседство оправдано – эти ссылки расположены под элементами, позволяющими идентифицировать пользователя. Идеальное расположение для ссылок, позволяющих совершать действия с данной информацией.

Область страницы под биографической информацией делится по уже знакомому нам принципу 2:1. Здесь так же можно поместить материалы трех разных типов: списки друзей, списки проектов и статистику активности. Наличие трех разных типов информации предполагает разделение этой области на три части, согласно принципу симметрии, реализованному на информационной странице.

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

Нижнюю часть страницы можно разделить на три равные области, согласно принципу симметрии, использованному на информационной странице

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

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

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

Менее симметричная структура лучше соответствует конкретным условиям

Чтобы выбрать конкретный способ реализации, нужно учитывать, какое свободное пространство находится в нашем распоряжении. Нам не хватит места, чтобы привести эти изображения к тому же размеру, как на информационной странице. В нашем случае можно взять размеры изображений, которые использовались при создании страницы статьи. Изображения имели ширину 3 юнита (170 пикселов) каждое. Этих значений будет достаточно, чтобы разместить в колонке шириной 6 юнитов (350 пикселов) 2 узких столбца изображений. Результат напоминает информационную страницу, но больше подходит для конкретных целей.

Альтернативный вариант отображения пиктограмм проектов

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

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

Вместо того чтобы взять концепцию представления пользователей с информационной страницы, мы создали новый вариант

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

Будем отображать активность пользователя в правой колонке

 

Проект 4. Домашняя страница

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

Большинство домашних страниц должны одновременно выполнять несколько функций: отображать информацию о самых новых и/или самых интересных материалах, об активности и проектах в социальной сети Designery.us, а также представлять некоторых наиболее активных пользователей. Более того, страница должна демонстрировать пользователям торговую марку Designery.us способом, отличающимся от других страниц. Эти особые требования были отражены в задании (оно не навязывает определенный подход к компоновке страницы и допускает больше всего изменений).

Проект домашней страницы

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

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

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

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

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

Окончательный эскиз домашней страницы

Начнем с верхней части страницы. Оформление блока с логотипом бренда существенно отличается. Эта страница является «парадным входом» на сайт и поэтому выполняет дополнительные функции – она должна представить и кратко описать Designery.us новым пользователям. Для этого можно просто поместить слоган рядом с торговой маркой:

Designery – это место встречи дизайнеров-практиков, студентов и любителей.

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

Для этого переместим логотип левее под навигационные ссылки, а слоган расположим в блоке справа. Такое «нарушение» вполне обосновано, потому что, повторюсь, к домашней странице предъявляются особые требования. Бренд должен бросаться в глаза. Если вид домашней страницы будет отличаться от других страниц сайта, это только подчеркнет важность информации.

Изменяем расположение логотипа на домашней странице

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

За счет увеличения логотипа слоган сместился еще правее и сравнялся с ним по высоте. Данный визуальный эффект помогает восприятию материала слева направо, от логотипа к слогану, от понятия к пояснению.

Увеличенный логотип будет привлекать дополнительное внимание

По базовой сетке видно, что логотип и заголовок выровнены по верхнему краю

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

Основная область разбивается на три колонки

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

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

Разместим аннотации статей в двух левых колонках

Будем считать, что показанные аннотации соответствуют материалам, недавно опубликованным на сайте Designery.us. Для их отображения требуется много места на экране, поэтому неплохо было бы уменьшить их размер. В нижней части первой колонки можно разместить заголовки статей третьего уровня значимости (без аннотации), которые занимают меньше места. Эти заголовки будут сопровождаться такими же пиктограммами в два юнита шириной, что и аннотации «второго уровня», но располагаться они будут по три в ряд.

Добавление аннотаций в нижнюю часть левой колонки

Это краткие аннотации, поэтому их расположение внизу колонки логически обоснованно. Наша цель – показать, что на сайте есть и другие аналогичные материалы. Реализуем эту мысль, добавив ссылку More Articles… в самый низ колонки.

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

Элементы, созданные для других страниц, например, форма для подписки на рассылку и список пользователей с фотографиями, будут располагаться в средней колонке

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

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

Добавление материалов в крайнюю правую колонку

Как и на странице со статьями, пользователи должны иметь возможность перейти по ссылке к другим материалам того же типа. Одной из целей домашней страницы является обзор материалов, доступных на сайте Designery.us. Поэтому возьмем оформление ссылки More Articles… и используем его для списка пользователей и проектов внизу второй и третьей колонки. Кажется, что страница упорядочена по простому принципу: статьи в левой колонке, пользователи в середине, а проекты справа. С одной стороны, это не совсем верно – материал все-таки более разнообразен. Но с другой стороны, это так – ведь форма подачи материала имеет упорядоченный вид. Во многих случаях этого достаточно.

Готовая домашняя страница

 

Дополнительные страницы

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

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

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

СТРАНИЦА АВТОРА

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

СТРАНИЦА ABOUT US

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

СТРАНИЦА АРХИВА

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

СТРАНИЦА ПРОЕКТА

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

СТРАНИЦА НАСТРОЕК

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

ШАБЛОН РАССЫЛКИ

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

 

«Резиновая» верстка

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

Однако я не могу не рассмотреть «резиновую» верстку – создание страниц, меняющих размер в зависимости от области просмотра.

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

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

До недавнего времени возможности веб-дизайна не позволяли нам в полной мере насладиться «резиновой» версткой. Новые возможности браузеров, наряду с новшествами, которые появились в CSS и JavaScript, позволяющими учитывать параметры устройств, дают возможность дизайнерам создавать гораздо более динамичные страницы.

Дизайнеры-новаторы теперь могут заниматься так называемым «отзывчивым» веб-дизайном. Итан Маркотт, его активный сторонник, утверждает, что такой подход открывает новые возможности:

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

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

Тем не менее основные принципы дизайна остаются в силе независимо от развития нового подхода. Справедливым остается и тот факт, что дизайнеры должны продолжать делиться возможностями управления собственными произведениями с пользователями, которые хотят управлять своими действиями. Было бы ошибкой считать, что «отзывчивый» веб-дизайн означает предоставление пользователям полного контроля, потому что в действительности им нужны только некоторые функции. Пользователи надеются, что дизайнеры не только предоставят им некоторую оболочку, но и доработают ее в достаточной степени, чтобы ею можно было управлять.

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

«Отзывчивый» веб-дизайн не делает эту задачу проще. На самом деле он ее усложняет. Появятся еще больше ситуаций, которые необходимо учитывать, больше комбинаций элементов пользовательского интерфейса в различных сочетаниях, что затруднят восприятие сайтов. Таким образом, сетка становится еще важнее для общего дизайна; создание строгой сетки, лежащей в основе «отзывчивого» веб-дизайна, сделает его более обоснованным и надежным.

Одни и те же принципы дизайна на основе сетки могут использоваться как в «резиновой» верстке, так и в «отзывчивом» веб-дизайне. Юниты можно объединять в колонки и области, а размеры элементов менять в зависимости от основных параметров сетки. Эти элементы должны увеличиваться и уменьшаться в соответствии с этими же параметрами, но важно помнить, что изменяться должно не всё. Некоторые элементы могут и должны оставаться неизменными. В среде, где элементы бесконечно меняют размеры, очень важно сохранить постоянство, предоставить пользователям какие-нибудь ориентиры. По мере развития этой теории появятся новые возможности для дизайнеров, работающих в этой области. Но неизменной останется центральная роль дизайнера – человека, управляющего пользовательским восприятием.