Rose debug info
---------------

Рома Воробьёв

Как влюбить в себя клиента

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

Как меньше переделывать
Почему важно задавать вопросы перед тем, как начать что-то делать

Робеете от замечаний клиента? Бывает
Почему важно изменить отношение к заказчику и встать с ним по одну сторону

Я плачу деньги и хочу, чтобы было так!
Алгоритм работы с дурными замечаниями

Как донести до коллег, что дизайнер — не просто оператор Фотошопа?
Не совсем про правки, но о том как начать брать больше ответственности

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

Клиент сидит, а в глазах пустота
Как правильно презентовать работу заказчику

Как эффективно презентовать работу
Лекция Ильи Бирмана о том как защитить свою работу

Правильное понимание дизайн‑систем

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

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

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

— Илья Бирман, Дизайн странспортных схем

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

Как я воскресил Spotify

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

По сути, всё что нужно сделать — это оплатить любой тариф на этом сайте. В течение суток тебе в телеграм скинут логин-пароль от нового аккаунта. Старый восстановить не получится — Spotify все русские аккаунты удалил.

Единственное, с чем могут возникнуть сложности — установка приложения на iPhone или iPad. Если приложение уже было установлено, то нужно восстановить покупку в AppStore. Сработает, даже если устанавливался на старом устройстве. Главное, чтобы везде был один Apple ID. Если Спотифай в новинку, придется создавать американский Apple ID. Вот подробная инструкция для того и другого.

Ну и две капельки дёгтя — аккаунт новый, соответственно пустой. А его регион — Индия. Из-за чего все рекомендации по началу будут индийские:

Исправляется это довольно быстро. Просто лайкай любимую музыку, исполнителей, плейлисты и подкасты. А всё индийское c главной страницы исключай из предпочтений. Через пару дней нейросети всё поймут и перестроят рекомендации.

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

Скрываем все кнопки на видео из Vimeo

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

В личном кабинете Vimeo, в разделе Library, копируем ссылку на видео:

Открываем ссылку и внизу находим кнопку Share:

В появившемся окне жмём на Show options:

Настраиваем как на скрине. Размер выставляем какой нужно:

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

Галочка Autoplay this video включает авто-воспроизведение, но с нюансом — в некоторых браузерах это может не сработать, так как браузер считает, что у видео есть звук. А ещё не будет работать одновременное воспроизведение всех видео на странице. Это тоже пофиксим в коде.

Копируем код из поля Embed и немного его дополним. Вставляем «muted=1&autopause=0&» после loop=1&. С помощью muted=1 мы говорим, что в видео нет звука, благодаря чему видео будет воспроизводиться автоматически во всех браузерах. А autopause=0 наверняка отключит остановку воспроизведения в конце. Обрати внимание, что между параметрами должен стоять амперсанд &.

В конце всех параметров, перед закрывающей кавычкой, вставляем «&sidedock=0&controls=0». Эти параметры уберут весь остальной интерфейс на видео.

Всё, получившийся код можно вставлять в кейс на Behance и Dprofile.

Обновляем иконки без боли в Figma

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

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

Подготавливаем новую иконку. Объединяем элементы через «Union selection» и потом сливаем все в единый шейп через «Flatten selection» (⌘E). Важен именно такой порядок.

Если объединять сразу через «Flatten selection», то шейпы элементов будут как бы накладываться друг на друга. Это нам не подходит. Нам нужен единый шейп.

Когда новая иконка готова, переходим в режим редактирования шейпа — выделяем и жмём Enter. Выделяем весь шейп (⌘A) и копируем.

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

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

Когда новый шейп в стороне, старый можно легко выделить и удалить. Осталось вернуть новый шейп на место. Всё. Иконка обновлена и все её инстансы сохранили цвет и масштабирование.

Массовое переименование в Figma

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

А ещё, через названия компонентов можно задавать иерархию, используя слеш «/». Эта иерархия будет отображаться в меню Swap Instance.

Чтобы запустить массовое переименование, выделяем все слои и жмём ⌘R. Новое название применится ко все слоям сразу — тут всё понятно. Ниже покажу как с помощью этой штуки можно поубивать много рутины.

Добавляем префикс в конце

Префикс — повторяющийся текст в каждом названии. Например, save‑24px, close‑24px, add‑24px. То есть, нам нужно сохранить старые названия и добавить к ним приписку.

Для сохранения старого названия есть кнопка «Current name». Она вставляет в поле символы «$&» — на их место встанут старые названия слоёв. Рядом с «$&» можно писать любые префиксы:

Создание иерархии

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

Например, хотим закинуть группу иконок в отдельную категорию. Для этого нужно прописать пути куда хотим положить иконки. По сути, это префиксы к старым названиям в виде «Notice / M / .. ». «Notice» станет первым уровнем, «M» — вторым, а внутри наши иконки. Да, Фигма определяет слеш «/» как вложенность.

Нумерация

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

Чтобы добавить нумерацию, жмём «Number ↑». В поле появятся символы «$nn». Затем вставляем старое название. Посередине можно добавить пробел, например. За результатом можно наблюдать в превью слева.

Количество n — разрядность. Например, $nn: 01, 02 .. 99; $nnn: 001, 002 .. 999; и так далее.

Нюанс: Фигма нумерует слои относительно их z‑индекса в панели слоев. То есть, слой сверху будет 01, а который под ним 02. Учитывайте это.

Удаление или замена совпадений

Самая крутая фича — это поле «Match». Например, нам нужно у всех названий удалить префикс. Пишем в поле этот префикс и в превью видим как он удаляется у всех слоев.

Комбинируя поля «Match» и «Rename to» можно заменять одни символы на другие. Ну или один префикс сменить на другой — как угодно:

Первая визуализация чёрной дыры

Это первая визуализация черной дыры, сделанная в 1979 году. Данные вычислялись на транзисторном компьютере на перфокартах. Затем каждую «точку» данных переносили на бумагу чернилами вручную. Итоговое изображение перевели в негатив. Вот такое романтичное время было.

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

Как сохранить цвет при замене иконок

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

Чтобы цвет не слетал, называй все шейпы иконок одинаково. Тогда Фигма поймёт, что стили у слоя не нужно трогать. Кстати, в Фигме есть массовое переименование. Выделяешь слои, жмешь ctrl+R и кайф.

Високосный год

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

На самом деле, оборот Земли вокруг Солнца занимает 365 дней и 6 часов. То есть, каждый год «за бортом» календаря остается 6 часов. И каждые четыре года накапливается на целые сутки. И вот эти сутки — 29 февраля — компенсируют излишки во времени. Жаль, что в этот лишний день не дают выходной, ведь он же лишний.

Кстати, правильно именно вИсокосный, а не вЫсокосный. Слово заимствовано от латинской фразы — «bis sextus» — второй шестой. Римляне называли 28 февраля — «первый перед мартом», 27 февраля — «вторым» и так далее. А дополнительный день вводился после 23 февраля. Поэтому этот день был вторым шестым перед мартом 🤯

Эффект привязки

«Видимо, здесь работает классический ментальный механизм — так называемый эффект привязки. Вы усмиряете свой страх перед неопределенностью, придумывая число и цепляясь за него как за островок посреди пустоты. Этот эффект был открыт отцами психологии неопределенности Дэнни Канеманом и Амосом Тверски, еще когда они только начинали исследовать заблуждения в использовании эвристик. Эффект работает следующим образом. Канеман и Тверски предлагали добровольцам покрутить рулетку. Добровольцы смотрели на выпавшее число, зная, что оно случайно. Затем их просили назвать количество входящих в ООН африканских стран. Ответ коррелировал с выпавшим числом.

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

Чёрный лебедь — Н. Н. Талеб

Ранее Ctrl + ↓