редакции
Зачем UX-студии направление zero-code? Делимся своим опытом и кейсами
Идея открыть новое направление возникла, когда ведущий дизайнер Everest Рома захотел показать коллегам, как можно быстро собирать сайты на конструкторе Webflow. Эксперимент оказался успешным, а в студии под его руководством появился юнит no-code-разработки — Subzero.
Да, в работе с no-code-инструментами есть свои особенности и нюансы. Например, иногда клиент зависит от возможностей zero-code-инструментов — как в техническом плане, так и в дизайн-решениях. Но конструкторы не стоят на месте и постоянно улучшают свой функционал. Главное, выбрать правильный инструмент, который поможет решить ваши задачи. Подробнее мы раскрыли эту тему в отдельной статье «Кодить или зерокодить — вот в чём вопрос. Преимущества, ограничения и этапы работы на Zero-code».
Бизнесу использовать zero-code-инструменты выгодно по нескольким причинам:
- Быстрый запуск небольшого сайта или MVP-версии проекта. Например, если вам нужен рекламный лендинг нового продукта или стоит задача оперативно проверить маркетинговую гипотезу, то готовый сайт можно получить уже через 2 недели.
- Низкая стоимость в сравнении с классической разработкой, так как нет необходимости содержать выделенную команду программистов.
- Экономия на обслуживании: управлять контентом и редактировать сайт можно без привлечения технических специалистов.
При этом у юнита Subzero есть ещё одно важное преимущество для клиентов. Сотрудники студии используют в работе накопленный опыт в области UX и предлагают оптимальные решения под задачи клиента. Это позволяет экономить время на этапе предпроектной аналитики и ускоряет разработку без вреда итоговому качеству продукта.
Какие конструкторы используем
До недавнего времени мы отдавали предпочтение Webflow. Как у любого сервиса, у платформы есть и плюсы, и ограничения. Среди преимуществ можно выделить следующее:
- Качество исходного кода. Webflow выводит чистый и семантический код, насколько это возможно. Этот критерий влияет на скорость работы ресурса, а значит, сайты на Webflow грузятся быстрее. Более того, чистый код упрощает работу разработчикам, если в будущем проект будет развиваться и потребуется перенос на полноценную cms.
- Гибкость платформы. Настройки дизайна не ограничиваются только шаблонами. Можно реализовать большинство задумок дизайнера. А если умеешь немного кодить или знаешь, где взять готовые скрипты, то возможности платформы практически безграничны.
- Удобная работа с внутренним функционалом. Например, в Webflow отдельным элементам можно присвоить класс (примерно как с компонентами в Figma) и затем использовать их в нужных местах. Таким способом можно создать заголовок определённого шрифта и размера, а затем использовать его — вместо создания такого же заголовка с нуля. В других конструкторах элементы приходится менять вручную.
- Обширное и полезное комьюнити. У Webflow регулярно выходят удобные обновления по реальным запросам от пользователей.
Ограничения Webflow:
- Порог вхождения для новичков выше, чем у других конструкторов. Нужно владеть HTML и CSS хотя бы на базовом уровне, чтобы быстро освоиться и по максимуму использовать возможности платформы.
- Интерфейс и уроки по Webflow на английском. Из-за этого платформу сложнее осваивать, зато есть стимул изучать язык. Работая в Webflow, вы будете запоминать английские слова и сложные термины. Особенно при поиске необходимой информации по разделам.
- Реализовать личный кабинет без сторонних сервисов интеграций, к сожалению, не получится. Как и не удастся создать онлайн-магазин. Платформа использует платёжную систему Stripe, которая в России не поддерживается.
- После введения санкций в 2022-м, сервис принимает только зарубежные карты. Но мы в Subzero работаем и с другими конструкторами. Сейчас чаще всего используем Tilda и Readymag.
Команда юнита и распределение ролей
Под каждый проект мы собираем отдельную команду, состав которой зависит от особенностей проекта. Базовые участники:
- Сейлз-менеджер — работает с входящими заявками, считает смету, заключает договор.
- Проджект-менеджер — следит за сроками, осуществляет коммуникацию с командой заказчика.
- No-code-разработчик (в нашем случае это UX/UI-дизайнер) — отвечает за качество итогового продукта. Он же берёт на себя сборку сайта на конструкторе. Таким образом сокращается время на разработку сайта, поскольку нет лишних цепочек коммуникации, а все знания о проекте сосредоточены у одного эксперта.
В отдельных случаях, когда требуется более глубокая аналитика, которая выходит за рамки компетенций UX/UI-дизайнера, подключается UX-аналитик. Он проводит глубинные интервью, а при необходимости дополнительные исследования, чтобы разобраться в отрасли, тематике проекта и предложить оптимальное решение задачи клиента.
Какие сайты мы делаем
Subzero. Сайт zero-code-юнита Everest
Для своего направления мы, естественно, собрали сайт на ноукоде. На разработку ушло полторы недели. В работе над проектом принимали участие СЕО студии, аккаунт-директор и аккаунт-менеджер. Они помогли со смысловым наполнением сайта, следили за тем, чтобы тексты верно доносили суть услуг юнита. Было важно подчеркнуть скорость и стоимость разработки на ноукоде, а также преимущества дизайна от студии Everest. Digital-регата. Сайт мероприятия Digital-регата — ежегодное событие для представителей ИТ-индустрии, которое мы проводим совместно с партнёром по альянсу — Extyl (занимаются разработкой и поддержкой инфосистем). Основная задача сайта — информировать потенциальных участников о мероприятии и собирать на него заявки. АЦР. Сайт Ассоциации цифрового развития Тамбова АЦР — это некоммерческая организация, участники которой — инициативные руководители из ИТ-компаний Тамбова. Вместе они работают над созданием благоприятных условий для развития ИТ-отрасли в родном городе. Ключевые задачи Ассоциации: Сайт нужен Ассоциации в представительских целях — он помогает рассказывать о деятельности организации, используется для приёма заявок на вступление и информирует о ближайших планах и событиях. У заказчика было единственное требование: максимально простой и интуитивно понятный для пользователей сайт. Работа началась с каркаса из блоков, каждый из которых затем детализировали. На первом экране было важно показать логотипы всех компаний, которые уже состоят в Ассоциации. Для этого добавили бегущую строку, которую реализовали с помощью зацикленной анимации. Карточки для мероприятий и компаний сделали с помощью CMS-библиотеки, чтобы потом можно было добавлять новые без участия дизайнера: достаточно заполнить информацию в шаблоне, и карточка отобразиться на сайте. Также настроили формы обратной связи, чтобы уведомления о регистрации на события приходили на почту. Ayk Energy. B2B-сайт для производителя технологичного оборудования Международная компания Ayk Energy занимается производством аккумуляторных систем для танкеров и стационарных точек по всему миру. Продажи в этой сфере ведутся через личные контакты, знакомства, участие в выставках. Для того чтобы заявить о своих возможностях и рассказать о продукции, которую они производят, компания обратилась к нам, чтобы быстро разработать сайт перед крупной отраслевой выставкой, где у них был стенд с демонстрационными экранами. Времени на разработку было всего 1,5–2 месяца — важно было успеть до начала мероприятия. Разработанный сайт решает сразу несколько важных для Ayk Energy задач: В процессе разработки провели ряд бизнес-интервью с представителями компании. Задавали вопросы о продуктах и по результатам исследования собрали мудборд и начали проектирование. В процессе интервьюирования стало понятно, что одностраничник, который планировался, не решит поставленных задач — нужны дополнительные страницы. Сборка сайта заняла около двух недель. Мы сделали много Lottie-анимаций, чтобы лучше презентовать продукт. Lottie — это облегчённый формат анимации (по сравнению с анимированными GIF и PNG), который можно экспортировать из Adobe After Effects файлами JSON. Разработчики могут повторно использовать файлы Lottie в своём коде. Анимации для первого экрана создавали в After Effects, для остальных использовали возможности Webflow. Для запуска анимаций применяли разные триггеры: по ховеру (наведению), при загрузке страницы, скролле, позиционировании. Выбор триггеров зависел от того, на чём необходимо было сделать акцент, какую подсказку показать, какой элемент дополнительно подсветить. Из-за сжатых сроков многие элементы дизайна реализовывали сразу в процессе сборки сайта. Например, схему, которая показывает, из каких блоков состоит продукт компании. Анимация для неё запускается при скролле, подсвечивая определённый блок продукта и поясняющий текстовый блок. Команды с обеих сторон понимали, что время ограничено, поэтому мы старались попасть в ожидания с первой попытки и предлагали варианты, которые точно решат клиентские задачи. В результате заказчик получил рабочий сайт к выставке. Сейчас компания самостоятельно поддерживает его. Держава IT. Сайт образовательной платформы Держава IT — образовательная площадка в Тамбове. Команда проекта занимается развитием и обучением студентов в сфере информационных технологий, реализует совместные проекты с ИТ-компаниями региона, помогает выпускникам с трудоустройством. На реализацию сайта у нас было три месяца. Основные требования: простой, недорогой и удобный в управлении для специалистов без технического бэкграунда. При разработке важно было учесть потребности разных аудиторий: Сайт собрали на Webflow за три недели с учётом правок и пожеланий заказчика. Из интересного: сделали так, чтобы Lottie-анимация с векторными элементами на первом экране воспроизводилась отдельным слоем. Так удалось добиться оптимизации плавности и скорости загрузки. По просьбе клиента графическое изображение зарплатной вилки ИТ-специалистов в регионе также дополнили анимацией, срабатывающей по скроллу. Получилось нагляднее, чем просто статичной картинкой. У сотрудников, работающих с сайтом, нет технического опыта, но админка простая, поэтому они легко справляются с задачами. Отдельно провели для них небольшое обучение, чтобы они быстрее разобрались со всеми функциями. Yarp. Продающий лендинг для сферы услуг Yarp — сервис по подбору команд разработки на аутсорс для длительных и краткосрочных проектов. У компании был сайт, но визуально он устарел и был непривлекательным. Перед нами встала задача обновить ресурс, создать простой, но информативный лендинг, который давал бы потенциальным заказчикам понимание выстроенных в Yarp процессов. Нужно было описать услуги и показать бесплатные сервисы компании: Google для рекрутеров, который ищет специалистов по запросу пользователя, и телеграм-канал, где ежедневно публикуются резюме ИТ-специалистов из всего русскоязычного Телеграма. Бюджет сайта был ограничен в 150 000 рублей. Мы провели ряд бизнес-интервью: выяснили преимущества компании, схему построения бизнес-процессов, а потом объединили эту информацию с запросами потенциальных клиентов к сайту. Пригодился наш собственный опыт в подборе аутсорс-команд. Провели небольшое исследование и выяснили, что для потенциальных заказчиков важно видеть реальных сотрудников компании и их квалификацию, а также чётко понимать процесс сотрудничества. В результате на сайте решили показать: Сборка сайта заняла 1,5 недели. В Webflow создали анимации, которые запускаются по мере загрузки страницы, элементы на странице смещаются при скролле, меняется их позиционирование и отображение разных пунктов. Сейчас сайт поддерживает команда Yarp самостоятельно. Zero-code — хорошее решение, если вам в короткие сроки нужен простой в управлении контентом сайт за небольшой бюджет. Зерокодинг отлично подходит для создания: С каждым годом спрос на ноукод только увеличивается. Уже сейчас многие студии открывают юниты и команды в этом направлении. Современный рынок требует от его участников скорости и гибкости. Нужно быстро запускать проекты, собирать фидбэк, вносить изменения, чтобы двигаться вперёд и опережать конкурентов. Отсюда и популярность zero-code-разработки.
Вместо заключения
