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

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

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

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

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

7 декабря  

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

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

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

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

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

5 декабря   жизнь   тело

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

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

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

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

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

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

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

2 декабря   латышский   язык

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

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

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

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

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

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

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

1 декабря   типографика   ЦСС

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

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

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

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

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

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

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

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

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

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

<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», чтобы обращаться к нему отдельно и управлять его видимостью.

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

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

29 ноября   иконки   на практике   СВГ

О латышском

Начал учить латышский. Пока воспринимаю его смесью старославянского с немецким и щепоткой финно-угорского.

В латышском у существительных нет среднего рода и 7 падежей. Они похожи на русские. Сильно отличаются только местный (lokatīvs) и звательный (vokatīvs). В русском звательный падеж остался только в рудиментарном виде. О нём и других хитрых падежах интересно написал Илья Бирман.

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

Местный падеж применяется так: улица — iela, на улице — ielā. Очень просто и достаточно узнаваемо. В Риге — Rīgā, в Вентспилсе — Ventspilī. Удобно с адресом: говоришь «я живу» (es dzīvoju), дальше — свой адрес, и не забываешь потянуть ā на конце слова улица.

Большинство городов женского рода. А большинство слов женского рода заканчиваются на гласные — Rīga. Поэтому иностранным городам с согласной на конце добавляют гласную — Sanktpēterburga и Londona.

Есть существительные женского рода с окончанием на s. Одно из них — pils («замок», но так как род женский удобнее переводить «крепость»). Это слово часто стоит второй частью в названии городов — Ventspils. В русском аналоги — «град» и заимствованный у немцев «-бург».

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

Helsinki Хельсинки
Helsinku Хельсинок
Helsinkiem Хельсинки
Helsinkus Хельсинками
Helsinkos В Хельсинках

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

-t -ть
-ties -тся
28 ноября   латышский   язык

Кулдига в августе 2014-го

На 3-м месте списка интересного в Латвии у меня — Кулдига, после Риги и долины реки Гауи в районе Сигулды и Турайды. Город очарователен, и хорошо умещается в прогулку на день. Стоит в ~150 км на запад от Риги. Кулдига входила в Ганзейский союз — для меня это признак, что будет интересно.

Снимаю на телефон, потому что с фотоаппаратом дольше. Понимаю, что содержание важнее качества, но всё равно переживаю.

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

Общий вид центральных улиц.

Отдельные строения завораживают.

Дом 1637 года.

Церковь 1625 года. Белые стены хорошо выглядят с любой степенью ровности. Жаль, когда ставили водостоки, никто не оценил кайф компоновки.

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

История города в уличной тумбе.

Заметные, но слабо свёрстанные часы работы почты.

Единицы уличного искусства.

Искусство декоративное.

В центре много разной плитки и брусчатки.

Аккуратные общественные туалеты.

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

Оригинальное решение — мешковина с печатью, повешенная как занавеска на окне. Зданию по стилю подходит. Продают офисную технику. Кстати, «компьютер» в латышском — «Dators».

Ещё решение — остекление двери и окон вокруг неё.

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

Фигурная колонка.

Воды в городе много. Через центр течёт живописная речка.

В устье речки — водопад, после которого она впадает в более крупную Венту. А та течёт до Вентспилса и впадает в Балтийское море.

На самой Венте есть небольшой перепад высоты — самый широкий естественный водопад Европы «Вентас-Румба» (249 м).

Берега крутые. Об идущих вверх позаботились. Но под носом, увы, — урна.

На берегу у водопада стоит крытая соломой и глиной и поросшая мхом смотровая.

Маленький ручей в парке тоже привели в порядок.

Летний театр в окружении яблонь в том же парке.

Плавно начинается уютный частный сектор.

Ошибки распознавания на практике

Мепс-ми — лучшие офлайн-карты на сегодня. Но их интерфейс периодически хромает.

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

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

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

История о клавиатурах, которую приводит Норман:

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

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

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

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

«О, да, — ответили все секретари, — такая проблема возникала много раз».

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

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

И его «рассуждения по этому поводу»:

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

Для максимального контраста лучше оставить только «From» и «To», а иконки сделать разными. Например, флаг для старта и пин для финиша. Если нужно быстрее — «А» для начала и «В» для конца.

2 ноября   Фонт-сквирл   шрифт
Ctrl + ↓ Ранее