Я часто сталкиваюсь с тем, что дизайнеры отказываются от проектов с нечёткими вводными. А зря. Такие проекты — идеальный способ вырасти в профессии, если уметь правильно организовать процесс. В статье — как я это сделал, какие документы оформил, как застраховался от «нравится/не нравится», и чем это закончилось.

26 июня мне в Телеграм написал потенциальный клиент.

— Добрый день! Хочу пообщаться с вами на тему возможного сотрудничества по поводу UI/UX. Если кратко, это редизайн для электронного прибора (радиолюбительский КВ/УКВ приемопередатчик). Проект открытый, текущий дизайн я делал сам, но хочу переделать. То, что сейчас сделано, можно посмотреть на канале проекта.

Первая мысль: «Не мой клиент». Во-первых, я UX-дизайнер и привык делать прототипы и документацию, а не рисовать редизайн. Во-вторых, если проект открытый, денег там, наверное, не заработаешь.

Вторая мысль: «Зато интересно! Интерфейс для физического устройства. Даже если не смогу взяться за работу — познакомлюсь с интересным человеком. Может, порекомендую кого».

В общем, я точно не предполагал, какой у истории будет конец.

Для начала немножко контекста. Меня зовут Егор Камелев, я проектирую интерфейсы с 2006 года. Работал в агентствах, внутри компаний, на аутсорсе. Основал Проекторат. Специализируюсь на сложных информационных системах. До сих пор в деле. Вроде, всё. Теперь поехали!

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

Увлечение это переросло в нечто большее: сейчас Олег объединился с товарищем-инженером и они завершают разработку собственного устройства: TRX «BRASS».

Что требовалось от меня? Если коротко: редизайн. Буквально взять тот интерфейс, что есть, и нарисовать к нему новый «скин». Если есть какие-то замечания по удобству для пользователей — их можно озвучивать и предлагать что-то новое.

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

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

— А дело в том, что я уже обращался к нескольким дизайнерам. И везде история примерно одинаковая. Человек смотрел на интерфейс, говорил, что предложит улучшения и покажет своё видение, а потом пропадал.

— Дайте угадаю: до коммерческих предложений дело не доходило? Никто не называл цену за свою работу?

— Ага. Поначалу все на энтузиазме, а потом пропадают.

Меня это заинтриговало. Я люблю проекты без инструкций. Проекты, от которых другие отказываются.

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

Олег согласился.

Я запросил для начала работы необходимые материалы: скриншоты основных экранов, ссылки на любую документацию. Узнал, на чём реализован проект (код на Си и частично на Питоне). Сходил на Гитхаб, чтобы посмотреть, как сейчас реализована вёрстка.

Вот так выглядит фото устройства в его текущем состоянии на его вики-странице на Гитхабе.

Вот как выглядел скриншот основного экрана устройства, который я и взял за основу нового «скина»:

Затем я сформулировал ряд основных ограничений (которые по сути только облегчали мою задачу) и открыл Фигму:

• Фиксированное разрешение 800х480

• Отсутствие тач-скрина

• Моноширинный шрифт

• Отсутствие различных состояний для активных элементов (кроме раздела настроек, но его в концепте не было)

Фигмой я не пользовался уже несколько лет, в моей работе она не нужна. Я по-прежнему делаю интерактивные прототипы в Axure и стараюсь не смешивать процессы проектирования и дизайна (ну не могу я не отвлекаться на сетки, отступы, цвета, шрифты и прочее, работая в Фигме, а это меня замедляет в работе).

В воскресенье вечером я сел за работу и к понедельнику скинул ссылку на исходник в Фигме, а также картинку с таким вариантом:

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

• Аппаратные ограничения

• Пользовательский контекст

• Элементы интерфейса (пожалуй, самая важная часть)

• Принципы дизайна

• Идеи на будущее по улучшению UX

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

Ответ от Олега последовал через час:

— Доброе утро! Вы пришли почти точно к тому варианту что сделал новый разработчик моей прошивки для X6100. Он переделал мою почти в таком виде ? Я пока не понял нравится мне или нет.

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

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

Я предложил Олегу встретиться по двум вопросам. Первый — посмотреть на устройство в жизни. Второй — посмотреть на референсы, которые нравятся самому Олегу с точки зрения дизайна.

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

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

Узнал об особенностях работы с китайскими производителями плат. И сравнением их с нашими.

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

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

Олег согласился, и первого июля я показал ему это:

Как говорится, на вкус и цвет товарища нет. Мне самому в этом варианте нравится розовый рефлекс от вертикального элемента. Ответ Олега был:

— То что нужно!

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

Я разложил по полочкам все состояния для компонентов…

Показал более сложные состояния главного экрана…

Экран с настройками…

А также экран со списком файлов.

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

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

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

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

Олег, в свою очередь, намекнул, что впереди маячит новый проект с более интересными вводными. Более крупный экран и более интересные функции.

Подведу итоги:

• Суммарно я заработал за проект 60к рублей. На работу затратил 15 часов (12 — Фигма и документация, 3 — поездка к Олегу и другие переговоры) и 10 календарных дней;

• Активно использовал ChatGPT (подбор сочетающихся цветов, генерация вдохновляющих картинок, объяснение нюансов по радиотехнике и т.д.);

• Обратился за «взглядом со стороны» на результат своей работы к другу — опытному дизайнеру;

• Понял, что с моими навыками UI-дизайна в целом всё в порядке и что мои навыки инженера-проектировщика интерфейсов всё-таки гораздо ценнее;

• Так и не понял, почему от проекта отваливались UI-дизайнеры. С коммуникацией у Олега всё в полном порядке;

• Не стоит сразу отказываться от непонятных или небольших, на первый взгляд, проектов — в них могут быть удовольствие и деньги;

• Даже небольшой дизайн-проект для продукта с открытым исходным кодом заслуживает нормальной проектной документации;

• Визит к заказчику может дать больше, чем неделя переписок.

Полезные ссылки:

• Итоговая Фигма с дизайном

• Гугл.док с моей документацией

• Проект на гитхабе

• Мой Телеграм-канал