Блог Михаила Озорнина

Как писать дату и время в интерфейсах

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

Общие правила

В интерфейсе:

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

В бумажных отчетах:

  • год допустимо указывать даже тогда, когда он совпадает с текущим.

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

1 Абсолютные даты

1.1 Полный + время

Русский English
1 ноября, 12:25 November 1, 12:25
1 ноября 2014, 12:25 November 1, 2014, 12:25

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

1.2 Короткий + время

Русский English
1 янв, 12:25 Jan 1, 12:25
1 дек 2015, 12:25 Dec 1, 2015, 12:25

1.3 Полный без времени

Русский English
1­ ноября November 1
1 ноября 2014 November 1, 2014

1.4 Короткий без времени

Русский English
1 янв Jan 1
2 ноя 2014 Nov 2, 2014

2 Относительные даты

2.1 Время в прошлом, длинно

Что Русский English
< 1 мин 1 секунду назад 1 second ago
5 секунд назад 5 seconds ago
< 59 мин 1 минуту назад 1 minute ago
2 минуты назад 2 minutes ago
5 минут назад 5 minutes ago
Сегодня 16:25 16:25
Вчера Вчера, 13:25 Yesterday, 13:25
Позавчера и старше 20 декабря, 13:25 December 20, 13:25
Позавчера и старше, если год не совпадает с текущим 20 декабря 2017 December 20, 2017

2.2 Время в прошлом, коротко

Что Русский English
< 1 мин 5 с назад 5 s ago
< 59 мин 5 мин назад 5 min ago
Сегодня 16:25 16:25
Вчера Вчера, 13:25 Yesterday, 13:25
Позавчера и старше 20 дек, 13:25 Dec 20, 13:25
Позавчера и старше, если год не совпадает с текущим 20 дек 2017 Dec 20, 2017

3 Диапазоны дат

В русском: если обе даты без пробелов, то среднее тире (&ndash;) без пробелов, если внутри даты есть пробелы, то между датами &thinsp;&mdash;&thinsp; (длинное тире отбитое тонкими пробелами). Если вы не используете среднее тире, то замените его на длинное.

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

3.1 Полный со временем

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

Русский English
С 1 ноября, 12:25 по 5 ноября, 13:35 From November 1, 12:25 to November 5, 13:35
С 1 ноября 2014, 12:25 по 12 мая, 13:35 From November 1, 2014, 12:25 to May 12, 13:35
С 1 ноября 2013, 12:25 по 12 мая 2014, 13:35 From November 1, 2013, 12:25 to May 12, 2014, 13:35
Когда один и тот же день:
1 ноября, с 12:25 по 13:35 November 1, from 12:25 to 13:35
1 ноября 2014, с 12:25 по 13:35 November 1, 2014, from 12:25 to 13:35

3.2 Средний (с тире) со временем

Отличие от 3.1: этот лучше использовать в таблицах и аналогичных конструкциях.

Русский English
1 ноября, 12:25 — 5 ноября, 13:35 (&thinsp;&mdash;&thinsp;) November 1, 12:25 — November 5, 13:35 (&thinsp;&ndash;&thinsp;)
1 ноября 2014, 12:25 — 12 мая, 13:35 (&thinsp;&mdash;&thinsp;) November 1, 2014, 12:25 — May 12, 13:35 (&thinsp;&ndash;&thinsp;)
1 ноября 2013, 12:25 — 12 мая 2014, 13:35 (&thinsp;&mdash;&thinsp;) November 1, 2013, 12:25 — May 12, 2014, 13:35 (&thinsp;&ndash;&thinsp;)
Когда одна дата:
12:25—13:35, 1 ноября (12:25&ndash;13:35) 12:25—13:35, November 1
12:25—13:35, 1 ноября 2014 (12:25&ndash;13:35) 12:25—13:35, November 1, 2014

3.3 Короткий со временем

Русский English
1 янв, 12:25 — 5 ноя, 13:35 (&thinsp;&mdash;&thinsp;) Jan 1, 12:25 — Nov 5, 13:35 (&thinsp;&ndash;&thinsp;)
1 дек 2015, 12:25 — 3 янв, 13:35 (&thinsp;&mdash;&thinsp;) Dec 1, 2015, 12:25 — Jan 3, 13:35 (&thinsp;&ndash;&thinsp;)
Когда одна дата:
12:25—13:35, 1 ноя (12:25&ndash;13:35) 12:25—13:35, Nov 1
12:25—13:35, 1 ноя 2014 (12:25&ndash;13:35) 12:25—13:35, Nov 1, 2014

3.4 Полный без времени

Русский English
В одном месяце
1­—5 ноября (1&ndash;5) November 1—5 (1&ndash;5)
1—5 ноября 2014 (1&ndash;5) November 1—5, 2014 (1&ndash;5)
В разных месяцах
1 ноября — 12 декабря (&thinsp;&mdash;&thinsp;) November 1 — December 12 (&thinsp;&ndash;&thinsp;)
1 ноября 2014 — 12 января (&thinsp;&mdash;&thinsp;) November 1, 2014 — January 12 (&thinsp;&ndash;&thinsp;)
1 ноября 2013 — 12 января 2014 (&thinsp;&mdash;&thinsp;) November 1, 2013 — January 12, 2014 (&thinsp;&ndash;&thinsp;)

3.5 Короткий без времени

Русский English
1 янв — 2 июня (&thinsp;&mdash;&thinsp;) Jan 1 — Jun 2 (&thinsp;&ndash;&thinsp;)
2 ноя 2014 — 12 дек (&thinsp;&mdash;&thinsp;) Nov 2, 2014 — Dec 12 (&thinsp;&ndash;&thinsp;)
2 ноя 2014 — 12 дек 2014 (&thinsp;&mdash;&thinsp;) Nov 2, 2014 — Dec 12, 2014 (&thinsp;&ndash;&thinsp;)

4. Длительность

Как делают другие:

Есть два формата: цифрами и словами. Вне зависимости от строкового представления сортировка всегда по длительности, а не по строковому представлению.

4.1 Цифрами

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

Стоит помнить, что 1 секунда и 1,0 секунда — не одно и то же, нельзя их путать.

С секундами      Только минуты
0:12,256 Ведущий 0: для минут обязателен
0:12 Ведущий 0: для минут обязателен
2:25 0:02 Для варианта Только минуты ведущий 0: для часов обязателен
25:25 0:25 В этом и ниже миллисекунды скорей всего не нужны, если речь идет не о спортивных соревнованиях
25:00 0:25
2:25:25 2:25
21:25:25 21:25
1:02:25:25 1:02:25 Только минуты в этом случае смотрится особенно неудачно
48:25:25 48:25

4.2 Буквами полный

Все числа округляются до целых. Написать 25 минут и 25,5 секунд — нельзя.

Русский English
Елси хотите миллисекунды, см. 4.1
12 секунд 12 seconds
2 минуты и 25 секунд 2 minutes 25 seconds
25 минут и 25 секунд 25 minutes 25 seconds
25 минут 25 minutes Обратите внимание, здесь не написаны секунды, так и надо
2 часа и 25 минут 2 hours 25 minutes
21 час и 25 минут 21 hours 25 minutes
1 день и 2 часа 1 day 2 hours
48 часов и 25 минут 48 hours 25 minutes
10 дней 10 days
2 недели и 5 дней 2 weeks 5 days Если нужно понедельное деление
6,5 месяцев 6.5 months

4.3 Буквами короткий

Русский English
12,256 с 12.256 s
12 с 12 s
2 мин 25 с 2 min 25 s
25 мин 25 с 25 min 25 s
25 мин 25 min Обратите внимание, здесь не написаны секунды, так и надо
2 ч 25 мин 2 h 25 min
21 ч 25 мин 21 h 25 min
1 д 2 ч 1 d 2 h
48 ч 25 мин 48 h 25 min
10 д 10 d
2 нед 5 д 2 w 5 d Если нужно понедельное деление
6,5 мес 6.5 mo

С десятичной дробью — лучше не надо

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

Лучше не использовать зачеркнутые варианты.

Десятичная Сколько это на самом деле
3,10 часа 3:06
3,20 часа 3:12
3,25 часа 3:15
3,30 часа 3:18
3,33 часа 3:20
3,40 часа 3:24
3,50 часа 3:30
3,60 часа 3:36
3,67 часа 3:40
3,70 часа 3:42
3,80 часа 3:48
3,90 часа 3:54
3,5 года
3,8 года 3 года, 9 месяцев и около 22 дней
3,2 месяца 3 месяца и около 6 дней

5 Выбор периода показа чего-нибудь

5.1. Говорите по-человечески

Неделя лучше 7 дней, месяц лучше 30 дней, это более по-человечески. С этим есть проблема: месяц менее однозначно, чем 30 дней, вариант 30 дней безопасней. Если вы уверены (например, проверили), что у вас разногласия нет, или что оно допустимо, то месяц, лучше последние 30 дней.

Пример: Яндекс в достаточно строгом продукте Яндекс.Метрика использует неделю и месяц. Они точно тестировали разные формулировки и сделали так:

Можно Яндексу, можно и вам

5.2. Пишите «дней», а не «суток»

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

5.3. Будьте последовательны

Хорошо: Неделя, Месяц, Квартал
Хорошо: Последние 7 дней, 30 дней, 90 дней
Плохо: Неделя, 30 дней, Квартал.

Примечание
90 дней и кварталы могут быть вместе и использоваться в разных частях системы одновременно. Если кому-то нужна поквартальная отчетность, должны быть точно кварталы. 1 квартал, 2 квартал, Q1, Q2, и так далее.

5.4. Используйте адекватные величины

Используйте те величины, какими бы назвали этот период в жизни. Вместо 48 часов лучше 2 дня, вместо 3600 секунд — 1 час, вместо 1440 минут — 1 день. 24 часа, 60 минут — норм. Могут быть исключения, но обычно так.

5.5. Не делайте слишком много

Это искусственный макет, так не надо:

Вот тут ↑ перебор вариантов. Такое количество пунктов сложно сверстать, из него непросто выбрать (с учетом того, они почти все одинаковые по тексту).

Что делать, если пунктов много:

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

5.6. Не дублируйте везде «последние»

И Мильчин, и другие люди советуют не дублировать в списках одинаковое начало.

5.7. Итого

Кажется, что выбирать надо из следующих вариантов (использовать все не надо):
секунды: 1, 5, 10, 15, 30, 60
минуты: 1, 5, 10, 15, 30, 60
часы: 1, 2, 4, 6, 8, 12, 24
дни: 1, 5, 7, 10, 14, 15, 30, 90, 180
недели: 1, 2, 4
месяцы: 1, 2, 3, 6, 12
лет: 1, 2, 5, 10

Если вашего интервала тут нет, может он и не очень осмысленен? Наличие в интерфейсе интервалов последние 5 часов, 18 минут, 13 дней, — вызывает вопросы. Такое может быть из-за особой специфики (например 5-часовые смены операторов), но обычно такого не должно быть.

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

Проще один раз отладить и сделать эталонную реализацию.


Подобные посты отмечены тегом гайдлайны
Подписаться на блог…

Как делать подписи для таймсерий

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

В чем проблема

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

Библиотека отрисовки почему-то решила не подписывать даты и подписала только время. На самом деле пеньки 3:00 21 мая, 15:00 23 мая, 3:00 26 мая, 15:00 28 мая, 3:00 31 мая, 15:00 2 июня. Понять это из подписей почти невозможно.

Я перерисую скриншот, чтобы можно было менять и иллюстрировать:

Первое, что нужно сделать — всегда писать даты:

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

Пурпурные линии — границы дней

В посте я расскажу что с этим всем делать.

Общие правила

  1. Подписи отметок соотносятся с масштабом. При показе данных за год показывать время с точностью до минут не имеет смысла.
  2. Всегда выбирается максимально детальный разумный масштаб. Если без проблем указывается с точностью до дней, то не надо укрупнять отметки до 5-дневных просто так.
  3. Отметки должны быть регулярны. Разный шаг не позволит удобно прикинуть промежуточное значение. Если регулярные метки не получаются, то основную часть отметок лучше сделать регулярными, а нерегулярные остатки сложить к одному из концов интервала.
  4. Смысловые отметки лучше несмысловых. Отметка 22:12 — странно, 22:30 — норм. Вряд ли имеет смысл использовать что-то, не попадающее в этот список:
    1, 5, 10, 15, 30 секунд,
    1, 5, 10, 15, 30 минут,
    1, 2, 4, 6, 12, 24 часов,
    1, 2, 5, 10, 15 дней,
    1, 2 недели (если нужны именно календарные недели),
    1, 2, 3, 6 месяцев,
    1, 2 года, 5, 10 лет.
    Дробными числами, не подходящими под указанные выше, допустимо подписывать только начало и конец.

Информативность

  1. Дублировать одно и то же — плохо. Не надо писать у отметок так: 01.01.2015, 01.02.2015, 01.03.2015, 01.05.2015. Но и 01.01, 01.02, 01.03, 01.05 тоже плохо (см. следующий пункт). Кстати, кто-нибудь заметил, что я пропустил апрель?
  2. Для дат лучше всего использовать формат 1 мая, 2 июня, 13 ноя. Месяцы сокращаются до трех букв без точки (кроме мая, июня и июля), ведущий ноль у числа не пишется.
  1. Если год на отметках повторяется, то лучше подписать его у первой отметки этого года, а у следующих не подписывать. Год стоит продублировать у крайних отметок, чтобы было проще понять, какая это дата.
  1. Секунды у времени не пишутся, если не сказано обратного — 22:12. Любое время, кроме полуночи лучше писать без ведущих нулей: 6:25, 9:13, 12:56, но 00:00. Для секунд, там где они нужны, допускается писать только секунды: 10:55, :56, :57, :58, :59, 11:00, :01, :02.

Оформление

  1. Если отметок много и они переносятся в две строки, лучше снизить число отметок, а не переносить.
  1. Текст подписи выравнивает по центру, сама подпись — по пеньку.
  2. Между отметками должен быть минимальный отступ в 16 пк, если отступ будет меньше, то отметки слипнутся.

Края интервала

Когда левая и правая границы важны, нужно подписать эти отметки явно. Скорей всего для этого придется убрать подписи у ближайших отметок: отметки 6:00 (между 3:52 и 8:00) и 2:00 (между 00:00 и 3:12) как бы должны быть, но не влезли:

Если явно задана только левая, а правая — сейчас, то правую можно не подписывать:

Если края не принципиальны, то можно не подписывать оба конца:

Примеры

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

Если применить все рекомендации к примеру из начала поста, то получится как-то так:

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

Подписаться на блог…

Все вино из Парфенона [регулярно обновляется]

В посте собрано все вино из шоу Леонида Парфенова «Парфенон» со ссылками на вивино и магазины.
Пост обновляется.

Пишите замечания, предложения, вопросы, сообщайте об ошибках. Буду рад всему этому: mike.ozornin@gmail.com

Подписаться на блог…

Что почитать и посмотреть — 13

Более важные-интересные отмечены значком Highlight. [Видео] — видео.

Дизайн

Пример незамкнутости интерфейса Highlight
Илья Бирман пишет о важной штуке при дизайне интерфейса. Я редко пишу что-то про ссылки в дайджесте, но тут себе позволю.

В посте есть важный момент:

Тут дизайнер перестаёт писать описание и начинает латать дыры на лету.

Неимоверно важно уметь ловить себя в этом состоянии. Нужно остановиться, сказать себе «мы латам дыры, ни к чему хорошему это не приведет». И начать все с начала.

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

Out of the box [Видео]
Видео шестилетней давности про онбординг смартфона в реальном мире

Поиск новых форм
Известные дизайнеры переделывают ya.ru

HomePod — Beat — Apple [Видео]
HomePod — Bass — Apple [Видео]
HomePod — Distortion — Apple [Видео]
HomePod — Equalizer — Apple [Видео]
Типографическая реклама колонки Хоумпод

У меня идеальная визитка.
Степан Данилов пишет про визитки. Минимум с половиной не очень согласен, половина — ок

Как мы сократили трудовой договор в 5 раз
Вили показывает свой трудовой договор. Он примерно в 6 раз короче вашего

Исторический портал (примеры)
Подборка способов и форматов рассказа об истории, например, страны

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

Технологии

Машинный перевод. От холодной войны до диплёрнинга
Вастрик подробно описал этапы развития машинного перевода

Видео: беспилотный автомобиль Яндекс.Такси в зимней Москве [Видео]
Автомобиль выпустили с полигона в Хамовники

Разное

Автозаполнение поля в G.forms и mailchimp
Для всех, кто делает рассылки в мейлчимпе. Можно предзаполнить гугл.форму из письма

Цифровой этикет
Телеграм-канал о цифровом этикете. Хорошо, что можно все это не писать, а просто дать ссылку

Все выпуски по тегу что почитать.

Подписаться на блог…

Гугл.Фонтс и кириллица

По непонятной причине Гугл.Фонтс плохо обновляет шрифты и раздает какие-то устаревшие версии. Шрифты, у которых давно есть кириллица, в Гугле без кириллицы. Например, вот:

Лато

Лато использует в своем интерфейсе Слак. Версия Гугла — без кириллицы:

На самом деле кириллица вышла в 2015 году:

Даже авторы Лато не знают, почему Гугл так себя ведет:

The older version (1.0) of the Lato font family is available on Google Fonts. We have no information when Lato 2.0 will be available on Google Fonts.

Эдоби Сериф Про

Версия Гугла — без кириллицы:

На самом деле кириллица есть (с начала 2017):

Эдоби Сорс Код

Версия Гугла (ну вы поняли):

Версия Эдоби:

Выводы простые: проверяйте на всякий случай наличие кириллицы сами, не верьте Гугл.Фонту.

Подписаться на блог…

Коэффициент СУД

Это я уже писал в фейсбуке, переношу сюда, чтобы не потерялось.

Придумал закон и коэффициент, которым надо мерить коммуникации. Встречайте:

Закон и коэффициент СУД (Скорости упоминания договора)

Закон Годвина гласит, что любая достаточно продолжительная дискуссия в интернете приведет к упоминанию Гитлера.

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

— Можно отгул взять?
— Нет, трудовой договор не позволяет

Этот диалог — СУД = 2, на второй реплике — договор.

А вот так выглядит, например СУД = 1:

— Мой трудовой договор позволяет брать мне отгулы?

Хорошо, когда СУД в компании не удаётся посчитать.

Подписаться на блог…

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

Я делал коллеге подборку ссылок как по-человески писать то, что по-человечески быть ну никак не может. Решил дооформить в пост, пусть для всех будет.

Юридические документы: переписать и сократить

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

Попытайте вспомнить на скольких страницах ваш трудовой договор? Вот весь трудовой договор Вилли:

Трудовой договор Вилли

Юрист Владимир Беляев рассказывает, как добиться таких договоров:

Вот ещё пример Ильяхова: instagram.com/p/BZQslBsA1ej/

Юридические документы: написать рядом по-человечески

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

Бюрошный договор
Соглашение 500 пикселей

Объявления: для учреждений культуры Москвы

Писать объявления тоже можно нормально: без уважаемых жителей и в целях обеспечения отсутствия наледи на кровле.

Московский институт социально-культурных программ подготовил рекомендации по написанию текстов для учреждений культуры Москвы. Вот несколько разворотов:

Скачать:

Объявления: для госуслуг

Максим Ильяхов с командой готовил правила написания текстов для госуслуг. Например:

Руководство общедоступно:

Все материалы перенесли в сайт рассказа о проекте: https://rocketmind.ru/cases/gosuslugi-promotion

Лекарства

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

Смотрите, так тоже можно: аккуратно, просто и понятно.

Картинка промелькивала в канале Ильи Бирмана

Объявления: для всех

Вот подборка бюрошных советов про объявления. Они универсальны, подойдут и для соседа и для коллеги.

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

Если будете извиняться в объявлениях: Искренность в извинениях.

Напишите что-нибудь крутое, что я пропустил? В телеграм @mikeozornin или на почту mike.ozornin@gmail.com

Подписаться на блог…

Как подписывать скриншоты

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

Меня подключили совсем рано, когда подписи скриншотов были совсем сырыми:

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

Общие правила

Про оформление подписей есть бюрошный совет: bureau.ru/bb/soviet/20140728. В нем Артём рассказывает о роли подписей, о том, как их ставить и как рисовать выноски. Подписчики учебника «Типографика и верстка» могут дополнительно посмотреть разворот 71.

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

Прием 1: УВЛ (убрать все лишнее)

Самое простое, с чего можно начать улучшение этой картинки — убрать очевидные сущности. Текста станет меньше, свободного места — больше, подписи станут компактней и аккуратней.

Слово button встречается 12 раз и все они используются, чтобы сказать «это — кнопка». Вообщем почти все элементы на этом скриншоте — кнопки, поэтому button безболезненно убирается:

Прием 2: вынести общее за скобки

Иногда от повторений нельзя избавиться совсем. В примере ниже повторяется не просто button, а filter button.

Убрать button можно, а вот от filter избавиться нельзя. Если убрать слово filter, то потеряется важный смысл. При этом filter button относится ко всем четырем действиям, все они — действия над сохраненными фильтрами. Нет необходимости писать про сохраненные фильтры 4 раза, можно написать один раз и больше не повторяться.

Например, так:

Фактически мы вынесли filter button за скобки, как в математическом выражении.

Прием 3: соблюдать теории близости

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

Прием 4: использовать естественное соответствие

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

На этом куске скриншота все 4 иконки стоят ровно в ряд с одинаковыми отступами:

По возможности лучше не подписывать что-то сбоку, что-то снизу, а расположить подписи в ряд, с одинаковыми интервалами, — это усилит взаимосвязь:

Прием 5: выравнивать текст осмысленно

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

Подпись периода расположение по центру и похожа на форме на отображаемый период: невысокая и широкая. Иконка Expand timeline расположена в правой части поля, поэтому выноску располагается с правой стороны текста. Дополнительно можно было бы использовать выравнивание текста Expand timeline по правому краю, а Apply filter по центру, но это не обязательно в данном случае.

За выравниваем всегда следят на транспортных схемах: правильное расположение названия станции помогает понять, где какая станция. Посмотрите, например, линейные схемы Московского метро: artlebedev.ru/metro/line-map.

Прием 6: убрать «почти, но не совсем»

Существует общее правило в дизайне: блоки, надписи и другие элементы нужно или выровнять совсем, или совсем не ровнять. Не должно быть элементов, неровных на чуть-чуть, не должно быть никаких «почти, но не совсем».

Посмотрим на картинку:

Здесь много почти, но не совсем, всего 6 видов разного выравнивания:

Подписи будут аккуратней, если их выровнять друг относительно друга так:

Ещё примеры «почти, но не совсем» в посте Ильи Бирмана.

Прием 7: следить за типографикой

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

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

Про интерлиньяж:
bureau.ru/bb/soviet/20140310/
bureau.ru/bb/soviet/20140310/

Прием 8: редактировать текст

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

Прием 9: рассказывать по частям

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

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

Приемы

  1. Убрать все лишнее
  2. Вынести общее за скобки
  3. Соблюдать теории близости
  4. Использовать естественное соответствие
  5. Выравнивать текст осмысленно
  6. Убрать «почти, но не совсем»
  7. Следить за типографикой
  8. Редактировать текст
  9. Рассказывать по частям

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

Подписаться на блог…

От таблицы к визуализации

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

На самом деле таблица достаточно удачный формат:

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

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

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

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

Расскраска по процентилям: 0,95 · 0,9 · 0,75 · 0,4 · 0,1

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

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

Такой способ часто называется скользящим окном:

Получилась такая таблица:

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

Аркадий отлично сдал вступительное, оно дало ему большой запаc. Я понемногу обгонял Андрея и Аркадия в тестах, но слил накопленное в курсовой. Леонид начал не с самых сильных позиций, но методичная работа подняла его в рейтинге. Евгений шел неравномерно: некоторые тесты лучше всех, а некоторые ощутимо хуже соседей.

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

Вот несколько примеров:

Даже график ниже — тоже таблица, хотя и не очень похоже, просто ячеек очень много и они очень мелкие:

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

Посмотрите ещё визуализацию прогресса студентов у Михаила Капанаги: http://burostat.ru

Подписаться на блог…

Что почитать и посмотреть — 12

Более важные-интересные отмечены значком Highlight. [Видео] — видео.

Общество

Вторая Катынь Highlight
Медуза о том, как 2 июня 1962 года в Новочеркасске военные расстреляли демонстрацию рабочих

Тренировочный лагерь «Правого сектора»
Илья Варламов показывает ещё одну волшебную детскую площадку

Boxes · Let’s Unlock Cities [Видео]
Убер снял рекламу про транспорт

«Это общее офигевание от всего мира»
Как живут россияне с синдромом Аспергера — официально несуществующим в России заболеванием

Животные, распознающие туберкулёз, рак и мины по запаху
Как находят туберкулез, когда на простой и хороший анализ совсем нет денег

В России людей все чаще заставляют извиняться на камеру. Зачем? Откуда это пошло?
Между тем шел 2017 год

New anti-terrorist ONE50 EVO bollard
В Москве после европейских террактов с грузовиками наставили бетонных блоков — полная фигня. А вот на видео не фигня

Разговор с «ангарским маньяком». Часть первая
Разговор с «ангарским маньяком». Часть вторая
Аудиоинтервью на Медузе

Дизайн

Создание навигации в подуличных переходах Московского метро Highlight
Студия рассказывает как делала один из самых больших недавних проектов

Артемий Лебедев — магистр мата и отец 10 детей [Видео] Highlight
Лебедев у Дудя

Dive into the details of iOS 11: Is Apple still detail-oriented?
Чувак разбирает айОС 11 на предмет мелких нестыковок в интерфейсе

Whoever designed the Coke Christmas bottle deserves a pay rise [Видео]
Новогодняя бутылка Колы

In Search Of The Perfect Writing Font
Компания iA (автор редактора iA Writer) рассказывает о своем двуширинном шрифте

Занимательная метеорология
На Яндекс.Погоде появились погодные карты. Какая красота

80-Year-Old Wooden Escalators Repurposed as Interlooping Ceiling Sculptures
Арт-инсталляция из старых эскалаторов. Завораживающе, но должно быть страшновато стоять внизу

Instagram удалил китайскую рекламу кроссовок с «волосом» на экране
Отличная история про рекламу в интаграме и психологию людей

Пять сотен агитматериалов без армии дизайнеров за три недели
Евгений Решетнёв рассказывать про оптимизация в Индизайне

https://www.odetothings.com/shop/
Невероятно красивые предметы

Разбитые окна в интерфейсе
Сергей Соловьев из Контура делится наблюдением

Догадливый интерфейс бета
Антон Жиянов делится подборкой библиотек и сервисов

Перспективлялка
Сергей Николаев сделал инструмент для тестирования навигации

Nintendo Labo Official Site
Сумашедшие из Нинтендо делают картонные аксессуары к Нинтендо Свитчу

Поиск по вопросам этноэкспов Артемия Лебедева
Чувак разобрал все вопросы-ответы Лебедева, сделал сайт с поиском

Создание логотипа компании «Эксклюзивная логистика» Highlight
Один из лучших процессов логотипа

Julius Tarng — Facebook
Интервью с дизайнером из Фейсбука — загляните посмотрите на инструменты, но больше ничего особенного

Организация работы

Корпоративно-культурный тур (1/3)
Алексей Каптерев рассказывает про компании. Интересно про Амазон и Безоса

Корпоративно-культурный тур (2/3)
А здесь клево про Morning Star

Корпоративно-культурный тур (3/3)
В третьей части — Оракл

Одно письмо — один вопрос, или как я училась не утапливать себя и окружающих в переписках
Валерия Папина рассказывает о бюрошном приеме

Разработка

Часть 1
Часть 2
Часть 3
Часть 4
IT-инфраструктура штабов Навального и сбор подписей — как было все устроено с точки зрения ИТ Highlight

Как железобетонно определить, печатный ли символ ввёл пользователь?
Василий Половнев показывает хак, как детектить печатные символы

Как мы отмечали 256 день года и рисовали пиксели через API Highlight
Контур рассказывает, как они делали свою пиксельюну рисовалку (как на Реддите)

011. Школа менеджмента — Ненасильственное управление [Видео]
Бобук (Григорий Бакунов) рассказывает как он возится с управляет программистами

q — Text as Data
Штука, которая делает sql-доступ к csv-файлам: определяет колонки и их тип, позволяет делать джойны. Самому ещё не пригодилась

Время — деньги. Как мы учили Яндекс.Такси точно рассчитывать стоимость поездки
Рассказ с техническими подробностями

I’m harvesting credit card numbers and passwords from your site. Here’s how.
Выключайте автозаполнение паролей в браузерах

Привидение-2: как перехитрить ведьму
Объяснение атаки на уязвимость в процессорах Spectre 2. Местами перебор, но интересно

Computer latency: 1977-2017
Dan Luu проверил задержку клавиатуры на разных устройствах. Спойлер: все плохо. На старом айфоне 3гс в 2.5 раза быстрей, чем на топовом Гугл Пиксель 2

Cursor keys belong at the center of your keyboard
Никита Прокопов рассказывает как перевесить курсорные клавиши в другое место и почему это надо сделать. Я не стал

Carbon
Инструмент для подготовки скриншотов кода

Назад в школу

Русский язык за 18 минут Highlight
Арзамас о русском языке

Лунный огонь Highlight
Можно ли добыть огонь с помощью лунного света и лупы? С ума сойти. Почему не в школе?

How Earth Moves [Видео]
Vsauce разжевывает как на самом деле движется Земля, перевод на русский

Правда и мифы о мигрени и ее «сёстрах» [Видео]
Врач-невролог Кирилл Скоробогатых рассказывает о причинах головной боли, современных методах лечени

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

Шапито

Flight of the Year // Trains, Bridges, Rapids, Mountains, Sunset, Gapping, Perching, Powerlooping [Видео]
Чувак мастерски летает на дроне

GEOMETRIE VARIABLE labora 4 [Видео]
Геометрический клип

30 Days Timelapse at Sea [Видео]
Залипательный корабельный таймлапс

Караоке с «анимодзи» [Видео]
Подборка караоке, не все правда интересные

ʎɐsʇɐd ʎdɯnɹƃ on Twitter [Видео] Highlight
Вот ещё караоке

Aluminum and Mercury [Видео]
Опыты с аллюминием и ртутью

We’ve been playing ’em wrong this entire time [Видео]
Как на самом деле надо играть со Слинки (пружинка-радуга)

OK Go — Obsession — Official Video [Видео]
Свежий (на тот момент) клип OK Go

Шевчук — о батле с Путиным и войне в Чечне [Видео]
Шевчук у Дудя

Cooking in the Archives
Alyssa Connell и Marissa Nicosia находят старые рецепты 17—19 века, расшифровывают их и готовят по ним

TEXTOR TS500 circular blade slicer for cheese [Видео]
Как нарезают сыр

Чёртова школа Лидмашины
Клевый формат рекламы

Все выпуски по тегу что почитать.

Подписаться на блог…

Что делать с масштабом временных рядов

Хочу рассказать про один способ отображения временных рядов (time series — графиков, где ось абсцисс — время).

Например, есть такой график:

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

  • замечать выбросы, отличающиеся от нормального поведения системы: какая-то аномальная загрузка ЦП в датацентре Амстердама, большой исходящий трафик в Сингапуре;
  • отмечать какие-то паттерны: в датацентрах какая-то периодическая дисковая активность в середине дня;
  • видеть при этом каждый из параметров: здесь наблюдается плавный рост, а потом резкое падение — сработало масштабирование нагрузки, а во втором случае рост был быстрый, системы масштабирования не успели отреагировать;
  • сравнивать параметры между собой: серверы в Сингапуре почти всегда загружены, а в Европе простаивают, не дотягивают и трети сингапурских;

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

Если графиков будет много, то получится нечитаемая каша:

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

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

Исходный график:

Сначала поделим наш график по оси ординат на несколько групп:

Потом раскрасим их по возрастанию значения:

И сложим их одну на другую:

Весь процесс (гифка):

И как раз такие графики можно снова сложить стопкой:

Такой график отлично показывает наличие пиков и нулей: пики — яркие, нули — пустоты. Кроме этого он не портит вертикальный масштаб: не сжимает его и не растягивает.
Оптимальный вертикальный масштаб графика, Илья Бирман

И с нашими ожиданиями от графика стало все лучше, вот с этими:

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

Ещё раз было-стало:

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

Ссылки по теме:

Подписаться на блог…

Как относиться к критике, как к комплименту

«Критика — это комплимент» написал в 2011 году Илья Бирман.

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

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

Да ничего подобного!

Моя проблема: критика бесит

Каждый раз, когда мне сообщают об ошибке, я внутри почти вскипаю. Глаза наливаются кровью, я зеленею и превращаюсь в Халка. Вот что успевать пробежать в моей голове за первые 1,5 секунды:

  • Да блин, опять комментарии, сколько можно!
  • Ну куда ты лезешь? Тебя спросили?
  • А сам-то умеешь верстать?
  • Сам такой!
  • Тоже мне в дизайне он понимает, Лебедевы вы все стали!

Даже когда разработчик пишет невинное «Привет, у меня тут вопрос по макету, давай созвонимся?» я внутренне сжимаюсь и думаю «Вот ведь, сейчас покажет дыру в макете, придется переделывать, черт-черт-черт».

Решение: что я делаю, чтобы «бесит» не мешало

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

Вот мантра:

  1. Раз критикуют — хотят помочь и значит не все равно. Если бы было все равно, не написали бы. Не написать проще, чем написать.
  2. Критикуют не меня, а работу: это в тексте ошибка или макет кривой. Нет, если в макет ошибка, это не значит, что я фиговый дизайнер.
  3. В следующий раз будет лучше, главное не тупить и сделать выводы.
  4. Потерпи, если будешь думать и делать, делать и думать, то результат будет лучше, увидишь.
    Особенно этот пункт помогал в Школе стажеров, когда арт-директор разносил в клочья мой диплом. Но без боли на первую итерацию не глянешь.

Иногда по формату и тексту критики понятно, что не хотят помочь, а критикуют для самоутверждения или по какой-то другой причине. На этот случай тоже есть мантра: Ну ладно, ну не пытаются помочь, мне-то что?

Чтобы критика не прошла впустую я действую в два этапа:

  1. Исправляю
  2. Делаю выводы, чтобы такое повторялось как можно меньше:
  • Какой вывод я могу сделать? Из-за чего так вышло?
  • Как снизить число таких ошибок в будущем?
  • Как решить вопрос системно, чтобы ошибка больше не могла появиться в принципе: изменить процесс, записать в чеклист, автоматизировать?
  • Какие сходные ошибки могут быть, чтобы убирать их наперед?

Как критиковать

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

Чтобы снизить реакцию Халка на вашу критику, эту критику надо уметь давать. У меня пока с этим непросто: я категоричный, не терплю плохое и при этом уверен, что критика — комплимент для всех. Не будьте так прямолинейны, это почти всех бесит.

Как быть — почитайте вот умных людей:

P. S. После публикации поста получил критику на пост. И ведь все было по делу: дописал краткое содержание поста Ильи Бирмана (чтобы не вынуждать открывать ссылку всех подряд), переписал заголовки и написал важный P. S.

Подписаться на блог…

Как собрать шрифт с иконками — 2

С момента первого поста я доработал схему сборки, расскажу что и зачем там сделано. Сначала будет вступление-рассказ о чем все это, если вы хотите нового, прокрутите до заголовка «Новое в этой версии».

Что вообще происходит

У дизайнера есть несколько разных способов передать иконки разработчику:

  • отдельными файлами или спрайтом в ПНГ,
  • отдельными файлами или спрайтом в СВГ,
  • иконочным шрифтом.

Разработчики фронтенда все чаще привыкли использовать иконки в виде шрифта. Этим же способом распространяются популярные иконочные наборы (например, Font Awesome). У нас в компании разработчики тоже просят «дай шрифт». Мы некоторое время отлаживали схему сборки шрифта: как из файла Скетча автоматически получить файл, пригодный для фронтенда, не замучив дизайнера.

Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический ASP.NET MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов. Если кто-то расскажет как прикрутить к этому NuGet, напишите, я добавлю.

Зачем это делать, есть же фонтелло

Есть много готовых сервисов, которые собирают шрифт по загруженным СВГ-файлам, например fontello. Мы не стали использовать ни один из них, потому что с ними могут быть сложности:

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

Хорошее решение — простое, в нем минимум ручных действий.

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

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

Cложно интегрировать в общий процесс сборки продукта. Отдельно стоящий сервис тяжело встроить в общий процесс разработки и сборки, а у кого-то есть еще и процесс CI. Придется вручную собирать сервисом файл, куда-то его загружать и как-то версионировать.

Хорошее решение встраивается в процесс разработки.

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

Хорошее решение работает внутри компании.

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

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

Хорошее решение дает разработчикам все что нужно. Иконка кодируется понятным названием, коды символов и размер подставляются автоматически.

Новое в этой версии  

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

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

Поставка иконок в виде библиотеки Скетча

С момента написания того поста вышла новая версия Скетча — 47, в ней появились библиотеки символов. Иконки стало удобно вставлять в макеты именно с помощью библиотеки.

Чтобы сделать один символ на одну иконку и не плодить их для каждого цвета, нужно сделать так:

  1. Сделайте по символу для каждого цвета, в которые у вас можно красить иконки.
  1. Нарисуйте иконку и наложите её маской на символ цвета:

После этого вы сможете менять цвет иконок через оверрайды:

Образец файла: iconset.sketch

К сожалению такой скетч-файл плохо собирался в шрифт. Это происходит из-за маски.

Маска правильно экспортируется в СВГ-файл, но в шрифте нет понятия маски, в итоге иконки ломались. Долгое время я вел скетч-файл в двух вариантах: простые артборды для шрифта и такие же с маской для библиотеки. Но это плохой способ: нужно добавлять и изменять пары одинаковых иконкок. Из-за этого иногда были ошибки — я что-то где-то забывал.

Неожиданно Акронис написал пост на Хабре про свою дизайн-систему. С помощью их поста удалось сделать правильно. Сейчас наш сборщик регулярными выражениями вырезает лишнее из СВГ-файла и превращает файл с маской в обычный файл.

Для вырезания лишнего я подключил grunt-text-replace, вот его конфиг:

replace: {
  remove_mask: {
    src: [PATH_BUILD_ICONS + '/*.svg'],
     overwrite: true,  // overwrite matched source files
     replacements: [
      {from : / fill="(.*?)"/m,             to : ''},
      {from : /(\s*)<\/defs[\s\S]*<\/g>/m,  to : ''},
      {from : /(\s*)<defs>/m,               to : ''},
      {from : / id="(.*?)"/m,               to : ''},
      {from : /xmlns:xlink="(.*?)"/m,       to : ''},
      {from : /(\s*)<g[\s\S]*?>/m,          to : ''},
      {from : /(\s*)<\/g>/m,                to : ''},
      {from : /<svg/m,                      to : '<svg fill="#000"'},
      {from : / transform="(.*?)"/m,        to : ''},
      {from : / fill-rule="(.*?)"/m,        to : ''},]            
    }
  }

Поставка иконок в виде ТТФ-файла

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

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

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

Идеальным вариантом для них было бы использовать ТТФ-шрифт: он отлично рендерится на экране и при печати, хорошо автоматизируется и удобно перекрашивается.

Однако недостаточно просто включить генерирование ТТФ-файла: по умолчанию коды символов формируются сборщиком автоматически. При следующем формировании шрифта код иконки мог замениться на произвольный. Если технический писатель вставлял иконку в документ, и обновлял шрифт, часть иконок могла непредсказуемо поменяться на другие. Так, конечно, никуда не годилось.

В новой версии вместо автоматического выбора кодов символов я задаю их руками. Меинтейнер шрифтового репозитория (это я) выдает каждой новой иконке новый код и следит за тем, чтобы коды не менялись. Для этого используется секция codepoints в grunt-webfont. Каждой иконке нужно задать номер символа. У нас используется последовательная нумерация начиная с 0xF501.

codepoints : {
   'upload-to-cloud_24' : 0xF501,
   'upload-to-cloud_64' : 0xF502,
},
startCodepoint: 0xF701,

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

Посмотреть коды символов можно с помощью http://opentype.js.org. Выбираете Glyph Inspector, загружаете шрифт и смотрите:

Наши писатели перешли на ТТФ-файл и довольны.

Скачать и посмотреть

Я обновил репозиторий решения, там есть пример файла и сборщик. Чтобы понять как и что — прочитайте README.md. Скачивайте и смотрите:
https://github.com/mikeozornin/icon-font-public

Что дальше

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

С вопросами, багрепортами или советами — в телеграм @mikeozornin или на почту mike.ozornin@gmail.com.

Подписаться на блог…

Что почитать и посмотреть — 11

Более важные-интересные отмечены значком Highlight. [Видео] — видео.

Дизайн

Стандарты видеоредакции Т—Ж
Редакция Т—Ж начала снимать видео и оформила свои видеостандарты

How to make a logo (Sound logo) [Видео]
Как сделали звуковой логотип Гамбурга

Популярная астрономия в двенадцати карточках
Михаил Капанага про оформление книги по астрономии

Новый макияж короля
Григорий Бакунов (он же Бобук) о специальном макияже, который сводит с ума системы распознавания лиц

По направлению к ФаРеру. Анализ и правка лого «Москва 870»
Юрий Гордон разбирает логотип Москвы-870

Появление транспортных схем
Александр Караваев рассказывает историю появления транспортных схем

Лекция Виталия Харисова «10k»
Виталий Харисов из Яндекса рассказывает на что нужно обратить внимание, если хочется ужать html-страницу до 10 килобайт

Новая маршрутная сеть «Магистраль»: отвечаем на вопросы
Мэрия Москвы совершенно по-человечески рассказывает про вторую часть «Магистрали». Как будто под редакцией Ильяхова писали. Всегда бы так.

While Apple is taking away buttons, we found a way to add one.
Разработчики Астры сделали из камеры айпэда кнопку

Introducing InVision Design System Manager + Brand.ai is joining InVision
InVision Studio
Инвижен анонсировал сразу два инструмента: свой Скетч и свой менеджер дизайн-систем

Примеры лекций, тестов и заданий
Бюро сделало демодоступ к личному кабинету школ. Заодно можно посмотреть первые лекции по всем предметам (Для меня новые — по визуализации и аналитике)

Разное

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

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

How the IKEA catalogue cracked what “domestic bliss” means in different cultures
Как Икея адаптирует свой каталог для разных стран. Скрывают женщин в арабских странах, например.

Мы переместились в регион Уила на ферму к нашему другу Рафаэлю Айа…
Дабли помогает строить канатную дорогу для одного фермера кофе в Колумбии
Кстати, достроили

Трагедия советского интернета
О том, как был (почти) изобретен интернет в ССРР

Как сделать города безопасными и спасти тысячи жизней [Видео]
Илья Варламов в кое-веки записал нормальное видео с плотным обзором способов спасти сотни тысяч жизней

Why are software development task estimations regularly off by a factor of 2-3?
На примерах рассказывают, почему оценки программистов делаются с таким допуском

Bret Victor — Inventing on Principle [Видео]
Брет Виктор рассказывает о проблемах в современных системах программирования, рисования, визуализации и показывает, как их решить

Как устроен Ethereum и смарт-контракты
Вастрик рассказывает как работает Эфир
Про блокчейн был пост у того же Вастрика и выпуск подскаста у Рахима

Мой второй шанс
Алексмак пишет о том, как ему удалили обе почки и пересадили донорскую

Биохакинг

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

Мне 32 года, и я потратил $200 тысяч на «биохакинг»
Оригинальный пост Сергея Фаге

Разоблачение биохакинга: как Сергей Фаге убивает себя
Андрей Васильков о том, что не так с биохакингом Сергея Фаге

Навязчивые состояния, ненужные медосмотры, вредная диета. Что не так с биохакингом?
Кардиолог Антон Радионов и биолог Алексей Москалёв рассказывают, что не так с биохакингом Сергея Фаге

Назад в школу

Математический детектив: поиск положительных целых решений уравнения
Как простая с виду загадка оказывается не под силу почти никому

Парадокс бесконечного отеля [Видео]
Веселое видео про математический парадокс

Иммунная система для простых смертных: 8 вопросов и ответов
Михаил Дубаков рассказывает про иммунную систему

Пересмотр системы единиц СИ: новые определения ампера, килограмма, кельвина и моля
Эталона массы в Парижской палате мер и весов скоро больше не будет

Общество

«Я просыпалась и начинала рыдать»
Борис Веркс и его жена Алия рассказывают как жить с депрессией и паническими атаками

Что делать, если ваш близкий сходит с ума у вас на руках?
Борис Веркс о том, как вести себя в этом случае

Доска-убийца, корни и платяной шкаф. Как полицейские объясняют телесные повреждения жертв пыток
«Ударился о дубинку, висевшую на руке милиционера» и другие истории

Страшное пророчество Варламова сбылось!
Репортаж Ильи Варламова об одном жилом комплексе муравейников, который превращается в гетто

Шапито

Снимки 2017 года по версии журнала National Geographic
Просто красивые фотографии

The Pushkin State Museum of Fine Arts | ГМИИ им. А.С. Пушкина [Видео]
Мало какой музей в России может решиться на такое видео

Фильм, который не стареет
Дюран рассказывает о динамическом фильме и VLC

Телевизор Samsung Ultra HD UE105S9WAT
Посетители сайта Мвидео нашли телевизор за 6 млн рублей и решили поупражняться в остроумии в отзывах к телевизору

Все выпуски по тегу что почитать.

Подписаться на блог…

Приоритизация — правильно через „и“

Я очень часто встречаю неправильно написанное слово приоритизация. С ним не всё просто, я расскажу почему правильно через „и“.

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

Приоритизация образована по привычному паттерну основа + изация. Так образуются очень многие существительные, которые обозначают процесс по созданию или распространению чего-то: автоматизация, автомобилизация, каталогизация. Если делать все по-честному, то слово было бы приоритетизация.

Если образовывать слово по-честному: приоритетизация

Но тут в написание слова вмешивается гаплология. Гаплология — это эффект выпадения в слове одного из двух идущих друг за другом одинаковых или близких по звучанию слогов (википедия).

Мы часто с ней сталкиваемся, привыкли и не замечаем:

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

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

Схема образования слова:

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

В таких ситуациях, пишите «расстановка приоритетов», не ошибетесь:

приоритизация расстановка приоритетов
приоритизировать расставлять приоритеты

Запомнить

Приоритизация, через „и“.

2017  
Подписаться на блог…

Руководство по кофе: часть 3

Часть 1: Сбор и обработка кофе · Часть 2: Как готовить · Часть 3: Кофейни и кофейные магазины

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

Часть 1

Часть 2

Часть 3

6. Кофейни с хорошим кофе 

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

Сначала немного советов, как определить, что в кофейне хороший кофе. Советы не дают гарантию, но повышают шансы на неплохой кофе:

  • Спросить про зерно: из какого зерна готовят, когда оно обжарено и какое оно на вкус. Односложный ответ «у нас 100% арабика» или «бразильский кофе» — не очень хороший знак. Скорей всего и кофе будет не очень. Хороший ответ, например: «Для эспрессо мы используем свою смесь бразильского и эфиопского зерна итальянской обжарки. Для пуровера мы используем зерно Бразилию, Колумбию или Эфиопию, — на ваш выбор».
  • Попросить совета. Можно прикинуться шлангом и попросить совета: «Я недавно попробовал кофе, он был какой-то немного фруктовый и кисленький, мне понравился. У вас есть что-нибудь подобное?».
  • Попросить воды к эспрессо. Эспрессо и кофе из турки принято подавать с водой. Это нужно чтобы перед кофе очистить вкусовые рецепторы рта от постороннего вкуса. Да и пить плотный на вкус эспрессо проще с водой. В хороших кофейнях вам сразу подадут воду, без вашей просьбы. В средних — не будут задавать вопросов зачем вам вода. В тех, где удивятся, и эспрессо будет не очень.
  • Посмотреть на процесс приготовления. Обратить внимание, как дотошно и внимательно относятся к процессу приготовления. На что обращать внимания: мелят ли кофе непосредственно перед приготовлением, или он заранее намолот, используют ли весы, проливают ли воду перед вставкой холдера в эспрессо-машину, держат ли кружку только снаружи (внутри трогать нельзя).
    Вот ещё советы по выбору кофейни: https://www.instagram.com/p/BX19a3Kh2Hw/

В каких кофейнях, на мой взгляд хороший кофе (везде речь идет про черный, про кофе с молоком сказать ничего не могу):
Москва

  • ДаблБи. Был в двух ли трех, везде хорошо,
  • Кооператив Черный (на Покровке, за домом-комодом).
  • Cezva Coffee.

Санкт-Петербург

  • ДаблБи на Милионной.

Список будет пополняться.

Ещё вот вот в этих должны быть хорошо, пока не проверил:

  • LES,
  • Скуратов кофе,
  • Человек и Пароход,
  • Коворкафе,
  • Кафетерий Лебедева на Никитской,
  • ДринКит на 1905 года,
  • Смарт Кофе на ВДНХ.

Если не нашли свой город (что очень вероятно :—), загляните в список Ильи Бирмана или на карту хороших кофеен map.thirdwavewichteln.com.

Пить кофе в хорошей кофейне очень вкусно, но каждый день кому-то может быть накладно. Черный кофе стоит 100—200 ₽, капучино редко меньше 250 ₽. Не мне вас учить экономии или финансам: не можете жить без хорошего капучино из Коворкафе — прекрасно, работаете в три раза лучше после чашки флетвайта из ДаблБи — супер. А вот тратиться на «свежесваренный кофе» из Старбакса, по-моему, не имеет смысла. И дома, и в офисе очень просто сделать и вкусней, и дешевле. Вот, например, для аэропресса:

Оба варианта дешевле, чем даже кофе из автомата.

Запомнить про кофейни

В хороших кофейнях — отличный кофе, пить его вкусно. Если накладно или далеко, варите кофе сами.

7. Где покупать кофе: кофейни и магазины 

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

Не надо: в супермаркете, Комусе или за границей

Есть некоторые места, в которых часто покупают кофе, но в которых покупать не надо.

Не покупайте в Ашане, Перекрестке, супермаркете около дома. Я говорю про обычные пакеты кофе: Черная карта, Жокей, Paulig, Egoist (пишу по памяти). Я их не пробовал, но чтобы не покупать такой кофе мне достаточно и половины из вот этих причин:

  • Неизвестно что там за кофе: откуда он, когда собран, когда и как обжарен.
  • Скорей всего это массовый кофе не очень высокого качества с робустой. Чтобы появился хотя бы какой-то вкус кофе сильно зажаривают — появляется заметная горечь, но другого вкуса все равно мало.
  • Неизвестно когда был смолот и как. Один раз я встретил на пачке, что помол подойдет для турки, капельной кофеварки, и френч-пресса. Такого не может быть, помол может быть или для турки, или для френч-пресса, но не одновременно.
  • Обычно такой кофе старый. Может быть обжарен и смолот 5—7 месяцев назад.
  • Еще и недешевый. На те же деньги можно купить кофе неплохой свежий кофе. Вот два бюджетных варианта: классический вкус из Бразилии или Колумбия с кислинкой.

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

Не везите из-за границы. У меня есть несколько знакомых, кто специально возит себе кофе из Европы. Не то, что бы они сильно не правы, но это редко когда оправдано:

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

Попробовать в знаковой итальянской кофейне кофе, и купить у них пачку свежего зерна — прекрасно. Везти из Европы непонятный старый кофе только потому, что из Европы — не стоит. Раскрученные и «редкие» сорта кофе, например: Копи-лувак из Вьетнама или Blue Mountain с Кубы (кофе Джеймса Бонда), я предполагаю, сильно переоценены (сам не пробовал).

Можно: в любимой кофейне

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

Можно: в кофейном магазине

Если покупать кофе в магазине (или интернет-магазине), вот на что обратить внимание:

  • свежая обжарка,
  • у кофе понятное и подробное описание зерна,
  • указано откуда зерно (страна, желательно район и ферма, время сбора), какая обработка,
  • описаны вкус, дескрипторы (например: «сиропистый фруктово-ягодный эспрессо, достаточно сладкий и с ощутимой кислотностью»),
  • приведены какие-то характеристики зерна (грейд, скрин и потенциал зерна),
  • магазин может сделать помол под нужный вам способ заваривания.

Я подписал важные части на странице зерна в Torrefacto:

Какое зерно выбрать:

  • Определитесь со способом заваривания. Для турки, моки и эспрессо — нужно обжарка потемней, для других — светлей. Хорошие магазины пишут, для какого способа лучше всего подходит зерно.
  • Для эспрессо обычно используют смеси (бленды), а моносорта для других способов.
  • Выберите вкус, который хотите получить: шоколадный, ореховый, фруктовый, ягодный, карамельный.
  • Если у вас есть где смолоть, берите зерна, если нет — попросите сразу и смолоть.

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

Кофе, выпитый за это время на работе

Кофе, который я пробовал (всегда был куплен сразу молотый):

  • store.artlebedev.ru/coffee-shop/coffee
    Во френч-прессе Эфиопия (первую), Бразилия (первую) — более-менее, Кения — очень хорошо. Кения в аэропрессе — отличная.
    Кофейные смеси 340 и 345 в моке — хорошо, но не заметил между ними разницы.
  • tastycoffeesale.ru
    Во френч-прессе Бразилию Ипанеме Дуче и Эпиопию Иргачеффе — хорошо, но Бразилия не на мой вкус, не хватает кислинки. Ну и ещё сам френч-пресс дает немного мутноватый вкус.
  • Дринкит
    В аэропрессе Эфиопия — хорошо. Смололи чуть мельче, чем нужно, поэтому пришлось подбирать дозировку и время.
  • torrefacto.ru
    В аэропрессе Эфиопию Бале Форест (137), Эфиопию Иргачеффе (6) и Руанду Нгому (106). Все три отличные, Руанда понравилась больше всех. Магазин при первом заказе ошибся в помоле (смололи крупней), но проблему решили хорошо, молодцы.
  • tastycoffeesale.ru
    В аэропрессе Руанду Нгому — для любителей кофе с выраженной кислотностью.

Тут ещё не покупал, но планирую попробовать:

  • Camera Obscura,
  • Кооператив Черный,
  • Osom.coffee,
  • Коворкафе,
  • Смарт Кофе.

8. Что дальше 

Вы все это прочитали, что дальше:

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

9. Что почитать и посмотреть

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

Почитать:

  • Лекции Коворкафе. Николай Чистяков рассказывает о кофе, приготовлении эспрессо и капучино. Посмотрите насколько легко он все это делает.
  • sergeykorol.ru/blog/coffee — Роман Шамин (арт-директор в «Злых марсианах») увлекся кофе, начал жарить сначала себе, а потом на продажу. Сергей Король поговорил с ним и сделал конспект.
  • Лекции ДаблБи. Иногда ДаблБи проводит очные лекции в одной из своих кофеен. Точного расписания вроде бы нет, чтобы не пропустить подпишитесь на их канал в Телеграме или инстаграм.
  • torrefacto.ru/blog — раздел «Читать» на сайте обжарщика Торрефакто.
  • Блог osom.coffee/blog и их канал в Телеграме
  • eda.ru/journal/23-coffee — номер №23 Еды.ру, целиком посвященный кофе.

Посмотреть:

  • Everything you’ve ever wanted to know about coffee
  • Канал Тима Ванделбо. Тим — кофеман, победитель WBC 2004, известный обжарщик. Он сооснователь и совладелец компании Nordic Approach, которая ищет и поставляет по всему миру кофейное зерно. ДаблБи, например, покупает в том числе и у них. А ещё у них есть собственная кофейная ферма в Колумбии!
  • Ethiopian Coffee Processing HD — ещё одно видео как обрабатывают зерно в Эфиопии. Посмотрите, если тех двух не хватило.

Запомнить про кофе

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

Вопросы

Комментарии в блоге временно закрыты, т.к нужно разобраться, что делать с обработкой ваших персональных данных. Поэтому пишите в фейсбуке, вот три треда:
https://www.facebook.com/mike.ozornin/posts/10212616030749662
https://www.facebook.com/mike.ozornin/posts/10212622836279796
https://www.facebook.com/mike.ozornin/posts/10212630296386294

Если хотите сообщить что-то лично — напишите на почту mike.ozornin@gmail.com.

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

Подписаться на блог…

Руководство по кофе: часть 2

Часть 1: Сбор и обработка кофе · Часть 2: Как готовить · Часть 3: Кофейни и кофейные магазины

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

Часть 1

Часть 2

Часть 3

4. Помол кофе  

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

Кофемолки по своему устройству бывают:

  • ножевые, — кофе в них размалывается с помощью ножей. Для помола кофе засыпается в емкость с ножами, ножи быстро вращаются и разбивают кофейные зерна на части.
  • жерновые. В них есть конические или плоские жернова, между которыми размалывается кофе. Вот как выглядит в разрезе кофемолка с коническими жерновами.
Схема с lfspareparts724.com

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

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

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


Помол, необходимый при разных способах приготовления, таблица Торрефакто torrefacto.ru/blog/grind/

Для разных способов приготовления кофе нужен разный помол. Проблема в том, что привычная ножевая кофемолка за 1000 рублей подойдет только для турки. Для всех остальных способов заваривания понадобится кофемолка с жерновами. Самая базовая из кофемолок с коническими жерновами Baratza Encore стоит в России 13—15 тысяч рублей (140 долларов на Амазоне).

Первое время удивляешься: «Столько денег за кофемолку!» Однако если вы спросите любого баристу, то он скажет, что кофемолка — ключевой момент в получении хорошего кофе. Лучше дорогая кофемолка и кофемашина подешевле, чем дорогая кофемашина и абы какая кофемолка. Если увлекаетесь кофе, купите самую хорошую кофемолку, которая вас не разорит. Я пью кофе дома нечасто, поэтому и кофемолки у меня нет. Как жить с кофемолками, рассказать на личном опыте я не могу.

Вводная статья как выбрать кофемолку: osom.coffee/blog/vybiraem-pervuyu-kofemolku.

Запомнить про помол

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

5. Приготовление  

Все способы приготовления кофе можно разделить на две большие группы:

  • на основе эспрессо. Все эспрессо-напитки готовятся на эспрессо-машине и почти всегда содержат в рецепте фразу «приготовьте эспрессо». Сначала готовят эспрессо, а потом к нему добавляют взбитое молоко, сливки, сахар, сироп.
  • альтернатива. Все остальные, не-эспрессо способы приготовления, называются «альтернатива»: турка, мока, френч-пресс, аэропресс, воронка харио, иммерсионная воронка бонавита, кемекс, сифон, колдбрю и другие.

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

5.1. Эспрессо  

Самый популярный напиток из кофе — эспрессо. Я знаю много кофеен, где не делают кофе в турке, но не видел ни одной кофейни, где не готовят эспрессо. Кто-то считает его самым вкусным способом приготовления, кто-то наоборот считает его переоцененным.

Эспрессо готовится вот на таких машинах:

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

Рецепт:

  • 17 г кофе, помол «под эспрессо».
  • Как готовить: за 20—25 секунд экстракции получить 40—45 грамм напитка. В зависимости от зерна, обжарки и помола пропорции могут быть немного другими.

Руководство по приготовлению эспрессо:
torrefacto.ru/blog/brew-guide/espresso-first-steps/
stumptowncoffee.com/brew-guides/espresso

На основе эспрессо делают вот эти напитки, их много:

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

  • зерно,
  • обжарка,
  • помол,
  • влажность воздуха,
  • прогретость кофемашины,
  • масса кофе в кофейной таблетке,
  • сила, с которой таблетку сжали (темперовали),
  • жесткость воды.

На мастер-классе в Коворкафе, в котором я участвовал, студентам не удавалось сразу сделать эспрессо, который они смогли бы сами допить, не поморщившись. Обычно получался горький (переэкстракция) или кислый (недоэкстракция). Я частенько выбивал джекпот: делал горький и кислый кофе одновременно. Капучино готовить ещё в пять раз сложней, чем эспрессо. В нем надо справиться не только с кофе, но и с молоком.

Кроме классической эспрессо-машины есть другие, более редкие способы приготовить эспрессо (насколько это настоящий эспрессо — решать вам):

5.2. Турка  

Кофе, приготовленный в турке (джезве), популярен на «востоке»: в Турции, Греции, Саудовской аравии. Он более-менее популярен в России и при этом малоизвестен в Европе.

Рецепт:

  • , помол «под турку» — как женская пудра, но не в пыль и не до стадии муки. Подушечки пальцев должны чувствовать отдельные крупинки кофе. Обжарка «под турку» — светлей, чем для эспрессо. Зерна кофе не должны блестеть, они должны быть матовые на вид.
  • комнатной температуры.
  • Как готовить:
    • Засыпьте кофе в турку и залейте водой. Если турка больше 200 мл, то кофе лучше перемешать.
    • Поставьте на плиту греться. Если используете песок, то закопайте турку на ½ или ⅔ в песок.
    • Снять кофе нужно будет как только поднимется пена и кофе начнет «заворачиваться» внутрь. После этого кофе готов. Иногда советуют опустить и поднять пенку 3 раза. Делать это не нужно, будет только хуже (это мнение Марины Хюппенен, — чемпионки России по приготовлению кофе в турке).

Вот как выглядит правильно приготовленный кофе в турке:

Фотография ОСОМ Кофе из канала в телеграме @osomcoffee

Еда.ру недавно заходила в Cezva Coffee, где работает Марина Хюппенен. Она рассказала как варить кофе в турке:

Отключите блокировщик рекламы, если видео не играет

5.3. Мока  

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

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

Рецепт:

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

Руководства по приготовлению кофе в моке:
torrefacto.ru/blog/brew-guide/moka-coffee/
osom.coffee/blog/geyzernaya-kofevarka-hitrosti-i-sekrety

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

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

5.4. Френч-пресс (кофе-пресс)  

Френч-пресс — простой и очень неприхотливый способ приготовления кофе. Для него нужна только горячая вода: ни тебе сложных эспрессо-машин, ни турки с песком, не нужна и газовая плита.

Фотография Stumptown Coffee Roasters, stumptowncoffee.com/brew-guides/french-press

Рецепт:

  • крупного помола (чуть крупней сахара-песка). Светлый кофе можно молоть чуть мельче, чем темную обжарку.
  • , соотношение вода:кофе во френч-прессе обычно равно 16:1.
  • Как готовить:
    • Засыпьте кофе в кофе-пресс.
    • Воду, нагретую до 95°, залейте в кофе-пресс. Чтобы получить воду 95° нужно выключить чайник когда после нитей пузырьков при начале шума. Я делаю проще: кипячу и даю остыть 1—1,5 минуты.
    • Перемешать один раз и оставить на 4 минуты. В процессе приготовления больше мешать не нужно.
    • Через 4 минуты снять ложкой пенку, опустить фильтр и слить кофе из кофе-пресса. Если кофе не слить, то он будет продолжать завариваться и станет очень горьким.
    • При опускании поршень должен идти достаточно легко. Если он идет с большим усилием, проверьте помол, возможно он слишком мелкий.

Руководства по приготовлению кофе во френч-прессе:
stumptowncoffee.com/brew-guides/french-press
torrefacto.ru/blog/brew-guide/french-press-step-by-step/
osom.coffee/blog/kak-zavarit-french-press

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

5.5. Аэропресс  

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

Фотография Stumptown Coffee Roasters, stumptowncoffee.com/brew-guides/aeropress

Рецепт:

  • , помол мельче сахара, средний между френч-прессом и эспрессо.
  • , нагретой до 95°.
  • Как готовить:
    • Вставьте бумажный фильтр в крышку аэропресса и пролейте фильтр кипятком. Это нужно, чтобы убрать привкус бумаги.
    • Поставьте аэропресс вверх ногами и засыпьте в него кофе.
    • Залейте 200 мл воды и один раз перемешайте, закрутите крышку с фильтром.
    • Через 1 минуту переверните аэропресс, поставьте на кружку и поршнем вылейте кофе в кружку.
    • Поршень должен идти с заметным усилием, существенно больше, чем у френч-пресса. Помол кофе правильный, если поршень выдавливается за 20-25 секунд.

Руководства по приготовлению кофе во френч-прессе:
stumptowncoffee.com/brew-guides/aeropress
torrefacto.ru/blog/brew-guide/aeropress/

5.6. Воронка (v60, hario)  

Воронка, она же пуровер, она же харио. Харио — производитель кофейных аксессуаров. Сработал эффект ксерокса и памперса, и название бренда стало нарицательным и перешло на способ заваривания.

Для приготовления вам понадобится больше инструментов, чем для других способов заваривания. Кроме самой воронки и бумажных фильтров понадобится чайник с тонким носиком (gooseneck kettle), который дает тонкую постоянную струю и позволяет налить нужное количество воды и нужное место воронки.

Фотография Stumptown Coffee Roasters, stumptowncoffee.com/brew-guides/v60

Рецепт:

  • , помол мельче сахара, средний между френч-прессом и эспрессо.
  • , после закипания перелить в чайник с тонким носиком.
  • Как готовить:
    • Вставьте бумажный фильтр в воронку и равномерно смочите горячей его водой (не из расчета тех 200 мл). Это нужно, чтобы убрать привкус бумаги.
    • Засыпьте смолотый кофе в воронку и сделайте в нем небольшое углубление.
    • Налейте в лунку воды, чтобы скрыть весь кофе, должна получиться кашица. Аккуратно размешайте кашицу ложкой. Засеките время с момента вливания воды.
    • Через 30 секунд начните аккуратно выливать воду из чайника, стараясь не лить в одну точку, чтобы не пробить дырку в кофе (посмотрите как это делают профессионалы на видео или в кофейне). Подождите, пока вся вода опустится вниз и перелейте кофе в чашку.
    • Вы все сделали правильно, если 200 мл воды проливаются за 2,5—3 минуты. Если быстрее, то нужно молоть чуть мельче, если медленней — чуть крупней.

Руководства по приготовлению кофе в воронке:
stumptowncoffee.com/brew-guides/v60
torrefacto.ru/blog/brew-guide/king-of-glass/

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

5.7. Кемекс  

Кемекс — это стеклянная колба в форме химической пробирки. Хочется пошутить, что это кофе для химиков, но это не шутка. Кемекс придумал доктор химических наук Питер Шлюмбом в 1941 году.

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

Фотография Stumptown Coffee Roasters, stumptowncoffee.com/brew-guides/chemex

Заваривается кофе как воронка. Рецепт:

  • , помол мельче сахара, средний между френч-прессом и эспрессо.
  • , после закипания перелить в чайник с тонким носиком.
  • Как готовить:
    • Вставьте бумажный фильтр в воронку и равномерно смочите горячей его водой (не из расчета тех 500 мл). Это нужно, чтобы убрать привкус бумаги.
    • Засыпьте смолотый кофе в воронку и сделайте в нем небольшое углубление.
    • Налейте в лунку воды, чтобы скрыть весь кофе (около 100 мл), должна получиться кашица. Аккуратно размешайте кашицу ложкой. Засеките время с момента вливания воды.
    • Через 30 секунд начните аккуратно выливать воду из чайника, стараясь не лить одну точку, чтобы не пробить дырку в кофе (посмотрите как это делают профессионалы на видео или в кофейне).
    • Подождите, пока вся вода опустится вниз, взболтайте кофе в кемексе, чтобы насытить его кислородом и вылейте в чашку.
    • Вы все сделали правильно, если вся вода проливается за 3,5—5 минут. Если быстрее, то нужно молоть чуть мельче, если медленней — чуть крупней.

Руководства по приготовлению кофе в кемексе:
stumptowncoffee.com/brew-guides/chemex
torrefacto.ru/blog/brew-guide/chemex/

5.8. Сифон  

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

Фотография Stumptown Coffee Roasters, stumptowncoffee.com/brew-guides/vacuum-pot

Руководства по приготовлению кофе в сифоне:
stumptowncoffee.com/brew-guides/vacuum-pot
torrefacto.ru/blog/brew-guide/syphon-returns/

Запомнить про рецепты приготовления

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

Далее:Часть 3: Кофейни и кофейные магазины

Подписаться на блог…

Руководство по кофе: часть 1

Часть 1: Сбор и обработка кофе · Часть 2: Как готовить · Часть 3: Кофейни и кофейные магазины

Всю свою жизнь я не пил кофе, он казался мне гадким. От запаха кофе мне становилось плохо, и я непроизвольно морщился.

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

  • Кофе — вкусный. Он приятен сам по себе, без сахара, молока, сливок и кленового сиропа. У него интересный, объемный вкус, в нем может совсем не быть горечи.
  • Кофе — разный. Моё поколение выросло в СССР и привыкло, что есть просто «кофе». Примерно так я и считал до недавнего времени. И что все эти фруктовые нотки, кислинка шиповника и шоколадное послевкусие — бред и выдумки маркетологов. На самом деле нет: есть ягодный кофе, шоколадный или с оттенками орехов.
  • Кофе — сложный. Отличаются не только сорта кофе, но и сам кофе меняется по мере остывания. Вот он был с шоколадом, потом остыл и превратился в компот из черной смородины.

В серии постов я постарался рассказать обо всем, что потребуется начинающему кофеману. Оглавление:

Часть 1

Часть 2

Часть 3

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

1. Что такое кофе  

Кофе — ягода, растущая на деревьях в тропиках. Деревья невысокие, 1,5—3 метра с большими листьями. Плотные ягоды размером с небольшой виноград, растут на дереве как облепиха: плотно прилегают к стволу, а не растут на палочках. Обычно ягоды красные, но бывают и других цветов, например, распространенная мутация с ягодами желтого цвета, — Желтый Бурбон, — выращивается и продается как отдельный сорт.

Ягоды кофе, Википедия

Кофе растет не везде, а только в определенной области недалеко от экватора, — в так называемом «кофейном поясе». С севера пояс ограничивается тропиком Рака, а с юга — тропиком Козерога. Он занимает область около 30° на север и юг от экватора.

Именно в этом поясе достаточно света и тепла, чтобы кофе мог расти и давать урожай. Классические регионы произрастания кофе: Центральная Африка, Латинская Америка, Центральная Америка. Из новых регионов кофейная индустрия развивается в Индии и Юго-Восточной Азии: Вьетнаме, Камбодже, Филлипинах и Индонезии.

Кофейный пояс. Изображение с сайта coffeeforless.com

Арабика и робуста

Есть ещё, например, либерика и эужениоидис

В промышленных масштабах выращиваются только два вида кофе: арабика и робуста, на них приходится более 99 % кофейных деревьев.

Кроме экваториального тепла кофейным деревьям нужен прохладный и чистый воздух, который бывает в горах. Робуста растет на высоте от 600 до 1100 метров, арабика от 1000 до 2000 метров. Чем выше находится кофейная плантация, тем меньше таких мест на планете и тем сложней вырастить там кофе, поэтому кофе оттуда дороже. Но обычно у высокогорного кофе более интересный и выразительный вкус.

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

Арабика — более прихотливое растение, оно более требовательно к климату и условиям ухода. Её сложней вырастить, она часто болеет и и дает более низкий урожай. Зато она дает более яркий, вкусный напиток. Стоит при этом отметить, что арабика бывает разная и сама по себе ничего не гарантирует. «Кофе из 100% арабики» — примерно то же самое, что «вино из 100% винограда». Глупость, согласитесь.

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

Сбор ягод

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

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

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

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

Работа пикера физически тяжелая и малооплачиваемая даже по меркам бедных стран, в которых применяется ручной сбор (Африка, Центральная и Латинская Америка, кроме Бразилии). Поэтому часто пикерами работают гастарбайтеры. Например, в Коста-Рику пикеры приезжают из соседних более бедных Панамы и Никарагуа.

За каждую собранную кахуэлу кофейных ягод (в неё входит 12 кг) они получают около 2 долларов. Из этих 12 килограмм ягод после обработки получится 2 килограмма готового к экспорту зеленого кофейного зерна. Так что в купленном килограмме коста-риканского кофе 60 рублей — это зарплата пикера.

Пикер в Косте-Рике. Фотография СФТ-Трейдинг sft-trading.ru/blog/573
Кахуэла пикера с ягодами кофе внутри. Фотография СФТ-Трейдинг sft-trading.ru/blog/573

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

Два поясняющих видео. Ручной сбор ягод в Колумбии:

и механизированный сбор в Бразилии:

Запомнить про кофе

Кофе — это тропическая ягода. Есть два сорта кофе: арабика и робуста. Арабика обычно вкусней, все равно это не гарантия. Ягоды могут собирать вручную и механически. Вручную собирают более внимательные к кофе фермеры: это лучше, но дороже.

2. Обработка  

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

Строение кофейной ягоды

Ягода состоит из 5 частей:

  • Мякоть (pulp) — самая внешняя оболочка ягоды. По структуре и форме она похожа на вишню, кофейные ягоды ещё называют coffee cherries.
  • Клейковина (mucilage) — бесцветная желеобразная субстанция, покрывающая пачмент. Она содержит много сахаров и из-за этого липкая на ощупь. Иногда её путают с мякотью, но запомнить легко: мякоть — цветная, клейковина — бесцветная.
  • Пачмент (parchment, пергаментная оболочка) — жесткая оболочка вокруг зерна. Она защищает кофейное зерно от перепадов влажности и проникновения в зерно ненужных веществ. Поэтому её обычно снимают непосредство перед экспортом зерна — этот процесс называется халлинг (hulling, шелушение). Иногда возникает путаница из-за того, что пачментом называют не только саму оболочку, но и зерно вместе в ней.
  • Серебряная кожица (silverskin) — хрупкая пленка, покрывающая кофейное зерно. О ней как-то специально не заботятся, при обжарке она превратится в шелуху.
  • Само зернышко. Обычно в кофейной ягоде содержатся два зерна. Если зерно всего одно, оно называется пиберри.

Я попытался подписать части кофейной ягоды (надеюсь не ошибся):

Оригинальная фотография СФТ-Трейдинг sft-trading.ru/blog/573

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

На самом деле есть ещё промежуточный способ — хани (honey), о нем читайте в статье на сайте СФТ-Трейдинг

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

Сухой способ обработки

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

Видео сухой обработки:

Мытый способ обработки

Кофе обрабатывается в три этапа:

  • Сортировка. Собранные ягоды сначала опускают в воду для сортировки. Спелые ягоды тонут, ягоды среднего качества остаются плавать в середине, а недозревшие ягоды или ягоды с браком всплывают.
  • Депульпация. Отсортированные ягоды очищаются от мякоти. Кофейное зерно в клейковине механически выдавливается из мякоти. Те, кто когда-нибудь готовил вишню для вареников, представляют себе этот процесс.
  • Ферментация. После очищения кофе от мякоти пачмент (зерно в клейковине) поступает в большие резервуары на ферментацию. Эти резервуары заполнены водой с бактериями. Зерно находится в них 36—72 часа, за это время бактерии съедают клейковину на зернах. После этого зерно промывается.

Видео мытой обработки:

Сушка зерна

Полученное любым из двух способов кофейное зерно нужно высушить. Зерно выкладывают на патио под солнцем или на африканские кровати на 4—6 недель. Все это время его ворошат, разрыхляют и переворачивают, чтобы оно сохло равномерно и не прело. Сушка заканчивается, когда содержание влаги в зернах уменьшается до 10—11%. Высушенное зерно складывают в мешки.

В зависимости от способа обработки от сбора ягод до получения готового к экспорту зерна проходит 1—2,5 месяца.

Вот как выглядит сушка зерна (все фотографии с fratellocoffee.com/coffee-drying-speeds:

Как сухой и мытый способ обработки влияют на вкус

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

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

«Натуральный» способ обработки

Исторически сложилось, что сухой способ обработки ещё называется «натуральным». Это не значит, что мытый — какой-то плохой, что там используется страшная химия или гербициды. Скорей всего, сухой способ просто появился первым.

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

Обозначение мытого и сухого кофе в магазине torrefacto
Обозначение мытого и сухого кофе в магазине tastycoffee

Запомнить про обработку кофе

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

3. Обжарка  

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

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

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

Фото Студии Лебедева artlebedev.ru/photo/2011/03/05/

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

Температура зерна (синяя линяя) при обжарке, изображение Скотта Рао scottrao.com/blog/anatomy-of-a-consulting-job

Скотт Рао — известный обжарщик кофе, автор книги «Пособие профессионального баристы»

После того, как во включенном ростере стабилизировалась нужная температура, туда засыпается зерно. Первое время зерно сохнет, из него испаряется влага. На 4-5 минуте обжарки оно начинается жариться — становится золотистым. В процессе зерно проходит характерную точку — крэк. Крэк — это момент раскрытия зерна, его отчетливо слышно по щелчку.

Дальше начинается этап «развития» зерна: происходит изменение состава кислот, карамелизация сахара и появление новых ароматов (на самом деле при обжарке происходит химический процесс — Реакция Майяра. Если продолжать греть зерно, будет и второй крэк, но до него дожаривают не всегда. От того, насколько долго обжаривали зерно после крека, зависит его вкус.

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

Светлая обжарка Тёмная обжарка
Насыщенность Низкая Высокая
Горчинка Низкая Высокая
Кислинка Высокая Низкая
Разнообразие вкуса Высокое Низкое
Содержание кофеина Высокое Низкое

А вот как изменение вкуса кофе иллюстрирует Скотт Рао:

Иллюстрация с его сайта scottrao.com/blog/seeing-through-roasts/

Степень обжарки зависит ещё от страны и традиции, в разных странах предпочитают разную:

В Финляндии любят легкий кофе светлой обжарки. В России предпочитают более крепкий и ароматный кофе без ярко выраженной кислотности. Поэтому в Финляндии кофе под меткой Classic — это стопроцентная арабика, а в у нас — арабика с робустой (робуста отвечает за крепость). Российский Presidentti Original тоже отличается от финского в сторону большей крепости, а вот Gold и Black точно такие, как в Финляндии.

В «Паулиге» разработана схема пяти степеней обжарки, но на российском производстве применяют три. Первая — и самая легкая — есть только на финском заводе. В Твери ориентируются на российских потребителей, которые в массе пока хотят кофе средней крепости. Поэтому у нас используется средняя обжарка (вторая, третья степени) и сильная (четвертая). Вторая и третья степени используются в производстве кофе для масс-маркета, четвертая — для профессионального использования. Объясняется просто: в ресторанах кофе варят в кофемашинах, основа любых кофейных напитков — эспрессо, а для него берут сильно обжаренный кофе по умолчанию. Пятая степень превращает кофе практически в уголь, вкус сильно отдает горечью, такой кофе рекомендуют пить с большим количеством молока. Эту обжарку в Твери планируют запустить осенью.
Как делают фабричный кофе, Еда №23, eda.ru/media/produkt/kak-delayut-fabrichnyy-kofe

Некоторые степени обжарки имеют свои названия:

Фотографии и названия из Википедии en.wikipedia.org/wiki/Coffee_roasting

Строго говоря
Первые 3—7 дней посла обжарки зерно ведет себя нестабильно, — «бесится». Из него сложно получить одинаковый напиток несколько раз подряд. Бариста не возьмет только что обжаренное зерно на чемпионат и даст ему полежать недельку. Обычно эта неделя будет как раз уходить на доставку зерна до вас.

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

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

Запомнить про обжарку

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

Далее:Часть 2: Как готовить кофе

Подписаться на блог…

Публичные галереи в Скраппе

Про скрапп я уже писал: http://mikeozornin.ru/blog/all/scrapp-2-0/

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

Всякие красивые вещи:

Дейтпикеры:

Плакаты Игоря Штанга:

Диковатые плакаты Стрелки:

В новой версии Скрапп ещё стал удобней и красивей. Подробнее написал Андрей Ильинский:
http://ilinskiy.net/all/sharing-and-gallery/

У меня уже 950 тегов и 1175 картинок, я с ужасом думаю, если мне надо найти что-то в пинтересте (коллекцию из него я ещё перенес):

Присоединяйтесь: http://scrapp.me

2017   скрап
Подписаться на блог…

Как подписывать скриншоты

Ян Хацкевич написал пост о том, как они в Драйв2 подписывают скриншоты:
http://priunil.ru/all/kak-oformlyat-skrinshoty/

В итоге они пришли вот к такой картинке:

Картинка из поста выше: http://priunil.ru/all/kak-oformlyat-skrinshoty/

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

Буду рад, если кому-то поможет. Если кто-то знает, как сделать лучше — напишите, буду рад совету.
Скачать исходник Скетча ↓

Подписаться на блог…
Ранее Ctrl + ↓