/designer
9.66K subscribers
186 photos
7 videos
23 files
218 links
slashdesigner.ru — про дизайн интерфейсов, инструменты и практику.

Рубрики: #первые_шаги, #для_профи

Чаты:
@designchat2 @figmachat

Автор: @okunev, дизайн-лид во внутренних продуктах Ozon
Download Telegram
to view and join the conversation
#стать_лидом №3. Иерархия и творческая свобода

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

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

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

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


2. Нужна иерархия в решениях, а не в манере общения. Почему демократия не работает

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

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

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


3. Окончательное «делаем так»
Умеренный авторитаризм в решениях оптимальнее полной демократии: у команды есть право высказывать своё мнение и принимать свои решения, но нет права препираться, если тимлид сказал окончательное «делаем так» и не хочет тратить время на доказательство, что именно так правильно. Так экономится много времени на разборки.

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

Продолжение →
← Начало поста

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

Na Z:
«Если вам попался тимлид с таким подходом описанным выше - бегите не оборачиваясь. Особенно от заявляющих что правила дизайна должны подчиняться правилам его менеджерской вселенной. ... Указывать и подчинять своим правилам - это фича мало уверенного в себе тимлида, который только и занят тем чтобы ему наконец все подчинились и послушались»

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

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


5. Делегирование и автопилот

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

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

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


#для_профи
Выбираем интересные темы в #первые_шаги

Привет. Мне понятно, куда развивать рубрику #для_профи, но с рубрикой для начинающих не всё так очевидно. Прикидываю, какие темы будут наиболее интересны для начинающих дизайнеров среди читателей. Прошу голосовать только тех, кому интересна сама рубрика. Если есть идеи и предложения, буду рад их получить лично: @okunev. Я открыт для общения.
Работа в продуктовом дизайне: майндсет, резюме, портфолио, навыки, как найти работу джуном, вот это всё
Anonymous Poll
24%
Уже джун или выше, не интересно
41%
Не берут. Не понимаю, что не так, интересно
7%
Не стремлюсь искать работу в продукте, не интересно
28%
Результаты
Ноушн-сайт /designer

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

Notion /designer →

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

Что внутри:

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

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

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

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

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

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

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

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

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


#важное #Notion #первые_шаги #для_профи
This media is not supported in your browser
VIEW IN TELEGRAM
Урок по анимации лоадера

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

slashdesigner.ru/loader-smart-animate

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

Проект в Figma Community


#первые_шаги #ui_анимация
Как сетка ухудшила UX

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

slashdesigner.ru/grid-ux-fail

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

Выводы:

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

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

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

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


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

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

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

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

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

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


#первые_шаги #ui_анимация
This media is not supported in your browser
VIEW IN TELEGRAM
Ещё один пример применения интерактивных компонентов — визуальный сахар.

Как это сделано: есть компонент с кругом, у него 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/analytics

Выжимка:

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

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

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

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

А как ты собираешь требования для дизайна? В каком формате хранится аналитика? Вопросы по теме приветствую в комментариях.


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

t.me/gleb_sexy/77

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