Как дизайнеру быстро работать и все успевать
Matvey Grab
Всем приветики! 🐧
Я Матвей, старший дизайнер в Недвижимости. Отвечаю за удобство поиска и навигацию. Сегодня расскажу как работать в Фигме по принципу Парето.
Ваш карьерный трек напрямую коррелируют с количеством времени, которое вы готовы выделять для вашего роста. Дело в том, что рабочая текучка и продуктовые задачи редко дают вам возможность быстро расти как специалист. Часто приходится выходить за рамки своей зоны ответственности и брать на себя задачи, которые гораздо сложнее, чем те, которые предполагает ваша текущая роль. Но когда у вас полный перегруз, то здесь совсем не до амбиций, хочется просто выжить.
Здесь мы напрямую сталкиваемся с таким ресурсом как время. Оно, к сожалению, или к счастью, ограничено. И чтобы успевать заниматься и продуктовыми задачами, и брать на себя амбициозные цели, и на встречи ходить, и есть, и спать, а ещё жить счастливую жизнь, то приходится менеджерить время.
Этот пост не про культ продуктивности. Мы не роботы, а впервую живые люди и помимо работы у нас есть жизнь, которую хочется классно прожить. Но начав оптимизировать рабочее время, у вас появится возможность заниматься тем, чем захотите сами.
Я расскажу про свой опыт оптимизации работы по продуктовым задачам. Это проверенные на себе приемы, которые я использую в работе, благодаря чему я ещё не сошел с ума. Этот материал больше ориентирован на практикующих дизайнеров от младшего до лид-уровня, и вряд ли подойдет арт-директорам, так как у них уже немного другой мир.
Из чего состоит работа
Для оптимизации любого процесса, сначала нужно его докомпозировать, чтобы уже отдельно поработать с каждой сущностью. Я для примера возьму примерную стандартную загрузку дизайнера в Авито.
Если взять дизайн-спринт, то все активности в нем состоят из нескольких видов:
— продуктовые задачи, проектирование макетов и подготовка спецификаций;
— созвоны и переписки в чатиках;
— дополнительные амбициозные задачи: формирование образов, редизайны или проектирование новых сервисов;
— саморазвитие и инвестирование в себя, т.е курсы, тренинги, книги, менторство.
Я не зря их поставил в таком порядке, потому что мы обычно отказываемся от нижних пунктов в пользу верхних. В рамках цикла статей про рабочее время мы с вами пойдем каскадным путём. Разгребая загруженность на первом уровне, мы дадим большие свободны на нижние. Сегодня сфокусируемся на первом уровне, а в следующих статьях из цикла расскажу про нижние уровни.
Как экономить время при работе с макетами
Здесь я хочу рассказать методологию на базе которой я выстраиваю свою работу.
Сразу же отмечу, что не любые 20 % усилий дадут такой результат. Вам нужно хорошо владеть предметной областью, чтобы понимать какие инструменты дают возможность добиться такого соотношения, а какие наоборот отнимают ваши ресурсы.
Чтобы этот принцип соблюдался нужно чувствовать корреляцию между вашим вовлечением и действенной выгодой.
Фигма дает возможность выжать максимум из этого принципа за счет инвестирования сил в освоение всех её возможностей. Ведь это основной инструмент дизайнера. Такой же как топор для дровосека или ножницы для парикмахера. Освоение всего функционала Фигмы напрямую коррелируют с затратами вашего времени на реализацию макетов и спецификаций.
Поэтому в первую очередь нужно максимально освоить все возможности Фигмы и начать их массово применять в своей работе. Это хоткеи, автолейауты, компоненты, стили, а также оптимизация структуры. Каждая из этих функций дает значимое ускорение в работе. Давайте на примерах поясню почему.
Хоткеи
Я знаю дизайнеров, которые чтобы поставить фрейм или прямоугольник используют панель инструментов. Можно ли так работать и делать классные макеты? — конечно можно, но все сводится к скорости.
По моим субъективным подсчетам, на то чтобы нарисовать прямоугольник пользуясь панелью дизайнер тратит примерно 3,5 секунды. В то время как использование хоткея занимает примерно 1 секунду. И вот вам уже наглядная экономия в 3,5 раза.
Вам может показаться это смешным, но попробуйте отмасштабировать все свои действия, которые вы совершаете в Фигме без помощи горячих клавиш. Наша работа складывается из мелочей, и экономия времени в каждой мелочи значимо увеличивает скорость. Помимо простых функций, таких как, вызов фрейма, текста, есть еще хоткеи, которые позволяют выравнивать объекты, настраивать их ориентацию относительно макета и быстро переключаться между слоями. Порой я до тачпада дотрагиваюсь только чтобы перемещаться по макету.
Автолейауты
Я уже писал пост про то, почему автолейауты стоит любить — вот он. Но постараюсь здесь развернуть мысль. Автолейауты это способ автоматизации работы макета. То есть, при внесении корректировок, ваш макет автоматически отреагирует и адаптируется под любой контент. Если вся ваша спецификация построена на автолейаутах, то вы будете тратить минимально возможное время на внесение новых сущностей в уже собранную структуру.
Но при этом автолейауты это тонкий инструмент, который требует понимания контекста его применения. Если вы только собираете структуру и формируете страницу неопределнного лейаута, то наоборот автолейауты будут вас тормозить. Я руководствуюсь простым правилом. Если структура страницы мне известна — то я использую автолейауты. Если нет и ее только предстоит собрать, то пользуюсь простыми сущностями без группировок.
Компоненты
«Я боюсь не тех дизайнеров, которые используют тысячу раз одну кнопку а тех, кто делает одну кнопку тысячу раз».
Зачастую в интерфейсах многие элементы воспроизводятся многократно. Это могут быть как элементы, которые вам предоставляет дизайн-система, так и сущности, которые лежат в ваших файлах.
Нормальная ситуация в продуктовой работе, когда вы для своих задач заводите локальные компоненты, которые нельзя воспроизвести за пределами вашей задачи. Также корректный подход это собирать мастер-компонент внутри файла, который состоит из объединения нескольких компонентов.
Здесь работает атомарный подход к разработке дизайна. Начинать всегда можно с атомов, на основе атомов собираются молекулы, на основе молекул — организмы. И именно организм может являться конечным результатом вашей работы.
Идеальный мир дизайнера, который максимально оптимизирует свою работу — полное отсутствие некомпонентных элементов.
Оптимизация структуры
Все макеты имеют свой жизненный цикл. Сначала макет затягивается на прод. После вы обогащаете функционал и дорабатывайте уже существующий макет. Также другие команды могут реиспользовать ваши наработки. Перед редизайном ваш макет служит основной для перехода на новый качественный уровень. И здесь очень важно заложить грамотную базу. Это своего рода инвестиция в ваше время в будущем.
Что я имею в виду под оптимизацией структуры учитывая вышеописанное:
1. Макеты надо собирать аккуратно, чтобы и вам, и другим дизайнерам было удобно их масштабировать и развивать.
2. В макетах не стоит использовать нерелевантные сущности — например вставлять скриншоты прода, вместо части макета. (Да, есть такие дизайнеры). Лучше инвестировать свое время в то, чтобы найти компонент продового состояния или создать его самому и реиспользовать в своих будущих задачах.
3. Нейминг — вы удивитесь, но это важно. Когда вы возвращаетесь к своей работе годичной давности, то нейминг слоев дает огромное ускорение к раскладыванию сущностной модели с целью её доработки.
Экономия времени
Каждый из выше описанных пунктов в совокупности дает вам существенную прибавку к скорости работы, но самое важное здесь — баланс. Здесь мы снова возвращаемся к принципу Парето и вспоминаем, что усилия должны в определенной пропорции коррелировать с результатом.
Именно поэтому не стоит сейчас срываться с места и идти рефакторить все ваши макеты, т.к вы потратите значительное количество времени, который не даст ожидаемый вами профит. В первую очередь нужна рациональность и постепенность. Можно поэтапно вводить новые сущности в вашу работать и на себе проверять есть ли выгода по времени.
При этом учитывайте, что любой новый процесс сначала всегда вызывает сопротивление внутри вас, но профессиональность дизайнера заключается в том, чтобы заранее предсказывать эффективность решения.
Что дальше
В рамках этот статьи я постарался довольно поверхностно подсветить основные моменты оптимизации рабочего времени в контексте сборки макетов. Каждая из этих тем по-своему повышают скорость вашей работы. Но есть ещё куча других рабочих аспектов дизайнера, где тоже можно что-нибудь сэкономить. О них я расскажу в следующих статьях из цикла экономии времени.
А ещё я веду свой собственный телеграмм канал про дизайн, работу в Авито и жизнь. Там я чаще пишу посты и делюсь своим мнением.
Подписывайтесь, если еще не подписались ;d