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

Читателям газеты предлагается серия заметок по дизайну, которые автор подготовил для студентов курса “Web-конструирование” в 2008/2009 учебном году (дистанционный курс 42 “Роботландского университета”):

· Заметка 1 “У хорошего дизайна 4 ноги”.

· Заметка 2 “Приближение”.

· Заметка 3 “Выравнивание”.

· Заметка 4 “Повтор”.

· Заметка 5 “Контраст”.

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

Заметка 1. У хорошего дизайна 4 ноги

Первое задание по дизайну

Уважаемые студенты курса 42 Роботландского университета!

Начинаем потихоньку разбираться с дизайном!

Пока еще не усвоены технические навыки построе­ния гипертекстовых страниц, в частности, вы еще плохо владеете языком HTML, не говоря уже про CSS, и вряд ли еще понимаете, чем клиентский скрипт отличается от серверного. А может, не знаете даже, как вывести на гипертекстовую страницу заголовок и пару абзацев.

Ну и ладно!

Это не помешает нам торить дизайнерскую дорожку, которая со временем пересечется с нашим возросшим потенциалом web-мастера.

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

Примечание. Кстати! Тем, кто хочет понять, чем клиентский скрипт отличается от серверного, а также научиться программировать свой сайт на стороне сервера, нужно взять газету “Информатика” и прочитать курс Сергея Львовича Островского “Основы web-программирования для школьного «сайтостроительства»” (№ 17–24/2008).

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

Посылаю вам объявление, примерно которое увидел на своей почте, вынужденно простаивая, чтобы отправить вам диски с учебником “Web-конструирование”. Что ж терять время зря! В дизайне можно упражняться и в очереди на почте.

Объявление на почте

Посмотрите на это объявление. Оно вам нравится?

Нет? Ну, тогда у вас душа дизайнера. Поздравляю!

Вам не нравится — это отличный результат. Первый тест дизайнера вы успешно прошли.

А теперь задание посложнее: почему вам не нравится это объявление? Что в нем не так? Попробуйте поговорить об этом с ребятами в классе и напишите нам (на курсовой список рассылки), какие причины были названы.

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

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

За дело, друзья!

Какими средствами выполнять верстку? Может, Word? Да перестаньте, ребята! Ну что вы, право, со своим вордом. Мы же хотим освоить сайтостроение. Здесь нет места этому монстру.

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

1. Рисуем объявление в векторном редакторе.

2. Сохраняем в виде растра в формате gif или png.

3. Показываем работу на нашем списке рассылки.

Для тех, кто:

· не умеет еще работать в векторном редакторе;

· принципиально работать в нем не хочет (не верю!).

Ну, сделайте верстку в том, в чем сможете:

· нарисуйте картинку в растре;

· ну, хорошо, сделайте в Word’е, но превратите результат в картинку;

· нарисуйте просто на бумаге и отсканируйте (или сфотографируйте, если нет сканера).

С интересом буду ждать ваших сообщений и графических вариантов.

Ту-ту! Поезд отправляется.

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

· преобразования рисунка выполняются без искажений;

· получаются маленькие графические файлы;

· рисовать быстро и просто;

· независимое редактирование частей рисунка;

· высокая точность прорисовки (до 1 000 000 точек на дюйм);

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

· векторный рисунок легко преобразовать в растровые форматы.

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

Вы нарисовали заголовок сайта в растровом редакторе.

Потом поняли, что он мал, его надо увеличить. Вы можете пойти двумя путями:

1. Нарисовать заголовок заново в новых размерах.

2. Увеличить старый вариант средствами редактора.

99% идут по второму пути. И получают искаженную графику с заметными пиксельными ступеньками.

Такой проблемы не возникает в векторном редакторе! Нужно увеличить рисунок (или его часть)? Да нет проблем, все преобразования делаются в векторе без потери качества. А конечный вариант экспортируем в gif, jpg или png.

Очень хорош векторный редактор — Xara X (и новый вариант Xara Xtreme). Адрес сайта производителя: www.xara.com. Программа имеет бесплатную версию, работающую в операционной системе Linux (www.xaraxtreme.org), для Windows продукт придется покупать.

В качестве бесплатного варианта можно назвать продукт Inkscape (анонс этого редактора можно прочитать в статье “Inkscape: векторная мышеловка”, опубликованной в номере 9 газеты “Информатика” за 2008 год). Адрес сайта производителя: www.inkscape.org.

Зайдите на этот русскоязычный сайт. На полоске вверху после слов “Свежая стабильная версия” расположена ссылка Download. Щелкайте и качайте.

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

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

У хорошего дизайна 4 ноги

Развлечения в очереди на почте

С появлением компьютеров очереди в почтовых отделениях, увы, не уменьшились!

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

 

Очередь на моей почте.
Вроде небольшая, но стоять придется минут сорок

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

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

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

Но это объяснение никуда не годится!

Хорошие вещи нравятся большинству людей. У хорошего дизайна много товарищей.

Но почему эта обложка безусловно хороша, а эта страница очевидно ужасна?

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

Но это неправда!

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

Начнем с главного — назовем правила дизайна. Далее все просто — если вещь имеет название, ее можно выделять среди других и использовать по назначению.

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

Правил в дизайне много! Но четыре правила определяют успех на 90%.

Запомним их по именам:

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

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

3. Повтор

4. Контраст

Дизайн по Робин Вильямс

Причиной, подтолкнувшей меня написать эти заметки, явилась замечательная книга:

Робин Вильямс “Дизайн для недизайнеров”. Изд-во “Символ”, 2008.

Непременно прочитайте эту книгу!

В первой главе “Прозрение под деревом Иисуса” автор рассказывает:

 

Юкка (лат. Yucca L.) — род растений из семейства агавовых, подсемейства Dracaenoide?

Время от времени на юкке появляются цветоносные побеги. После того как кремовые цветки-колокольчики отцветут, вырастают новые побеги под прямым углом к старым. Это повторяется многократно, и в конце концов ветвящееся “дерево” становится похожим на жестикулирующего гиганта.

Существует поверье, что первые пришедшие в пустыню Мохаве мормоны, увидев воздетые к небу “руки” этого необычного дерева пустыни, вспомнили Иисуса Навина.

(По материалам журнала “Ридерз Дайджест”)

«Много лет назад мне подарили на Рождество книгу с описанием пород деревьев. В тот вечер, открыв все подарки, я решила прогуляться и посмотреть, какие деревья растут в окрестностях родительского дома. Прежде чем выйти, немного полистала книгу. Первым в ней было дерево Иисуса, потому что узнать его проще простого. Надо сказать, что дерево Иисуса имеет весьма причудливый вид, и, посмотрев на картинку, я подумала: “В Северной Калифорнии такие деревья не растут. Оно очень странное. Я бы узнала его сразу, хоть никогда раньше и не видела”.

Итак, я вышла на улицу. И во дворах четырех соседних домов росли деревья Иисуса. Я прожила здесь 30 лет, но ни разу не обратила на них внимания. И не только в нашем тупике, но и по всему кварталу у процентов восьмидесяти домов были посажены деревья Иисуса, — не иначе как в питомнике была распродажа, когда местные жители украшали свои дворы зелеными насаждениями. А я их до этого вообще не замечала! Но когда я узнала о существовании этого дерева, то стала замечать его всюду. Это и есть моя главная мысль: мы осознаем, что нечто существует, если знаем, как оно называется. У нас появляется власть над этим нечто. Оно наше и подчиняется нам.

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

“Мы осознаём, что нечто существует, если знаем, как оно называется” — эта мысль настолько важна, что только ради знакомства с ней, только ради этой короткой строчки стоило бы купить книгу Робин Вильямс. Этот тезис универсален, он относится не только к деревьям или правилам дизайна, он показывает путь к познанию мира. Назови нечто, и это нечто станет твоим!

Посмотрите, какие красивые птички сидят на дереве! Ну да, сидят. Это просто птицы. До тех пор, пока нам их не назвали. А вот теперь мы видим, что на дереве сидят пять воробьев, три синицы и один скворец.

Посмотрите, какой замечательный дизайн у этого сайта! Ну да, красота — неописуемая. Неописуемая до тех пор, пока нам не назвали ее составляющие (по Робин Вильямс):

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

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

3. Повтор

4. Контраст

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

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

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

Четыре правила дизайна

Объявление, похожее на рис. 1, я увидел на почте. И переделал его (для собственного удовольствия) так, как показано на рис. 2.

Рис. 1

Рис. 2

Приближение

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

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

Рисунок 1

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

Рисунок 2

На рис. 2 заголовок отделен от основного текста, содержания каждого из трех пунктов сгруппированы и отделены друг от друга. Читателю не приходится напрягаться, чтобы понять, что и где ему надо делать во-первых, во-вторых и в-третьих.

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

Ни один элемент не должен занимать на странице случайное место. Каждый нуждается в визуальной связи с соседним. Благодаря этому страница выглядит ясно, утонченно и свежо.

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

Рисунок 1

На рис. 1 все строки центрированы. То есть вроде бы выравнивание есть (по центру). Но видит ли читатель центральную ось симметрии? Радует ли она его? Похоже, что нет. Читатель видит рваные края слева и справа, то есть беспорядок и сумбур на странице.

Рисунок 2

Ниже явно показаны линии, по которым выровнены строчки текста на рис. 2 (выравнивание по левому краю). Кроме того, порядковые номера написаны таким кеглем, чтобы точно попасть на горизонтали, ограничивающие элементы списка. Отступ от номера дополнительно выровнен по началу слова “аренды”.

Повтор

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

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

Рисунок 1

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

Стиль документа на рис. 1 можно описать так:

· заголовок выделяется жирным начертанием;

· все строчки выравниваются по центру.

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

Рисунок 2

На рис. 2 повторяется стиль оформления элементов списка:

· крупный номер серого цвета, точно занимающий всю высоту элемента списка;

· ширина отступа от номера;

· повышенная плотность первой строки;

· уменьшенный кегль второй строки;

· высота отступа одного элемента от другого.

Контраст

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

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

Рисунок 1

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

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

Рисунок 2

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

На принципе контраста построены и элементы списка: крупный номер серого цвета, жирность важной строки, уменьшенный кегль вспомогательной.

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

Как читается такое объявление? Сначала мы видим броский заголовок, потом пошаговую инструкцию:

1. Написать заявление.

2. Составить договор.

3. Оплатить аренду за год.

И только затем (если нужно) вникаем в детали.

---

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

Команда 4214

Руководитель: Чмелева Елена Николаевна

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

Весь текст объявления выровнен по центру, неудобно читать.	Верно! Чтобы глаз не спотыкался при переходе на новую строку, левый край должен быть ровным.
Отсутствует разделение между заголовком и основным текстом объявления. Текст нужно разделить визуально на части (пустыми строками).	То есть по принципу приближения нужно сблизить связанные части и отделить их от других частей пустым пространством.
Текст объявления написан на белом фоне. Если на почте много похожих объявлений, то это объявление “потеряется” среди них, будет незаметно.	Не думаю, что это объявление важнее других на почте! Ну а если все объявления будут цветными? Тогда среди них выделится объявление на белом фоне!
В тексте объявления между знаком номера и цифрой стоит пробел, мы думаем, что так нельзя, потому что, например, при переносе текста на новую строку будет разрыв: знак номера может остаться на одной строке, а цифра перейдет на другую, это неправильно.	Между знаком номера и числом пробел необходим. Чтобы средство отображения (текстовый редактор, браузер) на таком пробеле не разрывали строку, его делают неразрывным. Например, на HTML текст “Наша школа № 1” кодируется так: Наша школа № 1 Неразрывный пробел заменяет и пробел между школой и номером, ибо номер, “оторванный” от школы, будет выглядеть некрасиво.
Это объявление выглядит скучным, взгляд не задерживается ни на чем.	Да. Оно слишком однородно, в нем нет структуры.

Вариант команды 4214

Вариант команды 4214

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

Работа выполнена в редакторе PhotoShop. Картинка найдена в Интернете и вставлена. Фон сделали светлым, так как на синей стене объявление будет хорошо видно. Векторный редактор Inkscape скачали и установили, но еще не совсем разобрались с ним. И с векторным редактором пока мало кто знаком (всего 2 человека из группы).

Принцип приближения находит отражение в этой работе, хотя расстояние d (см. рисунок ниже) явно надо сделать меньше, то есть нужно приблизить пояснительный текст к относящейся к нему инструкции. Принцип выравнивания в работе “хромает”. Картинку и заголовок нужно выровнять по линии 1. По линии 2 выровнять вступительный текст и списочные номера. От центрирования вступительного текста лучше отказаться и подровнять текст “ящика нужно” к линии 2. По линии 3 должны быть выровнены поясняющие тексты в круглых скобках. Принцип повтора использован на элементах списка, но не точно: расстояние d в первом пункте заметно меньше аналогичного расстояния в других. По принципу контраста в каждом пункте построены инструкция и поясняющий текст (большой и маленький кегль, жирность и курсив). Заголовок выделяется за счет красного цвета и шрифта без засечек. Неоправданно выделен шрифтом и синим цветом вступительный текст “Для аренды абонентного ящика”.

Команда 4205

Руководители: Пономарева Маргарита Михайловна, Леус Елена Владимировна

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

 

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

Команда 4211

Руководитель: Струкова Наталья Николаевна

Критика исходного объявления	Комментарии куратора
Отметим, что нам не понравилось в присланном объявлении: фон, шрифт, рамка. Документ не привлекает внимание.	С фоном, шрифтом и рамкой в исходном документе все в порядке.

 

Варианты команды 4211

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

Те же ошибки, что в исходном документе. Кроме того, появился новый заголовок “Почта России”, который несправедливо перетягивает на себя внимание. Пояснения к инструкциям выделены сильнее самих инструкций. Не поставлена точка в пункте 2, между знаком номера и числом должен быть пробел. К исходному документу много претензий, но черный текст на белом фоне читается в нем без усилий. Чего нельзя сказать о предложенном варианте.

 

	Нет выравнивания, заголовок выделен недостаточно. Фокус внимания цепляется за число “271”, но этот элемент не имеет никакого отношения к сообщению. Нет пробела после точки в третьем пункте. Нет пробелов перед знаком номера и после него.
	Общая небрежность в рисунке плюс неверное выравнивание фрагментов текста по границам “конверта” и по другим фрагментам текста. После точки за номером пункта нужен пробел. Пробел нужен и после знака номера.
	Из четырех предложенных вариантов этот — более удачный, но тоже не лишен недостатков. Траурная рамка, левитирующие кнопки, отсутствие четкого выравнивания элементов. Необоснованное искажение надписи “Абонентный”.

Команда 4216

Руководитель: Федека Лилия Михайловна

Критика исходного объявления	Комментарии куратора
После обсуждения мы пришли к единому мнению о том, что нам не нравится: 1. Цвет вокруг объявления. 2. Шрифт и расположение строк по отношению друг к другу. 3. Оформление в целом.	“Цвет вокруг объявления” — это белый цвет фона? Белый фон — самый комфортный для чтения черного текста. “Шрифт и расположение строк по отношению друг к другу” — это намек на выравнивание и контраст. Согласен! “Оформление в целом” — слишком размытая претензия.

 

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

Команда 4207

Руководитель: Струкова Наталья Николаевна

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

 

Вариант команды 4207

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

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

Команда 4212

Руководитель: Зарубина Людмила Леонидовна

Вариант команды 4212

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

Неплохая работа. Но… Попытка сделать толстую выпуклую рамку не удалась. Ошибки выравнивания показаны на рисунке ниже. Контраст заголовка недостаточен, как и контраст двух строк в каждом пункте — кегли различаются незначительно, и эта похожесть, но не совпадение, воспринимается как погрешность. Если уж строки делаются разными, они должны различаться существенно. Как говорит Робин Вильямс, “нельзя быть мямлей”. Если запланировано различие, оно должно быть большим.

Команды 4225 и 4255

Руководитель: Попович Александр Борисович

Критика исходного объявления

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

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

Приятно, что тема дизайна не оставила вас равнодушными и сплотила коллектив!

 

Критика исходного объявления	Комментарии куратора
При центрировании строк внутри блока необходимо соблюдать правило трех строк. Трехстрочная группировка: строки должны явно(!) различаться по длине (например, самая длинная + средней длины + самая короткая) или в других последовательностях. В крупных абзацах каждая тройка строк должна подчиняться правилу трехстрочной группировки. Правило нарушено, и поэтому почти одинаковая, но в то же время разная длина строк затрудняет поиск начала следующей строки при беглом чтении сплошного текста. Исправили это, превратив текст в сплошной блок, выровненный по левому краю, но в этом случае порядковые номера потерялись в сплошном потоке символов. Перешли к анализу нумерации.	Правило трех строк верное, смысл его понятен: нельзя отличия делать на чуть-чуть, это почти всегда воспринимается как погрешность. Либо полное совпадение (длин строк, кегля, плотности, шрифта, цвета…), либо существенное отличие. Правило трех строк хорошо на трех строках! Обычный большой текст центрировать не надо. Особенно не надо центрировать строки списка (маркеры так и просятся на одну вертикаль).
Излишнее дублирование цифр. Номера в списках несут дополнительную смысловую нагрузку, поэтому применять их стоит осторожно. Нумерация применяется, как правило, для подчеркивания степени важности элемента списка (например, когда элемент списка состоит из множества строк или даже из нескольких абзацев). Чаще нумерация применяется для обозначения порядкового номера абзаца в тексте документа для последующей ссылки на него (например: “см. 2.14”). В данном документе нумерация применена для отображения последовательности шагов, чего можно добиться и другими более простыми способами. Исправили это, удалив номера. В этом случае потерялись этапы описанных действий. Перешли к анализу содержания.	Нумерация применяется для отображения последовательности шагов. Это верно. И нумерация, как способ структурирования, весьма эффективна. Нумерацию следует применять всюду, где важен порядок действий, в противном случае лучше использовать не номера, а графические маркеры (маркированный список). В работе команды 4225 крупные цифры 1, 2, и 3 воспринимаются как номера действий (оригинально поставленные в конец пункта), а не как номера окошек. Если бы номера окошек не совпадали с номерами действий (как это случайно получилось), вариант 4225 вводил бы читателя в сильное заблуждение.
Содержательная часть документа, состоящая из трех абзацев, сливается в единый, неудобный для осмысления, блок. Абзацы — смысловые участки текста — должны быть явно выделены, чтобы читатель сразу увидел, где кончается один смысловой фрагмент и начинается другой. Разбили содержательную часть на три самостоятельных блока.
Ура! Поняли смысл, заложенный в текст документа. И обратили внимание на выделенную первую строку. Оказывается, заголовком документа является не она, а следующая за ней. Под заголовком “Абонентный почтовый ящик” мог бы скрываться текст и о временном перемещении ящиков в связи с ремонтом помещения, и об изменившейся арендной плате. То есть объявление с таким заголовком привлекало бы большое количество людей, которым оно не нужно (например, тех, у кого ящик уже имеется). Выделенная строка скорее претендует на заголовок раздела или, в данном случае, заголовок серии типовых объявлений. Поменяли выделение. И в результате получили пять самостоятельных блоков.	Рассуждения о замене заголовка логичны, и перенос акцента кажется хорошей идеей.
Монотонность шрифта. Примененное шрифтовое оформление удобно для “больших” документов, то есть тех, где много листов. К мелким типографским работам больше подходит акцидентный набор — сложный набор с применением разных шрифтов (гарнитур), размеров (кеглей) и начертаний. Что и было сделано в конечном итоге.	То есть должен быть задействован принцип контраста!

 

Вариант команды 4225

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

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

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

 

Вариант команды 4255

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

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

 

 

Вариант команды 4255

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

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

Апелляции

Александр Борисович Попович (руководитель команд 4225 и 4255, “Объединение ЛиК”, Оленегорск) прислал апелляцию на мои комментарии к работе команды 4225.

Апелляция затрагивает актуальный вопрос о правилах в дизайне и их нарушениях.

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

Новички не знают правил. И часто не хотят знать. Они уверяют себя, что творчество не может подчиняться законам. И предлагают публике какофонию вместо гармонии.

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

Апелляция Александра Борисовича

> Если бы номера окошек не совпадали с номерами действий

> (как это случайно получилось), вариант 4225 вводил

> бы читателя в сильное заблуждение.

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

“Если бы номера окошек не совпадали с…”, мы бы искали (и нашли бы!) другое решение :)

Верните честно заработанные 0,5 балла ;)

Ответ куратора

Возвращаю! :)

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

Это тот самый пример, когда гармонично нарушаются правила!

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