Как спроектировать современный сайт
Шрифт:
Эскизы
После того как мы осознали важность детального изучения задачи, можно перейти к следующему шагу – созданию набросков на бумаге. Это важнейший инструмент, позволяющий решить дизайнерскую задачу, особенно необходим на этапе проектирования сеток. Примерный набросок комбинаций колонок и возможных вариантов расположения позволит сэкономить время и поможет найти более интересные творческие решения, чем прямой переход к работе над сеткой и дизайном.
Я подчеркиваю: самым эффективным путем является использование карандаша и бумаги для проработки задачи, поиска возможных решений и изучения перспективных (и не очень) идей, проверка которых другим способом может оказаться слишком дорогой или трудоемкой. По сути, эскизы позволяют быстро просмотреть возможные идеи без существенных финансовых затрат. Помните, что наброски остаются всего лишь набросками,
Не забывайте, что рисование набросков не обязательно является отдельным этапом создания сетки, привязанным к конкретному промежутку времени. Наброски можно делать на любом этапе проекта, на любом уровне готовности, хотя логичнее будет обратиться к ним на ранней стадии, чтобы можно было рассмотреть большее количество идей и возможностей. Если у вас под рукой есть карандаш и лист бумаги, они обязательно окажутся полезными.
Терминология
Термины, описывающие различные компоненты сетки, выглядят простыми, но поразительно неопределенными. Например, термин «колонка» кажется достаточно очевидным, но на базе сетки из восьми колонок дизайнер может создать страницу с двумя колонками текста, что делает этот термин весьма расплывчатым. Единая терминология не всегда используется даже в книгах по дизайну на основе сеток.
В некоторых изданиях используются термины, отсутствующие в других (например, области, поля). Давайте перечислим несколько наиболее общих терминов, которые помогут нам облегчить практическую работу с сетками.
Юнит
Юнит – это строительный «кирпичик» любой сетки, самый узкий вертикальный объект на странице (в юнитах измеряют ширину), на основе которого формируются колонки. Как правило, юниты имеют слишком маленькую ширину, чтобы использовать их непосредственно для размещения текстовых материалов.
Колонка
Колонки – это группы юнитов, которые объединяются, чтобы создать рабочую зону, подходящую для размещения материала. Большинство текстовых колонок состоят из двух или нескольких юнитов. Например, сетка из шестнадцати юнитов может образовывать две колонки по восемь юнитов в каждой либо четыре колонки по четыре юнита в каждой и т. д.
16 блоков
8 колонок
3 блока
2 области
Блок
Блоки – это группы схожих колонок, образующие части страницы. Например, в сетке из четырех колонок первые три колонки слева могут использоваться для отображения одного вида материала, а четвертая колонка образует другой блок.
Базовая сетка основана на невидимых линиях, на которых расположены буквы
Область
Области – это элементы, структурирующие страницу по вертикали и помогающие дизайнеру визуально распределить элементы по оси Y. Размеры областей можно рассчитывать несколькими способами, но наиболее эффективным считается золотое отношение.
Базовая сетка
В типографике базовой линией называют невидимую линию, на которой располагаются буквы. Например, нижний край буквы е лежит на базовой линии, а нижний выносной элемент буквы р находится под ней. Сетка образуется множеством базовых линий, расстояние между которыми соответствует высоте строки (интерлиньяжу) текста.
Горизонтальная или вертикальная ориентация
Эти понятия легко спутать (юнит можно считать как вертикальным, так и горизонтальным элементом страницы, в зависимости от направления взгляда), поэтому в этой книге речь пойдет о колоночной сетке (о разбиении страницы по горизонтали), базовой сетке и областях (когда мы будем говорить о разбиении страницы по вертикали).
Промежутки между колонками
Промежутки
Поля страницы и отступы
Поля представляют собой свободное пространство вне юнита или колонки. Отступ – это свободное пространство внутри юнита или колонки. Поля, как правило, используются для создания промежутков, а отступ – для создания небольшого видимого смещения абзаца текста в пределах колонки.
Элемент
Элементы – это любые единичные компоненты структуры, например, заголовок, абзац текста, фотография или кнопка.
Модуль
Модули – это группы элементов, объединенные для создания отдельных блоков по принципу единства формы или функции. Форма регистрации, например, представляет собой модуль, объединяющий множество элементов, – метки поля формы, кнопки и т. д.Глава 4. Начинаем творить
Нет лучшего способа научиться использовать сетки, чем «засучить рукава» и приступить к делу. Настало время применить на практике все накопленные теоретические знания. В этой главе описан поиск практического решения для создания веб-сайта.
Естественно, не существует такого понятия как стандартный сайт или стандартный веб-дизайн. Задача, решение которой мы рассмотрим в данной главе, состоит из нескольких универсальных страниц: страницы блога, страницы профиля и домашней страницы, связывающей воедино разнородные материалы. Проект поможет нам поближе рассмотреть множество разнообразных дизайнерских задач, на которых можно выработать общий подход, основанный на использовании сетки. Давайте попробуем, учитывая все проектные ограничения, создать единую сетку и использовать ее для построения разных типов страниц.
Небольшой комментарий: эту главу, как и всю книгу, можно читать с любого места, и я сознаю, что читатели, скорее всего, начнут именно с этой главы. В этом нет ничего плохого. Тем не менее не могу не сказать, что идеи и мысли, изложенные в предыдущих главах, нужно использовать вместе с практическими рекомендациями, приведенными далее в этой главе. Здесь вы найдете конкретные инструменты и методики, но первые три главы призваны развить у вас творческие умения, необходимые для эффективного использования этих инструментов. Не обманывайте себя!
Обзор проектов
Постановка задачи: необходимо разработать дизайнерский онлайн-журнал – сайт о дизайнерах, созданный дизайнерами и адресованный дизайнерам. Он должен объединять в единое целое редакционное содержание в форме блога и возможности онлайн-общения.
Сайт состоит из четырех основных шаблонов:
• Страницы статьи.
• Информационной страницы.
• Страницы личных данных пользователя.
• Домашней/главной страницы.
Мы рассмотрим создание сетки, которая будет подходить для каждого случая, а затем используем ее в дизайне страниц. При разработке шаблонов нужно учитывать, что различные ограничения и рекомендации будут накладываться друг на друга.
Получившееся решение мы будем использовать и для создания шаблонов второстепенных страниц, что послужит доказательством универсальности использованного подхода:
• Страницы сообщения (например, сообщения об ошибке).
• Страницы содержания блога.
• Страницы настройки параметров.
• Страницы календаря.
• Шаблона для сообщений электронной почты.
Поскольку мы разрабатываем проект воображаемого сайта, то смело можем назвать его Designery.us. Это даст нам стартовую точку для решения задач брендинга, которые будут подробно рассмотрены далее.
Начало работы
Понимание требований
Один из главных уроков, который вы должны извлечь из данной книги, заключается в том, что изучение существующих ограничений – это первый и наиболее важный этап. Мы должны найти критерии, которые сделают наш проект максимально успешным и удобным в использовании. Пока этап не завершен, едва ли имеет смысл думать о разработке сетки и совсем нет смысла переходить к выбору шрифтов и цветов.
Работая с Designery.us, мы предполагаем, что вам предоставили хорошо подготовленное техническое задание в виде набора моделей страниц. Модели – это упрощенные схемы, описывающие особенности и разновидности контента, представленного на каждом шаблоне. Эти модели делают за нас бо́льшую часть работы; по сути, они содержат большинство (если не все) ограничений.