Часть 2. Инструменты, которые помогут создать проект без программистов и дизайнеров

Когда-нибудь замечали вот таких людей в кофейнях и кафе?
Вот всегда было любопытно, чем же они занимаются.

Чаще всего это какие-то фрилансеры, которые сидят в одной из программ, которые мы разберем дальше.

Мы не затронем разве что Excel, который проходит сквозь весь процесс создания продукта.

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

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


Возникает вопрос: где легче всего сделать этот протип?


И таких вопросов по ходу создания продукта будут появляться сотни.

Здесь покрыты лишь ключевые:

А для тех кому этого мало, есть сайты, где собраны вообще все инструменты под любую задачу при создании продукта.
Similarweb: Как узнать сколько людей заходят на сайт конкурентов и другие ключевые метрики

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

Вы составляете список уже действующих продуктов, чтобы понять с кем же вам предстоит конкурировать.
Получается следующее:
uchet.kz
mybuh.kz
moyuchet.kz
Но как понять кто из них кто самый большой на рынке?

Вот тут и наступает момент, когда стоит задействовать Similarweb.

Достаточно ввести адреса в строку поиска и посмотреть статистику посещений.

Самый первый показатель по которому можно сравнить продукты это посещаемость за месяц.

Хоть это и не говорит о том сколько потом пользователей реально приобретает продукт, но зато появится примерное представление о масштабе.
Аналогичное упражнение проделываем из mybuh.kz.
Заметьте какой интересный тренд, трафик у ресурса вырос почти в два раза буквально за два месяца.
Однозначно стоит выяснить причину.
А вот с moyuchet.kz такая история не работает. Дело в том что similarweb хорошо вытаскивает статистику по сайтам где достаточно большая аудитория. И если вашего сайта на нем нет, значит трафик оставляет желать лучшего.

На это случай есть seranking.com. Там можно посмотреть самую главную статистику даже по небольшим сайтам и по каждому поисковику. Проблема только в том что в бесплатном аккаунте есть ограничение на количество запросов.
Необычный всплеск объясняется тем что именно в июне проходит дедлайн подачи самой важной налоговой декларации для малых предпринимателей. Поэтому данные необходимо не только находить но и уметь объяснять.
Краткий вывод: по посещаемости uchet.kz делает всех на порядок.

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

А также есть пара альтернатив для similarweb.
Статистика интернета:)
Правильные ответы всегда можно найти с помощью ресурсов выше.
Укажите самый посещаемый ресурс в мире
Сколько в среднем люди проводят времени в YouTube за один визит?
Что чаще посещают Wikipedia.org или Tiktok.com? 
Самое популярное приложение на iOS в Казахстане, прямо сейчас?
Ответ отправлен! Смотрим результаты:
Понравился раздел?
Miro: Структурируем мысли по проекту на онлайн белой доске

Представьте ситуацию:
Вам в голову пришла идея нового проекта.

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

Например:
Вам пришла в голову идея: А что если запустить проект обмена книг у себя в университете?
И вы ходите с этой мыслью несколько дней. Постепенно в голове начинают появляться вопросы и ответы и через неделю вы находитесь примерно в такой ситуации:
В такой ситуации и стоит применить майнд карту, которую очень легко собрать в miro.

И теперь мысли о проекте могут выглядеть вот так:

Проект перестает выглядеть таким запутанным и непонятным. Правда?
Черновые прототипы
Мы каждый день пользуемся кучей приложений.

Например Whatsapp. Приложение для общения.

Что мы видим на экране когда открываем его?
  • Свое сообщение
  • Сообщение собеседника
  • Поле для ввода сообщения
  • Имя собеседника
  • Кнопку отправить
И это только основные функции.
А теперь представьте что вам надо объяснить дизайнеру идею вашего приложения схематично.
Ведь лучше один раз увидеть чем сто раз слушать запутанные объяснения о том как вы заработаете миллиард

В этом случае снова можно применить miro и собрать схему из Wireframe-ов.
Так называются схематичные экраны вашего приложения.

Например, все что мы писали про Whatsapp может выглядеть вот так:
И это только несколько примеров. По факту, все что вы можете сделать на обычном листе бумаги, все то же самое можно сделать и в miro. Так что этот инструмент может служить онлайновой белой доской, на которой размещается что угодно:
схемы, картинки, текст, прототипы приложения.

Все ограничивается только вашей фантазией
Несколько дополнительных идей что можно сделать:
Понравился раздел?
Проверь свои знания
Правильные ответы всегда можно найти с помощью ресурсов выше.
Mindmap на-русском будет?
Назовите ключевые элементы интерфейса главной страницы Instagram
Ответ отправлен! Смотрим результаты:
Figma: Как собрать дизайн прототип, если ты не дизайнер

Вот вы нарисовали схему вашего продукта.

Даже набросали какой то прототип с помощью wireframe-ов.

А как сделать так чтобы ваш продукт визуально смотрелся не так будто вы нарисовали его листе бумаге пока ждали в очереди?

Например вот так:

Для этого можно использовать самый популярный инструмент для UI / UX - пользовательского интерфейса/ пользовательского опыта - Figma

В фигме есть такая интересная особенность. Порог входа, чтобы собрать там прототип, совсем небольшой.

И это создает иллюзию что ваш прототип шикарен. На самом деле с первого раза у вас точно получится нечто, с которым разработчик будет мучаться очень долго.

Я немного освоился с фигмой и собрал первый прототип за 2 дня.
И выглядел он вот так:
Для того чтобы потом получалось что то похожее на полноценный дизайн, который подходит для разработчиков, ушло более 2 лет.
Несколько полезных слов для гугла, перед тем как начать дизайнить свой прототип
UI kit
Набор элементов интерфейса, из которых потом как из кусочков лего можно собрать полноценный прототип. При этом все будет выдержано в едином стиле. Почитать можно здесь.
Теория цветов
Некоторые цвета сочетаются, некоторые нет. И существует закономерность в том как находить сочетающиеся цвета. Эта закономерность выведена в понятие теория цвета.
Композиция
Как размещать элементы на экране так, чтобы их было легко найти и пользователь не умирал в поисках кнопки Далее. С этим как раз и помогает знание композиции
Типографика
Шрифты могут сочетаться между собой а могут и вызывать чувство боли в глазах. Мы как то автоматически понимаем что заголовки должны быть больше и насыщеннее чем просто текст. Но вот для того чтобы понимать эту историю глубже нужно изучать типографику
Чем больше вы собираете интерфейсов, тем менее стремными они становятся.
И еще советую посмотреть несколько обучающих видео на youtube про то как работать с фигмой.
НЕ ПОКУПАЙТЕ курсов по фигме, пока не посмотрите хотя бы десятка два видео на ютубе с уроками по этому инструменту.
Проверь свои знания
Правильные ответы всегда можно найти с помощью ресурсов выше.
По теории цветов какой цвет будет контрастен красному?
Где можно найти UI kit для Figma?
Ответ отправлен! Смотрим результаты:
Понравился раздел?
Tilda: Лендинг вместо презентации о проекте и другие лайфхаки по созданию веб продукта

Эта страница сделана в Tilda без единой строчки кода.

Tilda это отличный конструктор сайтов, с помощью которого можно успешно валидировать гипотезы.

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

Как бы не получилось такого что вы все сделали, а оно нафиг никому не сдалось.

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

Что то типа такого:
Договариваемся с админом студенческого сообщества и размещаем там ссылку на этот ресурс.
И смотрим сколько людей нажали на кнопку скачать (можно увидеть в аналитике тильды).

И вот если количество нажатий вас разочаровало, это дополнительный повод подумать о том, а стоит ли вообще делать это приложение?
Другие кейсы, как можно использовать такие конструкторы сайтов:
Проверь свои знания
Правильные ответы всегда можно найти с помощью ресурсов выше.
Что из этого является конструктором сайтов?
Возможно ли на Tilda построить готовый цифровой продукт?
Ответ отправлен! Смотрим результаты:
Понравился раздел?
Adalo: Что делать если у вас продукт это мобильное приложение, а разработчиков в команде нет

Эра Zerocode.

Если раньше в айти тусовке все считали себя офигенными дизайнерами и исследователями пользовательского опыта и везде было вот такое настроение:
То сейчас все больше нарастает вот такая история:
Zerocode/Lowcode - это когда мы создаем цифровые продукты, либо вообще без кода либо с его минимальным использованием.

Мне кажется что это больше похоже на программирование мышкой. Где из каких то готовых кусков вы пытаетесь собрать что то рабочее.

Такой подход имеет право на жизнь, если у вас какое то простое приложение, с небольшой нагрузкой.
Минимально жизнеспособное приложение. Просто чтобы хотя бы суть передавало.
И для того чтобы их создать есть несколько инструментов.
Три самых популярных:
Adalo по механике очень напоминает Figma.
В общем порог входа в создание мобильного приложения сильно понизился, но вам все еще придется попотеть чтобы реально создать что то работающее.

Но тема реально перспективная!
Проверь свои знания
Правильные ответы всегда можно найти с помощью ресурсов выше.
Возможна ли работа приложения без базы данных? (способ хранения не важен)
Что такое Low code?
Ответ отправлен! Смотрим результаты:
Понравился раздел?
Yandex Metrika: Большой брат следит за тобой.
Отслеживай действия пользователя в твоем продукте.

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

Зачем?

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

Есть две крупные системы аналитики для веб сайтов:
Аналитику лучше всего собирать в дэшборды которые порой выглядят как приборная панель пилота
Для анализа внутри приложений часто применяется Appmetrica
Ключевые советы для работы с системами аналитики
Не запускайтесь без аналитики
Вы не поймете взлетел ваш продукт или нет если не подключили аналитику. Это все равно что пытаться запустить самолет без единого прибора.
Учитесь системно и много
У каждой системы, будь это Яндекс или Google есть своя академия по работе с системами аналитики. Не покупайте ничего стороннего пока не пройдете курсы от них.
Смотрите ее ежедневно
Утро начинается не с кофе, а с просмотра дешбордов по вашему продукту. Реагировать надо быстро, следовательно мониторить показатели надо каждый день.
Проверь свои знания
Правильные ответы всегда можно найти с помощью ресурсов выше.
Возможно ли узнать в Яндекс метрике какие действия совершил конкретный пользователь?
Что такое Hotmap?
Ответ отправлен! Смотрим результаты:
Понравился раздел?

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