Я часто сталкиваюсь с тем, что дизайнеры отказываются от проектов с нечёткими вводными. А зря. Такие проекты — идеальный способ вырасти в профессии, если уметь правильно организовать процесс. В статье — как я это сделал, какие документы оформил, как застраховался от «нравится/не нравится», и чем это закончилось.
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-дизайнеры. С коммуникацией у Олега всё в полном порядке;
Не стоит сразу отказываться от непонятных или небольших, на первый взгляд, проектов — в них могут быть удовольствие и деньги;
Даже небольшой дизайн-проект для продукта с открытым исходным кодом заслуживает нормальной проектной документации;
Визит к заказчику может дать больше, чем неделя переписок.
Полезные ссылки:
