Ноушн-сайт /designer

Сегодня будет крутой подгон. Я собрал весь контент этого проекта на единой площадке в ноушн-пространстве.

Notion /designer →

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

Что внутри:

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

Оглавление постов — архив всех моих постов по всем площадкам с 2017, с картинками. Рекомендую порыться в архиве, там есть много ценного про инструменты и UX.

Заметки о проектировании, которые были на старом сайте.

Заказчик, исполнитель, пользователь — о ролях в коммерческой разработке, очень важный текст, который я не публиковал в канале ранее.

Пара хороших книг и лекций про шрифты, которые я публиковал.

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

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

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

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

—
#важное #Notion #первые_шаги #для_профи

Обсуждение поста про ноушн-сайт — здесь.

Урок по анимации лоадера

За 12 шагов рассказываю азы работы со Smart Animate — удобным механизмом для настройки анимации переходов между фреймами.

slashdesigner.ru/loader-smart-animate

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

Проект в Figma Community

—
#первые_шаги #ui_анимация

Как сетка ухудшила UX

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

slashd.ru/ux/grid-fail →

Спойлер: если при проектировании системы ориентироваться только на большие экраны (1920), и не брать в расчёт средние на 1280, 12-колонник, разделённый на 3 блока, может слишком сильно жать контент по ширине. Поэтому, на 1280 стоит избегать деления на 3 колонки, если в одной из них происходит что-то важное.

Выводы:

1. Потребности всегда важнее визуального, а контент важнее оформления.

2. Постоянный хороший контакт с моими пользователями позволил сэкономить на формализованных исследованиях.

3. Всегда стоит начинать проектировать от меньшей ширины к большей. Для админок стандарт ширины — 1280.

А какой интересный опыт работы с сетками был у тебя? Расскажи в комментариях.

@slashdesigner #для_профи #сетка

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

Восхищает, как взаимосвязаны релизы новых фич в Фигме. Каждая следующая фича развивает идею предыдущей. Недавним важным шагом, который мы увидели, был релиз «вариантов». Они дали возможность объединять компоненты в специальные группы, внутри которых стало можно переключать состояния. Это уменьшило количество мусора при поиске нового компонента: теперь в выдаче мы получаем только название группы вариантов, например, Button или Switch.

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

Это облегчает протоипирование более сложной логики, чем переходы между экранами: например, так можно набросать целую игру в крестики-нолики.

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

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

@slashdesigner #первые_шаги #ui_анимация

Ещё один пример применения интерактивных компонентов — визуальный сахар.

Как это сделано: есть компонент с кругом, у него 4 разноцветных варианта. Вешаем ему на мастер смену варианта по ховеру, а дальше на каждом запускается цепочка переключения на все последующие варианты с дилеем на каждом. За гифку спасибо @vdroog.

#статья
#стать_лидом 4. Куда мы двигаемся

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

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

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

Но помимо этой изначальной мотивации от процесса человеку нужно дать чувство сопричастности, объяснить, какую очевидную пользу принесёт его работа в глобальной перспективе. Здорово быть причастным к чему-то огромному и важному. От таких проектов пахнет будущим, их не стыдно записать в своё резюме.


Концепция общей картины

Общая картина — это представление о том, куда мы двигаемся и зачем. Это внятное объяснение, в чём заключается наш план, в рамках которого мы приносим пользу и делаем классный продукт. Для меня это один из важнейших инструментов управления. Это источник вдохновения, как для меня лично, так и для моей команды. Мне нравится сравнение Общей картины со знаменем или картой, которое несёт лид и по которой он ведёт свою команду.

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

Когда она рвётся, люди разочаровываются, не выполняются обещания, теряется смысл быть в команде, смысл вкладывать в работу свои силы и эмоции. Мотивация на нуле. Тогда начинается дембельский синдром, потому что у тебя с этой командой и компанией больше нет никакого будущего.

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

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

Я стремлюсь, чтобы среди моих дизайнеров формировалось общее информационное поле и они как можно больше общались и сотрудничали друг с другом, а не только со мной. Чтобы жизнь команды была прозрачной, мы проводим ежедневные утренние встречи — синки, где у каждого есть 3 минуты по таймеру, чтобы пройтись по доске и рассказать вкратце об успехах и затыках. Эти встречи задают настрой на целый день и дают мне и моей команде возможность синхронизировать ту самую Общую картину. А если вопрос в это время не укладывается, дизайнер всегда может поставить мне встречу в течение дня и мы разберём его вопрос более подробно.

А как вы синхронизируете Общую картину в твоей команде? Расскажи в комментариях.
—
#для_профи

10 полезных плагинов от канала Figma Design

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

Мы с автором канала @figmaplugin сделали жирнющую подборку плагинов, которые пригодятся в работе.

1. Variable Width Stroke – просто мастхэв для леттеринга и логотипов. Новый плагин от разработчика из Фигмы Эвана Уолласа закрывает потребность в Width Tool из Иллюстратора. На вход берёт обычную векторную линию потолще. Затем, позволяет задавать толщину отдельных её фрагментов через настройку наклона и формы пера, отсекая лишнее. На выходе можно нарулить красивые штрихи, похожие на рукописные.

2. Easing Gradients даёт альтернативный способ настраивать градиенты через изинги, как для анимации. Позволяет делать гораздо более сложные продвинутые градиенты, чем можно нарулить в стандартном пикере.
GIF →

3. Many Paster — на вход получает текстовый список и может вставить его пункты в выделенные текстовые слои. Очень удобно для наполнения макета живым контентом. GIF →

4. Auto Layout Styles автоматизирует работу с аликами. Позволяет настроить шаблоны настроек AL, которые можно применять к выделенному фрейму. Скрин →

5. Export Presets — автоматизирует настройки экспорта по аналогии с Auto Layout Styles. GIF →

6. Morph — стилизующий плагин, добавляет эффекты к шейпам, прописывая тени и градиенты. В наборе скевоморфизм, неон, глитч, отражения. GIF →

7. Squircle — нарисует скруглённые прямоугольники, как на аватарах в Клабхаусе. Смотрятся приятнее, чем обычные со скруглёнными углами.

8. Good Line Height — настроит межстрочные отступы по заданному коэффициенту и шагу сетки. Полезно для лендингов. GIF →

9. Oblique позволяет создавать проекции шейпов и текстовых слоёв. Поможет нарисовать выдавленные буквы на случай, если ты делаешь дизайн обложки фанк-пластинки в стиле 70х. GIF →

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

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

—
#для_профи #плагины #партнёрский_материал

Введение в аналитику для дизайнеров

В февральском опросе тема про аналитику и сбор требований вызвала большой интерес, поэтому я начинаю новый цикл статей, который раскроет её.

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

slashdesigner.ru/ux/analytics

Выжимка:

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

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

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

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

@slashdesigner #первые_шаги #доки

Дождались! Скоро перейдём на тёмную сторону. Разве не этого мы хотели уже пару лет? А нас всё анимацией, автолейаутами и интерактивными компонентами пичкают в новых релизах. Глеб Сабирзянов даже сделал обзор:

t.me/gleb_sexy/77

#тёмная_тема_в_Фигме

#статья

#стать_лидом 5. Что нужно иметь перед наймом дизайн-команды: 10 факторов, которые помогут понять, что ты готов и для этого есть условия

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

Читать полную статью: slashdesigner.ru/lead/prep

Краткая выжимка:

Внутренние факторы: какой ты
1. Шаришь в своей теме.
2. Показываешь экспертизу делом.
3. Выступаешь ментором для других.
4. Понимаешь общий фокус будущей команды.
5. Понимаешь, сколько человек ты способен вести сейчас.

Внешние факторы: что происходит вокруг
1. Лояльный руководитель, который доверяет твоим решениям.
2. Политическая возможность выделить тебя в команду. Пара слов про интриги.
3. Есть ли бюджет на найм? Сколько сможем нанять и какого уровня? Стоит ли нанимать джуниоров?
4. Есть ли в компании HR-бренд?
5. Есть ли где бесплатно рекламировать вакансию?

В данный момент я веду 7 человек в двух параллельных командах в Озоне и ищу много новых продуктовых дизайнеров и дизайн-лида в соседнюю команду. Портфолио → @okunev.

#для_профи

#задача 1. Что не так с этим макетом?

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

С моей точки зрения макет уже и так нормальный, но есть что улучшить.

Вопрос: как правильно расположить кнопки, чтобы они не вступали в конфликт между собой и подчёркивали иерархию действий в интерфейсе?

Пиши свой вариант в комментариях. Своё решение выложу завтра.

@slashdesigner #первые_шаги

Кнопки действий: решение

Комментарии к решению →

Комментарии к решению

Исходная задача

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

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

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

Также добавили крестик закрытия, чтобы не было путаницы, что произойдёт по нажатию на Закрыть слоты. Теперь это явно отдельное действие, не снимающее фокус с 5 слотов.

Дальше идёт следующий контекст, который отделён отбивкой: редактирование настроек слотов. К нему относятся кнопки Сохранить и Отменить, поэтому они должны быть рядом. В полях настроек мы пытались уместить лейблы справа, но здесь это неудобно, поскольку текст в них длинный и места слишком мало, поэтому поставили лейблы над полями. В длинных формах это бы понизило скорость сканирования, поскольку лейблы и текст в полях шёл бы вперемешку, но здесь это работает хорошо.

Кнопка Сохранить — ключевое действие, если мы что-либо меняли в настройках. Поскольку наш бэк не умеет в сокеты и в системе ещё нет истории действий, мы вынуждены делать кнопку ручной отправки запроса на сохранение. в форме не должно быть интерактивных элементов, которые находятся ниже ключевого действия, иначе есть эффект, когда интерфейс говорит тебе: «вот твои возможные действия. А, да, кстати, вот ещё одно.» Это тупо.

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

#первые_шаги

Дизайн-команда Озона расширяется. Я снова ищу продуктовых дизайнеров

Мы работаем над ключевыми проектами для Озона: делаем приложение и сайт ozon.ru, интерфейсы для пунктов выдачи, делаем Ozon Seller — панель управления и приложение для продавцов. Мы быстро растём, у нас есть крутые задачи и ресурсы для их решения.

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

Вакансии:
- Дизайн-лид в команду интерфейсов доставки для 3 человек с возможностью найма ещё нескольких
- Продуктовый дизайнер на веб и админки
- Продуктовый дизайнер на мобилки

Подробности по ссылке →

Откликнуться → @okunev

—
#для_профи #анонсы

Уровни продуктовых дизайнеров и зарплаты

Отвечаю на вопрос, который много раз задавали: чем отличаются роли дизайнеров и как понять свой уровень. Все указанные цифры гуляют ниже или выше на 10-20 000 ₽ в зависимости от города и компании и в этих оценках я опираюсь на свои ощущения и разговоры с другими дизайнерами из индустрии.

Начнём с самого старта карьеры.

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

Джуниор — это сырой дизайнер с опытом около года, который получил постоянное вакантное место после стажировки или сразу. Его нужно вести большую часть времени, иначе он наворотит пиздец. Это тот, кто изучил дизайн-курсы, собрал портфолио, не вляпался в фриланс в начале карьеры и уже может решать дизайн-задачи под присмотром наставника. Нельзя просто взять и за месяц стать джуниором, это тоже требует месяцы практики. Может по тщательно описанной задаче сделать то, что попросили, но способен утопить вопросами. Хорошо, когда задаёт вопросы, воспринимает фидбэк и стремится к самостоятельным решениям. К сожалению, ещё не может держать слово и оценивать сроки точно, склонен переоценивать свои возможности и не видеть подводные камни. Джуниоры в среднем по рынку зарабатывают от 50 000 до 90 000 ₽.

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

Мидл — это дизайнер с правильным опытом 2-3 года, который наиболее эффективен в среде дизайн-команды, однако ему нужен более опытный лид, который скорректирует неудачные решения. Однако, большинство задач он может решать автономно. Мидл — это дизайнер, которого прокачали из джуниора на протяжении года-двух в правильном месте. Может запилить целый сценарий в одно лицо. Мидл+ — это прокачанный мидл, количество правок у которого становится ниже, а количество выполненных обещаний — выше. Однако, ещё не может быть автономен. Мидлы в Москве зарабатывают в среднем от 100 000 до 140 000 ₽ в месяц. Если мидл способный, он становится автономным от лида через год-два.

Синьёр — это дизайнер с правильным опытом более трёх лет, которому достаточно скиллов, чтобы работать полностью автономно, исследовать проблемы для решения самостоятельно и даже помогать другим дизайнерам. Именно таких я и ищу. Он в принципе может эффективно работать без дизайн-лида, сам себе дизайн-команда, знает о проекте всё и без пяти минут PM. Может запилить целую интерфейсную систему в одно лицо, декомпозировать задачи и умеет держать сроки, знает в своей области всё. В среднем по рынку синьёр может претендовать на зарплату от 140 000 до 240 000 ₽, в зависимости от того, насколько точно он подходит в определённое место, насколько хорошо развиты софт-скилы, понимает ли он свой фокус и имеет ли горячий контр-оффер.

Про зарплаты в 300 000 ₽ на линейных, не руководящих позициях можно услышать только в курсах про то, как стать успешным веб-дизайнером, это полный неадекват. Такие деньги можно зарабатывать либо:
- Не в России, работая удалённо на иностранные компании
- Если у тебя наработана жирнющая клиентская база на фрилансе, что требует годы в агентствах, нереально сложно в одиночку и неспокойно
- Если ты хорошо залетел в госкомпанию и умеешь дружить
- Если ты ведёшь инфоцыганские курсы про то, как стать успешным веб-дизайнером. Хотя последнее уже не про дизайн.

—
#первые_шаги #для_профи