Владимир Незнамов / Блог

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

Все заметкиТеги

Герман Цапф. Философия дизайна Германа Цапфа

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

Размышления Цапфа касаются основ, современного (на момент написания той или иной статьи) состояния и перспектив развития отрасли — каллиграфии, развитии шрифтового дизайна, защите авторских прав и о том, как на типографику влияют и будут влиять технологии.

Примечательно, что при всей энциклопедичности и схожести тематики «Философии дизайна» с «Обликом книги» Яна Чихольда, Цапф, всё же, смотрит в будущее. Он делает ставку на развитие сначала фотонабора, а затем — на дизайн шрифтов и набор текста для печати с помощью компьютера.

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

Книга на Литресе

Как я борюсь с дизайнерским блоком

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

Подобрать референсы для вдохновения

Прогуливаюсь по подборкам схожих проектов на Behance, Dribbble, Pinterest, Logopond и других тематических площадках, смотрю как другие дизайнеры решали похожие задачи.

Включить подходящую музыку

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

Ограничить время

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

Обратиться к классике

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

Почитать

Могу порекомендовать сразу три хорошие книги, посвящённые теме выработки новых идей, борьбе за внимание и новым подходам к творчеству:

  1. Чип Хиз, Дэн Хиз. Сделано, чтобы прилипать
  2. Майкл Микалко. Взлом креатива
  3. Бен Парр. Ловушка для внимания

Про халтуру

Я никогда не был поклонником фильмов и сериалов российского производства. При их просмотре, как правило, приходится испытывать или стыд, или отвращение.

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

Без огрех тоже не обошлось, скажем трёхмерная графика последнего эпизода откровенно позабавила.

Кадр из восьмого эпизода первого сезона «Пищеблока»
И ещё один

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

Кадр из второго эпизода второго сезона

Это первая и очень стойкая ассоциация:

Кадр из «Бегущего по лезвию 2049»

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

Кадр из первого эпизода второго сезона

Да, это всем знакомый Andersen из Ikea, которой, к слову, как в СССР тогда не было, так и в России сейчас нет.

Маэстро, ваш выход

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

И есть ведь с чем сравнить. Вспомнил сериал «Чернобыль» от HBO. Там также во многих сценах отражён быт середины 80-х в союзе. И создатели смогли сделать его значительно более аутентичным, чем наши соотечественники.

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

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

Ян Чихольд. Облик книги

«Облик книги» — собрание статей и эссе европейского типографа Яна Чихольда о типографике, этапах создания и эстетике бумажной книги.

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

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

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

Книга на Литресе

Рабочий плейлист

Обновил свой плейлист для работы. В нём я собираю фоновую музыку, которая не только заполняет тишину, но и помогает мне не отвлекаться от процесса. Сейчас длительность плейлиста — 8 ч. 40 мин.

Как я сделал тёмную тему главной страницы на чистом CSS

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

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

Фон и текст

В таблице стилей прописываем, какие цвета должны быть у фона страницы и текста:

:root {
  --var-bgcolor: #fff;
  --var-fontcolor: #000;
}

И ссылаемся на эти данные для тела страницы:

body {
  background-color: var(--var-bgcolor);
  color: var(--var-fontcolor);
}

Для того, чтобы тема страницы менялась автоматически в зависимости от установок на устройстве пользователя, используем функцию prefers-color-scheme. Здесь мы указываем, как будут выглядеть фон и текст при включенной тёмной теме. Я выбрал два оттенка серого цвета, не создающих резкого контраста при использовании друг с другом:

@media (prefers-color-scheme: dark) {
  :root {
  --var-bgcolor: #222;
  --var-fontcolor: #eee;
  }
}

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

Логотип

Для того, чтобы логотип менял свой цвет при включении тёмного режима, предварительно сохраняем его файл в векторном формате SVG. В этом помогут Adobe Illustrator, Figma, Inkscape или любой другой векторный редактор.

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

Скачиваем оптимизированный логотип и открываем в любом текстовом редакторе, например Блокнот на Windows или Noto на Mac. Увидим примерно такой код, вместо многоточия в path будет длинная последовательность символов — это координаты всех точек изображения:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 417.5 417.5" style="enable-background:new 0 0 417.5 417.5;" xml:space="preserve">
<path d="..."/>
</svg>

Копируем этот код и вставляем прямо в разметку страницы, где должен находиться логотип, добавляем в тег svg класс logotype, получится так:

<svg class="logotype" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 417.5 417.5" style="enable-background:new 0 0 417.5 417.5;" xml:space="preserve">
<path d="..."/>
</svg>

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

:root {
  --var-bgcolor: #fff;
  --var-fontcolor: #000;
  --var-fill: #000;
}

Описание тёмной темы дополняем требованием к цвету лого при включении тёмного режима и ссылаемся на эти данные для изображения логотипа:

@media (prefers-color-scheme: dark) {
  :root {
  --var-bgcolor: #222;
  --var-fontcolor: #eee;
  --var-fill: #eee;
  }
}

.logotype {fill: var(--var-fill);}

Готово, теперь тёмный режим автоматом перекрашивает и логотип.