12 марта 2017

Жизнь дизайнера на удаленке. Часть 2.
Инструменты, решения

Ольга Шаврина
Начну издалека. Лет десять назад у нас с товарищами был интернет-магазин. Сняли офис со складским помещением и затеяли построить там стеллаж для товара. Рассчитали проект, закупили материалы: полки, брусья, уголки, саморезы… начали собирать. Быстро стало понятно, что за пару часов и даже за пару дней его не закончим. Начали ныть запястья и сходить кожа с ладоней. Кто пробовал закрутить отверткой десятки саморезов в деревянный брус, тот поймет.

И тут на помощь пришел супергерой – общий друг по имени Глеб с шуруповертом и сменным аккумулятором. Полки быстро закончили, Глебку отблагодарили и вынесли для себя мораль:

Прямых рук не всегда достаточно для успеха. Нужен правильный инструмент.
Работая на удаленке, начинаешь сильно зависеть от инструментов, которые используешь. Становится критично, чтобы у команды был доступ к общим ресурсам, чтобы любой человек мог узнавать об изменениях в проекте, но при этом мог спокойно работать, не отвлекаясь на кучу нотификаций, сообщений и писем и не дергая товарищей.
Что нужно для работы
Типичный рабочий день продакт-дизайнера – это:
1
Общение с командой – созвоны, сообщения, уведомления о статусе задач, вопросы, ответы;
2
Прототипирование и дизайн будущих фич;
3
Постановка, тестирование и приемка задач;
4
Организация разнородных материалов (в т.ч. прототипы, макеты, спецификации, замечания и др);
5
Собственный локальный мыслительный и творческий процесс.
Для всего этого нужны инструменты. Мы перепробовали чудовищное количество разных сервисов и остановились на нескольких. Итак, по-порядку, что у нас прижилось:
MacBook и iOS
Признаюсь честно, много лет работала на Windows и никак не решалась перейти на Mac. Боялась, что будет не хватать привычных программ, да и вообще там все по-другому. У виндового компьютера были плюсы. На нем работали игрушки и летал фотошоп, зимой он неплохо грел комнату, служил подставкой для ног и кота. А при включении давал несколько минут на то, чтобы заварить чай и настроиться работу.

Но перешла на Mac и забыла о Windows через неделю. Отличные цвета, почти мгновенная загрузка, автосохранение, отсутствие вирусов, френдли интерфейс, никаких зависаний, BSOD-ов и прочих виндовых радостей.

Одно неудобство – из-за того, что точки на экране маленькие, фотошоп показывает макеты в 100%-ном масштабе слишком мелко. Приходится изголяться, чтобы понять, как интерфейс будет выглядеть в браузере.
Slack для общения
Долгое время общались с командой по скайпу, но перешли на Slack. В нем все хорошо – каналы, уведомления, интеграции, отличная связь. Единственное, чего не хватает, это режима расшаривания экрана. Когда нужно увидеть чужой экран, приходится созваниваться по-старинке в скайпе.
Google drive для организации материалов
Под каждую большую задачу (эпик) заводится папка в Google Drive. В названии папки кодируется год, квартал и название задачи. Макеты, скриншоты, спецификации, обзоры конкурентов и т.д. кладутся в нее. Текстовые документы и таблички – в Google Docs общим доступом. На папку ставится ссылка из системы управления проектами. Очень удобно, все в одном месте. Не надо никого просить «Скинь, плиз, ссылку на макеты».

Брендбук, логотипы, маркетинговые материалы тоже в общем доступе в Google Drive.

Бывают, конечно, накладки. Например, человека уволили и его профиль удалили, а там был нужный файлик. Грусть-печаль. Или какой-нибудь перфекционист сделает доброе дело и приберется в гугл-драйве – ничего потом не найдешь :)
PivotalTracker для управления проектами
Пробовали разные системы, остановились на этой. Лично мне PivotalTracker очень нравится с UX-точки зрения – легкое, компактное приложение. Никаких попапов, менюшек и утомительных диалогов. Все на одном экране, компактно и по-деловому. Видно какие задачи стоят в спринте, как идет прогресс, можно легко передать задачу или подключить к ней человека, тут же обсудить сложные моменты, принять, отклонить, изменить приоритет.
Скриншотер Monosnap для всего вообще
Штука, которая позволяет быстро сделать скрин куска экрана, отметить на нем важные места, залить в облако и скинуть на него ссылку другому человеку. Пользуюсь постоянно – для постановки задач, вопросов, ответов… Картинка со стрелкой на порядок понятнее, чем абзац текста. А Monosnap позволяет сделать это быстро и не захламлять компьютер одноразовыми картинками.
Balsamiq Mockups для прототипов
Balsamiq – легкое онлайн-приложение в котором можно быстро сделать интерактивный прототип. Понятный интерфейс, над проектом могут работать несколько человек, плюс можно давать доступ на просмотр (например, программистам). Еще бы панельки скролились, как перышко, а не как груда камней, цены бы ему не было.
Photoshop для дизайна
Никак не получается перейти на Sketch. В фотошопе делаю вообще все, даже несложные векторные иллюстрации. Сила привычки, сотни отрисованных для проекта страниц и зона комфорта пока держат меня на темной стороне.
FontAwesome для ускорения дизайна и верстки
Упрощаем себе жизнь – используем иконки FontAwesome. Их не надо рисовать, легко вставить в верстку, они векторные и прекрасно выглядят на всех устройствах.
Tilda для лендингов
Открытие года – Tilda. Удобный и простой сервис для создания лендингов. Работает без дизайнера и веб-технолога. Маркетологи сами колбасят лендинги так, как им нужно, ни от кого не завися и никого не отвлекая. Здорово ускоряет и упрощает работу всей команды.
Miro (RealtimeBoard) вместо белой доски
Пока тестирую, не знаю приживется ли, но на первый взгляд штука полезная и сделана супер качественно. Miro заменяет белую доску, только она бесконечная, в браузере и к ней есть доступ у всей команды (3 человека в бесплатной версии). Можно использовать для идей, проработки персонажей, Customer Journey Map, User Stories и т.д. Даже UML-диаграммы в ней получаются симпатичные.
Текстовый файлик для всего подряд
Удобная штука – постоянно открытый текстовый файл (держу его справа примерно на треть ширины экрана), куда можно писать все, для чего нет специального места. Получается бесконечная лента, в которую записи добавляются сверху. Одну информацию от другой можно отделять обыкновенными текстовыми разделителями, для упрощения поиска вставлять заголовки.

Например, там можно хранить тестовые логины пароли для сервисов, наброски писем, списки багов, идеи, ссылки, коды фирменных цветов… да все, что угодно, к чему нужен быстрый доступ.
Блокнот с белой бумагой и куча карандашей
Я – адепт аналоговых закорючек на бумаге. Это быстрее, гибче, дает больше возможностей для выражения мысли. Мозг легче запоминает и быстрее обрабатывает собственноручные каракули. Делаю пометки во время разговоров, рисую User Stories, схемки, модели понятий, наброски интерфейса. Записываю короткие to-do листы. Для пущей выразительности пользуюсь цветными карандашами.

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

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