{"id":13517,"url":"\/distributions\/13517\/click?bit=1&hash=2dff2b3571f12271362884bb2d6d3bd4b1c8ef58488b739a938faca75421e327","title":"\u0427\u0435\u043a-\u043b\u0438\u0441\u0442 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0436\u0434\u0451\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0421\u042d\u0421","buttonText":"\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c","imageUuid":"44ce55da-8f18-5632-aa12-06c7747270d1","isPaidAndBannersEnabled":false}

Какие инструменты используют дизайнеры «Собаки Павловой»

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

Аналитика

Когда мы только начинаем работать на проекте, у нас есть много вводных, но нет никакой системы. Их нужно где-то собирать, хранить и, внимание, обрабатывать. Просто складывать и смотреть — недостаточно. Мы используем облачные хранилища и специальные сервисы.

Наш фаворит — Google.Drive. Раньше был Dropbox, но отвалился. А «Яндекс.Диск» не прижился, хотя почтой «Яндекса» пользуемся только так. В Google.Drive можно хранить файлы и ссылки, писать тексты, создавать таблицы, шарить все что угодно. Мы им пользуемся каждый день, но все задачи он решить не может.

Google Drive

Так что Google Drive помогают два других инструмента для обработки вводных: Miro и AirTable.

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

Miro

AirTable — для тех, кто любит систематизировать информацию в табличном виде. Между таблицами можно проводить связи, а сами таблицы — превращать в канбан-доски или карточки.

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

AirTable

Другие инструменты применять не запрещено. Но эти три — самые важные для нашего процесса.

Концептуальное проектирование

В офисе мы используем бумагу, доску и стикеры.

Работает это так: дизайнеры встают у доски и начинают вместе рисовать. Иногда то же самое они делают на бумаге формата А3, но смысл остается тем же.

Концептуальное проектирование на доске

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

Стикеры с цветовым кодированием

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

Miro

Но реальность рассадила нас по квартирам, и теперь мы все же занимаемся концептуальным проектированием в связке Miro + DIscord. Первый позволяет вместе работать на одной доске, второй — находиться постоянно онлайн и созваниваться без необходимости кому-то набирать.

Достаточно зайти в один канал, и вот вы уже общаетесь. У Miro тоже есть возможности конференц-связи, но нам больше понравился Discord.

Поиск референсов

Когда нужно найти какой-то референс, мы идем сразу на знакомые ресурсы. Просто так ничего не гуглим — выйдет дольше.

Для мобильных интерфейсов ищем референсы на Mobbin, для веба — на Pinterest и «Контур.Гайдах».

«Контур.Гайды»

В одном из прошлых материалов мы рассказывали, что используем UI-киты из интернета. Чаще всего берем компоненты фреймворка Ant Design — там есть все, что нужно. Самое главное — в нем уже забиты все стили, а каждый элемент реализован в коде. Это здорово ускоряет работу и нам, и разработчикам. Вот пример проекта, о котором мы уже рассказывали на vc.ru.

Ant Design

Если заказчику нужно поменять цвета множества элементов или шрифты сразу везде, в Ant Design это можно сделать в несколько кликов.

Дизайн

Мы используем Figma. Это и так мощный инструмент, а с помощью плагинов он может заменить вообще все остальные сервисы.

Figma

Раньше мы использовали Axure, потом перешли на Sketch в связке с Invision, чтобы демонстрировать заказчикам интерактивные прототипы, иногда выгружали макеты в Zeplin.

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

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

Общение с заказчиком

Презентуем дизайн в Miro или Figma, при этом обязательно созваниваемся в Скайпе и обсуждаем результаты с заказчиком. Просто ссылку на макеты не даем.

Письменно общаемся в Telegram, Skype и по почте. Созваниваемся в том же Skype или Zoom.

Командная работа

Письменно общаемся только в Slack. Голосом — только в Discord. Никаких почт, Telegram и Skype.

Поскольку мы практикуем именно командную работу, созваниваемся в Discord и вместе работаем в Miro или Figma.

0
8 комментариев
Написать комментарий...
VitOk

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

Ответить
Развернуть ветку
Pixel Lens

Ну... поэтому не так-то просто "войти вайти". 

Ответить
Развернуть ветку
Сергей Цветков

Что то новое что-то улучшенное старое, среди приложений много дублей потому не так уж много нового вводится.

Ответить
Развернуть ветку
Вчерашний ящик

А какие плагины для фигмы используете?

Ответить
Развернуть ветку
Антон Илларионов

Добрый день.

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

Iconify для иконок, map maker для генерации карт, content reel и unsplash для прочего контента. Изучали возможности интеграции с Airtable, но пока не нашли ничего действительно простого и удобного. Если что-то посоветуете, будем благодарны.

Todo для текущих задачек на ближайший "спринт" еще нравится. 

Как видите, самое простое все.

Ответить
Развернуть ветку
Bakhtiyor М. Khuja

ну раз Евгений Романовский, то надо прочитать

Ответить
Развернуть ветку
Anatoly Petrov

Интересно глянуть на содержимое доков в гугл драйве

Ответить
Развернуть ветку
Aleksandr Moskvin

Ant Design нужно покупать? Или элементы можно другим способом переносить?

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Читать все 8 комментариев
null