Как всё началось

Моя история стартапа началась в Сибири: мы с друзьями запустили сайт для мониторинга качества воздуха, собрали вокруг него сообщество и сделали свой первый девайс — NeboAir. Это был простой датчик с пиксельным экраном, висящий за окном и передающий данные на карту nebo.live.

В первых статьях я рассказывал о проблемах производства девайса, удачах, все датчики были проданы, но банальное выгорание команда не пережила. Казалось бы, на этом всё, но нет — будет продолжение. Новый датчик называется Atmy. Это моя попытка собрать децентрализованную платформу качества воздуха, где данные становятся ценностью.

Кажется выглядит как провал: маленькая команда и никаких инвесторов. Но именно поэтому интересно.

В предисловии в своём посте на Хабре «Возможно это провал» я пообещал, что буду регулярно делиться новостями по проекту Atmy (ранее — Nebo) и не оставлять всё за кадром. Habr Ниже — очередной отчёт о том, что нового происходит.

Кто здесь дизайнер

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

Однако в нашем маленьком стартапе нет фразы «я это не умею». Поэтому я рисую сайт, логотипы, моделю корпуса датчика, пишу статьи, собираю презентации, веду соцсети, отвечаю в саппорте... короче, full-stack человек, только без навыка кодить.

Первая встреча с Figma

Когда-то я даже нарисовал в Photoshop первое приложение Nebo — буквально нарисовал, по слоям, как открытку. А потом показал это программистам и увидел в их глазах то самое выражение: “он что, серьёзно?”

Но все-же вышло сделать обновленное приложение, которое можно скачать и сейчас: Google Play и App Store

Мой личный курс выживания в Figma

А теперь все заново.

Последние несколько недель я зависал на YouTube с туториалами, пересматривал тонны прототипов на Dribbble и (с большой болью) начал сборку первого экрана приложения Atmy.

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

Моя стена

После того как я наконец понял, что именно хочу сделать, я… начал рисовать остальные экраны (зачеркнуто). Нет. Наученный прошлым опытом — нарисовал ? User Flow. Даже распечатал из него плакат и приклеил на стену. Там теперь делаю пометки, исправления, приоритеты. Я очень не собранный человек, и мне важно каждый день видеть перед глазами, куда двигаться дальше.

Дальше — цветовая схема. Делал впервые. И пересобирал её миллион раз. К тому же мы решили сделать две темы — светлую и тёмную. Это, конечно, удвоило работу, но и удвоило удовольствие (шутка).

Не по учебнику.

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

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

Я буду собирать экраны из готовых компонентов, делать максимально подробный прототип в Figma (вещь, кстати, отличная), находить косяки и сразу отдавать готовые куски в разработку.

Не знаю, как это делают в “серьёзных” студиях, но это будет наш путь. Возможно, не самый правильный, зато живой. Так мы сможем быстро вносить правки, не дожидаясь финального дизайна, и я хотя бы не сойду с ума, таща всё это в одного.

Кнопки, графики и немного отчаяния

Простой пример:
В приложении будут ?графики — чтобы вы могли отслеживать историю измерений. У каждого графика нужно заранее продумать, как он будет выглядеть за разные периоды, как отображать столбчатый и линейный формат, а ещё учесть разные вещества: ведь у каждого своя метрика — µg/m³, %H, ppb и так далее.

К этому добавьте текстовые описания для разработчика, чтобы он понимал, какой цвет соответствует какому значению. А потом нужно настроить связи и собрать интерактивный прототип, чтобы показать, как всё это работает на экране.

Просто делюсь

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

Я не пытаюсь никого учить дизайну — сам в этом только разбираюсь. Просто делюсь опытом. Так я хотя бы держу себя в тонусе и заставляю работать, даже когда хочется просто закрыть Figma и выйти в окно.

У нас нет инвесторов, только маленькая команда и увлечённость проектом. И, возможно, вы думаете — это провал. Возможно, нет.