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

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

Ищу дизайнера интерфейсов-3 (всегда)

Снова ищем, прошлый поиск

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

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

Апдейт с прошлого поиска

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

Мне нужны дизайнеры создавать общую платформу для самых зарабатывающих продуктов компании.

Чем мы занимаемся

Мы делаем корпоративные продукты для специалистов по информационной безопасности («ибэшников»). Вы, возможно, про нас не слышали, но в России нет ни одного ибэшника, который бы нас не знал. Некоторые наши продукты хорошие, некоторые — отличные; наш WAF попадал в магический квадрант Гартнера (это типа круто), многие наши продукты — лидеры российского рынка в своем классе.

А вот график стоимости наших акций (ну чем ещё я могу похвастаться):

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

В планах на 2023 год:

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

Все это не снижая скорости роста и развития продуктов.

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

Задачи, которыми придется заниматься

Разбираться со сложными системами и создавать для них элегантные решения.

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

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

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

Наш дизайнер

Имеет опыт проектирования интерфейсов CRM-систем, систем документооборота, промышленных или других подобных систем.

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

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

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

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

О команде

Группа из шести человек внутри департамента из 38. Каждый из них тесно работает со своей продуктовой командой, периодически все общаются между собой. Часть дизайнеров ведут внутренние задачи дизайн-отдела: гайдлайны, ui kit, дизайн-токены, развитие экспертизы в исследованиях.

Фигма, дизайн-система, база компонентов, гайдлайны — всё как у всех.

Фронтендеры и бэкендеры, которые не говорят «ой, это невозможно», и продакты которые говорят «Хочу удобно и красиво».

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

Если вам интересно и вы узнали себя хотя бы наполовину, напишите о себе:
mozornin@ptsecurity.com или в телеграм: @mikeozornin

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

Как бекапить фигму

Сегодня фигма написала, что она прекращает продажи в России (figma.com/blog/our-response-to-ukraine). Меня спрашивают и коллеги, и не только, что делать. Пишу, как забекапить файлы из фигмы.

Скачать в png

Если вы хотите скачать макеты в png, см. пост Автоматическое скачивание новых экранов из Цеплина и Фигмы

Скачать исходники

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

Если нужно скачать лишь несколько файлов, скачайте вручную, и не заморачивайтесь со скриптом:
File > Save local copy…

Если нужно скачать несколько файлов, то вручную можно задолбаться. Вот как сделать автоматически

  1. Выпускаете токен доступа (лучше завести пользователя только с read-only-правами). См. figma.com/developers/api#access-tokens
  1. Устанавливаете figma-backup из npm (github.com/mimshins/figma-backup). Пакет не наш, ответственности не несу.
npm install -g figma-backup
  1. Устанавливаете jq:
brew install jq
  1. Запускаете скрипт, заменив {{переменные}} на значения.
FIGMA_TOKEN={{token}}
TEAM_ID={{team-id}}

PROJECTS_ID=$(curl -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" "https://api.figma.com/v1/teams/$TEAM_ID/projects" | jq -j '.projects[] | .id, " "')
echo "$PROJECTS_ID"
echo "====="

npx figma-backup -e "{{email}}" -p "{{password}}" -t "$FIGMA_TOKEN" --projects-ids $PROJECTS_ID
  1. Вы получите папку, в которой будет лежать все файлы, с которым имеет доступ пользователь {{email}}.
  1. Если нужно запускать регулярно, добавьте в крон и/или в CI-пайплайн.

Готовьтесь, это все работает медленно. Наши 2,5 гигабайта файлов экспортируются 3 часа.

Наверное, как-то можно сделать параллельно, не смотрели. Точно можно сделать вариант «не качать файлы, если они не менялись», пока не заморачивались.

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

Верстка под телеграм

Есть два вида пишущих в телеграме

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

Как должно быть:

  • Понятное обращение и краткая суть
  • Текст, разбитый на абзацы
  • Ссылки отдельно с новых строк (чтобы они не рвали сообщение на части)

Например, можно как-то так:

Если человек не может нормально отформатировать сообщение в мессенджере, то может быть два варианта:

  • Ему не важно ваше удобство
  • У него беспорядок в голове
  • Он очень торопится Да даже когда торопится так не сделать.
Подписаться на блог…

Одна небольшая тупость в iOS

Джобса на вас нет

Если при включенном хотспоте попробовать включить вай-фай, айфон покажет вот такое сообщение:

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

iOS говорит нам:
— Пс, парень! Хочешь включить хотспот?

Что произойдет при нажатии «Включить»?
Хотспот отключится.

Как. Такое. Можно. Было. Сделать.

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

Театральные спектакли за 2021

За четыре месяца (с сентября по декабрь 2021 года) я сходил на полтора десятка спектаклей. Мы не ходили в театр весь 2020 год, а деньги на статье семейного бюджета «театр» продолжали копиться. Нагнали пропущенное мы во второй половине года 2021.

Вот на что сходил:

Спектакль Театр Режиссер Понравилось ли
Ричард III (второй раз) Театр Вахтангова ★★★★★ ★
Война и мир Театр Вахтангова Римас Туминас ★★★★★
Дядя Ваня Театр Вахтангова Римас Туминас ★★★★☆
Маскарад Театр Вахтангова Римас Туминас ★★★★☆
Царь Эдип Театр Вахтангова Римас Туминас ★★★★☆
Бег Театр Вахтангова Юрий Бутусов ★★★★★
Король Лир Театр Вахтангова Юрий Бутусов ★★★★☆
Сын РАМТ Юрий Бутусов ★★★☆☆
Все тут Театр современной пьесы Дмитрий Крымов ★★★★☆
Костик Театр им. Пушкина Дмитрий Крымов ★★★★☆
Моцарт «Дон Жуан».
Генеральная репетиция
Театр П. Фоменко Дмитрий Крымов ★★★★★ ★
Горбачев Театр наций ★★★★☆
Сказки Пушкина Театр наций Роберт Уилсон ★★★★☆
Боюсь стать Колей МХТ Марина Брусникина ★★★★☆
Враки, или Завещание
барона Мюнхгаузена
МХТ ★★★★☆

★★★★★ ★ — что-то с чем-то
★★★★★ — очень понравилось, я бы сходил и второй, и третий раз (или уже сходил не один раз)
★★★★☆ — очень понравилось, но идти второй раз пока планов нет

Как начать ходить в театр

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

Чтобы начать, я бы посоветовал сходить на два спектакля:

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

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

Хорошие места на Евгения Онегина:
5-6-й ряд, места в середине поближе к проходу.
10-й ряд, места 11, 12, 13. Этот ряд сдвигается на полряда в сторону относительного 9-го, сиденья становятся в шахматном порядке и никто не мешает спереди своей головой.

Хорошие места на Ричарда:
Любые места в центре поближе к сцене.



Если хочется спросить про какой-то из спектаклей, напишите лично. Я специально ничего не писал про сами спектакли, чтобы случайно ничего не заспойлерить.

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

Разделять вопросы и предложения

Бывают фразы ни туда, ни сюда. Например, «можно увеличить тут отступ и кегль». Я после таких сижу и туплю. Делать что-то надо или нет. Рассказываю, что с этим делать.

Допустим, говорят «можно увеличить тут отступ и кегль» — ну ок, можно увеличить отступ, можно кегль. Увеличиваем отступ, или кегль, или и то, и другое? Есть ли другие решения, что в итоге делаем?

Или вот «файлы можно выкладывать в артифакторий», — еще можно в гит лфс, фтп-сервер, на файловую шару, в S3. Куда нужно? Куда лучше?

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

Непонятно что Отлично
Можно увеличить тут отступ и кегль Чтобы решить проблему, предлагаю увеличить тут отступ до 16 пк, а кегль до title. Заголовок будет держать конструкцию ниже, а лид и заголовок не будут слипаться.
Что думаешь?
Файлы можно выкладывать в артифакторий Файлы бинарные, файлов пока не очень много (100...1000 ГБ), не требуется доступ непосредственно с клиентов. Так?
Давайте тогда выкладывать в артифакторий, это оптимальный вариант.
Файлы можно выкладывать в артифакторий Давай выкладывать файлы в артифакторий.

Ещё пример.

Мне однажды написали буквально следующее «Будут ли замечания из твоего письма оформлять как баги? У меня по письму вопросы есть».

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

Всегда ли нужно что-то предлагать? Нет, не всегда. Но и отсутствие предложения тоже надо сформулировать ясно. Пример ниже.

У нас есть три варианта:

  1. Сделать все своими руками. У нас мало свободных ребят, поэтому по времени — два месяца, по деньгам — K рублей.
  2. Своими силами сделать скелет макета, а для иллюстраций взять подрядчиков. По времени — месяц, по деньгам — N рублей.
  3. Все отдать на аутсорс. По времени — три недели, по деньгам — M рублей.

Как поступим?

И итоге вся схема рабочего общения выглядит примерно так:

См. также

Видео Артёма Горбунова общаться вопросами и предложениям

Все подобные посты — с тегом сделать удобно читателю

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

Игры для дизайнеров

Собрал разные дизайнерские игры потренировать насмотренность

Мастхевные

https://bezier.method.ac
Что делать: повторять форму фигуры кривой безье
Зачем: стать гуру вектора, рисовать крутые иконки и векторные иллюстрации
https://cantunsee.space
Что делать: находить мелочи и ошибки в картинках
Зачем: проводить авторский надзор 85 лвл, за секунду находить ошибки недочеты в реализации
Что делать: находить ошибки в инфодизайне
Зачем: натренироваться базовым важным вещам в инфодизайне

Если прошли игры выше

https://betterwebtype.com/triangle/
Что делать: играться с параметрами ширины блока текста, интерлиньяжа и кегля, чтобы собрать идеальный параграф
Зачем: потренировать чувство текстового блока
https://type.method.ac
Что делать: расставлять буквы в строке
Зачем: потренировать чувство букв, потренировать в кернинге, если делаете шрифт (ну да)
https://color.method.ac
Что делать: подбирать цвет по полному совпадению, искать противоположный и гармоничный к заданному
Зачем: потренировать глазомер цвета
https://boolean.method.ac
Что делать: пользуясь булевыми операциями сделать из запчастей иконку
Зачем: потренироваться, чтобы быстрее собирать иконки
https://shape.method.ac
Что делать: исправлять сломанную форму буквы усиками кривых безье
Зачем: потренировать чувство вектора и букв

Знаете ещё какие-нибудь?

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

Толщины шрифтов в CSS

Постоянно путаюсь Bold — сколько это в цифрах font-weight, сделал себе шпаргалку.

Вот толщины в названии шрифтов

Название font-weight
Thin / Hair 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi Bold 600
Bold 700
Extra Bold 800
Black / Heavy / Ultra 900

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

  • Берете файл шрифта
  • Бросаете его в https://fontdrop.info/ (или другой просмотрщик шрифтов)
  • Открываете вкладку Data · OS/2 and Windows Metrics Table и ищете usWeightClass.

Например, как выглядит Fira Sans Book:

Чтобы использовать font-weight важно правильно настроить CSS-маппинг (замаппить название шрифта на толщине).

Вот правильный (code.cdn.mozilla.net/fonts/fira.css):

@font-face{
    font-family: 'Fira Sans';
    src: url('eot/FiraSans-Hair.eot');
    src: local('Fira Sans Hair'),
         url('eot/FiraSans-Hair.eot') format('embedded-opentype'),
         url('woff/FiraSans-Hair.woff') format('woff'),
         url('ttf/FiraSans-Hair.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
 Нет комментариев    13938   2021  
Подписаться на блог…

Как запросить доступ

Про один частный случай принципа «В письме уже есть всё нужное»

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

Как не надо просить доступы

Вот антипримеры:

  • — Привет! Дай мне доступ к макетам.
    Кому «мне» (надо глянуть адресата), к каким макетам (нужно будет спросить).
  • — Привет! Дай мне и Насте доступ к макетам.
    Кому «мне» (надо глянуть адресата), какой Насте (нужно будет спросить), к каким макетам (нужно будет спросить).

Почему так происходит

У вас просто разная картинка мира

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

Как надо

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

Маргарита!

Дай мне (Мише Озорнину) и Насте Ивановой доступ к макетам.

Проект: Secret Project Name
Доступ: смотреть и писать комментарии
Наши адреса:
mozornin@example.com
aivanova@example.com

Я настолько с прибабахом, что после «мне» пишу свои имя и фамилию, чтобы не надо было гадать кому «мне». Особенно часто всякие «мне» теряются при пересылке письма. В пересланном письма обычно видишь «мне», но не видишь от кого кому было письмо.

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

Не погружать собеседника в лишние подробности

Пишу еще про один заскок.

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

— Пойдем в бар?
— Мне доктор запретил пить алкоголь, пока я принимаю лекарства.

— Можем завтра созвониться в 12?
— Не могу, мне кота везти на операцию.

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

Зачем? Что мне с этим делать? Думать про доктора и потенциальный диагноз? Переживать за кота? Вспоминать как помочь (и нужно ли) при панической атаке?

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

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

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

UPD. Получил комментарий, что:

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

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

И да, многие воспримут «Мне не интересно» в такой форме резковато. Но это вопрос формы, а не смысла. Например:

Мне это не интересно на пейнтбол.

Я буду рад всех увидеть, но вот конкретно на пейнтбол не хочу. Давайте что-нибудь другое, например: …

Или даже так:

Ребята, я так рад, что всех вас увижу после этого ковидного года. С нетерпением жду нашей встречи. Я огорчен, что пока из вариантов только те, которые мне ну совсем-совсем не интересны (ну вот такой я человек). Давайте что-нибудь другое, например: …

Или даже так:

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

А иначе получается так:

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

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