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

Продолжение. См. № 1, 2/2009

Третье задание по дизайну

Уважаемые коллеги!

Формулирую третье задание по дизайну.

Постановка задачи

В городе Семипольске был запланирован Турнир по программированию среди школьников на базе Роботландского исполнителя Кукарача.

Ивана Сидорова, как соавтора Кукарачи, попросили подготовить приветствие (главного автора почему-то постеснялись беспокоить). Это обращение планировалось распечатать в нужном количестве на цветном принтере и раздать участникам Турнира на память.

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

Сидоров справился с задачей. А как бы вы сверстали этот документ?

Текст листовки приводится ниже.

В своей верстке Иван использовал две иллюстрации: свой портрет и изображение Кукарачи.

Вы тоже можете использовать эти картинки:

Сидоров

Кукарача

Выравнивание

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

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

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

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

Посмотрите на визитку, которую первоначально предложил Иван Сидоров (см. рис. 1).

Рис. 1

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

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

Рис. 2

Давайте поэкспериментируем. Подровняем все элементы визитки по правому краю (см. рис. 3).

Рис. 3

Этот вариант смотрится куда интереснее! Робин Вильямс объясняет это так.

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

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

Любители картинок могут насладиться, добавив на визитку логотип Роботландии (см. рис. 4). Чтобы сохранить побольше пустого пространства, кегль “второстепенных” надписей пришлось уменьшить (что совершенно не страшно; если визиткой заинтересовались, их все равно прочтут).

Рис. 4

На рис. 5 — обложка реферата, который подготовил Иван Сидоров.

Рис. 5

Типичное оформление: шрифт с засечками “Times”, центрирование, отсутствие выделений (контраста). Сомнительное приближение заголовка реферата к “Роботландскому университету”, но смотрится неплохо, очень официально… и довольно уныло. Типичный реферат типичного студента типичного учебного заведения.

Рассмотрим варианты с выравниванием по левому и правому краям (см. рис. 6 и 7).

Рис. 6 Рис. 7

Совсем другое дело, правда? Элегантно, свежо, никакой официальной скуки.

Вас так и тянет выровнять все по центру? Именно так чаще всего поступают новички — это надежный и очень удобный способ. Выключка по центру придает документу более официальный, спокойный, стандартный и очень часто посредственный вид. Обратите внимание на дизайнерские работы, которые вам нравятся. Ручаюсь, что в них выравнивания по центру не окажется. Я знаю, как нелегко новичку отказаться от этого, поначалу придется себя заставлять. Но если вы объедините в своих работах принцип приближенности с выключкой вправо или влево, результат вас приятно удивит.

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

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

Рис. 8

Без картинок на страницах не так весело, но все же текст на них — основной строительный материал.

Рассмотрим основные типы выравнивания текста. Для демонстраций будем использовать “рыбу”. “Рыбой” дизайнеры называют характерный для языка (по соседству слов разной длины, знаков препинания), но часто бессмысленный текст. “Рыбу” используют для отладки дизайна. В приведенных ниже примерах “рыба” была сгенерирована на странице www.lorem-ipsum.info/generator3.

Выключка по формату (выключка по ширине, полная выключка) — выравнивание по левому и правому краям одновременно. Пробелы между словами автоматически регулируются так, чтобы границы текста были ровными.

Выключка влево — левый край ровный, правый нет. Говорят также “выравнивание влево”, “выравнивание по левому краю”.

Выключка вправо — правый край ровный, левый нет. Еще говорят: “выравнивание вправо”, “выравнивание по правому краю”.

Выключка по центру — центрирование строк текста.

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

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

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

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

Для начинающих подойдет следующая простая рекомендация.

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

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

Раз уж мы заговорили о тексте, приведу несколько правил, которые касаются дизайна текста на web-страницах. Именно дизайна (то есть внешнего вида), а не содержания.

Ширина страницы и ширина колонки

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

Рис. 9. “Резиновая” верстка

Сейчас, когда мониторы стали большими, “резиновая” верстка во всю ширину окна никуда не годится, ведь читать тексты с длинными строчками утомительно (см. рис.10).

Для ограничения ширины текста можно использовать процентную зависимость. На рис. 11 приводится пример “резинового” сайта с “резиновой” колонкой, занимающей примерно 50% текущей ширины окна.

Рис. 11. “Резиновый” сайт с “резиновой” колонкой, занимающей 50% ширины окна

Более решительным шагом является построение “жесткого” макета электронной страницы (см. рис. 12).

Рис. 12. Ширина страницы и ширина колонок фиксированы на этом сайте

Какой величиной следует ограничивать ширину электронной страницы? Можно рекомендовать значение, равное 760 пикселям. Учитывая (с небольшим запасом) ширину вертикальной линейки прокрутки и ширину рамки браузера, можно утверждать, что такой размер рабочей области не приведет к горизонтальной прокрутке в окне шириной 800 пикселей, что будет приятно пользователям мониторов с разрешением 800 ґ 600, а также любителям держать выводок небольших окон на Рабочем столе своего огромного монитора.

Дизайн страницы и дизайн кода

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

Предположим, нужно показать в браузере страницу, изображенную на рис. 13:

Рис. 13. Текст в окне браузера

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

Рис. 14. Код в окне текстового редактора

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

Стилевые определения

}

Иван Сидоров рекомендует для записи кода такие правила:

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

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

3. Структурную лесенку делайте только на теговом “каркасе”. Абзацы текста лучше начинать с первой позиции — так их легче записывать и редактировать.

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

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

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

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

Ошибки выравнивания в конкурсных работах Роботландского университета

Галерею примеров открывает нереально слабая работа, показанная на рис. 15. Я даже изменил в ней текст авторского заголовка.

Рис. 15

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

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

Рис. 16

Рис. 17

Авторы сайта, посвященного Старому Осколу, пытались следовать принципу выравнивания, но неточно и непоследовательно (см. рис. 18).

Рис. 18

Рис. 19

Заголовочная часть не выровнена по высоте. Вид города и логотип выровнены по одной вертикали, но гипертекстовое меню игнорирует эту прямую. Рисованный заголовок заканчивается немного левее фотографии. Стихи, в виде эпиграфа, выровнены справа, текст у картинки слева. По отдельности все неплохо, вместе явный диссонанс. На рис. 19 показаны основные нарушения выравнивания.

А как можно улучшить этот сайт? Например, так, как показано на рис. 20.

Рис. 20

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

Посмотрим еще одну, достаточно хорошую работу — “Дворяне” (рис. 21).

Рис. 21

Тем не менее и здесь легко увидеть ошибки выравнивания. Меню и логотип не выровнены по вертикали. Фотография не выровнена по тексту. Заголовок страницы (“Авторы”) занимает странное положение: и не в центре, и не на краю. Заголовок сайта выровнен по центру белой области, но его лучше приблизить к логотипу. В подвале царит центрированное безобразие.

Анализ полученных работ

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

1. Приближение.

2. Выравнивание.

3. Повтор.

4. Контраст.

Особое внимание в этом задании — принципу выравнивания.

Ниже приводятся часть полученных работ и комментарии к ним.

Команда 4205

Рис. 22

Комментарий куратора

Выравнивание — без замечаний. А оно — большая сила: работа создает впечатление свежести и аккуратности.

Приближение — хуже. Кукарача приближен к словам “Приятно приветствовать вас на конкурсе программистов!”, но это говорит не он. Заголовок далеко отодвинут от текста.

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

Рис. 23

Комментарий куратора

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

Рис. 24

Команда 4207

Рис. 25

Комментарий куратора

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

Другие ошибки. Ядовитый желтый фон, тени неверного цвета, палка внизу разбила мышь, фон под Сидоровым не вписался в экран монитора. В тексте есть ошибки (неужели набирали “руками”?). Кроме того: дюймы вместо кавычек, точка в конце подписи Сидорова. И почему Кукарача раздвоился?

А вот контраст заголовка хороший.

Рис. 26

Комментарий куратора

Выравнивание хорошее, поэтому работа производит приятное впечатление.

Кукарачу надо опустить ногами на текст — сейчас он в прыжке, того и гляди, разобьет нос о верхнюю границу прямоугольника (усы пострадают точно)! Рамка запирает пространство, ограничивая свободу Кукарачи. Зеленые надписи сверху и снизу рамки дополнительно подчеркивают несвободу исполнителя. А вот Сидоров задумал побег и даже сделал на прощание ручкой! Дюймы вместо кавычек, великовато расстояние между абзацами.

Рис. 27

Комментарий куратора

Листовка перегружена элементами. Если убрать Кукарачу сверху и воздушные шарики, уже будет лучше. Заголовок при этом можно укрупнить, следуя принципу контраста (см. рис. 28).

Рис. 28

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

Рис. 29

Комментарий куратора

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

Рис. 30

Команда 4225

Рис. 31

Комментарий руководителя команды

Наше решение — разработка двухстороннего буклета — основано на двух заключениях.

1. Для цветного лазерного принтера бумага достаточно дорога. А в этом случае имеется возможность на бумаге сэкономить в два раза.

2. Буклет не будет приклеен к стене, и его можно читать, держа в руках.

Комментарий куратора

Решение красивое (чувствуется рука мастера), но “холодное”, не слишком удачное для детского турнира. “Теплый” Кукарача с трудом соседствует с мрачноватой палитрой буклета, а добродушному Сидорову и вовсе не нашлось места (что, конечно, правильно, Сидоров бы точно не вписался в эти страницы). Принцип контраста работает на 100%. Содержательно материал очень удачно поделен на две части. На первой странице — напутствия Сидорова, на второй — обзор понятий “программирование”, “программисты” и “язык Кукарачи”. Очень логично. Вот только на первой странице место для фото Сидорова! Заголовок “Кукарача” и его изображение лучше отсюда убрать — ведь они справедливо присутствуют на второй странице.

Бросаются в глаза разные стилевые решения оформления текста на двух страницах (игнорирование принципа повтора).

Погрешности выравнивания: стилизованная буква “Т” (в слове “Турниры”) немного выше базовой линии. Напрасно перечисление (“во-первых”, “во-вторых”…) отформатировано особым образом — решение сделать эти слова своего рода маркерами списка не кажется удачным.

Решение Сидорова

Рис. 32

Комментарий куратора

Линия выравнивания текста отчетливо видна, ее дополняет ровный край фотографии. Листовка поделена на две части. В первой расположился Сидоров и его теплые слова участникам турнира, записанные “рукописным” шрифтом “Jikharev”. Справа расположен более формальный текст о программировании, программистах и языке Кукарачи. Текст написан серифным шрифтом “Georgia” (менее формальным, по сравнению с “Times”). Для заголовка выбран плотный рубленый шрифт “Electron”. Заголовок написан вывороткой на фоне теплого цвета. Однородность текста разнообразят выделения ключевых слов и фраз.

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

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

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

Принцип контраста. Заголовок контрастен по отношению к остальному тексту (другая гарнитура, увеличенный кегль, выворотка). Приветствие Сидорова контрастно по отношению к основному тексту (гарнитура, кегль). Иллюстрации контрастны по отношению к тексту.