Блог Кирилла Беляева

о дизайнерском росте, подаче информации, интерфейсах, ведении проектов и жизненной среде.

Работаю дизайнером в Лаборатории данных. Работал в Дизайн‑бюро Артёма Горбунова и соосновал дизайн-группу «Кипо». Веду Твитер, Фейсбук, Инстаграм и ЖЖ.

Ctrl + ↑ Позднее

Праздник по-латышски

В латышском слово «праздник» традиционно используют во множественном числе — svētki. Словари переводят svētki, как праздник. Но окончание i показывает, что слово множественного числа, и склоняется оно, как множественное. Настоящий праздник длится не один день :-)

А Рождество будет Ziemassvētki. Дословно — праздники зимы. Языческая традиция, обезопасила язык. Если христианство пройдёт, название праздника менять не придётся.

С наступающими!

Мультфильм о Кубо

Добавил в копилку «Кубо. Легенда о самурае». Адаптированное название хромает, в оригинале — «Kubo and the Two Strings».

5-й фильм студии «Лайка Интертеймент», 2-м была «Коралина в Стране кошмаров», о которой писал раньше. Кубо — тоже 3Д, снятое по кадрам. Но выглядит ощутимо зрелищнее.

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

Нерешительность — морось

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

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

Последние 4 дня в Риге жуткая погода — небо затянуто, +3, высокая влажность и постоянно весит морось. Забыл, что такое бывает.

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

Вместо дизайн-руководств

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

Ругать легко. А чтобы была польза расскажу, как сделаю сам, если у меня будет компания (не дизайн-студия).

1. Закажу просто логотип без фирменных шрифтов, цветов и прочего у мастера уровня Сола Баccа. Тут следует рассказать, почему он.

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

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

2. Экономить начну дальше. Вместо руководств и прочего, найму дизайнера в штат. Уровень дизайнера будет зависеть от бюджета. Если будет супердефицит предложу сдельную работу большими кусками. У дизайнера будет логотип и свобода в оформлении материалов. Возможно, он создаст систему, а может, и нет — неважно.

3. Когда 1-й дизайнер устанет или придёт время меняться, найму 2-го. И снова дам ему логотип и свободу. Может, он создаст новую систему.

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

Редактирование объёмных заметок с фотографиями в Эгее

Когда писал заметку о Кулдиге, придумал, как не бегать от редактора к просмотру по сто раз. Соединил разные браузеры в сплит-режиме. Просмотр сделал уже, чтобы больше по высоте помещалось. Жал ⌘S в редакторе, а следом ⌘R, чтобы обновить просмотр.

2016  

Из сауны в снег

В заметке о Кричеве я писал, что попробовал там окунаться в прохладную реку и продолжил эксперимент в Риге. Cентябрь прошёл, окунаться стало холодно. Под конец разогревался бегом. Но это требовало много энергии и времени, а вода становилась холоднее.

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

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

Впереди — полузамёрзшее озеро или купель. Признаюсь, страшно.

2016   жизнь   тело

Смягчение согласных

Лингвисты, наверняка, используют спецтермины, но я объясню наблюдение без них.

Мы привыкли, что буква е, ё, ю и я смягчают согласные стоящие перед ними, и не задумываемся об этом. 2-ой способ смягчения — мягкий знак. Для нас это естественно.

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

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

Viņа «Виня» Она
Viņš «Виньш» Он

Ещё интересно, что у строчной g запятую пишут сверху — ģ.

Сглаживание шрифтов

Оказалось не все матёрые разработчики знают о ЦСС-свойстве «-webkit-font-smoothing», которое сглаживает шрифты. Есть ещё разные хаки, но тут просто свойство с тремя значениями:

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

subpixel-antialiased
Непросто изучать (и запоминать) факты, воздерживаясь от суждений и отметая всяческие объяснения.

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

Значение «none» бесполезно, а «subpixel-antialiased» и «antialiased» одинаково хороши, но подходят для разных случаев. Для Гельветики лучше «antialiased», а для Гарамона, который на сайте лаборатории — «subpixel-antialiased».

Добавлено позже: на Андройде и Виндоус свойство не работает. В других случаях будет так:

Маленькие программы для Мака, улучшающие жизнь

  1. Редактор «Оптима», который фокусирует на содержании и проверяет текст в Главреде.
  2. Простой ФТП-клиент «Кибер утя».
  3. Трекер продуктивности «Кубисёрв». Илья Страйков тоже доволен.
  4. Компактный календарь для меню-бар «Итсикал».
  5. Калькулятор «Нуми».
  6. Корректор излучений монитора «Флюкс». Чтобы беречь глаза.
  7. Блокнот «Симпл-ноут». О нём писал уже.
  8. Менеджер буфера обмена «Клип-меню».
  9. Менеджер открытых окон «Спектакль». Например, на случай когда споит-режим не подходит.
  10. Плеер «Вокс», который дружит о Саунд-клаудом.
  11. Видеоплеер «Гелий», который показывает поверх всех окон. Начиная с Сиеры Мак сам умеет показывать видео поверх, но он магнитит его к углам, что не всегда удобно.
  12. Подсказка горячих клавиш «Чит-шит». Забыл сочетание, держишь ⌘ подольше, и подсказка всплывает. Иногда даже забываю о ней, а потом ставлю палец на ⌘ и немого вспомнить вторую клавишу. И тут как раз подсказка вылезает.
  13. Примитивнейший таймер для меню-бара. Если хочу просто засечь время.

Добавлено 13 марта 2017: заменил «Вокс» на «Саунд-клюд» — завёрнутый в приложение веб-интерфейс Саунд-клауда с поддержкой родных медиа-клавиш.

СВГ-иконки на практике

Кроме разрешения и веса, СВГ-иконки умеют удобно хранить несколько состояний. Так не в силах ни один растр. Количество состояний — признак, по которому делю иконки на «сплошные» и «слоёные».

Если иконка работает, как ссылка — целиком меняет цвет при наведении (или посещении), то про себя называю её «сплошной». С ней можно работать вслепую, не заглядывая внутрь. Говорим через ЦСС всему СВГ: «будь при наведении красным», и всё.

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

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

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

При этом слой с формой в виде обводки не сработает. ЦСС покрасит не только внешнюю форму, но и внутреннюю.

Если иконка слоёная, обратиться через ЦСС ко всему СВГ не получится. Нужно манипулировать элементами внутри. Это легко с инлайновым СВГ — добавил классы к нужным элементам и готово. Иконка фулскрина в карточке на сайте лаборатории:

<svg class="full-screen" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="M7,7 L7,8 L6.00097656,8 L6.00097656,9 L5,9 L5,8 L0,8
    L0,18 L10,18 L10,13 L9,13 L9,12 L10,12 L10,11 L11,11 L11,10 L12,10
    L12,9 L13,9 L13,10 L18,10 L18,0 L8,0 L8,5 L9,5 L9,6 L8,6 L8,7 L7,7 Z"
    fill="#FFF"/>
			
    <path class="variable" d="M9.538,3.077 L13.935,3.077 L9.538,7.475 L9.538,8.462 
    L10.525,8.462 L14.923,4.065 L14.923,8.462 L16,8.462 L16,2 L9.538,2 L9.538,3.077 
    Z M3.077,13.938 L3.077,9.54 L2,9.54 L2,16 L8.461,16 L8.461,14.924 L4.063,14.924 
    L8.461,10.527 L8.461,9.54 L7.474,9.54 L3.077,13.938 Z" 
    fill="#666"/>
  </g>
</svg>

Без инлайна сложнее — обращение будет к типу элемента или к атрибуту. Плей в той же карточке:

<svg class="play"  xmlns="http://www.w3.org/2000/svg">
  <g>
    <polygon fill="#FFF" points="0 0 0 22 19 11"></polygon>
      
    <path class=“play-fill“ d="M2,3L2 19 15 11z" fill="#666"></path>
      
    <path class="play-void“ d="M3,4.99999999L3 17 13 11z" fill="#666"></path>
  </g>
</svg>

Допустим, он не инлайновый. Тогда при наведении будем менять цвет только элементов «path». Нижний полигон всегда белый. Верхнему треугольнику стоит задать по умолчанию заливку «none», чтобы обращаться к нему отдельно и управлять его видимостью.

Если такая иконка будет сплошной, понадобиться ещё один СВГ с белым фоном под ней. Это замусорит код и может привести к ошибкам при масштабировании.

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

Ctrl + ↓ Ранее