Дизайн по правилам

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

...

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

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

Робин Вильямс “Дизайн для недизайнеров”

Посмотрите на документ, представленный на рис. 1.

Рис. 1

Интересная заголовочная часть, правда? Но документ перегружен картинками. Похоже, автор задался целью не оставить на странице ни одного свободного места. Вероятно, он думал: “зачем пропадать пространству, если на нем можно расположить красивую картинку?”.

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

Рис. 2

Уф! Стало свободней дышать.

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

Заголовки первого уровня в колонках отличаются по гарнитуре шрифта: в первой колонке шрифт с засечками, во второй — рубленый. Кегль совпадает, но заголовок “жертвы” записан строчными буквами.

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

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

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

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

Рис. 3

Вам непременно хочется картинок? Удержите себя, пустое пространство красиво само по себе. Если совсем невмоготу, — знайте меру! Достаточно одного рисунка, который не заслонит собой все белое поле (см. рис. 4).

Рис. 4

Постоянные элементы сайта

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

· разный вид заголовочной части страниц (логотип, заголовок сайта, заголовок страницы);

· разные виды навигационных элементов и их расположение;

· разные способы выравнивания однотипных элементов (слева, справа, по центру, по ширине);

· разные способы выделения однотипных элементов (курсив, жирность, цвет, размер, подчеркивание, разрядка, выворотка);

· разный фон;

· разный шрифт основного текста;

· разный цвет и размер шрифта основного текста;

· разный шрифт заголовков.

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

То есть никаких визуальных тегов (B,I, FONT, CENTER, S, U) и визуальных атрибутов (align, background, bgcolor, color, face, noshade, nowrap, size, type) в HTML-коде! Разметка только при помощи логических элементов (основных: Hn, P, A, IMG; дополнительных:BLOCKQUOTE, CITE, DFN, EM, STRONG, OL, UL, TABLE, ABBR, ACRONYM, ADDRESS, CODE, DL, KBD, SAMP, SUB, SUP). Когда нужен новый логический элемент, записываем его при помощи блочного DIV или последовательного SPAN.

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

Практический совет: сначала разработайте шаблон страницы при помощи структурной HTML-разметки и визуальных указаний на CSS (в отдельном файле). Затем используйте этот шаблон для формирования всех страниц сайта.

Готовые (бесплатные) шаблоны можно найти в Интернете, например, по ссылкам:

· www.thenoodleincident.com/tutorials/box_lesson/boxes.html

· www.bluerobot.com/web/layouts

Заголовочная часть, меню, подвал

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

На рис. 5 и 6 показаны две страницы сайта http://robotland.narod.ru/robot.

Рис. 5. Главная страница сайта

Рис. 6. Страница “Продукты Роботландии” (средняя страница пропущена)

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

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

Заголовочная часть и меню вверху страницы

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

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

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

Рис. 7. Начальная страница (первый пункт — не ссылка)

Рис. 8. Страница “Продукты Роботландии”
(второй пункт — не ссылка)

Особая рекомендация относится к записи пунктов меню. Совершенно необходимо, чтобы меню на разных страницах имело одинаковые пункты, записанные в одном и том же порядке. Единственное отличие — разные пункты-нессылки (они относятся к текущим страницам). На начальной странице ссылкой не является пункт “начало”, на странице “Роботландские продукты” — пункт “продукты”. Эти пункты имеют окраску основного текста и отличаются по цвету от остальных пунктов, что и показывает их особую роль: эти пункты — не ссылки, они обозначают текущую страницу.

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

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

Меню внизу страницы и подвал

Меню обязано быть в начале страницы, чтобы пользователю было удобно быстро пролистывать сайт. Меню полезно и в конце страницы. Пользователь может продолжить путь, не прокручивая страницу в начало. Меню в конце страницы должно буквально (без визуальных и функциональных изменений) повторять меню, расположенное в верхней части (см. рис. 9 и 10).

Рис. 10. Начальная страница (первый пункт в меню — не ссылка)

Рис. 11. Страница “Продукты Роботландии” (второй пункт в меню  — не ссылка)

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

Напоследок давайте посмотрим работу “В ожидании снега”, занявшую первое место на конкурсе курса 42 Роботландского университета в 2006/2007 учебном году (команда 4219, руководитель Тузова Ольга Алексеевна, Санкт-Петербург).

Рис. 11. Главная страница сайта

Рис. 12. Страница “Снежинка Бентли”.
Показаны ошибки выравнивания

 

Замечательная работа. Технично, удобно и красиво. Посмотрите на рис. 11 и 12. Принцип повтора задействован на 100%. Сразу видно, что эти две страницы принадлежат одному произведению.

Есть небольшая погрешность выравнивания, отмеченная на рис. 12. В качестве дополнительной придирки можно указать погрешности в меню. Во-первых, плохо, что некоторые пункты записаны в две строки: можно ошибиться, считая каждую строку отдельной ссылкой. Разумно сократить названия, опустив слово “снежинка”, получится: “От Кеплера”, “От Мандельброта”, “От Бентли”, “От коман­ды”, — тогда места в одной строке хватит для всех пунктов. Во-вторых, нужно уменьшить промежутки между пунктами (по принципу приближения), что подчеркнет их принадлежность к одному интерфейсному объекту.

Заключительная цитата из Робин Вильямс:

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