Урок 9. Можно ли научиться на чужих ошибках

Давайте попробуем. В качестве иллюстраций будем использовать детские работы конкурса “Веселый Зоопарк”, который прошел в Роботландском Университете в 1999/2000 учебном году.

Грамматика и дизайн

Грамматические ошибки, конечно, в работах есть. Где больше, где меньше. В некоторых работах число грамматических ошибок превышает обычную норму.

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

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

Если, например, записать так:

Запятая поставлена через пробел от слова , которое она сопровождает.

то браузер, при малом окне, может вывести это так:

Запятая поставлена через пробел от слова
, которое она сопровождает.

Страдает уже не грамматика, а дизайн!

Плохо также, когда пробелы, вообще, не ставятся:

Нет пробела после запятой,поставленной в этом предложении.

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

Правила расстановки знаков препинания
(из книги А.А.Дуванова “Азы информатики”)

Петя. Теперь — о знаках препинания. При записи текста на компьютере к ним нужно относиться с повышенным вниманием.

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

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

— Каким образом?

— Если, например, запятая выделена пробелами, то она воспринимается редактором как отдельное слово и может при форматировании попасть в начало строки. Как смотрится строчка, начинающаяся с запятой?

— Согласен — не очень привлекательно. Как же правильно записывать знаки препинания в компьютерном тексте?

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

— Это правило касается всех знаков препинания?

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

Пробел ставится после, а не до:

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

Пробел ставится до, а не после:

открывающей скобки открывающей кавычки

Пробел ставится до и после:

тире

Пробелы вообще не ставятся при:

дефисе

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

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

Это один их китов качественного дизайна!

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

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

Посмотрите на такой список:

• волк
• жираф великолепный
• тигр ученый
• лось сохатый

А теперь на такой:

Последний список получен центрированием. Разница заметна, правда?

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

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

В силу этого абзацы надо делать без красных строк и отделять их друг от друга пустыми строчками (<P>, а не <BR>).

Картинки можно выравнивать в тексте по левому краю или по правому. Можно чередовать выравнивание (слева-справа). В последнем случае нарушение чередования не допустимы.

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

Примером разделительной видимой прямой является <HR>.

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

Иллюстрации из “Веселого зоопарка”.

• pic/0901.gif
• pic/0902.gif
• pic/0903.gif

Выделения

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

При выделении текстовых фрагментов пользуйтесь следующими правилами:

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

Эти рекомендации — от Мастера отечественного вебдизайна — Дмитрия Кирсанова.

Обычно для выделения достаточно одного или двух способов.

В ссылках уже два выделения (цвет, подчеркивание). Накладывать третье (размер), четвертое (жирность), пятое (курсив) совсем ни к чему.

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

Здесь слово “море” выделено четырьмя разными способами (подчеркивание, заглавные буквы, знаки восклицания и цвет):

Здесь ссылки выделены три раза: цвет, размер, подчеркивание. Размер — явно лишнее:

Единообразие выделений на протяжении всего приложения

Решите, что именно вы будете выделять в вашем приложении.

Если вы решили выделять новые термины курсивом, так и делайте до конца приложения. Не переходите время от времени на жирность или цвет.

Выделить все — значит, не выделить ничего

Жирность текста в описании введена зря. Читать трудно, воспринимается как агрессивная реклама, а не мягкое чтение для души:

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

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

На странице слишком много выделений:

Не путайте пользователя

Выделять синим цветом и (или) подчеркиванием категорически не рекомендуется. Ведь так традиционно выделяются ссылки.

Выделение подчеркиванием похоже на ссылку:

Цвета

Цвет принадлежит к базовым строительным материалам дизайна.

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

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

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

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

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

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

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

Вам трудно оценить сочетаемость цветов? И вам не хочется рисковать? Вот вам совет дизайнера Роджера Блэка:

Белый цвет — для фона, черный — для текста, красный — для выделений (заголовков).

Этот джентельменский набор дополняет классический набор для ссылок:

синий — цвет неотработанной ссылки
красный — цвет активной ссылки
пурпурный — цвет отработанной ссылки

<BODY bgcolor=white text=black link=blue alink=red vlink=purple>

Посмотрите на прекрасную работу барнаульской команды “Крокодилы”. Страница смотрится очень нарядно и в то же время солидно, авторитетно. А ведь это пример классического “черного костюма”! На странице только два цвета (не считая ссылок) — черный для текста и оттенок синего для фона.

Мелкие ошибки в этой работе:

• точка в однословном заголовке не ставится (ошибка дизайна, а не грамматики!);
• заголовок на главной странице (темно-синий), на других — черный;
• картинка с первым крокодилом выделяется среди других по фону;
• текст слишком тесно прижимается к картинке.

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

Строгое выравнивание текста, списков и картинок по вертикали создает ощущения единства композиции.

Линии <HR>, отделяющие разделы друг от друга, прекрасно вписываются в дизайн страницы. Наряду с крупными жирными заголовками, яркими картинками, эти линии накладывают на единство страницы контраст.

Рассмотрим еще одну работу “Площадка молодняка”. Авторы: Петров Денис, Иванов Илья, Митянина Лена, Суднева Наташа.

Недостатки:

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

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

Белый фон, черный текст, красные заголовки. Вот вам и праздник на странице. Три синих звездочки удачно заменяют разделительную линию <HR>.

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

Заголовок “Привет всем” слишком пестрый:

Черная надпись “Футбол — это жизнь” смотрится как надпись на траурной ленточке и плохо заметна на выбранном “шершавом” зеленом фоне:

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

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

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

Синий текст и синие ссылки — это очень плохо. Синий цвет достаточно агрессивен. На ссылках — это нормально. Ссылки как бы призывают — “кликни меня!”. Большие синие массивы быстро утомляют глаза. Список не выровнен по вертикали:

Единство стиля

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

Рекомендации по следованию этим идеям в основе своей негативны. Они, как правило, начинаются с частицы “не”.

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

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

Не вводите на страницу лишних элементов (ружье должно выстрелить).

Не добавляйте украшений по принципу “чтобы веселее было”.

Не пишите слишком длинных текстов.

Не используйте слишком много картинок.

Только научившись видеть красоту в простоте и одинаковости, можно позволить себе дизайнерские “вольности”.

Попробуйте на этих страницах найти ошибки дизайна:

• pic/0917.gif
• pic/0924.gif

Кухня Сидорова

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