Андрей Коржиц
10 февраля 2014

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

Делаем вот такой шаблон для афиш периодического мероприятия. Двухцветный вариант (А4) для поверхностей с множеством других объявлений, а цветной на белом фоне (А3 и больше) для более свободных поверхностей. Будущий рисунок представлен наброском.

  1. Хотелось бы узнать ваши замечания по размещению текстовой информации, т. к. смущает то, что в этом варианте уже ничего не смущает. Использовалось три кегля (не считая официальной обязательной надписи внизу восьмым кеглем) и две гарнитуры.
  2. Посоветуйте, пожалуйста, как поступать, если необходимо размещать одну информацию в совершенно различных местах? Удачно ли, на ваш взгляд, наше решение с разделением вида афиши на два варианта для различных мест размещения?
  3. Правилен ли наш выбор в наличии или отсутствии точек в конце предложений?
  4. Как сформулировать авторскую подпись, если мы официально не зарегистрированы, сайт есть, занимаемся дизайном нерегулярно и больше только из любви к делу, а имена в данном случае не хотим указывать?


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

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

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

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

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

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

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

Ваш макет устроен по принципу сендвича:


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

Но слоёв-модулей слишком много — целых девять. Из-за этого афиша выглядит дробной и сложной.

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


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


Добавим иллюстрацию. Коричневую лужу сразу заменим на зелёную травку:


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


Поставив картинку и заголовок, мы ответили на вопрос «что». Ответим на вопросы «когда» и «где», добавив этаж с датой и адресом. Обратите внимание, что колонки нового модуля имеют одинаковую высоту:


Добавим строки культурной программы. Один из элементов списка явно выбивается по длине:


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


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


Названия и адреса организаций расставим в подвале в виде колоночек одинаковой высоты. Логотип тоже подчиним модулю:


Освободим место для телефонов, подняв иллюстрацию и текстовую часть. Телефоны стали частью подвального модуля, поэтому логотип подрос:


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

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


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

Постараемся согласовать элементы макета, сделав его более цельным.

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


Этот приём очень любят газетчики и пока совсем не используют веб-дизайнеры.

Обратимся к заголовку. Отцепим слово «акция», избавимся от кавычек и наберём заголовок крупнее. Слово «акция» приклеим к началу заголовка:


Назовём такую конструкцию заголовка «биркой». Советую её запомнить: она удобна для выделения рубрик и ключевых слов. Бирка делает заголовок законченным, одетым и более дорогим. Бирка для заголовка — то же, что засечка для буквы, карниз для здания, подпись для картинки. Как правило, бирка контрастирует с заголовком: жирный с нежирным, капитель со строчными.

Теперь смысловая текстовая часть. Развеселим по-афишевски (т. е. в стиле журналов «Афиши») строки списка цветами и стилями. Одну из «фич» выделим зелёной травкой в стиле иллюстрации, чтобы дополнительно объединить части макета.


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

Логотип в подвале стоит уменьшить. Заодно приведём к общему знаменателю цветовой акцент в телефонах:


Итого:


Было-стало:

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

Этажей — меньше, кегль — крупнее, конструкция — проще и крепче.

P. S.

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

P. P. S.

Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Михаил Апсолямов
10 февраля 2014

Артем, в вашем варианте потерялось время окончания мероприятия — 16 часов.
Возможно, для афиши не критично, но для гостей — важно.

Александр Кадуков
10 февраля 2014

Не нужно ли свесить кавычку в названии клиники? Вообще, в каких случаях стоит это делать, а в каких нет?

Алексей Копылов
11 февраля 2014

Единственное неудачное решение, на мой взгляд,— зелёный цвет шрифта ошибочно объединяет такие несвязанные вещи как «Аквагрим для детей», «Бесплатные консультации» и «8 029».

Антон Мальцев
19 февраля 2014

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

+ Я добавил стикер расшифровывающий, что это за мероприятие. А то так сразу и непонятно.

Андрей Коржиц
25 февраля 2014

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

Игорь Адаменко
27 февраля 2014

Артём, вы не ответили на последний вопрос: «Как сформулировать подпись?»

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

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

Сергей Якунин
12 марта 2014

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

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

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

3. Втиснутая иллюстрация. Я хочу «дать» плакату воздуха и объёма. Решение радикальное — выделить больше места под «иллюстрацию» и заменить её.

Такой простой план. Три пункта — газетные блоки, целые предложения, «цепляющая» и «свободная» картинка.

Начнём с простого — с индексов важности. Я укажу свои предпочтения, но каждый может расставить индексы сам, главное — не все пятерки. Перечислим элементы с первоначального постера:

Рис. 1

По ходу замечаем выражения, дублирующие смысл (см. цветные рамки). Волевым решением выкидываю логотип «эгиДА» и крик «Приходите! …» — их легко добавить после, даже не меняя макета.

Составим предложение из самых важных смысловых блоков:
«11 января, с 13:00 до 16:00,
в Минском дворце детей и молодежи
50 кошек и собак будут ждать встречи
с хозяевами»

Сформируем «газетные» блоки — с контактной инфой, программой акции, и блоком про «палатку помощи». Снизу добавим строку про министерство и дизайнера. Расчистим место в центре.

Рис. 2

Пришлось напечатать на А4 — текст легко читается с одного метра.

Поставим твердою рукою картинку на три блока. Картинка изображает саму встречу, а не ожидание — поэтому заменим «будут ждать встречи» на «будут встречать». Увеличим нужные нам слова. Блок контактов дополнительно выделим маркером телефонов и ссылками.

Рис. 3

Вроде — норм. Крупный текст нужно править — пока это отложим.

Результат меня не устраивает, повторюсь, из-за картинки. Текущая не имеет объёма, не цепляет зрителя, не из мира клиента; она лишь выражает «мечту менеджера» — придут люди и заберут животных. Объекты плоские, штрихи конкурируют со штрихами мелкого текста, динамики нет — все стоят или сидят. Картинка «попадает» в детский стиль рисования, но это не является ни плюсом, ни минусом.

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

Рис. 4, 5, 6

Ренат Биктагиров
8 апреля 2014

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

Без этой фразы и акция не акция, никаких действий не требуется. «Приходите» всё меняет.


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

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Cверстал одностраничный плеер. Вторая часть 3




Недавно всплыло

Расскажите об обратной связи в интерфейсе 1 Расскажите об управляемости. Домашнее задание 4 У меня остаётся ощущение, что я идиот, «рассыпала бобы», но на конкретных ошибках не могу себя поймать 3 Это я неправ, что долго думал, или магазин, что допустил такую ситуацию? 3