Как мы разрабатываем крутые no-code проекты и не стесняемся этого

Продюсер UX/UI-направления Nimax Сеня Синица и веб-дизайнер Полина Шершнева рассказывают про комплексный подход команды к запуску no-code проектов.

Мы давно создаем проекты на no-code. Работаем с ними также, как и с сайтами, где нужна разработка полного цикла: собираем команду под проект, не ограничиваемся функционалом конструкторов и разрабатываем уникальное решение для каждой бизнес-задачи.

Выработали свои принципы разработки no-code проектов и пользуемся ими каждый день. Собрали наш опыт в этой статье и наглядно показали в кейсах. Эти шаги помогут вам разобраться, из чего складывается стоимость разработки уникального сайта на no-code и сколько этапов она займет.

Вместе с заказчиком на этапе пресейла сначала выясняем бизнес-задачу, а потом предлагаем именно ту no-code платформу, которая поможет ее решить. Если no-code инструментов будет недостаточно, то предлагаем frontend-разработку.

Например, финтех-компания из ниши высокочастотного трейдинга обратилась к нам с задачей разработать новый сайт на Bitrix или Wordpress (проект под NDA). У клиента уже была команда разработчиков, которая сможет это решение поддерживать. Но, погрузившись в задачу и обсудив с клиентом необходимый функционал, мы поняли, что возможностей Tilda будет достаточно. В итоге снизили стоимость работ в два раза, а поддерживать проект сможет один администратор без привлечения команды разработчиков.

Обратный кейс с брендом домашнего текстиля Mollen: на этапе разработки концепции вместе с клиентом расширили функционал, для которого возможностей no-code будет недостаточно. Поэтому предложили перейти к варианту разработки полного цикла, адаптировали дизайн и перестроили работу над проектом.

С самого старта мы отталкиваемся от задачи, а не от ограничений конструкторов. Даем выбор клиенту: готовим несколько предложений, просчитываем варианты no-code сборки и полноценной разработки, обозначаем функционал каждого из возможных решений.

Мы работаем с двумя платформами: Tilda и Readymag. При выборе между платформами соотносим их преимущества и недостатки и останавливаемся на той, что решит задачи продукта оптимальным способом.

Tilda выбираем для многостраничных корпоративных сайтов и лендингов с часто обновляемым контентом.

• Интернет-магазины

  У Tilda есть собственная CMS, которая интегрируется с другими CMS, сервисами рассылок и доставок. На бизнес-тарифе можно подключить платежный модуль для покупок на сайте.

• Одностраничные лендинги и сайты с большим количеством услуг и проектов

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

• Корпоративные сайты

  Часто предлагаем Tilda для создания корпоративных сайтов с формой обратной связи. Данные из форм приходят в удобном формате на почту, в Телеграм, гугл-таблицу или другой сервис.

• Спецпроекты

  Быстро и без привлечения команды разработки можно запустить яркие промо с продуманной структурой и сильным дизайном.

• HR-сайты

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

Использовали возможности Tilda для Wawelberg Hotel — пятизвездочного отеля в центре Петербурга. Клиент пришел к нам с задачей создать три разных лендинга на no-code платформе:

1. Hotel — рассказывает об отеле, номерах, услугах и возможностью забронировать номер.

2. Hall — лендинг концертного зала с программой мероприятий и возможностью купить билет на мероприятие.

3. Events & Catering — страница с информацией о кейтеринге и услугах по организации мероприятий в стенах отеля и холла.

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

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

Readymag выбираем для лендингов и спецпроектов со сложной анимацией и статичным контентом.

У платформы много инструментов для создания анимаций, поэтому можно реализовывать более смелые решения. Плавность и вариативность визуализации контента — наши любимые преимущества Readymag.

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

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

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

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

Формируем отдельную команду под задачи проекта. Над no-code решениями работают те же специалисты, которые участвуют в запуске сложных сервисов и проектов с полноценной разработкой. Это помогает мыслить шире, вне рамок платформ. К каждой команде по no-code подключаются SEO-специалист, аналитик-проектировщик, дизайнер и арт-директор.

Рассмотрим на кейсе, из каких специалистов состоит универсальная команда под no-code проект.

Simetra — центр компетенций в области моделирования транспортных потоков и транспортного планирования. У клиента уже был действующий сайт, на который шел трафик, и новый фирменный стиль.

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

1. SEO

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

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

2. Аналитика и проектирование

Вместе с аналитиком погрузились в бизнес клиента. Провели аудит сайта, изучили аналитику и конкурентов. На основе данных из исследований спроектировали страницы будущего сайта.

3. Дизайн

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

4. Сборка

No-code дизайнер использовал zero-блоки и сквозные alias-блоки. Подбирали тип блока под его использование в будущем. Для блоков с частой сменой контента, использовали стандартный функционал, так это облегчает наполнение и поддержку сайта. Создали служебную страницу для библиотеки карточек сотрудников через alias-блоки. Клиент может добавлять нужного сотрудника на страницу проекта в пару кликов. Также пользователи могут фильтровать проекты по городу, году и типу оказанной услуги. Сложный дизайн для статичных блоков реализовали через Zero block. Для кастомизации карт и изменения стилей привлекали команду разработки.

5. Ревью проекта

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

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

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

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

Решение: разработали новую стилистику и сделали шрифтовой лого. Ключевая идея визуальной концепции — умение компании решать юридические кейсы. Привлекли моушн-дизайнера и показали в 3D-графике весь цикл работы: входящая задача, ее трансформации, сложности на пути к успеху и решение. Запустили проект и заняли второе место на Best Law Firm Website 2020 в номинации лучший сайт юридической фирмы.

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

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

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

Решение: разделили всех клиентов на две группы: «ищу психолога» и «для специалистов». Разработали фирменный стиль и шрифтовой лого. Сначала хотели создать теплый, спокойный и уютный дизайн. Но на встрече с клиентом поняли, что в его команде царит дружеская атмосфера, а в ней работают яркие и открытые люди, с которыми можно обсудить любой вопрос. Решили отразить характер Soma в смелой концепции. Запустили за 3 недели MVP сервиса с ориентиром на первую группу пользователей с возможностью масштабирования проекта.

Сжатые сроки — одна из главных причин, почему предлагаем реализовать проект на no-code. Так за две недели на Tilda мы смогли собрать и запустить HR-лендинг для Garage Eight.

Garage Eight — международная продуктовая IT-компания, которая создает экосистему инвестиционных сервисов. В команде уже больше 350 человек, но HR-отдел постоянно ищет новых специалистов. В начале 2022 года компания провела ребрендинг и ренейминг, а у потенциальных соискателей было немного знаний о новом бренде. Поэтому нашей задачей стало в короткие сроки запустить HR-лендинг, который расскажет о продуктах, внутренней культуре и ценностях компании, свяжет соискателей с HR-отделом Garage Eight.

У клиента были наработки по фирменному стилю, ориентированные на соц.сети и физические носители. Мы адаптировали разработанные константы под веб и создали динамичный анимированный интерфейс. Закругленные углы UI-элементов поддерживают характер логотипа, а переливающиеся градиенты — фирменный стиль. Отказались от минимализма: выбрали яркий дизайн с четкими силовыми линиями, которые позволяют сохранить структуру и направить пользователя. Смелость команды и готовность к вызовам подчеркнули с помощью сочетания плавных линий со строгим «угловатым» шрифтом и прямыми лентами.

В итоге за две недели разработали и запустили на Tilda HR-страницу, которая знакомит целевую аудиторию с историей, ценностями, продуктами компании и помогает связаться с HR-отделом.

Причины сжатых сроков могут быть разными, но, если нужен быстрый запуск, самым оптимальным решением будет no-code. В итоге за меньшее время получаем эффективное и легко поддерживаемое решение с продуманной структурой и сильным дизайном. Разрабатываем и запускаем такие решения за 2-3 недели.

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

1. Договариваемся на полную поддержку и берем на себя весь объем задач: обновляем контент и запускаем дополнительные страниц, когда это нужно.
2. Оставляем наполнение шаблонных страниц клиенту. Для этого готовим инструкции по работе с платформой. Это могут быть видео и текстовые форматы, обучающие встречи. Также участвуем в развитии запущенного сайта и подключаемся к разработке нового функционала.
   

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

Один из таких наших клиентов — KNAUF Therm, производитель строительных материалов. Для Knauf мы разработали прототипы и дизайн, собрали сайт на Tilda. С 2020 года поддерживаем запущенное решение: дорабатываем функционал и помогаем с наполнение.

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