Скругления в иллюстраторе

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

Секрет в том, как расположена обводка относительно контура:

Формально иллюстратор прав, потому что считает радиус скругления во всех случаях по контуру, а оптически — нет. Стоит помнить об этом при рисовании иконок и прочей графики.

Перечитал «Отзывчивый веб-дизайн»

Начал пролистывать для восстановления знаний, в итоге перечитал заново. Интересно читать такие книги по мере того, как изучаешь код — сначала ничего не понятно, при следующем прочтении все очевидно. Страничка, которую Итан создает из главы в главу: https://responsivewebdesign.com/robot/

Книга небольшая, легко прочитать за несколько вечеров. Часть текста безнадежно устарела (что естественно) но основы будут актуальны всегда. Состоит из глав-принципов отзывчивого веб-дизайна:

Гибкая сетка

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

Гибкие изображения

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

Медиазапросы

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

Как стать отзывчивым

Здесь уже конкретные советы по внедрению отзывчивости. Кратко рассказано о разных подходах, ориентации на пользовательские цели, принципе «сначала мобильные» (в контексте написания кода сначала для мобильных), итерационном дизайне, тестировании и концепции прогрессивного улучшения. То есть то, что сейчас вошло в практику.

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

Опентайп фичи: цифры

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

Что это такое, откуда появилось и зачем нужно

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

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

Всего бывает более ста фич.

Как включать

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

Низкоуровневый, через font-feature-settings

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

font-feature-settings: "onum" 1;

Включить и выключить фичу можно по-разному:

  1. Цифрой после буквенного кода: выключить (0) и включить (1). Реально на включение работает любая цифра > 0.
  2. Буквами: выключить (off) и включить (on)
  3. Можно обойтись вообще без цифр, это будет эквивалентно включенной фиче.

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

font-feature-settings: "onum" 1, "pnum" 1;

Высокоуровневый, через font-variant-

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

font-variant-numeric: oldstyle-nums proportional-nums;

Что еще проверить

Браузерная поддержка определенных фич не вполне хороша. Если у вас специфические требования типа IE9 то прежде чем включать стоит заглянуть сюда https://caniuse.com/ Поддержка каких-то браузеров может потребовать префиксов. Вобщем проверяйте перед использованием.

Цифры

Что можно: задавать различный вид и пропорциональность. В случае пропорциональности и стиля цифр это всегда явный вариант «либо-либо», то есть у вас будет включен всегда один из видов (в отличии от фич, которые можно включить или нет). Какой — определяет дизайнер шрифта. Правила сосредоточены в блоке font-variant-numeric.

Везде далее в примерах первая строка — высокоуровневое включение, вторая — низкоуровневое.

Маюскульные и минускульные цифры

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

Golos RF
//Маюскульные
font-variant-numeric: lining-nums;
font-feature-settings: 'lnum';

//Минускульные
font-variant-numeric: oldstyle-nums;
font-feature-settings: 'onum';

Пропорциональные и моноширинные цифры

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

PT Root UI
//Пропорциональные
font-variant-numeric: proportional-nums;
font-feature-settings: "pnum";

//Табличные
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";

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

Автоматические дроби

Любое сочетание типа 1/2 автоматически превращается в ¹⁄₂ (разумеется при наличии всех над- и под- индексов в шрифте).

PT Root UI
font-variant-numeric: diagonal-fractions;
font-feature-settings: "frac";

Дроби посложнее

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

Не включено фичами а скопировано из панели глифов Palatino.
font-variant-numeric: stacked-fractions;
font-feature-settings: "afrc";

Перечеркнутый ноль

Полезен если есть необходимость не спутать О и 0.

IBM Plex Sans
font-variant-numeric: slashed-zero;
font-feature-settings: "zero";

Не вполне цифры

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

IBM Plex Sans

Реально лучше детально проверять что включается а что нет — у меня в нескольких шрифтах работали испанские 1a но не работали английские 1st и 2nd.

font-variant-numeric: ordinal;
font-feature-settings: "ordn";

На закуску (с чего все началось)

При использовании с прописными буквами или маюскульными цифрами обычные знаки тире, дефиса, минуса стоят слишком низко. Скомпенсировать поможет фича «Case sensitive forms»:

Golos RF
font-feature-settings: "case" on;
//высокоуровнего свойства пока нет ¯\_(ツ)_/¯

Краткое саммари

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

✌︎

Документалка про «Кузькину мать»

Росатом выложил документальный фильм о подготовке и испытаниях Царь-бомбы 30 октября 1961 года:

Фильм сделан весьма профессионально. Как и любое произведение в стилистике соцреализма — почти полностью постановочный, в некоторых местах видны улыбающиеся лица, что обычно бывает при съемке первых дублей.

Ракурсы, построение кадра еще из 40-х 50-х годов, с некоторым заигрыванием в конструктивизм. Последние десять минут в ролике идут чисто документальные кадры, которые видимо не вошли в фильм — съемки взрыва с самолета и наблюдательных пунктов.

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

Разница между постановочными и кадрами снятыми живой камерой:

Интересно присмотреться к деталям. Эргономичные деревянные стулья:

Телеграфный (?) аппарат:

У одного из военных татуировка на кисти руки — или цензура не заметила или в то время это не вымарывалось:

Регистрирует все обычный серийный «Зоркий-2С» и «Зоркий-5» (или 6), затвор которого нажимается устройством (но непонятно как проматывается пленка — автопромотки не видно):

Инфографика:

Титры и надписи:

Спросить немного

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

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

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

Вот например как в Альфа-Банке заполняется заявка на ипотеку:

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

А вот как выглядит заполнение ипотечной анкеты на сайте Пика:

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

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

 12   2 мес   интерфейс
Ранее Ctrl + ↓