Школа
Вёрстка

Делаем вот такой шаблон для афиш периодического мероприятия

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

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

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

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

  3. Правилен ли наш выбор в наличии или отсутствии точек в конце предложений?

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

Андрей Коржиц
9 фев 2014
👁 24748   🗩8
Вёрстка

Делаем вот такой шаблон для афиш периодического мероприятия

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

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

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

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

  3. Правилен ли наш выбор в наличии или отсутствии точек в конце предложений?

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

Андрей Коржиц
9 фев 2014
👁 24748   🗩8
А. Г.
Арт‑директор и автор учебных программ бюро
Полезно
 28
28
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итого:

Было‑стало:

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

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

Типографика в вебеМодульная вёрсткаМодульная сеткаЯкорные объектыЧередование ритмаПравило внутреннего и внешнего
Полезно
 28
28
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 1

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

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

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

Рис. 2

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

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

Рис. 3

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

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

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

Рис. 4, 5, 6

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

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

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

Рекомендуем другие советы