Позднее Ctrl + ↑

Логотип Чингизу Аллазову

Чингиз Аллазов — боец тайского бокса. 13-кратный Чемпион Мира, 3-кратный Чемпион Европы, 14-кратный Чемпион Республики Беларусь. За 13 лет боец провел более 250 поединков на любительском и профессиональном ринге с 99 % побед.

В 2016 году я сделал логотип для Чингиза:

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

Фотографии из Инстаграма Чингиза

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме.

Процесс работы над плакатом Mercedes Benz

На курсе «Типографика и верстка» Игоря Штанга, мы делали разные задания. Одно из них — переверстка плаката на выбор. Там было что-то про очки и про Mercedes. Конечно, я сходу выбрал автомобильную тему. На курсе у нас было всего 50 минут, поэтому ничего вменяемого там не вышло.

Результат за 50 минут

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

После курса я написал письмо Игорю. Предложил доделать макет в свободное время и он согласился. Сходу дал несколько наставлений: Можешь подумать насчет графики: что можно поставить вместо кружков и стрелки? Как связать графику с автомобильной темой плаката?

Тааак... автомобильная тема плаката. Сразу в голову пришли иллюстрации Герда Арнца. Кстати, вместо кружков можно поставить звезду и логотип Mercedes. Звезда — логотип Москвы:)

Арнц в деле

Что-то, кажется, не то... Хотя, идея колес и логотипа мне понравилась. Игорь написал:

  • Давай без рассказов в плакате. Лучше, чтобы картинка оставалась в рамках абстракции. У тебя получается история. Ты нарисовал буквально: «Немецкая машина врывается в Москву». Что написано, то и нарисовано — плохо.
  • Варианты со стрелкой и кружками были хороши. Просто нужно поискать другие формы.

Окей. Я зацепился за логотип и звезду и выдал пару неудачных вариантов.

Логотип Москвы и Логотип Mercedes

Ответ арт-директора:

  • Надо попробовать передать динамику, не рисуя автомобиля. Мерседес на плакате Мерседеса — это самый неинтересный вариант, так каждый может. Или рисуй его условно.
Подборка хороших вариантов от Игоря
  • То есть, задачу можно сформулировать так: какими абстрактными средствами и образами можно показать динамику? Кроме звезд и кружков:) Как можно абстрактно изобразить автомобиль?
  • Нашел несколько плакатов с курса, на которых объекты изображены небуквально:
Баня и камеры. Плакаты с прошедшего курса
  • Подбери образы, а потом подумай, как их можно изобразить.

Звезда... логотип... динамика. У меня появилась идея показать движение звезды Мерседес по кривой. При этом закодировать движение цветом флага Германии. Из истории известно, что три луча мерседеса означают стихии, для которых они делают двигатели: земля, вода, воздух.

Звёзды логотипа Mercedes в движении
  • Вся эта цветная штука не очень дружит с текстом. Я про верхний белый текст и цветную иллюстрацию. Давай вставлять на макет пока что всякие готовые штуки, а не рисовать свои. Так будет быстрее. Например, конфетти с плаката Форда:
Игорь вставил на плакат всякие штуки из других плакатов

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

С полосками по окружности
  • В общем — нормально. Со стрелочкой, правда, мне больше нравился:)
  • Текст внизу скачет. Точки в конце колонок не нужны.
  • Картинка выглядит клипартной. Заголовок где-то посередине. Вертикальный ритм слабый. Ты усилил картинкой линейность, которая была в заголовке. Сейчас похоже на плакат в стиле диско.

Оукеей... Вернулся к стрелке. Поправил текст внизу. Добавил эффект движения буквам и стрелке. Показал сетку Игорю.

Движение стрелки и текста. Сетка
На стене
  • Уменьшай поля по бокам, не двигая элементы. Cтанет лучше. К счастью, мы можем делать, что захотим...
  • Давай, для полной картины, попробуем совместить графику, текст и фотографию. У тебя есть только графика и текст.
  • Например, летит самолетик и отбрасывает тень. Или кусок машины светит фарами на фон. 
Черновые наброски идей

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

Неудачные попытки совместить графику и фото
  • А другие машины не пробовал? Кстати, лучше ее на передний фон поставить. Фотка почти всегда главнее.
  • По стилю, кстати, можно дотянуть до ар-деко. Шрифт примерно похож. Такое швейцарское ар-деко.

Пересмотрел разные плакаты в стиле ар-деко. Там часто использовали шум на фото и лёгкие градиенты. Так сложилось, что в это время в Минск приехал Илья Бирман. На живых советах я ему показал плакат. Он дал несколько советов, сказал как можно показать динамику автомобиля. Вот плакат до и после:

До и после

Показал Игорю результат, плакат утвержден. Я очень доволен финальной версией.


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

Написал конспект по курсу «Типографика и вёрстка» Игоря Штанга.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме.

2017   плакат

Процесс создания схемы Минского метро. Часть 2

Если вы пропустили, вот первая часть.

Расскажу про процесс работы в марте и апреле. Многие удивляются, что мы делали такую работу 8 месяцев. Хочу уточнить этот момент. Мы с Костей уделяли схеме метро не более 7...9 часов в неделю. В целом, я потратил чуть больше, чем 200 часов на эту работу. Это не так мощно звучит, как 8 месяцев.

Март

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

Далее деревья. Мы собрали папку файлов с разными картами и схемами. Некоторые из них впечатлили особенно:

Вдохновились и собрали новую версию. Попробовали разные цвета в зданиях и детализиpовали их. Сделали новые деревья и реку. Добавили градиент переходу — стало лучше:) Сгладили спуски линий и тень у центрального острова. За городом станции показали «пеньками». Использовали более родные цвета для города:

Отправляем Илье, получаем ответ:

Парки, деревья, река — кайф.

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

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

В целом форма не кажется красивой, а целое важнее деталей. Это не значит, что детали не важны. Это только значит, что если с деталями всё прекрасно, а в целом получается не очень, то это не катит :-)

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

Илья сказал, что идея нравится и попросил постараться сделать линии симметричными. Кубами мы с Костей отметили здания, которые планируем рисовать. Ещё добавили зелёную линию для теста. Вот такой черновой макет получился в итоге:

Ответ Ильи:

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

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

Бордер у круга надо убрать, а фон за его пределами сделать темнее.

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

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

Апрель

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

Илья пишет:

Надо как-то сжать расстояние между Октябрьской и Площадью Победы. При этом попасть перекрёстком красной и синей линии в центр круга.

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

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

Зелёную линию плохо видно над парком.

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

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

Ответ арт-директора:

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

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

Насчёт обозначений станции в центре. Сейчас их не видно, потерялись. Давай еще поищем...

Верхние станции синей линии возле круга хочется написать справа.

Речку точно можно бледнее, она сейчас спорит с линиями.

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

Давайте уже поправим транслит?!


Про организацию макета расскажу в 4, последней, части.
Процесс создания схемы метро Минска: часть 1 · часть 2 · часть 3
Последняя версия схемы Минского метро.

Ещё скоро появится отдельная заметка от Кости. Он расскажет про процесс создания зданий в центре в подробностях.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме.

2017   схема

Краткий конспект по курсу «Типографика и вёрстка» Игоря Штанга

Расскажу про курс, который проходил 22...24 сентября в Минске. Так сказать, скромный конспект. Тут только сухой остаток. Если что-то не понятно, спросите у меня:)

День 1. Бегство от серого прямоугольника

Как обычно заказчик присылает задание? Обычно, это просто текст. Как к нему подступиться? Сначала, нужно выяснить:

  • Кто будет читать его?
  • Где будет висеть текст?

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

Теперь, пару слов о приёмах, которые помогают убежать от серого текста:

Набрать крупно. Секрет прост. Крупный текст хорошо смотрится с пиктограммами и иконками. Кстати, крупный текст ещё может быть фоном для другого текста. Дело в том, что крупный текст повышает контраст. Серый прямоугольник превращается в располосицу — уже лучше:)

Разбить на колонки. Простой приём, но эффективный. Появляется ритм. Читать текст по колонкам легче. Формат колонки может повторять формат листа.

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

Активизировать фон. Дать больше воздуха формату.

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

Выйти в третье измерение. Секрет в наслоении разных текстовых блоков.

День 2. Конструкция



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

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


  1. Закрыть границей другого модуля. Можно использовать плашку или линейку. Самое крутое — добавить пространства.
  2. Взять в рамку или поставить на плашку. Можно линейки.
  3. Закрепить углы. Якорные объекты должны быть контрастны. Тут разговор только о формате.
  4. Коснуться каждой из сторон. Неважно, касается обреза или поля.
  5. Собрать все элементы в центре.

Сетка. Модульность — это не сетка. Сетка для выравнивания. Сетка не делит макет по смыслу.


Комбинаторика. Есть семь способов, как расположить много объектов по сетке:

  1. Заполнить модули сетки не до конца.
  2. Покрасить в разные цвета.
  3. Заполнить элементами разных видов.
  4. Объединить модули.
  5. Выйти за пределы модуля.
  6. Добавить новый слой.
  7. Соблюсти баланс порядка и хауса.

Верстка по форме. Существует три вида:

  1. Текст повторяет форму.
  2. Текст ссылается на форму.
  3. Текст создает форму.

День 3. Простая и сложная вёрстка

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

Абзац. Первый абзац приятно смотрится, когда его прибивают к заголовку.

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

Отступы. Минимальный отступ равен его межстрочному интервалу.

Списки бывают:

  1. Упорядоченные или неупорядоченные.
    Если последовательность элементов не зависит от определенного логического порядка, то список является неупорядоченным. Если же от перестановки элементов изменяется смысл, то список называется упорядоченным.
  2. Нумерованные или маркированные.
    Каждый элемент нумерованного списка обозначен цифрой, маркированного — графическим маркером.
  3. Одноуровневые или многоуровневые.
    Многоуровневый список имеет вложенную структуру.

В списках можно использовать цифры, буквы алфавита, отступ слева и «—». Пойнты или точки лучше не использовать.

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


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме.

Плакат Mercedes Benz

На курсе «Типографика и вёрстка» Игоря Штанга нам дали задание: сделать из дореволюционного рекламного объявления Mercedes Benz швейцарский плакат. На решение задачи было дано 50 минут.

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

Три в одном

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

Сетка

Я использовал вертикальную из 12 колонок для выравнивания элементов. А для вертикального ритма — горизонтальную сетку.

Стиль

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

Спасибы

Спасибо Игорю Штангу за курирование работы. Илье Бирману за совет о размытых объектах на фото. Отдельно хочу отметить курс «Типографика и вёрстка» Игоря, очень круто. Если вы дизайнер, технолог, редактор или просто любознательный человек, посетите курс — не пожалеете.


Если интересен процесс перевёрстки, поставьте «+» в комментариях. Если соберётся два плюса, я напишу отдельную заметку с промежуточными вариантами и подробным описанием:)

Написал про процесс работы над плакатом.
Написал конспект по курсу «Типографика и вёрстка» Игоря Штанга.

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

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме.

Ранее Ctrl + ↓